dimsum-e2e-tests 1.0.0-rc.1

package/ds-form/Combobox/DSCombobox.multi.visual.spec.js

@@ -0,0 +1,54 @@
+import DSComboboxCO from './DSComboboxCO';
+import { mouseOver } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6174 - ComboBox - Multi, Truncated options - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxCO.multiWithtruncateURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the combobox with truncated options properly', async () => {
+      const snapshot = await browser.checkSnapshot(DSComboboxCO.snapshotPath('multi-truncated-open'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6175 - ComboBox - Multi, Truncated options tooltip - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxCO.multiWithtruncateURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the tooltip after a mouse over', async () => {
+      await mouseOver(await DSComboboxCO.getTruncatedTextOption(0));
+      const snapshot = await browser.checkSnapshot(DSComboboxCO.snapshotPath('multi-truncated-tooltip'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should show the tooltip after a scroll', async () => {
+      await DSComboboxCO.scrollToMultiOption(22);
+      await browser.pause(1000);
+      await mouseOver(await DSComboboxCO.getTruncatedTextOption(22));
+      const snapshot = await browser.checkSnapshot(DSComboboxCO.snapshotPath('multi-truncated-tooltip'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6178 - ComboBox - Multi, All/Clear - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxCO.multiWithtruncateURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the clear/all button properly after selecting an option', async () => {
+      await (await DSComboboxCO.getTruncatedTextOption(0)).click();
+      const snapshot = await browser.checkSnapshot(DSComboboxCO.snapshotPath('multi-truncated-one-selected'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the clear/all button properly after clicking the all buttons', async () => {
+      await (await DSComboboxCO.getAllButton()).click();
+      const snapshot = await browser.checkSnapshot(DSComboboxCO.snapshotPath('multi-truncated-all-selected'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the clear/all button properly after clicking the clear buttons', async () => {
+      await (await DSComboboxCO.getClearButton()).click();
+      const snapshot = await browser.checkSnapshot(DSComboboxCO.snapshotPath('multi-truncated-none-selected'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,30 @@
+import DSComboboxCO from './DSComboboxCO';
+
+if (browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-3364 - Combobox, Tablet, Basic Functionality', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show basic combobox with menu open', async () => {
+      await DSComboboxCO.toggleCombobox();
+      const comboBoxMenuList = await DSComboboxCO.getComboboxMenuList();
+      await expect(comboBoxMenuList).toBeDisplayed();
+    });
+    it('should close simple menu combobox after selecting one option', async () => {
+      await (await DSComboboxCO.getOptionByText('Luke Skywalker')).waitForDisplayed();
+      await (await DSComboboxCO.getOptionByText('Luke Skywalker')).click();
+      const comboBoxOpen = await DSComboboxCO.isComboboxOpen();
+      await expect(comboBoxOpen).not.toBeTruthy();
+    });
+    it('should reflect selected value', async () => {
+      const comboBoxInput = await DSComboboxCO.getComboboxInput();
+      await expect(comboBoxInput).toHaveTextContaining('Luke Skywalker');
+    });
+    it('should open dropdown menu when clicking on value container, after selecting a value', async () => {
+      await (await DSComboboxCO.getComboBoxValueContainer()).click();
+      const comboBoxMenuList = await DSComboboxCO.getComboboxMenuList();
+      await expect(comboBoxMenuList).toBeDisplayed();
+    });
+  });
+}

package/ds-form/Combobox/DSCombobox.visual.spec.js

@@ -0,0 +1,93 @@
+import { Key } from 'webdriverio';
+import DSComboboxCO from './DSComboboxCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-3499 - Combobox - visual tests', () => {
+    describe('Combobox basic', () => {
+      beforeEach('loading page', async () => {
+        const errorOnGo = await DSComboboxCO.basicURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display the basic', async () => {
+        await DSComboboxCO.toggleCombobox();
+        await (await DSComboboxCO.getComboboxMenuList()).waitForDisplayed();
+        const checkSnapshot = await browser.checkSnapshot(DSComboboxCO.snapshotPath());
+        await expect(checkSnapshot).toEqual(0);
+      });
+      if (!browser.capabilities['ice:options'].isTablet) {
+        it('should display last option focused', async () => {
+          await DSComboboxCO.toggleCombobox();
+          await browser.keys(Key.ArrowDown);
+          await browser.keys(Key.ArrowDown);
+          await browser.keys(Key.ArrowDown);
+          await browser.keys(Key.ArrowDown);
+          const checkSnapsot = await browser.checkSnapshot(DSComboboxCO.snapshotPath('last-option-focused'));
+          await expect(checkSnapsot).toEqual(0);
+        });
+      }
+    });
+    describe('Combobox groups', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSComboboxCO.groupsURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display the combobox with groups', async () => {
+        await DSComboboxCO.toggleCombobox();
+        const checkSnapsot = await browser.checkSnapshot(DSComboboxCO.snapshotPath('groups'));
+        await expect(checkSnapsot).toEqual(0);
+      });
+    });
+  });
+
+  describe('PUI-5183 - Combobox group max opts- visual tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxCO.groupMaxOpts2URL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show 2 items and group title', async () => {
+      await (await DSComboboxCO.groupMaxOpts2URL).go();
+      const checkSnapsot = await browser.checkSnapshot(DSComboboxCO.snapshotPath('group-with-max-opts-2'));
+      await expect(checkSnapsot).toEqual(0);
+    });
+  });
+
+  describe('PUI-5739 - ComboBox max opts with only one group', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxCO.oneGroupURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display all the options in combobox with one group', async () => {
+      await (await DSComboboxCO.oneGroupURL).go();
+      await DSComboboxCO.toggleCombobox();
+      const checkSnapshot = await browser.checkSnapshot(DSComboboxCO.snapshotPath('one group options'));
+      await expect(checkSnapshot).toEqual(0);
+    });
+  });
+
+  if (!browser.capabilities['ice:options'].isTablet) {
+    describe('PUI-5796 - Focus behavior - Visual Test', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSComboboxCO.basicURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should have first option focused', async () => {
+        await browser.keys(Key.Tab);
+        await browser.keys(Key.Enter);
+        const snapshot = await browser.checkSnapshot(DSComboboxCO.snapshotPath('first-opt-focused'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('PUI-8860 - Multiple groups - Visual Test', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSComboboxCO.pui8812groups.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display all the groups correctly', async () => {
+        await browser.eyesOpen();
+        await DSComboboxCO.toggleCombobox();
+        const snapshot = await browser.eyesCheckSnapshot(DSComboboxCO.snapshotPath('multiple-groups'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  }
+}

package/ds-form/Combobox/DSComboboxCO.js

@@ -0,0 +1,206 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable import/no-relative-packages */
+/* eslint-disable max-lines */
+import { PATH_END_OF_LIFE_COMBOBOX, PATH_E2E_COMBOBOX } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export const knobs = {
+  IsMulti: 'knob-isMulti',
+  MenuIsOpen: 'knob-Menu is open',
+  selectAllDisabled: 'knob-selectAllDisabled',
+  clearable: 'knob-Clearable',
+  searchable: 'knob-Searchable',
+};
+
+export default class DSComboboxCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'basic');
+
+  static emptyOptsURL = new Urlbuilder(PATH_E2E_COMBOBOX, 'empty-options-array');
+
+  static tenThousandOptionsURL = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'ten-thousand-options');
+
+  static multiUrl = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'multi');
+
+  static multiSelectAllDisabled = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'multi-select-all-disabled');
+
+  static groupsURL = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'groups');
+
+  static expandedTopURL = new Urlbuilder(PATH_E2E_COMBOBOX, 'pui-4069-expanded-top');
+
+  static freeSolo = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'free-solo');
+
+  static freeSoloMulti = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'free-solo-multi');
+
+  static freeTruncatedOption = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'free-solo-truncated');
+
+  static freeSoloDisabled = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'free-solo-disabled');
+
+  static nonSearchable = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'non-searchable');
+
+  static changeOptionsDynamicallyURL = new Urlbuilder(PATH_E2E_COMBOBOX, 'change-options-dynamically');
+
+  static groupMaxOpts2URL = new Urlbuilder(PATH_E2E_COMBOBOX, 'group-with-max-opts-2');
+
+  static oneGroupURL = new Urlbuilder(PATH_E2E_COMBOBOX, 'one-group');
+
+  static multiWithtruncateURL = new Urlbuilder(PATH_E2E_COMBOBOX, 'combobox-multi-with-truncate');
+
+  static focusedURL = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'focused');
+
+  static pui8812groups = new Urlbuilder(PATH_E2E_COMBOBOX, 'pui-8812-groups');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_END_OF_LIFE_COMBOBOX, component);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Combobox', example);
+  }
+
+  // selectors
+  static async getComboboxInput() {
+    return $('[data-testid="combobox"]');
+  }
+
+  static async getTextInput() {
+    return $('[data-testid="combobox"]').$('input');
+  }
+
+  static async getComboBoxValueContainer() {
+    return $('[data-testid="combobox-value-container"]');
+  }
+
+  static async getComboboxButton() {
+    return $('[data-testid="combobox-dropdown-btn"]');
+  }
+
+  static async getAllButton() {
+    return $('//button[@aria-label="All"]');
+  }
+
+  static async getClearButton() {
+    return $('[data-testid="combobox-clear-btn"]');
+  }
+
+  static async getClearX() {
+    return $('[data-testid="free-solo-pill-clear-btn"]');
+  }
+
+  static async getComboboxMenuList() {
+    return $('[data-testid="combobox-menu-list"]');
+  }
+
+  static async getComboBoxOption(index) {
+    return $$('[data-testid="combobox-option"]')[index];
+  }
+
+  static async getOptionByText(text) {
+    return $(`//div[@data-testid="combobox-option"][contains(text(),"${text}")]`);
+  }
+
+  static async getComboBoxMultiCheckBox(index) {
+    return $(`#react-select-2-option-${index}`);
+  }
+
+  static async getChangeOptionsButton() {
+    return $('span*=Change options');
+  }
+
+  static async getNoOptionsFound() {
+    return $('div*=No options found');
+  }
+
+  static async getOptionSelected(text) {
+    return $(`//span[contains(text(),"${text}")]`);
+  }
+
+  static async getComboBoxMultiInput() {
+    return $('[data-testid="combobox"]').$('input');
+  }
+
+  static async getClearIcon() {
+    return $('[aria-label="clear-indicator"]');
+  }
+
+  static async getComboboxBorder() {
+    const border = await (await this.getComboboxInput()).getCSSProperty('outline-color');
+    return border.parsed.hex;
+  }
+
+  static async toggleCombobox() {
+    await (await this.getComboboxButton()).waitForDisplayed();
+    await (await this.getComboboxButton()).click();
+  }
+
+  static async getPopperContainer() {
+    return $('[data-testid="popper-container"]');
+  }
+
+  static async getComboboxControl() {
+    return $('[data-testid="combobox-control"]');
+  }
+
+  static async getCheckbox(index) {
+    return $$('[data-testid="ds-checkbox"]')[index];
+  }
+
+  static async getOptionsChecked() {
+    return $$('[data-testid="ds-checkbox"][aria-checked="true"]');
+  }
+
+  static async getPills() {
+    return $$('//div[@data-testid="pill-wrapper"]/span');
+  }
+
+  static async getPill(index) {
+    return $$('//div[@data-testid="pill-wrapper"]/span')[index];
+  }
+
+  static async getInput(text) {
+    return $(`//span[contains(text(),"${text}")]`);
+  }
+
+  // utils
+  static async isComboboxOpen() {
+    return (await this.getComboboxMenuList()).isDisplayed();
+  }
+
+  static async typeOption(chars) {
+    const text = [...chars];
+    // eslint-disable-next-line no-restricted-syntax
+    for (const char of text) {
+      // eslint-disable-next-line no-await-in-loop
+      await browser.keys(char);
+    }
+    await browser.pause(500);
+  }
+
+  // ARIA
+  static async getRole(element) {
+    return element.getAttribute('role');
+  }
+
+  static async getAriaSelected(element) {
+    return element.getAttribute('aria-selected');
+  }
+
+  static async getTruncatedTextOption(option) {
+    return (await this.getComboBoxMultiCheckBox(option)).$('[data-testid="DS-SimpleTruncateText"]');
+  }
+
+  static async scrollToMultiOption(option) {
+    for (let actualOption = 0; actualOption <= option; actualOption += 4) {
+      // eslint-disable-next-line no-await-in-loop
+      await (await this.getComboBoxMultiCheckBox(actualOption)).scrollIntoView();
+    }
+  }
+}
+
+export async function isDisabled(element) {
+  if ((await element.getAttribute('aria-disabled')) === 'true') {
+    return true;
+  }
+  return false;
+}

package/ds-form/DateInput/DSDateInputCO.js

@@ -0,0 +1,51 @@
+import { PATH_END_OF_LIFE_DATE_INPUT } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export default class DSDateInputCO extends PageObject {
+  // Atomic
+  static overview = new Urlbuilder(PATH_END_OF_LIFE_DATE_INPUT, 'overview');
+
+  // Snapshot
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DateInput', example);
+  }
+
+  // selectors
+  static async getMonth() {
+    return $('[data-testid="month"]');
+  }
+
+  static async getDay() {
+    return $('[data-testid="day"]');
+  }
+
+  static async getYear() {
+    return $('[data-testid="year"]');
+  }
+
+  static async getFluidContainer() {
+    return $('[data-testid="date-input-fluidContainer"]');
+  }
+
+  static async activeElementId() {
+    const element = await browser.execute(() => document.activeElement.dataset.testid);
+    return element;
+  }
+
+  static async isHighlighted(element) {
+    const bg = await element.getCSSProperty('background-color');
+    return bg.parsed.hex === '#a3d6ff';
+  }
+
+  // actions
+  static async typeNumbers(chars = '1234567890') {
+    const numbers = [...chars];
+    // eslint-disable-next-line no-restricted-syntax
+    for (const char of numbers) {
+      // https://github.com/webdriverio/webdriverio/issues/5092
+      // using keys char by char results in correct order
+      // eslint-disable-next-line no-await-in-loop
+      await browser.keys(char);
+    }
+  }
+}

package/ds-form/DateInput/DateInput.func.spec.js

@@ -0,0 +1,217 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSDateInputCO from './DSDateInputCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5798 - DateInput, auto-advance and auto-correct', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSDateInputCO.overview.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    // MONTH
+    it('enter 1 in month and should not advance to day input', async () => {
+      await browser.keys(Key.Tab);
+      DSDateInputCO.typeNumbers('1');
+      const month = await DSDateInputCO.getMonth();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(month).toHaveValueContaining('01');
+      await expect(activeElemId).toBe('month');
+    });
+    it('enter 01 in month and should advance to day input', async () => {
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('01');
+      const month = await DSDateInputCO.getMonth();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(month).toHaveValueContaining('01');
+      await expect(activeElemId).toBe('day');
+    });
+    it('enter 12 in month and should advance to day input', async () => {
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('12');
+      const month = await DSDateInputCO.getMonth();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(month).toHaveValueContaining('12');
+      await expect(activeElemId).toBe('day');
+    });
+    it('enter 13 in month and should advance to day input', async () => {
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('12');
+      const month = await DSDateInputCO.getMonth();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(month).toHaveValueContaining('12');
+      await expect(activeElemId).toBe('day');
+    });
+    it('enter 5 in month and should advance to day input', async () => {
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('5');
+      const month = await DSDateInputCO.getMonth();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(month).toHaveValueContaining('05');
+      await expect(activeElemId).toBe('day');
+    });
+    // DAY
+    it('enter 2 in day and should not advance to year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('02');
+      const day = await DSDateInputCO.getDay();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(day).toHaveValueContaining('02');
+      await expect(activeElemId).toBe('year');
+    });
+    it('enter 01 in day and should advance to year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('02');
+      const day = await DSDateInputCO.getDay();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(day).toHaveValueContaining('02');
+      await expect(activeElemId).toBe('year');
+    });
+    it('enter 31 in day and should advance to year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('31');
+      const day = await DSDateInputCO.getDay();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(day).toHaveValueContaining('31');
+      await expect(activeElemId).toBe('year');
+    });
+    it('enter 32 in day and should advance to year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('32');
+      const day = await DSDateInputCO.getDay();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(day).toHaveValueContaining('31');
+      await expect(activeElemId).toBe('year');
+    });
+    it('enter 7 in day and should advance to year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('7');
+      const day = await DSDateInputCO.getDay();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(day).toHaveValueContaining('07');
+      await expect(activeElemId).toBe('year');
+    });
+    // YEAR
+    it('enter 745 in year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('745');
+      const year = await DSDateInputCO.getYear();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(year).toHaveValueContaining('0745');
+      await expect(activeElemId).toBe('year');
+    });
+    it('enter 2021 in year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('2021');
+      const year = await DSDateInputCO.getYear();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(year).toHaveValueContaining('2021');
+      await expect(activeElemId).toBe('year');
+    });
+    it('enter 02021 in year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('2021');
+      const year = await DSDateInputCO.getYear();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(year).toHaveValueContaining('2021');
+      await expect(activeElemId).toBe('year');
+    });
+    // FULL DATE
+    it('enter a full date', async () => {
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('13332021');
+      const month = await DSDateInputCO.getMonth();
+      const day = await DSDateInputCO.getDay();
+      const year = await DSDateInputCO.getYear();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(month).toHaveValueContaining('12');
+      await expect(day).toHaveValueContaining('31');
+      await expect(year).toHaveValueContaining('2021');
+      await expect(activeElemId).toBe('year');
+    });
+  });
+  describe('PUI-6097 - DateInput, click on the input triggers edit mode', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDateInputCO.overview.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should highlight month placeholder', async () => {
+      await (await DSDateInputCO.getFluidContainer()).click();
+      const isMonthHighlighted = await DSDateInputCO.isHighlighted(await DSDateInputCO.getMonth());
+      await expect(isMonthHighlighted).toBe(true);
+    });
+    it('should display the entered date', async () => {
+      await DSDateInputCO.typeNumbers('10021996');
+      const month = await DSDateInputCO.getMonth();
+      const day = await DSDateInputCO.getDay();
+      const year = await DSDateInputCO.getYear();
+      await expect(month).toHaveValueContaining('10');
+      await expect(day).toHaveValueContaining('02');
+      await expect(year).toHaveValueContaining('1996');
+    });
+  });
+  describe('PUI-6099 - DateInput, Placeholder, click on the input triggers edit mode', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDateInputCO.overview.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should highlight the month placeholder and display the correct input', async () => {
+      const month = await DSDateInputCO.getMonth();
+      await month.click();
+      const isMonthHighlighted = await DSDateInputCO.isHighlighted(month);
+      await expect(isMonthHighlighted).toBe(true);
+      await DSDateInputCO.typeNumbers('10');
+      await expect(month).toHaveValueContaining('10');
+    });
+    it('should highlight the day placeholder and display the correct input', async () => {
+      const day = await DSDateInputCO.getDay();
+      await day.click();
+      const isDayHighlighted = await DSDateInputCO.isHighlighted(day);
+      await expect(isDayHighlighted).toBe(true);
+      await DSDateInputCO.typeNumbers('10');
+      await expect(day).toHaveValueContaining('10');
+    });
+    it('should highlight the year placeholder and display the correct input', async () => {
+      const year = await DSDateInputCO.getYear();
+      await year.click();
+      const isYearHighlighted = await DSDateInputCO.isHighlighted(year);
+      await expect(isYearHighlighted).toBe(true);
+      await DSDateInputCO.typeNumbers('2020');
+      await expect(year).toHaveValueContaining('2020');
+    });
+  });
+  describe('PUI-6098 - DateInput, Arrows behavior', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDateInputCO.overview.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display entered month', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.ArrowUp);
+      const month = await DSDateInputCO.getMonth();
+      await expect(month).toHaveValueContaining('01');
+    });
+    it('should move to day and display entered day', async () => {
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowUp);
+      const day = await DSDateInputCO.getDay();
+      await expect(day).toHaveValueContaining('01');
+    });
+    it('should move to year and display entered year', async () => {
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowUp);
+      const year = await DSDateInputCO.getYear();
+      await expect(year).toHaveValueContaining('0001');
+    });
+  });
+}