dimsum-e2e-tests 3.22.0-next.36

package/ds-filterbar/DSFilterBar-dropdown-multipill.visual.spec.js

@@ -0,0 +1,55 @@
+import { Key } from 'webdriverio';
+import FilterbarCO from './FilterbarCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('FilterBar Dropdown MultiPill', () => {
+    before(async () => {
+      const errorOnGo = await FilterbarCO.dropdownMultiPillURL.go();
+      if (errorOnGo) throw errorOnGo;
+      const dropDownPill = await FilterbarCO.getDropDownPill();
+      await dropDownPill.waitForDisplayed();
+    });
+    it('should display filterbar with single pill with label', async () => {
+      const snapshot = await browser.checkSnapshot(FilterbarCO.snapshotPath('filterbar--single'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display filterbar with dropdown menu', async () => {
+      const dropDownPillBtn = await FilterbarCO.getDropDownPillBtn();
+      await dropDownPillBtn.click();
+      const dropDownMenu = await FilterbarCO.getDropDownMenu();
+      await dropDownMenu.waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(FilterbarCO.snapshotPath('filterbar--dropdown-menu'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display filterbar with one option selected', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.checkSnapshot(FilterbarCO.snapshotPath('filterbar--one-option-selected'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display filterbar with two options selected', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.checkSnapshot(FilterbarCO.snapshotPath('filterbar--two-options-selected'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display filterbar without options selected', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.checkSnapshot(FilterbarCO.snapshotPath('filterbar--no-options-selected'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display filterbar cleared', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const clearBtn = await FilterbarCO.getButtonWrapper();
+      await clearBtn.click();
+      const snapshot = await browser.checkSnapshot(FilterbarCO.snapshotPath('filterbar--cleared'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-filterbar/FilterbarCO.js

@@ -0,0 +1,53 @@
+import { PATH_END_OF_LIFE_FILTERBAR } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class Filterbar extends PageObject {
+  static dropdownMultiPillURL = new Urlbuilder(PATH_END_OF_LIFE_FILTERBAR, 'dropdown-multi-pill');
+
+  static basicURL = new Urlbuilder(PATH_END_OF_LIFE_FILTERBAR, 'basic');
+
+  static async getRemovablePill() {
+    return $('[data-testid="removable-pill"]');
+  }
+
+  static async getRemovablePillCloseIcon() {
+    return $('[data-testid="remove-pill-button"]');
+  }
+
+  static async getFilterBar() {
+    return $('[data-testid="em-ds-filter-bar"]');
+  }
+
+  static async getDropDownPillBtn() {
+    return $('[data-testid="dropdown-pill-button"]');
+  }
+
+  static async getDropDownPill() {
+    return $('[data-testid="dropdown-pill"]');
+  }
+
+  static async getDropDownMenu() {
+    return $('[data-testid="em-ds-menu"]');
+  }
+
+  static async getOption(label) {
+    return $(`span*=${label}`);
+  }
+
+  static async getPill(label) {
+    return $(`//div[@data-testid="removable-pill"]/span[contains(text(), "${label}")]`);
+  }
+
+  static async getClearBtn() {
+    return $('//span[contains(text(),"CLEAR")]');
+  }
+
+  static async getButtonWrapper() {
+    return $('[data-testid="button-wrapper"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'dropdown-multi-pill') {
+    return PageObject.getSnapshotPathBuilder('DSFilterBar', example, 'ds-filterbar');
+  }
+}

package/ds-form/Checkbox/DSCheckbox.func.spec.js

@@ -0,0 +1,69 @@
+import DSCheckboxCO from './DSCheckboxCO';
+import { mouseOver, isChecked } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-3300 - Checkbox show tick', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCheckboxCO.fullShowcaseURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show tick when clicked', async () => {
+      await DSCheckboxCO.clickCheckbox(0);
+      const checkBoxChecked = await (await DSCheckboxCO.getCheckbox(0)).getAttribute('aria-checked');
+      await expect(checkBoxChecked).toEqual('true');
+    });
+  });
+  describe('PUI-5350 - Semantic grouping', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCheckboxCO.groupURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should use fieldset and legend for groups', async () => {
+      const legend = await $('legend');
+      const fieldset = await $('fieldset');
+      await expect(legend).toBeDisplayed();
+      await expect(fieldset).toBeDisplayed();
+    });
+  });
+  describe('PUI-4575 - Checkbox, with tooltip', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCheckboxCO.withTooltip.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should be displayed tooltip', async () => {
+      await mouseOver(null, 20, 20);
+      const tooltip = await DSCheckboxCO.getTooltip();
+      await expect(tooltip).toBeDisplayed();
+    });
+    it('should tick when label is clicked', async () => {
+      await (await DSCheckboxCO.getLabel()).click();
+      const checkbox = await DSCheckboxCO.getCheckbox();
+      const checkBoxChecked = await isChecked(checkbox);
+      await expect(checkBoxChecked).toBe(true);
+    });
+    it('should uncheck checkbox', async () => {
+      const checkbox = await DSCheckboxCO.getClickableCheckbox();
+      await checkbox.click();
+      const checkBoxChecked = await isChecked(checkbox);
+      await expect(checkBoxChecked).toBe(false);
+    });
+  });
+  describe('PUI-6905 - Checkbox, with label', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCheckboxCO.withLabel.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should tick when label is clicked', async () => {
+      await (await DSCheckboxCO.getLabel()).click();
+      const checkbox = await DSCheckboxCO.getCheckbox();
+      const checkBoxChecked = await isChecked(checkbox);
+      await expect(checkBoxChecked).toBe(true);
+    });
+    it('should untick when label is clicked again', async () => {
+      await (await DSCheckboxCO.getLabel()).click();
+      const checkbox = await DSCheckboxCO.getCheckbox();
+      const checkBoxChecked = await isChecked(checkbox);
+      await expect(checkBoxChecked).toBe(false);
+    });
+  });
+}

package/ds-form/Checkbox/DSCheckbox.keyboard.navigation.func.spec.js

@@ -0,0 +1,64 @@
+import { Key } from 'webdriverio';
+import DSCheckboxCO from './DSCheckboxCO';
+import { isChecked } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6417 - Checkbox:: keyboard navigation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCheckboxCO.groupURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('1st checkbox should be focused', async () => {
+      await browser.keys(Key.Tab);
+      const firstCheckbox = await DSCheckboxCO.getCheckbox(0);
+      const isCheckBoxActive = await DSCheckboxCO.isActiveElement(firstCheckbox);
+      await expect(isCheckBoxActive).toBe(true);
+    });
+    it('1st checkbox should be selected', async () => {
+      await browser.keys(Key.Space);
+      const firstCheckbox = await DSCheckboxCO.getCheckbox(0);
+      const isCheckBoxActive = await DSCheckboxCO.isActiveElement(firstCheckbox);
+      const checkBoxChecked = await isChecked(firstCheckbox);
+      await expect(isCheckBoxActive).toBe(true);
+      await expect(checkBoxChecked).toBe(true);
+    });
+    it('navigate to second group of checkboxes', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const firstCheckbox = await DSCheckboxCO.getCheckbox(0);
+      const fifthCheckbox = await DSCheckboxCO.getCheckbox(4);
+      const checkBoxChecked = await isChecked(firstCheckbox);
+      const isCheckBoxActive = await DSCheckboxCO.isActiveElement(fifthCheckbox);
+      await expect(checkBoxChecked).toBe(true);
+      await expect(isCheckBoxActive).toBe(true);
+    });
+    it('5th checkbox should be checked', async () => {
+      await browser.keys(Key.Space);
+      const firstCheckbox = await DSCheckboxCO.getCheckbox(0);
+      const fifthCheckbox = await DSCheckboxCO.getCheckbox(4);
+      const isFirstChecked = await isChecked(firstCheckbox);
+      const isFifthChecked = await isChecked(fifthCheckbox);
+      const isFifthActive = await DSCheckboxCO.isActiveElement(fifthCheckbox);
+      await expect(isFirstChecked).toBe(true);
+      await expect(isFifthChecked).toBe(true);
+      await expect(isFifthActive).toBe(true);
+    });
+    it('navigate to 1st checkbox and uncheck it', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys(Key.Space);
+      const firstCheckbox = await DSCheckboxCO.getCheckbox(0);
+      const fifthCheckbox = await DSCheckboxCO.getCheckbox(4);
+      const isFirstChecked = await isChecked(firstCheckbox);
+      const isFifthChecked = await isChecked(fifthCheckbox);
+      const isFirstActive = await DSCheckboxCO.isActiveElement(firstCheckbox);
+      await expect(isFirstChecked).toBe(false);
+      await expect(isFifthChecked).toBe(true);
+      await expect(isFirstActive).toBe(true);
+    });
+  });
+}

package/ds-form/Checkbox/DSCheckbox.visual.spec.js

@@ -0,0 +1,37 @@
+import DSCheckboxCO from './DSCheckboxCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-3301 - Checkbox - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCheckboxCO.fullShowcaseURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Showcase', async () => {
+      await (await DSCheckboxCO.getCheckbox(0)).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(DSCheckboxCO.snapshotPath('show-case'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}
+describe('PUI-3302 - Checkbox - Group horizontal and vertical', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSCheckboxCO.groupURL.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('Group horizontal and vertical', async () => {
+    await (await DSCheckboxCO.getCheckbox(0)).waitForDisplayed({ timeout: 5000 });
+    const snapshot = await browser.checkSnapshot(DSCheckboxCO.snapshotPath('checkbox-group'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+describe('PUI-5484 - Checkbox - wrapping rule', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSCheckboxCO.wrap.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('should display checkbox label wrapped', async () => {
+    await (await DSCheckboxCO.getCheckbox()).waitForDisplayed({ timeout: 5000 });
+    const snapshot = await browser.checkSnapshot(DSCheckboxCO.snapshotPath('group-vertical'));
+    await expect(snapshot).toEqual(0);
+  });
+});

package/ds-form/Checkbox/DSCheckboxCO.js

@@ -0,0 +1,60 @@
+import { PATH_END_OF_LIFE_CHECKBOX } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+export default class DSCheckboxCO extends PageObject {
+  // Atomic
+  static groupURL = new Urlbuilder(PATH_END_OF_LIFE_CHECKBOX, 'group');
+
+  static withTooltip = new Urlbuilder(PATH_END_OF_LIFE_CHECKBOX, 'with-tooltip');
+
+  static wrap = new Urlbuilder(PATH_END_OF_LIFE_CHECKBOX, 'wrap');
+
+  static fullShowcaseURL = new Urlbuilder(PATH_END_OF_LIFE_CHECKBOX, 'full-show-case');
+
+  static withLabel = new Urlbuilder(PATH_END_OF_LIFE_CHECKBOX, 'with-label');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_END_OF_LIFE_CHECKBOX, component);
+  }
+
+  // Snapshot
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Checkbox', example);
+  }
+
+  // selectors
+  static async getClickableCheckbox() {
+    return $('//span[@data-testid="ds-checkbox"]/ancestor::span');
+  }
+
+  static async getCheckbox(idx) {
+    if (idx) {
+      return $$('[data-testid="ds-checkbox"]')[idx];
+    }
+    return $('[data-testid="ds-checkbox"]');
+  }
+
+  static async getCheckboxChecked(idx) {
+    if (idx) {
+      return $$('//span[contains(@aria-checked,"true")]')[idx];
+    }
+    return $('//span[contains(@aria-checked,"true")]');
+  }
+
+  static async clickCheckbox(idx) {
+    return (await this.getCheckbox(idx)).click();
+  }
+
+  static async getTooltip() {
+    return $('[data-testid="popper-container"]');
+  }
+
+  static async getLabel() {
+    return $('//label[@data-testid="ds-checkbox-label"]/span[2]');
+  }
+
+  static async isActiveElement(element) {
+    const key = 'element-6066-11e4-a52e-4f735466cecf';
+    const selected = await browser.getActiveElement();
+    return element[key] === selected[key];
+  }
+}

package/ds-form/Combobox/DSCombobox.accessibility.func.spec.js

@@ -0,0 +1,150 @@
+/* eslint-disable max-lines */
+import DSComboboxCO from './DSComboboxCO';
+
+if (
+  !browser.capabilities['ice:options'].isPhone &&
+  !browser.capabilities['ice:options'].isTablet &&
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-6249 - Combobox Basic - screen reader accessibility', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('menu should have role "combobox"', async () => {
+      const input = await DSComboboxCO.getComboboxInput();
+      const inputRole = await DSComboboxCO.getRole(input);
+      await expect(inputRole).toBe('combobox');
+    });
+    it('menu should have role "list"', async () => {
+      await (await DSComboboxCO.getComboboxButton()).click();
+      const menu = await DSComboboxCO.getComboboxMenuList();
+      const menuRole = await DSComboboxCO.getRole(menu);
+      await expect(menuRole).toBe('list');
+    });
+    it('options should have role "option"', async () => {
+      const option = await DSComboboxCO.getComboBoxOption(0);
+      const optionRole = await DSComboboxCO.getRole(option);
+      await expect(optionRole).toBe('option');
+    });
+    it('selected item should have aria-selected=“true”', async () => {
+      await (await DSComboboxCO.getComboBoxOption(3)).click();
+      await (await DSComboboxCO.getComboboxButton()).click();
+      const option = await DSComboboxCO.getComboBoxOption(3);
+      const itemSelected = await DSComboboxCO.getAriaSelected(option);
+      await expect(itemSelected).toBe('true');
+    });
+    it('unselected item should have aria-selected=“false”', async () => {
+      await (await DSComboboxCO.getComboBoxOption(3)).click();
+      await (await DSComboboxCO.getClearButton()).click();
+      await (await DSComboboxCO.getComboboxButton()).click();
+      const option = await DSComboboxCO.getComboBoxOption(3);
+      const itemSelected = await DSComboboxCO.getAriaSelected(option);
+      await expect(itemSelected).toBe('false');
+    });
+  });
+  describe('PUI-6250 - Combobox Multi - screen reader accessibility', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxCO.multiUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('menu should have role "combobox"', async () => {
+      const input = await DSComboboxCO.getComboboxInput();
+      const inputRole = await DSComboboxCO.getRole(input);
+      await expect(inputRole).toBe('combobox');
+    });
+    it('menu should have role "list"', async () => {
+      await (await DSComboboxCO.getComboboxButton()).click();
+      const menu = await DSComboboxCO.getComboboxMenuList();
+      const menuRole = await DSComboboxCO.getRole(menu);
+      await expect(menuRole).toBe('list');
+    });
+    it('options should have role "option"', async () => {
+      const option = await DSComboboxCO.getComboBoxOption(0);
+      const optionRole = await DSComboboxCO.getRole(option);
+      await expect(optionRole).toBe('option');
+    });
+    it('selected item should have aria-selected=“true”', async () => {
+      await (await DSComboboxCO.getComboBoxOption(3)).click();
+      await (await DSComboboxCO.getOptionSelected('Han Solo')).waitForDisplayed();
+      const option = await DSComboboxCO.getComboBoxOption(3);
+      const itemSelected = await DSComboboxCO.getAriaSelected(option);
+      await expect(itemSelected).toBe('true');
+    });
+    it('unselected item should have aria-selected=“false”', async () => {
+      await (await DSComboboxCO.getClearButton()).click();
+      const option = await DSComboboxCO.getComboBoxOption(3);
+      const itemSelected = await DSComboboxCO.getAriaSelected(option);
+      await expect(itemSelected).toBe('false');
+    });
+  });
+  describe('PUI-6251 - Combobox Free-solo - screen reader accessibility', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxCO.freeSolo.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('menu should have role "combobox"', async () => {
+      const input = await DSComboboxCO.getComboboxInput();
+      const inputRole = await DSComboboxCO.getRole(input);
+      await expect(inputRole).toBe('combobox');
+    });
+    it('menu should have role "list"', async () => {
+      await (await DSComboboxCO.getComboboxButton()).click();
+      const menu = await DSComboboxCO.getComboboxMenuList();
+      const menuRole = await DSComboboxCO.getRole(menu);
+      await expect(menuRole).toBe('list');
+    });
+    it('options should have role "option"', async () => {
+      const option = await DSComboboxCO.getComboBoxOption(0);
+      const optionRole = await DSComboboxCO.getRole(option);
+      await expect(optionRole).toBe('option');
+    });
+    it('selected item should have aria-selected=“true”', async () => {
+      await (await DSComboboxCO.getComboBoxOption(4)).click();
+      await (await DSComboboxCO.getComboboxButton()).click();
+      const option = await DSComboboxCO.getComboBoxOption(4);
+      const itemSelected = await DSComboboxCO.getAriaSelected(option);
+      await expect(itemSelected).toBe('true');
+    });
+    it('unselected item should have aria-selected=“false”', async () => {
+      await (await DSComboboxCO.getClearX()).click();
+      const option = await DSComboboxCO.getComboBoxOption(4);
+      const itemSelected = await DSComboboxCO.getAriaSelected(option);
+      await expect(itemSelected).toBe('false');
+    });
+  });
+  describe('PUI-6253 - Combobox Free-solo Multi - screen reader accessibility', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxCO.freeSoloMulti.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('menu should have role "combobox"', async () => {
+      const input = await DSComboboxCO.getComboboxInput();
+      const inputRole = await DSComboboxCO.getRole(input);
+      await expect(inputRole).toBe('combobox');
+    });
+    it('menu should have role "list"', async () => {
+      await (await DSComboboxCO.getComboboxButton()).click();
+      const menu = await DSComboboxCO.getComboboxMenuList();
+      const menuRole = await DSComboboxCO.getRole(menu);
+      await expect(menuRole).toBe('list');
+    });
+    it('options should have role "option"', async () => {
+      const option = await DSComboboxCO.getComboBoxOption(0);
+      const optionRole = await DSComboboxCO.getRole(option);
+      await expect(optionRole).toBe('option');
+    });
+    it('selected item should have aria-selected=“true”', async () => {
+      await (await DSComboboxCO.getComboBoxOption(4)).click();
+      const option = await DSComboboxCO.getComboBoxOption(4);
+      const itemSelected = await DSComboboxCO.getAriaSelected(option);
+      await expect(itemSelected).toBe('true');
+    });
+    it('unselected item should have aria-selected=“false”', async () => {
+      await (await DSComboboxCO.getClearButton()).click();
+      const option = await DSComboboxCO.getComboBoxOption(4);
+      const itemSelected = await DSComboboxCO.getAriaSelected(option);
+      await expect(itemSelected).toBe('false');
+    });
+  });
+}