dimsum-e2e-tests 1.0.0-rc.1

package/ds-controlled-form/ds-controlled-date-time-picker/DSControlledDateTimePicker.smoke.spec.js

@@ -0,0 +1,162 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSControlledDateTimePickerCO from './DSControlledDateTimePickerCO';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7255 - DSControlledDateTimePicker:: DateInput basic', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateTimePickerCO.dateOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should complete correctly date', async () => {
+      const month = await DSControlledDateTimePickerCO.getMonthInput();
+      const day = await DSControlledDateTimePickerCO.getDayInput();
+      const year = await DSControlledDateTimePickerCO.getYearInput();
+
+      await browser.keys(Key.Tab);
+      await type('02032020');
+      await expect(month).toHaveValueContaining('02');
+      await expect(day).toHaveValueContaining('03');
+      await expect(year).toHaveValueContaining('2020');
+      await expect(year).toBeFocused();
+    });
+  });
+  describe('PUI-7256 - DSControlledDateTimePicker:: DateInput clearable', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateTimePickerCO.clearable.go();
+      if (errorOnGo) throw errorOnGo;
+      await (await DSControlledDateTimePickerCO.getButton('date-inputs')).click();
+    });
+    it('01: clear button should not be displayed', async () => {
+      const clearBtn = await DSControlledDateTimePickerCO.getClearBtn();
+      await expect(clearBtn).not.toBeDisplayedInViewport();
+    });
+    it('02: should complete correctly day and clear btn should be focused', async () => {
+      const month = await DSControlledDateTimePickerCO.getMonthInput();
+      const day = await DSControlledDateTimePickerCO.getDayInput();
+      const year = await DSControlledDateTimePickerCO.getYearInput();
+      const clearBtn = await DSControlledDateTimePickerCO.getClearBtn();
+
+      await month.click();
+      await type('02');
+      await expect(month).toHaveValueContaining('02');
+      await expect(day).toBeFocused();
+      await expect(clearBtn).toBeDisplayedInViewport();
+      await type('03');
+      await expect(day).toHaveValueContaining('03');
+      await expect(year).toBeFocused();
+      await type('2020');
+      await expect(year).toHaveValueContaining('2020');
+      await expect(clearBtn).toBeFocused();
+    });
+    it('03: should clear correctly date and focus return to month input', async () => {
+      const month = await DSControlledDateTimePickerCO.getMonthInput();
+      const day = await DSControlledDateTimePickerCO.getDayInput();
+      const year = await DSControlledDateTimePickerCO.getYearInput();
+      const clearBtn = await DSControlledDateTimePickerCO.getClearBtn();
+
+      await browser.keys(Key.Enter);
+      await expect(month).toHaveValueContaining('');
+      await expect(day).toHaveValueContaining('');
+      await expect(year).toHaveValueContaining('');
+      await expect(month).toBeFocused();
+      await expect(clearBtn).not.toBeDisplayedInViewport();
+    });
+    // eslint-disable-next-line max-len
+    it('04: should change to time input and complete hours, minutes and merifieand, clear btn should be focused', async () => {
+      const timeInputBtn = await DSControlledDateTimePickerCO.getChangeInputByIndex(2);
+      await timeInputBtn.click();
+      const hour = await DSControlledDateTimePickerCO.getHourInput();
+      const minute = await DSControlledDateTimePickerCO.getMinutesInput();
+      const meridiem = await DSControlledDateTimePickerCO.getMeridiemInput();
+      const clearBtn = await DSControlledDateTimePickerCO.getClearBtn();
+
+      await hour.click();
+      await type('02');
+      await expect(hour).toHaveValueContaining('02');
+      await expect(minute).toBeFocused();
+      await expect(clearBtn).toBeDisplayedInViewport();
+      await type('03');
+      await expect(minute).toHaveValueContaining('03');
+      await expect(meridiem).toBeFocused();
+      await type('A');
+      await expect(meridiem).toHaveValueContaining('A');
+      await expect(clearBtn).toBeFocused();
+    });
+    it('05: should clear correctly time and focus return to hour input', async () => {
+      const hour = await DSControlledDateTimePickerCO.getHourInput();
+      const minute = await DSControlledDateTimePickerCO.getMinutesInput();
+      const meridiem = await DSControlledDateTimePickerCO.getMeridiemInput();
+      const clearBtn = await DSControlledDateTimePickerCO.getClearBtn();
+
+      await browser.keys(Key.Enter);
+      await expect(hour).toHaveValueContaining('');
+      await expect(minute).toHaveValueContaining('');
+      await expect(meridiem).toHaveValueContaining('');
+      await expect(hour).toBeFocused();
+      await expect(clearBtn).not.toBeDisplayedInViewport();
+    });
+  });
+  describe('PUI-8225 - DSControlledDateTimePicker:: DateInput manage focus on open', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateTimePickerCO.fullFeatures.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open datetimepicker and manage focus to be at december 27 2000', async () => {
+      const openPickerBtn = await DSControlledDateTimePickerCO.getCalendarTimeWheelPickerBtn();
+      await openPickerBtn.click();
+      // eslint-disable-next-line wdio/no-pause
+      await browser.pause(500);
+      await browser.keys(Key.Space);
+      const day = await DSControlledDateTimePickerCO.getCalendarTimeWheelPickerBtn();
+      const dayText = await day.getAttribute('aria-label');
+      await expect(dayText).toBe(
+        // eslint-disable-next-line max-len
+        'date time picker context menu trigger, current values: December, twentie seventh, 2000, empty hours, empty minutes, empty meriediem',
+      );
+    });
+  });
+
+  describe('PUI-8286 - DSControlledDateTimePicker:: Populate input when picking', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateTimePickerCO.fullFeatures.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should change the text input to the picked date', async () => {
+      const openPickerBtn = await DSControlledDateTimePickerCO.getCalendarTimeWheelPickerBtn();
+      await openPickerBtn.click();
+      const exampleDate = await DSControlledDateTimePickerCO.getCalendarDay(8);
+      await exampleDate.click();
+      const month = await DSControlledDateTimePickerCO.getMonthInput();
+      const day = await DSControlledDateTimePickerCO.getDayInput();
+      const year = await DSControlledDateTimePickerCO.getYearInput();
+      await expect(month).toHaveValueContaining('12');
+      await expect(day).toHaveValueContaining('08');
+      await expect(year).toHaveValueContaining('2000');
+    });
+    it('should change the text input minutes section to the picked minutes', async () => {
+      const exampleMinutes = await DSControlledDateTimePickerCO.getTimeWheelMinute(31);
+      await exampleMinutes.click();
+      const minutes = await DSControlledDateTimePickerCO.getMinutesInput();
+      await expect(minutes).toHaveValueContaining('31');
+    });
+  });
+
+  describe('PUI-7950 - DateTimePicker - Fixed on open values', () => {
+    before(async () => {
+      const errorOnGo = await DSControlledDateTimePickerCO.fullFeatures.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open day time picker and have the date setted 27 12 2000', async () => {
+      const openPickerBtn = await DSControlledDateTimePickerCO.getCalendarTimeWheelPickerBtn();
+      await openPickerBtn.click();
+      const hours = await DSControlledDateTimePickerCO.getTimeWheelCurrentHour();
+      const minutes = await DSControlledDateTimePickerCO.getTimeWheelCurrentMinute();
+      const currentHours = await hours.getAttribute('aria-label');
+      const currentMinutes = await minutes.getAttribute('aria-label');
+      await expect(currentHours).toBe('10 hours');
+      await expect(currentMinutes).toBe('30 minutes');
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-date-time-picker/DSControlledDateTimePickerCO.js

@@ -0,0 +1,260 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-len */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import { ControlledDateTimePickerDatatestid } from '@elliemae/ds-legacy-form-date-time-picker';
+import {
+  PATH_CONTROLLED_FORM_DATE_TIME_PICKER,
+  PATH_E2E_CONTROLLEDFORM,
+  PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER,
+} from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../../helpers';
+// eslint-disable-next-line import/extensions
+
+const DATATESTID = ControlledDateTimePickerDatatestid;
+
+export default class DSDateTimePickerCO extends PageObject {
+  static dateShowcase = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER, 'date-showcase');
+
+  static dateTimeShowcase = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER, 'date-time-showcase');
+
+  static timeShowcase = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER, 'time-showcase');
+
+  static basic = new Urlbuilder(PATH_CONTROLLED_FORM_DATE_TIME_PICKER, 'basic');
+
+  static clearable = new Urlbuilder(PATH_CONTROLLED_FORM_DATE_TIME_PICKER, 'clearable');
+
+  static dateAndDatePicker = new Urlbuilder(PATH_CONTROLLED_FORM_DATE_TIME_PICKER, 'date-and-date-picker');
+
+  static dateOnly = new Urlbuilder(PATH_CONTROLLED_FORM_DATE_TIME_PICKER, 'date-only');
+
+  static fullFeatures = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER, 'full-features');
+
+  static formItemLayoutBlocksURL = new Urlbuilder(PATH_E2E_CONTROLLEDFORM, 'date-time-with-form-item-layout');
+
+  static scrollTest = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER, 'scroll-test');
+
+  static datePickerControlledOnly = new Urlbuilder(
+    PATH_CONTROLLED_FORM_DATE_TIME_PICKER,
+    'date-picker-controller-only',
+  );
+
+  static datePickerOnly = new Urlbuilder(PATH_CONTROLLED_FORM_DATE_TIME_PICKER, 'date-picker-only');
+
+  static dateTimeOnly = new Urlbuilder(PATH_CONTROLLED_FORM_DATE_TIME_PICKER, 'date-time-only');
+
+  static dateTimePickerControlledOnly = new Urlbuilder(
+    PATH_CONTROLLED_FORM_DATE_TIME_PICKER,
+    'date-time-picker-controller-only',
+  );
+
+  static dateTimePickerOnly = new Urlbuilder(PATH_CONTROLLED_FORM_DATE_TIME_PICKER, 'date-time-picker-only');
+
+  static disabledShowCase = new Urlbuilder(PATH_CONTROLLED_FORM_DATE_TIME_PICKER, 'disabled-show-case');
+
+  static emptyDatePickerStartingMonth = new Urlbuilder(
+    PATH_CONTROLLED_FORM_DATE_TIME_PICKER,
+    'empty-date-picker-starting-month',
+  );
+
+  static exampleWithValidation = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER, 'example-with-validation');
+
+  static timeAndTimePicker = new Urlbuilder(PATH_CONTROLLED_FORM_DATE_TIME_PICKER, 'time-and-time-picker');
+
+  static timeOnly = new Urlbuilder(PATH_CONTROLLED_FORM_DATE_TIME_PICKER, 'time-only');
+
+  static timePickerControlledOnly = new Urlbuilder(
+    PATH_CONTROLLED_FORM_DATE_TIME_PICKER,
+    'time-picker-controller-only',
+  );
+
+  static timePickerOnly = new Urlbuilder(PATH_CONTROLLED_FORM_DATE_TIME_PICKER, 'time-picker-only');
+
+  static timeWithMinuteIntervals = new Urlbuilder(
+    PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER,
+    'time-with-minute-intervals',
+  );
+
+  static customAriaAndDataAttributes = new Urlbuilder(
+    PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER,
+    'custom-aria-and-data-attributes-test',
+  );
+
+  // Story elements
+  static getButton = async (text) => $(`button*=${text}`);
+
+  static getDateString = async () => $('//b[text()="date string:"]/ancestor::div/p');
+
+  static getTimeString = async () => $('//b[text()="time string:"]/ancestor::div/p');
+
+  static getDateTimeString = async () => $('//b[text()="date-time string:"]/ancestor::div/p');
+
+  static getMonthString = async () => $('//b[text()="month string:"]/ancestor::div/p');
+
+  static getDayString = async () => $('//b[text()="day string:"]/ancestor::div/p');
+
+  static getYearString = async () => $('//b[text()="year string:"]/ancestor::div/p');
+
+  static getHourString = async () => $('//b[text()="hour string:"]/ancestor::div/p');
+
+  static getMinuteString = async () => $('//b[text()="minute string:"]/ancestor::div/p');
+
+  static getMeridiemsString = async () => $('//b[text()="meridiem string:"]/ancestor::div/p');
+
+  static async getInputByDataTestId(testid, selector) {
+    return $(`[data-testid="${testid}"]`).$(() => selector);
+  }
+
+  // CONTAINER
+  static getContainer = async () => $(`[data-testid=${DATATESTID.CONTAINER}]`);
+
+  // DATE INPUTS
+  static async getMonthInput(testId) {
+    return testId
+      ? $(`[data-testid=${testId}]`).$(`[data-testid=${DATATESTID.DATE_INPUTS.MONTH}]`)
+      : $(`[data-testid=${DATATESTID.DATE_INPUTS.MONTH}]`);
+  }
+
+  static async getDayInput(testId) {
+    return testId
+      ? $(`[data-testid=${testId}]`).$(`[data-testid=${DATATESTID.DATE_INPUTS.DAY}]`)
+      : $(`[data-testid=${DATATESTID.DATE_INPUTS.DAY}]`);
+  }
+
+  static async getYearInput(testId) {
+    return testId
+      ? $(`[data-testid=${testId}]`).$(`[data-testid=${DATATESTID.DATE_INPUTS.YEAR}]`)
+      : $(`[data-testid=${DATATESTID.DATE_INPUTS.YEAR}]`);
+  }
+
+  // TIME INPUTS
+  static async getHourInput(testId) {
+    return testId
+      ? $(`[data-testid=${testId}]`).$(`[data-testid=${DATATESTID.TIME_INPUTS.HOUR}]`)
+      : $(`[data-testid=${DATATESTID.TIME_INPUTS.HOUR}]`);
+  }
+
+  static async getMinutesInput(testId) {
+    return testId
+      ? $(`[data-testid=${testId}]`).$(`[data-testid=${DATATESTID.TIME_INPUTS.MINUTE}]`)
+      : $(`[data-testid=${DATATESTID.TIME_INPUTS.MINUTE}]`);
+  }
+
+  static async getMeridiemInput(testId) {
+    return testId
+      ? $(`[data-testid=${testId}]`).$(`[data-testid=${DATATESTID.TIME_INPUTS.MERIDIEM}]`)
+      : $(`[data-testid=${DATATESTID.TIME_INPUTS.MERIDIEM}]`);
+  }
+
+  // PICKER ICONS
+  static async getCalendarPickerBtn(testId) {
+    return testId
+      ? $(`[data-testid=${testId}]`).$(`[data-testid=${DATATESTID.PICKER_ICONS.CALENDAR}]`)
+      : $(`[data-testid=${DATATESTID.PICKER_ICONS.CALENDAR}]`);
+  }
+
+  static getTrigger = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-trigger-icon"]');
+
+  static getTimeWheelPickerBtn = async () => $(`[data-testid=${DATATESTID.PICKER_ICONS.TIMEWHEEL}]`);
+
+  static getCalendarTimeWheelPickerBtn = async () => $(`[data-testid=${DATATESTID.PICKER_ICONS.CALENDAR_TIMEWHEEL}]`);
+
+  // CALENDAR
+  static getCalendarHeaderLabel = async () => $(`[data-testid=${DATATESTID.CALENDAR.HEADER_LABEL}]`);
+
+  static getCalendarPrevYearBtn = async () => $(`[data-testid=${DATATESTID.CALENDAR.PREV_YEAR}]`);
+
+  static getCalendarPrevMonthBtn = async () => $(`[data-testid=${DATATESTID.CALENDAR.PREV_MONTH}]`);
+
+  static getCalendarNextMonthBtn = async () => $(`[data-testid=${DATATESTID.CALENDAR.NEXT_MONTH}]`);
+
+  static getCalendarNextYearBtn = async () => $(`[data-testid=${DATATESTID.CALENDAR.NEXT_YEAR}]`);
+
+  static getCalendarDay = async (value) => $(`//button[@data-testid="${DATATESTID.CALENDAR.DAY}"][text()="${value}"]`);
+
+  static getCalendarFocusedDay = async () => $(`[data-testid=${DATATESTID.CALENDAR.FOCUSED_DAY}]`);
+
+  static getCalendarStartRangeDay = async () => $(`[data-testid=${DATATESTID.CALENDAR.START_RANGE_DAY}]`);
+
+  static getCalendarInRangeDay = async () => $(`[data-testid=${DATATESTID.CALENDAR.IN_RANGE_DAY}]`);
+
+  static getCalendarEndRangeDay = async () => $(`[data-testid=${DATATESTID.CALENDAR.END_RANGE_DAY}]`);
+
+  static getCalendarSelectedDay = async () => $(`[data-testid=${DATATESTID.CALENDAR.SELECTED_DAY}]`);
+
+  static getCalendarSelectedFocusedDay = async () => $(`[data-testid=${DATATESTID.CALENDAR.SELECTED_FOCUSED_DAY}]`);
+
+  // TIMEWHEEL
+  static getTimeWheelHeaderLabel = async () => $(`[data-testid=${DATATESTID.TIMEWHEEL.HEADER_LABEL}]`);
+
+  static getTimeWheelPrevHour = async () => $(`[data-testid=${DATATESTID.TIMEWHEEL.PREV_HOUR}]`);
+
+  static getTimeWheelHour = async () => $(`[data-testid=${DATATESTID.TIMEWHEEL.HOUR}]`);
+
+  static getTimeWheelCurrentHour = async () => $(`[data-testid=${DATATESTID.TIMEWHEEL.CURRENT_HOUR}]`);
+
+  static getTimeWheelNextHour = async () => $(`[data-testid=${DATATESTID.TIMEWHEEL.NEXT_HOUR}]`);
+
+  static getTimeWheelPrevMinute = async () => $(`[data-testid=${DATATESTID.TIMEWHEEL.PREV_MINUTE}]`);
+
+  static getTimeWheelMinute = async (value) =>
+    $(`//button[@data-testid="${DATATESTID.TIMEWHEEL.MINUTE}"][text()="${value}"]`);
+
+  static getTimeWheelCurrentMinute = async () => $(`[data-testid=${DATATESTID.TIMEWHEEL.CURRENT_MINUTE}]`);
+
+  static getTimeWheelNextMinute = async () => $(`[data-testid=${DATATESTID.TIMEWHEEL.NEXT_MINUTE}]`);
+
+  static getTimeWheelPrevMeridiem = async () => $(`[data-testid=${DATATESTID.TIMEWHEEL.PREV_MERIDIEM}]`);
+
+  static getTimeWheelMeridiem = async () => $(`[data-testid=${DATATESTID.TIMEWHEEL.MERIDIEM}]`);
+
+  static getTimeWheelCurrentMeridiem = async () => $(`[data-testid=${DATATESTID.TIMEWHEEL.CURRENT_MERIDIEM}]`);
+
+  static getTimeWheelNextMeridiem = async () => $(`[data-testid=${DATATESTID.TIMEWHEEL.NEXT_MERIDIEM}]`);
+
+  // CONTEXTUAL MENU
+  static getContextualMenuCalendar = async () => $(`[data-testid=${DATATESTID.CONTEXTUAL_MENU.CALENDAR}]`);
+
+  static getContextualMenuTimeWheel = async () => $(`[data-testid=${DATATESTID.CONTEXTUAL_MENU.TIMEWHEEL}]`);
+
+  static getContextualMenuCalendarTimeWheel = async () =>
+    $(`[data-testid=${DATATESTID.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}]`);
+
+  // CLEAR BTN
+  static async getClearBtn(testId) {
+    return testId
+      ? $(`[data-testid=${testId}]`).$(`[data-testid=${DATATESTID.CLEAR_BUTTON}]`)
+      : $(`[data-testid=${DATATESTID.CLEAR_BUTTON}]`);
+  }
+
+  // FOOTERS
+  static getFooterCalendar = async () => $(`[data-testid=${DATATESTID.FOOTERS.CALENDAR}]`);
+
+  static getFooterTimeWheel = async () => $(`[data-testid=${DATATESTID.FOOTERS.TIMEWHEEL}]`);
+
+  static getFooterCalendarTimeWheel = async () => $(`[data-testid=${DATATESTID.FOOTERS.CALENDAR_TIMEWHEEL}]`);
+
+  // CONTROLLER COMPONENT
+  static getControllerCalendar = async () => $(`[data-testid=${DATATESTID.CONTROLLER_COMPONENT.CALENDAR}]`);
+
+  static getControllerTimeWheel = async () => $(`[data-testid=${DATATESTID.CONTROLLER_COMPONENT.TIMEWHEEL}]`);
+
+  static getControllerCalendarTimeWheel = async () =>
+    $(`[data-testid=${DATATESTID.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL}]`);
+
+  static getChangeInputTypeBtns = async () => $$('[data-testid="ds-button"]');
+
+  static getChangeInputByIndex = async (index) => getElementByIndex(this.getChangeInputTypeBtns, index);
+
+  static pressBackspace = async (number) => {
+    for (let x = 0; x < number; x += 1) {
+      browser.keys(Key.Backspace);
+      browser.pause(100);
+    }
+  };
+
+  // SCREENSHOT
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSControlledDateTimePicker', example, 'ds-controlled-date-time-picker');
+  }
+}

package/ds-controlled-form/ds-controlled-date-time-picker/date-input/DateInput.auto-advance.func.spec.js

@@ -0,0 +1,137 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import { type } from '../../../helpers';
+import DateTimePickerCO from '../DSControlledDateTimePickerCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6673 - DSControlledDateTimePicker:: DateInput: auto-advance', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DateTimePickerCO.dateInput.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should not auto-advance to day input - Enter "1"', async () => {
+      const month = await DateTimePickerCO.getMonthInput('date-input');
+      const day = await DateTimePickerCO.getDayInput('date-input');
+      const year = await DateTimePickerCO.getYearInput('date-input');
+
+      await browser.keys(Key.Tab);
+      await type('1');
+      await expect(month).toHaveValueContaining('1');
+      await expect(day).toHaveValueContaining('');
+      await expect(year).toHaveValueContaining('');
+      await expect(month).toBeFocused();
+    });
+    it('02: should auto-advance to day input - Enter "01"', async () => {
+      const month = await DateTimePickerCO.getMonthInput('date-input');
+      const day = await DateTimePickerCO.getDayInput('date-input');
+      const year = await DateTimePickerCO.getYearInput('date-input');
+
+      await browser.keys(Key.Tab);
+      await type('01');
+      await expect(month).toHaveValueContaining('01');
+      await expect(day).toHaveValueContaining('');
+      await expect(year).toHaveValueContaining('');
+      await expect(day).toBeFocused();
+    });
+    it('03: should auto-advance to day input Enter "12"', async () => {
+      const month = await DateTimePickerCO.getMonthInput('date-input');
+      const day = await DateTimePickerCO.getDayInput('date-input');
+      const year = await DateTimePickerCO.getYearInput('date-input');
+
+      await browser.keys(Key.Tab);
+      await type('12');
+      await expect(month).toHaveValueContaining('12');
+      await expect(day).toHaveValueContaining('');
+      await expect(year).toHaveValueContaining('');
+      await expect(day).toBeFocused();
+    });
+    it('04: should auto-advance to day input Enter "05"', async () => {
+      const month = await DateTimePickerCO.getMonthInput('date-input');
+      const day = await DateTimePickerCO.getDayInput('date-input');
+      const year = await DateTimePickerCO.getYearInput('date-input');
+
+      await browser.keys(Key.Tab);
+      await type('05');
+      await expect(month).toHaveValueContaining('05');
+      await expect(day).toHaveValueContaining('');
+      await expect(year).toHaveValueContaining('');
+      await expect(day).toBeFocused();
+    });
+    it('05: should not auto-advance to year input Enter "2"', async () => {
+      const month = await DateTimePickerCO.getMonthInput('date-input');
+      const day = await DateTimePickerCO.getDayInput('date-input');
+      const year = await DateTimePickerCO.getYearInput('date-input');
+
+      await browser.keys(Key.Tab);
+      await type('12');
+      await type('2');
+      await expect(month).toHaveValueContaining('12');
+      await expect(day).toHaveValueContaining('2');
+      await expect(year).toHaveValueContaining('');
+      await expect(day).toBeFocused();
+    });
+    it('06: should auto-advance to year input Enter "01"', async () => {
+      const month = await DateTimePickerCO.getMonthInput('date-input');
+      const day = await DateTimePickerCO.getDayInput('date-input');
+      const year = await DateTimePickerCO.getYearInput('date-input');
+
+      await browser.keys(Key.Tab);
+      await type('12');
+      await type('01');
+      await expect(month).toHaveValueContaining('12');
+      await expect(day).toHaveValueContaining('01');
+      await expect(year).toHaveValueContaining('');
+      await expect(year).toBeFocused();
+    });
+    it('07: should auto-advance to year input Enter "31"', async () => {
+      const month = await DateTimePickerCO.getMonthInput('date-input');
+      const day = await DateTimePickerCO.getDayInput('date-input');
+      const year = await DateTimePickerCO.getYearInput('date-input');
+
+      await browser.keys(Key.Tab);
+      await type('12');
+      await type('31');
+      await expect(month).toHaveValueContaining('12');
+      await expect(day).toHaveValueContaining('31');
+      await expect(year).toHaveValueContaining('');
+      await expect(year).toBeFocused();
+    });
+    it('08: should auto-advance to clear btn Enter "2030"', async () => {
+      const month = await DateTimePickerCO.getMonthInput('date-input-clearable');
+      const day = await DateTimePickerCO.getDayInput('date-input-clearable');
+      const year = await DateTimePickerCO.getYearInput('date-input-clearable');
+      const clearBtn = await DateTimePickerCO.getClearBtn('date-input-clearable');
+
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await type('12');
+      await type('31');
+      await type('2030');
+      await expect(month).toHaveValueContaining('12');
+      await expect(day).toHaveValueContaining('31');
+      await expect(year).toHaveValueContaining('2030');
+      await expect(clearBtn).toBeFocused();
+    });
+    it('09: should auto-complete year - Enter "745"', async () => {
+      const month = await DateTimePickerCO.getMonthInput('date-input-clearable');
+      const day = await DateTimePickerCO.getDayInput('date-input-clearable');
+      const year = await DateTimePickerCO.getYearInput('date-input-clearable');
+      const clearBtn = await DateTimePickerCO.getClearBtn('date-input-clearable');
+
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await type('12');
+      await type('31');
+      await type('745');
+      await browser.keys(Key.Tab);
+      await expect(month).toHaveValueContaining('12');
+      await expect(day).toHaveValueContaining('31');
+      await expect(year).toHaveValueContaining('7450');
+      await expect(clearBtn).toBeFocused();
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-date-time-picker/date-input/DateInput.func.spec.js

@@ -0,0 +1,101 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DateTimePickerCO from '../DSControlledDateTimePickerCO';
+import { type } from '../../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7255 - DSControlledDateTimePicker:: DateInput basic', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DateTimePickerCO.dateOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should complete correctly date', async () => {
+      const month = await DateTimePickerCO.getMonthInput();
+      const day = await DateTimePickerCO.getDayInput();
+      const year = await DateTimePickerCO.getYearInput();
+
+      await browser.keys(Key.Tab);
+      await type('02032020');
+      await expect(month).toHaveValueContaining('02');
+      await expect(day).toHaveValueContaining('03');
+      await expect(year).toHaveValueContaining('2020');
+      await expect(year).toBeFocused();
+    });
+  });
+  describe('PUI-7256 - DSControlledDateTimePicker:: DateInput clearable', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DateTimePickerCO.clearable.go();
+      if (errorOnGo) throw errorOnGo;
+      await (await DateTimePickerCO.getButton('date-inputs')).click();
+    });
+    it('01: clear button should not be displayed', async () => {
+      const clearBtn = await DateTimePickerCO.getClearBtn();
+      await expect(clearBtn).not.toBeDisplayedInViewport();
+    });
+    it('02: should complete correctly day and clear btn should be focused', async () => {
+      const month = await DateTimePickerCO.getMonthInput();
+      const day = await DateTimePickerCO.getDayInput();
+      const year = await DateTimePickerCO.getYearInput();
+      const clearBtn = await DateTimePickerCO.getClearBtn();
+
+      await month.click();
+      await type('02');
+      await expect(month).toHaveValueContaining('02');
+      await expect(day).toBeFocused();
+      await expect(clearBtn).toBeDisplayedInViewport();
+      await type('03');
+      await expect(day).toHaveValueContaining('03');
+      await expect(year).toBeFocused();
+      await type('2020');
+      await expect(year).toHaveValueContaining('2020');
+      await expect(clearBtn).toBeFocused();
+    });
+    it('03: should clear correctly date and focus return to month input', async () => {
+      const month = await DateTimePickerCO.getMonthInput();
+      const day = await DateTimePickerCO.getDayInput();
+      const year = await DateTimePickerCO.getYearInput();
+      const clearBtn = await DateTimePickerCO.getClearBtn();
+
+      await browser.keys(Key.Enter);
+      await expect(month).toHaveValueContaining('');
+      await expect(day).toHaveValueContaining('');
+      await expect(year).toHaveValueContaining('');
+      await expect(month).toBeFocused();
+      await expect(clearBtn).not.toBeDisplayedInViewport();
+    });
+    // eslint-disable-next-line max-len
+    it('04: should change to time input and complete hours, minutes and merifieand, clear btn should be focused', async () => {
+      const timeInputBtn = await DateTimePickerCO.getChangeInputByIndex(2);
+      await timeInputBtn.click();
+      const hour = await DateTimePickerCO.getHourInput();
+      const minute = await DateTimePickerCO.getMinutesInput();
+      const meridiem = await DateTimePickerCO.getMeridiemInput();
+      const clearBtn = await DateTimePickerCO.getClearBtn();
+
+      await hour.click();
+      await type('02');
+      await expect(hour).toHaveValueContaining('02');
+      await expect(minute).toBeFocused();
+      await expect(clearBtn).toBeDisplayedInViewport();
+      await type('03');
+      await expect(minute).toHaveValueContaining('03');
+      await expect(meridiem).toBeFocused();
+      await type('A');
+      await expect(meridiem).toHaveValueContaining('A');
+      await expect(clearBtn).toBeFocused();
+    });
+    it('05: should clear correctly time and focus return to hour input', async () => {
+      const hour = await DateTimePickerCO.getHourInput();
+      const minute = await DateTimePickerCO.getMinutesInput();
+      const meridiem = await DateTimePickerCO.getMeridiemInput();
+      const clearBtn = await DateTimePickerCO.getClearBtn();
+
+      await browser.keys(Key.Enter);
+      await expect(hour).toHaveValueContaining('');
+      await expect(minute).toHaveValueContaining('');
+      await expect(meridiem).toHaveValueContaining('');
+      await expect(hour).toBeFocused();
+      await expect(clearBtn).not.toBeDisplayedInViewport();
+    });
+  });
+}