import Routing from '../../../pages/eui/14x/routing.js'
import EuiAutocompletePage from '../../../pages/eui/14x/eui-autocomplete.po.js'
import * as CookieBannerActions from '../../../actions/cookieBanner.js'
import EuiChipListPage from '../../../pages/eui/14x/eui-chip-list.po.js';
import BaseActions from '../../../actions/V14/base-actions.js';

describe('eUI - <eui-autocomplete> Component Object ', async () => {
  let page = new EuiAutocompletePage();
  let chipListPage = new EuiChipListPage();
  let pageName = 'eui-autocomplete';
  let testFolder = './/v14x//eui-autocomplete//';
  it('should navigate to <eui-autocomplete> demo page', async () => {
    browser.addTestMeta({ uuid: "6f29bd8e-ce87-11eb-b8bc-0242ac130003", zephyrKey: "CCQA-1105", zephyrStep: "407834", reportGroups: ["eUI.14x.eui"] });
    await page.open(Routing.getEUIComponentUrl('eui-autocomplete'));
    await CookieBannerActions.cookieBanner(true);
    await BaseActions.verifyPageTitle(pageName);
    await expect(await $(page.navigationList)).
      toBeDisplayedInViewport({ wait: 3000, message: 'Navigation List -> is not displayed on page' });
  });
  it('should verify the presence and number of component objects <eui-autocomplete> on page ', async () => {
    browser.addTestMeta({ zephyrStep: "407835" });
    let sectionId = 'Default';
    await BaseActions.verifySection(sectionId, pageName);
    let autocompleteByIndex = await page.autocompleteCO.byIndex(1).element();
    await expect(await $(page.sectionById(sectionId))).
      toBeDisplayedInViewport({ wait: 3000, message: '' + sectionId + ' section -> is not displayed on page' });
    await expect(autocompleteByIndex).
      toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete by index "1" is not displayed on page' });
    await chaiExpect(await page.autocompleteCO.byIndex(1).defaultComponentsCount()).equal(55, 'There should be 55 <eui-autocomplete> components on the page.');
    if (browser.config.useWdioImageComparison) {
      await autocompleteByIndex.scrollIntoView();
      await chaiExpect(await browser.checkElement(autocompleteByIndex, testFolder + 'img_autocompleteByIndex', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for autocompleteByIndex');
    }
  });

  it('should verify the methods container, wrapper, hasChips, chipListCO ', async () => {
    browser.addTestMeta({ zephyrStep: "407836" });
    let sectionId = 'Default';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteCO.byIndex(1);
    await expect(await $(autocomplete.container)).
      toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete container is not displayed on page' });
    await expect(await $(autocomplete.wrapper)).
      toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete wrapper is not displayed on page' });
    await chaiExpect(await autocomplete.hasChips()).equal(false, 'hasChips should be false');

    sectionId = 'Chips';
    await BaseActions.verifySection(sectionId, pageName);
    autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.chipListCO.currentPath)).
      toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete chipListCO currentPath is not displayed on page' });
    await chaiExpect(await autocomplete.hasChips()).equal(true, 'hasChips should be true');
  });

  it('should verify the methods fieldWrapper, inputWrapper , input  ', async () => {
    browser.addTestMeta({ zephyrStep: "407837" });
    let sectionId = 'Default';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteCO.byIndex(1);
    await expect(await $(autocomplete.fieldWrapper)).
      toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete fieldWrapper is not displayed on page' });
    await expect(await $(autocomplete.euiInputTextNoChips)).
      toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    let autocompleteInput = await $(autocomplete.euiInputTextNoChips);
    await expect(autocompleteInput).
      toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    if (browser.config.useWdioImageComparison) {
      await autocompleteInput.scrollIntoView();
      await chaiExpect(await browser.checkElement(autocompleteInput, testFolder + 'img_autocompleteInput', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for autocompleteInput');
    }
  });
  //appendContent not in v14
  xit('should verify the methods  appendContent ', async () => {
    browser.addTestMeta({ zephyrStep: "407838" });
    let sectionId = 'reactive-forms';
    sectionId = 'appendContent-prependContent';
    scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

  });

  it('should verify the methods matOptGroupCO, isGroupBy, autocompleteOptGroupTemplate, customOptgroupWrapper, hasAutocompleteOptGroupTemplate  ', async () => {
    browser.addTestMeta({ zephyrStep: "419087" });
    let sectionId = 'grouping';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete clear is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptGroupCO.currentPath)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete matOptGroupCO currentPath is not displayed on page' });
    await chaiExpect(await autocomplete.isGroupBy()).equal(true, 'isGroupBy should be true');
    await chaiExpect(await autocomplete.autocompleteOptGroupTemplate()).equal(false, 'autocompleteOptGroupTemplate should be false');
    sectionId = 'template-group';
    await BaseActions.verifySection(sectionId, pageName);
    autocomplete = page.autocompleteFromSectionById(sectionId);
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await chaiExpect(await autocomplete.autocompleteOptGroupTemplate()).equal(true, 'autocompleteOptGroupTemplate should be true');
    let customOptgroupWrapper = await $(autocomplete.customOptgroupWrapper);
    await expect(customOptgroupWrapper).toBeDisplayedInViewport({ message: 'customOptgroupWrapper is displayed on page' });
    if (browser.config.useWdioImageComparison) {
      await customOptgroupWrapper.scrollIntoView();
      await chaiExpect(await browser.checkElement(customOptgroupWrapper, testFolder + 'img_customOptgroupWrapper', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for customOptgroupWrapper');
    }
    await chaiExpect(await autocomplete.hasAutocompleteOptGroupTemplate()).equal(true, 'hasAutocompleteOptGroupTemplate should be true');
  });

  it('should verify the methods matOptionCO, hasAutocompleteOptionTemplate, hasAutocompleteOptGroupTemplate  ', async () => {
    browser.addTestMeta({ zephyrStep: "419088" });
    let sectionId = 'Default';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    let matOption = await $(autocomplete.matOptionNoGroupBydCO.currentPath);
    await expect(matOption).toBeDisplayedInViewport({ message: 'Autocomplete matOptionCO currentPath is not displayed on page' });
    if (browser.config.useWdioImageComparison) {
      await matOption.scrollIntoView();
      await chaiExpect(await browser.checkElement(matOption, testFolder + 'img_matOption', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for matOption');
    }
    await chaiExpect(await autocomplete.hasAutocompleteOptionTemplateNoGroupBy()).equal(false, 'hasAutocompleteOptionTemplate should be false');
    await chaiExpect(await autocomplete.hasAutocompleteOptGroupTemplate()).equal(false, 'hasAutocompleteOptGroupTemplate should be false');
  });
  //Append & prepend content not in v14
  xit('should verify Append & prepend content', async () => {
    browser.addTestMeta({ zephyrStep: "419090" });
    let sectionId = 'appendContent-prependContent';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.prependContent)).
      toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete prependContent is not displayed on page' });
    autocomplete = page.autocompleteFromSectionById(sectionId).byIndex(4);
    await expect(await $(autocomplete.appendContentPlaceholder)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete appendContentPlaceholder is not displayed on page' });
  });
  it('should verify Icon class', async () => {
    browser.addTestMeta({ zephyrStep: "419091" });
    let sectionId = 'items-iconClass';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await expect(await $(autocomplete.matOptionNoGroupBydCO.matOptionText + '//span')).toHaveAttrContaining('class', 'eui-icon');
    await (await $(autocomplete.euiInputTextNoChips)).setValue('1');
    autocomplete = page.autocompleteFromSectionById(sectionId).byIndex(2);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await expect(await $(autocomplete.matOptionNoGroupBydCO.matOptionText + '//span')).toHaveAttrContaining('class', 'flag-icon--rounded');
    await (await $(autocomplete.euiInputTextNoChips)).setValue('2');
    autocomplete = page.autocompleteFromSectionById(sectionId).byIndex(3);
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.currentPath)).not.toBeDisplayedInViewport({ wait: 3000, message: 'euiChipListChipCO currentPath is displayed on page' });
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    let chipList = await $(autocomplete.chipListCO.euiChipCO.currentPath);
    await expect(chipList).toBeDisplayedInViewport({ wait: 3000, message: 'euiChipListChipCO currentPath is not displayed on page' });
    if (browser.config.useWdioImageComparison) {
      await chipList.scrollIntoView();
      await chaiExpect(await browser.checkElement(chipList, testFolder + 'img_chipList', { hideElements: [await $('//eui-app-toolbar')] })).within(0, 6, 'Image comparison failed for chipList');
    }
    autocomplete = page.autocompleteFromSectionById(sectionId).byIndex(4);
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.currentPath)).not.toBeDisplayedInViewport({ wait: 3000, message: 'euiChipListChipCO currentPath is displayed on page' });
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    let euiIcon = await $(autocomplete.chipListCO.euiChipIconCO.currentPath);
    await expect(euiIcon).toBeDisplayed({ wait: 3000, message: 'euiIcon is not displayed on page' });
    if (browser.config.useWdioImageComparison) {
      await euiIcon.scrollIntoView();
      await chaiExpect(await browser.checkElement(euiIcon, testFolder + 'img_euiIcon', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for euiIcon');
    }
    await expect(euiIcon).toHaveAttrContaining('class', 'flag-icon--rounded');
  });
  it('should verify Matching', async () => {
    browser.addTestMeta({ zephyrStep: "419093" });
    let sectionId = 'matching';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).setValue('nut');
    let optionCoconut = await $(autocomplete.matOptionNoGroupBydCO.matOptionText);
    if (browser.config.useWdioImageComparison) {
      await optionCoconut.scrollIntoView();
      await chaiExpect(await browser.checkElement(optionCoconut, testFolder + 'img_optionCoconut', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for optionCoconut');
    }
    await expect(optionCoconut).toHaveTextContaining('Coconut');
    autocomplete = page.autocompleteFromSectionById(sectionId).byIndex(2);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).setValue('Coco');
    await expect(await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).toHaveTextContaining('Coconut');
  });
  it('should verify type class', async () => {
    browser.addTestMeta({ zephyrStep: "419094" });
    let sectionId = 'items-typeClass';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    let optionPrimary = await $(autocomplete.matOptionNoGroupBydCO.byIndex(1).currentPath);
    let optionSecondary = await $(autocomplete.matOptionNoGroupBydCO.byIndex(2).currentPath);
    let optionInfo = await $(autocomplete.matOptionNoGroupBydCO.byIndex(3).currentPath);
    let optionSuccess = await $(autocomplete.matOptionNoGroupBydCO.byIndex(4).currentPath);
    let optionWarning = await $(autocomplete.matOptionNoGroupBydCO.byIndex(5).currentPath);
    let optionDanger = await $(autocomplete.matOptionNoGroupBydCO.byIndex(6).currentPath);
    let optionAccent = await $(autocomplete.matOptionNoGroupBydCO.byIndex(7).currentPath);
    await expect(optionPrimary).toHaveAttrContaining('class', 'eui-autocomplete__option--primary');
    await expect(optionSecondary).toHaveAttrContaining('class', 'eui-autocomplete__option--secondary');
    await expect(optionInfo).toHaveAttrContaining('class', 'eui-autocomplete__option--info');
    await expect(optionSuccess).toHaveAttrContaining('class', 'eui-autocomplete__option--success');
    await expect(optionWarning).toHaveAttrContaining('class', 'eui-autocomplete__option--warning');
    await expect(optionDanger).toHaveAttrContaining('class', 'eui-autocomplete__option--danger');
    await expect(optionAccent).toHaveAttrContaining('class', 'eui-autocomplete__option--accent');
    if (browser.config.useWdioImageComparison) {
      await optionPrimary.scrollIntoView();
      await chaiExpect(await browser.checkElement(optionPrimary, testFolder + 'img_optionPrimary', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for optionPrimary');
      await optionSecondary.scrollIntoView();
      await chaiExpect(await browser.checkElement(optionSecondary, testFolder + 'img_optionSecondary', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for optionSecondary');
      await optionInfo.scrollIntoView();
      await chaiExpect(await browser.checkElement(optionInfo, testFolder + 'img_optionInfo', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for optionInfo');
      await optionSuccess.scrollIntoView();
      await chaiExpect(await browser.checkElement(optionSuccess, testFolder + 'img_optionSuccess', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for optionSuccess');
      await optionWarning.scrollIntoView();
      await chaiExpect(await browser.checkElement(optionWarning, testFolder + 'img_optionWarning', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for optionWarning');
      await optionDanger.scrollIntoView();
      await chaiExpect(await browser.checkElement(optionDanger, testFolder + 'img_optionDanger', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for optionDanger');
      await optionAccent.scrollIntoView();
      await chaiExpect(await browser.checkElement(optionAccent, testFolder + 'img_optionAccent', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for optionAccent');
    }

  });
  it('should verify Readonly', async () => {
    browser.addTestMeta({ zephyrStep: "419096" });
    let sectionId = 'readonly';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    let toggleReadOnlyButton = await $(page.buttonComponentByTextContains('Toggle ReadOnly').currentPath);
    await expect(toggleReadOnlyButton).toBeDisplayed({ wait: 3000, message: 'toggleReadOnlyButton is not displayed on page' });
    if (browser.config.useWdioImageComparison) {
      await toggleReadOnlyButton.scrollIntoView();
      await chaiExpect(await browser.checkElement(toggleReadOnlyButton, testFolder + 'img_toggleReadOnlyButton', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for toggleReadOnlyButton');
    }
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await toggleReadOnlyButton.click();
    await expect(await $(autocomplete.euiInputTextNoChips)).toHaveAttrContaining('readonly', 'true');
    autocomplete = page.autocompleteFromSectionById(sectionId).byIndex(2);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });

    await scrollIntoSection.scrollIntoView();
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    await (await $(page.buttonComponentByTextAndIndex('Toggle ReadOnly', 2).currentPath)).click();
    await expect(await $(autocomplete.euiInputTextNoChips)).toHaveAttrContaining('readonly', 'true');
  });
  it('should verify grouping ', async () => {
    browser.addTestMeta({ zephyrStep: "419097" });
    let sectionId = 'grouping';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await chaiExpect(await autocomplete.isGroupBy()).equal(true, 'isGroupBy should be true');
    await chaiExpect(await autocomplete.autocompleteOptGroupTemplate()).equal(false, 'autocompleteOptGroupTemplate should be false');
    await (await $(autocomplete.euiInputTextNoChips)).setValue('1');
  });
  it('should verify template group ', async () => {
    browser.addTestMeta({ zephyrStep: "419099" });
    let sectionId = 'template-group';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionInOptGroupCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionInOptGroupCO currentPath is not displayed on page' });
    await chaiExpect(await autocomplete.isGroupBy()).equal(true, 'isGroupBy should be true');
    await chaiExpect(await autocomplete.autocompleteOptGroupTemplate()).equal(true, 'autocompleteOptGroupTemplate should be true');
    await expect(await $(autocomplete.customOptgroupWrapper)).toBeDisplayedInViewport({ message: 'customOptgroupWrapper is displayed on page' });
    await chaiExpect(await autocomplete.hasAutocompleteOptGroupTemplate()).equal(true, 'hasAutocompleteOptGroupTemplate should be true');
    await (await $(autocomplete.euiInputTextNoChips)).setValue('1');
  });
  it('should verify Chips ', async () => {
    browser.addTestMeta({ zephyrStep: "419103" });
    let sectionId = 'Chips';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    let chipList2 = await $(autocomplete.chipListCO.currentPath);
    await expect(chipList2).
      toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete chipListCO currentPath is not displayed on page' });
    if (browser.config.useWdioImageComparison) {
      await chipList2.scrollIntoView();
      await chaiExpect(await browser.checkElement(chipList2, testFolder + 'img_chipList2', { hideElements: [await $('//eui-app-toolbar')] })).within(0, 3, 'Image comparison failed for chipList2');
    }
    await chaiExpect(await autocomplete.hasChips()).equal(true, 'hasChips should be true')
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    let matOption2 = await $(autocomplete.matOptionNoGroupBydCO.currentPath);
    await expect(matOption2).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    if (browser.config.useWdioImageComparison) {
      await matOption2.scrollIntoView();
      await chaiExpect(await browser.checkElement(matOption2, testFolder + 'img_matOption2', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for matOption2');
    }
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    let matChipList = await $(autocomplete.chipListCO.euiChipCO.currentPath)
    await expect(matChipList).
      toBeDisplayedInViewport({ wait: 3000, message: 'euiChipListChipCO currentPath is not displayed on page' });
    if (browser.config.useWdioImageComparison) {
      await matChipList.scrollIntoView();
      await chaiExpect(await browser.checkElement(matChipList, testFolder + 'img_matChipList', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for matChipList');
    }
  });
  it('should verify Chips max visible', async () => {
    browser.addTestMeta({ zephyrStep: "419104" });
    let sectionId = 'maxVisibleChips';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    await expect(await $(autocomplete.chipListCO.euiChipCO.currentPath)).toBeDisplayedInViewport({ wait: 3000, message: 'euiChipCO currentPath is not displayed on page' });
    await chaiExpect(await autocomplete.hasChips()).equal(true, 'hasChips should be true');
    await chaiExpect(await autocomplete.chipListCO.hasLessCustomLabel()).equal(true, 'chipListCO.hasLessLabel should be true');
  });
  it('should verify Chips not removable', async () => {
    browser.addTestMeta({ zephyrStep: "419105" });
    let sectionId = 'Chips-not-removable';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await chaiExpect(await autocomplete.hasChips()).equal(true, 'hasChips should be true');
    await chaiExpect(await autocomplete.chipListCO.euiChipListChipCO.euiChipCO.isChipRemovable()).equal(false, 'isChipRemovable should be false');
  });
  it('should verify Chips free tags', async () => {
    browser.addTestMeta({ zephyrStep: "419106" });
    let sectionId = 'free-chips';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).setValue('Lemon');
    await browser.keys('Enter');
    await chaiExpect(await autocomplete.hasChips()).equal(true, 'hasChips should be true');
    await expect(await $(autocomplete.chipListCO.euiChipCO.currentPath)).toHaveText('Lemon');
    autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).setValue('not allowed');
    await browser.keys('Enter');
    await chaiExpect(await autocomplete.hasChips()).equal(true, 'hasChips should be true');
    await expect(await $(autocomplete.chipListCO.euiChipCO.currentPath)).not.toHaveText('not allowed');
  });
  it('should verify Chips position', async () => {
    browser.addTestMeta({ zephyrStep: "419107" });
    let sectionId = 'positionChips';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    await expect(await $(autocomplete.wrapper)).toHaveAttrContaining('class', 'eui-autocomplete__wrapper--top');
    autocomplete = page.autocompleteFromSectionById(sectionId).byIndex(2);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    await expect(await $(autocomplete.wrapper)).toHaveAttrContaining('class', 'eui-autocomplete__wrapper--bottom');
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    autocomplete = page.autocompleteFromSectionById(sectionId).byIndex(3);
    await expect(await $(autocomplete.wrapper)).toHaveAttrContaining('class', 'eui-autocomplete__wrapper--inside');
  });
  it('should verify Chips sorting', async () => {
    browser.addTestMeta({ zephyrStep: "419108" });
    let sectionId = 'sorting';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await chaiExpect(await autocomplete.isChipsSorted()).equal(true, 'isChipsSorted should be true');
    await chaiExpect(await autocomplete.isItemsSorted()).equal(true, 'isItemsSorted should be true');
    await chaiExpect(await autocomplete.isChipsRemovable()).equal(false, 'isChipsRemovable should be false');
    await chaiExpect(await autocomplete.isMaxVisibleChipsOpened()).equal(false, 'isMaxVisibleChipsOpened should be false');
    await chaiExpect(await autocomplete.addOnBlur()).equal(false, 'addOnBlur should be false');
    await chaiExpect(await autocomplete.isFreeValueAllowed()).equal(false, 'isFreeValueAllowed should be false');
    await chaiExpect(await autocomplete.isDuplicateValueAllowed()).equal(false, 'isDuplicateValueAllowed should be false');
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    await expect(await $(autocomplete.currentPath)).toHaveAttr('ischipssorted');
  });
  it('should verify Chips truncated labels', async () => {
    browser.addTestMeta({ zephyrStep: "419109" });
    let sectionId = 'truncate-label';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    await expect(await $(autocomplete.chipListCO.euiChipCO.currentPath)).toHaveText('Str…');
  });
  // dragAndDrop - The functionality of this command highly depends on the way drag and drop is  // implemented in your app. https://webdriver.io/docs/api/element/dragAndDrop/  This step      // didn't passed always There for I put xit
  xit('should verify Chips Drag & Drop', async () => {
    browser.addTestMeta({ zephyrStep: "419110" });
    let sectionId = 'drag-and-drop';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionByIndex(sectionId, 2);
    await chaiExpect(await autocomplete.isChipsDragAndDrop()).equal(true, 'isChipsDragAndDrop should be true');
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionCO.matOptionText)).click();
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.wrapper + '//span')).toHaveAttrContaining('class', 'cdk-drag');
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.euiChipCO.byIndex(1).container)).toHaveText('Strawberry');
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.euiChipCO.byIndex(2).container)).toHaveText('Lemon');
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.euiChipCO.byIndex(3).container)).toHaveText('Apple');
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.euiChipCO.byIndex(4).container)).toHaveText('Orange');
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.euiChipCO.byIndex(5).container)).toHaveText('Ananas');
    let chipList = chipListPage.chipListFromSectionWithIdByIndex(sectionId, 3);
    let elem = await $(chipList.euiChipListChipCO.euiChipCO.matChipCO.currentPath + '//div');
    let target = await $(autocomplete.chipListCO.euiChipListChipCO.euiChipCO.byIndex(1).matChipCO.currentPath + '//div');
    await elem.dragAndDrop(target);
    await browser.pause(1000);
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.euiChipCO.byIndex(1).container)).toHaveText('Orange');
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.euiChipCO.byIndex(2).container)).toHaveText('Strawberry');
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.euiChipCO.byIndex(3).container)).toHaveText('Lemon');
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.euiChipCO.byIndex(4).container)).toHaveText('Apple');
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.euiChipCO.byIndex(5).container)).toHaveText('Orange');
    await expect(await $(autocomplete.chipListCO.euiChipListChipCO.euiChipCO.byIndex(6).container)).toHaveText('Ananas');
  });
  it('should verify Chips with tooltip', async () => {
    browser.addTestMeta({ zephyrStep: "419111" });
    let sectionId = 'Chips-with-tooltip';
    await BaseActions.verifySection(sectionId, pageName);
    let autocomplete = page.autocompleteFromSectionById(sectionId);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    autocomplete = page.autocompleteFromSectionById(sectionId).byIndex(3);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    let tooltipAbove = await $(autocomplete.chipListCO.euiChipCO.byIndex(1).wrapper);
    let tooltipBelow = await $(autocomplete.chipListCO.euiChipCO.byIndex(2).wrapper);
    let tooltipLeft = await $(autocomplete.chipListCO.euiChipCO.byIndex(3).wrapper);
    let tooltipRight = await $(autocomplete.chipListCO.euiChipCO.byIndex(4).wrapper);
    let tooltipBefore = await $(autocomplete.chipListCO.euiChipCO.byIndex(5).wrapper);
    let tooltipAfter = await $(autocomplete.chipListCO.euiChipCO.byIndex(6).wrapper);
    await expect(tooltipAbove).toHaveAttrContaining('class', 'eui-tooltip--above');
    await expect(tooltipBelow).toHaveAttrContaining('class', 'eui-tooltip--below');
    await expect(tooltipLeft).toHaveAttrContaining('class', 'eui-tooltip--left');
    await expect(tooltipRight).toHaveAttrContaining('class', 'eui-tooltip--right');
    await expect(tooltipBefore).toHaveAttrContaining('class', 'eui-tooltip--before');
    await expect(tooltipAfter).toHaveAttrContaining('class', 'eui-tooltip--after');
    autocomplete = page.autocompleteFromSectionById(sectionId).byIndex(4);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    let tooltipContentCenter = await $(autocomplete.chipListCO.euiChipCO.wrapper);
    await expect(tooltipContentCenter).toHaveAttrContaining('class', 'eui-tooltip--content-center');
    autocomplete = page.autocompleteFromSectionById(sectionId).byIndex(5);
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    let tooltipRounded = await $(autocomplete.chipListCO.euiChipCO.wrapper);
    await expect(tooltipRounded).toHaveAttrContaining('class', 'eui-tooltip--rounded');
    autocomplete = page.autocompleteFromSectionById(sectionId).byIndex(6);
    await (await $(autocomplete.currentPath)).scrollIntoView();
    await expect(await $(autocomplete.euiInputTextNoChips)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete input is not displayed on page' });
    await (await $(autocomplete.euiInputTextNoChips)).click();
    await expect(await $(autocomplete.matOptionNoGroupBydCO.currentPath)).toBeDisplayedInViewport({ wait: 3000, message: 'Autocomplete matOptionNoGroupedCO currentPath is not displayed on page' });
    await (await $(autocomplete.matOptionNoGroupBydCO.matOptionText)).click();
    let tooltipArrows = await $(autocomplete.chipListCO.euiChipCO.wrapper);
    await expect(tooltipArrows).toHaveAttrContaining('class', 'eui-tooltip--arrows');
  });
});
