import Routing from '../../../../pages/eui/10x/routing-10x.js'
import TimelineItemPage from '../../../../pages/eui/10x/ux/ux-timeline-item-10x.po.js'
import CookieBannerActions from '../../../../actions/cookieBanner.js'

describe('eUI - <ux-timeline-item> Component Object', async () => {
  let page = new TimelineItemPage();
  it('should navigate to <ux-timeline-item> component', async () => {
    browser.addTestMeta({uuid:"fa1def28-b8a2-11eb-8529-0242ac130003", zephyrKey: "CCQA-827", zephyrStep: "370870", reportGroups: ["eUI.10x.ux"]});
    await page.open(Routing.getUxComponentUrl('ux-timeline-item'));
    await CookieBannerActions.cookieBanner(true);
    let pgTitle = await $(page.pageTitle);
    await expect(pgTitle).toBeDisplayed({wait:1000, message:'<ux-timeline-item> page title is not visible on page'});
    await expect(pgTitle).toHaveText('ux-timeline-item', 'Page title text is not as expected')
    await expect(await $(page.appDocPageById('ux-timeline-item'))).toExist({wait:1000, message:'Page Id is not present in page'});
    await expect(await $(page.navigationList)).toBeDisplayed({wait:1000, message:'Navigation List -> is not visible on page'});
  });
  it('should verify the presence and number of component objects <ux-timeline-item> on page ', async () => {
    browser.addTestMeta({zephyrStep: "370871"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let timelineItem = page.timelineItemByIndex(1);
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({message:'<Default> section -> is not visible on page'});
    await expect(await $(timelineItem.dataE2E)).toBeDisplayedInViewport({message:'Timeline item by index "1" is not visible on page'});
    await expect(await $(page.timelineItemByTextContains('01/03/2021').dataE2E)).
      toBeDisplayedInViewport({message:'Timeline item by text "01/03/2021" is not visible on page'});
    await expect(await $(page.timelineItemByTextEqualsAndIndex('01/03/2021', 1).dataE2E)).
      toBeDisplayedInViewport({message:'Timeline item by text "01/03/2021" and index 1 is not visible on page'});
    await expect(await timelineItem.defaultComponentsCount()).toBe(53,'There should be 53 <ux-timeline-item> components on the page.');
  });
  it('should verify the presence and number of component objects <ux-timeline-items> on page ', async () => {
    browser.addTestMeta({zephyrStep: "370872"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let timelineItems = page.timelineItemsByIndex(1);
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({message:'<Default> section -> is not visible on page'});
    await expect(await $(timelineItems.ul)).toBeDisplayedInViewport({message:'Timeline item by index "1" is not visible on page'});
    await expect(await $(page.timelineItemsByTextContains('01/03/2021').ul)).
      toBeDisplayedInViewport({message:'Timeline item by text "01/03/2021" is not visible on page'});
    await expect(await $(page.timelineItemsByTextEqualsAndIndex('01/03/2021', 1).ul)).
      toBeDisplayedInViewport({message:'Timeline item by text "01/03/2021" and index 1 is not visible on page'});
    await expect(await timelineItems.defaultComponentsCount()).toBe(11, 'There should be 11 <ux-timeline-items> components on the page.');
  });
  it('should verify the ux-list-items methods: ul, istLeftAligned, timelineItemCO ', async () => {
    browser.addTestMeta({zephyrStep: "370873"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let timelineItems = page.timelineItemsByIndex(1);
    await expect(await $(timelineItems.ul)).toBeDisplayedInViewport({message:'ul is not visible on page'});
    await expect(await timelineItems.isLeftAligned()).toBe(false, 'isLeftAligned should be false');
    sectionId= 'isLeftAligned';
    scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    timelineItems = page.timelineItemsFromSectionById(sectionId);
    await expect(await $(timelineItems.ul)).toBeDisplayedInViewport({message:'ul is not visible on page'});
    await expect(await timelineItems.isLeftAligned()).toBe(true, 'isLeftAligned should be true');
    sectionId= 'isGroup';
    scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.timelineItemFromSectionWithIdByIndex(sectionId,1).currentPath)).toHaveTextContaining('primary');
    await expect(await $(page.timelineItemFromSectionWithIdByIndex(sectionId,2).currentPath)).toHaveTextContaining('info');
    await expect(await $(page.timelineItemFromSectionWithIdByIndex(sectionId,3).currentPath)).toHaveTextContaining('success');
    await expect(await $(page.timelineItemFromSectionWithIdByIndex(sectionId,4).currentPath)).toHaveTextContaining('group step');
    await expect(await $(page.timelineItemFromSectionWithIdByIndex(sectionId,5).currentPath)).toHaveTextContaining('danger');
  });
  it('should verify the ux-list-item method: isGroup, isLeftAligned, isLeftAlignedDate ', async () => {
    browser.addTestMeta({zephyrStep: "370874"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let timelineItem = page.timelineItemByIndex(1);
    await expect(await $(timelineItem.dataE2E)).toBeDisplayedInViewport({message:'dataE2E is not visible on page'});
    await expect(await timelineItem.isGroup()).toBe(false, 'isGroup should be false');
    await expect(await timelineItem.isLeftAligned()).toBe(false, 'isLeftAligned should be false');
    await expect(await timelineItem.isLeftAlignedDate()).toBe(false, 'isLeftAlignedDate should be false');

    sectionId= 'isLeftAligned';
    scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    timelineItem = page.timelineItemFromSectionById(sectionId);
    await expect(await $(timelineItem.dataE2E)).toBeDisplayedInViewport({message:'dataE2E is not visible on page'});
    await expect(await timelineItem.isGroup()).toBe(false, 'isGroup should be false');
    await expect(await timelineItem.isLeftAligned()).toBe(true, 'isLeftAligned should be true');
    await expect(await timelineItem.isLeftAlignedDate()).toBe(true, 'isLeftAlignedDate should be true');

    sectionId = 'isGroup';
    scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    timelineItem = page.timelineItemFromSectionWithIdByIndex(sectionId, 4);
    await expect(await $(timelineItem.dataE2E)).toBeDisplayedInViewport({message:'dataE2E is not visible on page'});
    await expect(await timelineItem.isGroup()).toBe(true, 'isGroup should be true');
    await expect(await timelineItem.isLeftAligned()).toBe(false, 'isLeftAligned should be false');
    await expect(await timelineItem.isLeftAlignedDate()).toBe(false, 'isLeftAlignedDate should be false');

  });

  it('should verify the ux-list-item methods: content, customContent, date, icon , contentDate ', async () => {
    browser.addTestMeta({zephyrStep: "370875"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let timelineItem = page.timelineItemByIndex(1);
    await expect(await $(timelineItem.content)).toBeDisplayedInViewport({message:'content is not visible on page'});
    await expect(await $(timelineItem.date)).toBeDisplayedInViewport({message:'date is not visible on page'});
    await expect(await $(timelineItem.icon)).toBeDisplayedInViewport({message:'icon is not visible on page'});

    sectionId= 'content-custom';
    scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    timelineItem = page.timelineItemFromSectionById(sectionId);
    await expect(await $(timelineItem.customContent)).toBeDisplayedInViewport({message:'customContent is not visible on page'});

    sectionId = 'isLeftAligned';
    scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    timelineItem = page.timelineItemFromSectionById(sectionId);
    await expect(await $(timelineItem.contentDate)).toBeDisplayedInViewport({message:'contentDate is not visible on page'});
  });

  it('should verify the ux-list-item method: hasTitle ', async () => {
    browser.addTestMeta({zephyrStep: "370876"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let timelineItem = page.timelineItemByIndex(1);
    await expect(await $(timelineItem.customContent)).not.toBeDisplayedInViewport({message:'customContent is visible on page'});
    await expect(await timelineItem.hasTitle()).toBe(true, 'hasTitle should be true');
  });

  it('should verify the ux-list-item method: title, subtitle,  ', async () => {
    browser.addTestMeta({zephyrStep: "370877"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let timelineItem = page.timelineItemByIndex(1);
    await expect(await $(timelineItem.title)).toBeDisplayedInViewport({message:'title is not visible on page'});
    await expect(await $(timelineItem.subtitle)).toBeDisplayedInViewport({message:'subtitle is not visible on page'});
  });

  it('should verify the styleClass ', async () => {
    browser.addTestMeta({zephyrStep: "398042"});
    let sectionId= 'styleClass';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let timelineItems = page.timelineItemsFromSectionById(sectionId);
    await expect(await $(timelineItems.timelineItemByIndex(2).dataE2E)).toHaveAttrContaining('class', 'primary');
    await expect(await $(timelineItems.timelineItemByIndex(3).dataE2E)).toHaveAttrContaining('class', 'secondary');
    await expect(await $(timelineItems.timelineItemByIndex(4).dataE2E)).toHaveAttrContaining('class', 'info');
    await expect(await $(timelineItems.timelineItemByIndex(5).dataE2E)).toHaveAttrContaining('class', 'success');
    await expect(await $(timelineItems.timelineItemByIndex(6).dataE2E)).toHaveAttrContaining('class', 'warning');
    await expect(await $(timelineItems.timelineItemByIndex(7).dataE2E)).toHaveAttrContaining('class', 'danger');
  });

});
