dimsum-e2e-tests 3.50.1-next.9 → 3.51.0-beta.2

package/ds-controlled-form/ds-controlled-date-range-picker/DSControlledDateRangePicker.functional.spec.js

@@ -0,0 +1,242 @@
+/* eslint-disable max-lines */
+import DSControlledDateRangePickerCO from './DSControlledDateRangePickerCO';
+import { Key } from 'webdriverio';
+import { type } from '../../helpers';
+import DSFormLayoutBlockItemCO from '../../ds-form-layout-blocks/form-layout-block-item/DSFormLayoutBlockItemCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-14860 - DSControlledDateRangePicker:: Basic -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should pupulate input', async () => {
+      await browser.keys(Key.Tab);
+      await type('02032020');
+      await browser.keys(Key.Tab);
+      await type('02082020');
+      const startingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(0);
+      const startingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(0);
+      const startingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(0);
+      const endingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(1);
+      const endingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(1);
+      const endingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(1);
+      await expect(startingMonth).toHaveValueContaining('02');
+      await expect(startingDay).toHaveValueContaining('03');
+      await expect(startingYear).toHaveValueContaining('2020');
+      await expect(endingMonth).toHaveValueContaining('02');
+      await expect(endingDay).toHaveValueContaining('08');
+      await expect(endingYear).toHaveValueContaining('2020');
+      await expect(endingYear).toBeFocused();
+    });
+    it('02: should have the input date selected on calendar', async () => {
+      const openPickerBtn = await DSControlledDateRangePickerCO.getPickerBtn();
+      await openPickerBtn.click();
+      const startDate = await DSControlledDateRangePickerCO.getRangeStartDay();
+      const endDate = await DSControlledDateRangePickerCO.getRangeEndDay();
+      await expect(startDate).toHaveAttribute('aria-label', 'February third 2020, Monday');
+      await expect(endDate).toHaveAttribute('aria-label', 'February eighth 2020, Saturday');
+    });
+    it('03: should change the text input to the picked date (mouse)', async () => {
+      const exampleDate1 = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(16);
+      await exampleDate1.click();
+      const exampleDate2 = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(20);
+      await exampleDate2.click();
+      const startingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(0);
+      const startingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(0);
+      const startingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(0);
+      const endingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(1);
+      const endingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(1);
+      const endingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(1);
+      await expect(startingMonth).toHaveValueContaining('02');
+      await expect(startingDay).toHaveValueContaining('07');
+      await expect(startingYear).toHaveValueContaining('2020');
+      await expect(endingMonth).toHaveValueContaining('02');
+      await expect(endingDay).toHaveValueContaining('09');
+      await expect(endingYear).toHaveValueContaining('2020');
+    });
+    it('04: should change the text input to the picked date (KB)', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.Space);
+      const startingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(0);
+      const startingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(0);
+      const startingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(0);
+      const endingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(1);
+      const endingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(1);
+      const endingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(1);
+      await expect(startingMonth).toHaveValueContaining('02');
+      await expect(startingDay).toHaveValueContaining('14');
+      await expect(startingYear).toHaveValueContaining('2020');
+      await expect(endingMonth).toHaveValueContaining('02');
+      await expect(endingDay).toHaveValueContaining('16');
+      await expect(endingYear).toHaveValueContaining('2020');
+    });
+  });
+
+  describe('PUI-14861 - DSControlledDateRangePicker:: Disabled -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should not be able to trigger/focus disabled date range picker', async () => {
+      const openPickerBtn = await DSControlledDateRangePickerCO.getPickerBtn();
+      await openPickerBtn.click();
+      const calendar = await DSControlledDateRangePickerCO.getDayOnCalendarWrapper();
+      await expect(openPickerBtn).toHaveAttribute('disabled', 'true');
+      await expect(calendar).not.toBeDisplayedInViewport();
+    });
+    it('02: should not be able to focus disabled date range picker', async () => {
+      await browser.keys(Key.Tab);
+      const monthInput = await DSControlledDateRangePickerCO.getMonthInput();
+      await expect(monthInput).not.toBeFocused();
+    });
+  });
+
+  describe('PUI-14856 - DSControlledDateRangePicker:: Clearable -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.clearable.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have clearable date range pickers w/o clear button since theyre empty', async () => {
+      const openPickerBtn = await DSControlledDateRangePickerCO.getPickerBtn();
+      await openPickerBtn.waitForDisplayed();
+      const clearableBtn = await DSControlledDateRangePickerCO.getClearableByIndex(0);
+      await expect(clearableBtn).not.toBeDisplayedInViewport();
+    });
+    it('02: should populate one input and show only one clearable btn', async () => {
+      await browser.keys(Key.Tab);
+      await type('02032020');
+      const clearableStart = await DSControlledDateRangePickerCO.getClearableByIndex(0);
+      const clearableEnd = await DSControlledDateRangePickerCO.getClearableByIndex(1);
+      await expect(clearableStart).toBeDisplayedInViewport();
+      await expect(clearableEnd).not.toBeDisplayedInViewport();
+    });
+    it('03: should populate one input and show both clearable btns', async () => {
+      await browser.keys(Key.Tab);
+      await type('02032020');
+      const clearableStart = await DSControlledDateRangePickerCO.getClearableByIndex(0);
+      const clearableEnd = await DSControlledDateRangePickerCO.getClearableByIndex(1);
+      await expect(clearableStart).toBeDisplayedInViewport();
+      await expect(clearableEnd).toBeDisplayedInViewport();
+    });
+    it('04: should clear both inputs (one with mouse one with keyboard)', async () => {
+      await browser.keys(Key.Space);
+      const clearableBtn = await DSControlledDateRangePickerCO.getClearableByIndex(0);
+      await clearableBtn.click();
+      const startingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(0);
+      const startingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(0);
+      const startingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(0);
+      const endingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(1);
+      const endingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(1);
+      const endingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(1);
+      await expect(startingMonth).toHaveValueContaining('');
+      await expect(startingDay).toHaveValueContaining('');
+      await expect(startingYear).toHaveValueContaining('');
+      await expect(endingMonth).toHaveValueContaining('');
+      await expect(endingDay).toHaveValueContaining('');
+      await expect(endingYear).toHaveValueContaining('');
+    });
+  });
+
+  describe('PUI-14864 - DSControlledDateRangePicker:: Invalid selection -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.invalidSelection.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have invalid date range picker', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      const errorMessage = DSFormLayoutBlockItemCO.getErrorMessage();
+      const firstInput = await DSControlledDateRangePickerCO.getMonthInputByIndex(0);
+      await expect(firstInput).toHaveAttribute('aria-invalid', 'true');
+      await expect(errorMessage).toBeDisplayedInViewport();
+    });
+    it('02: should change the error message for feedback message after fixing the error', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.click();
+      const exampleDate1 = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(10);
+      await exampleDate1.click();
+      const exampleDate2 = await DSControlledDateRangePickerCO.getInRangeDayByIndex(2);
+      await exampleDate2.click();
+      const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessage();
+      const feedbackMessage = await DSFormLayoutBlockItemCO.getFeedbackMessage();
+      const firstInput = await DSControlledDateRangePickerCO.getMonthInputByIndex(0);
+      await expect(firstInput).toHaveAttribute('aria-invalid', 'false');
+      await expect(errorMessage).not.toBeDisplayedInViewport();
+      await expect(feedbackMessage).toBeDisplayedInViewport();
+    });
+  });
+
+  describe('PUI-14863 - DSControlledDateRangePicker:: TabStops & Nav -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.clearable.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should tab and have first input focused', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      const monthInput = await DSControlledDateRangePickerCO.getMonthInput();
+      await expect(monthInput).toBeFocused();
+    });
+    it('02: should move to the next input after populating the current one', async () => {
+      await type('10');
+      const dayInput = await DSControlledDateRangePickerCO.getDayInput();
+      await expect(dayInput).toBeFocused();
+    });
+    it('03: should tab to clearable button', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys([Key.Shift, Key.Tab]);
+      const clearableBtn = await DSControlledDateRangePickerCO.getClearableByIndex(0);
+      await expect(clearableBtn).toBeFocused();
+    });
+    it('04: should tab through next input to picker trigger', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const clearableBtn = await DSControlledDateRangePickerCO.getPickerBtn();
+      await expect(clearableBtn).toBeFocused();
+    });
+    it('05: should open trigger and have first navigation button focused', async () => {
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      const prevMonthBtn = await DSControlledDateRangePickerCO.getPrevMonthBtn();
+      const calendarLabel = await (await DSControlledDateRangePickerCO.getCalendarHeaderLabel()).getText();
+      await expect(calendarLabel).toEqual('September 2000');
+      await expect(prevMonthBtn).toBeFocused();
+    });
+    it('06: should tab through navigation buttons to last one', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      const nextYearBtn = await DSControlledDateRangePickerCO.getNextYearBtn();
+      const calendarLabel = await (await DSControlledDateRangePickerCO.getCalendarHeaderLabel()).getText();
+      await expect(calendarLabel).toEqual('September 2001');
+      await expect(nextYearBtn).toBeFocused();
+    });
+    it('07: should tab and navigate using header controllers with KB', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys(Key.Return);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys(Key.Return);
+      const nextYearBtn = await DSControlledDateRangePickerCO.getNextMonthBtn();
+      const calendarLabel = await (await DSControlledDateRangePickerCO.getCalendarHeaderLabel()).getText();
+      await expect(calendarLabel).toEqual('October 2000');
+      await expect(nextYearBtn).toBeFocused();
+    });
+    it('08: should tab to calendar and have day focused', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const focusedDay = await DSControlledDateRangePickerCO.getFocusedDay();
+      await expect(focusedDay).toBeFocused();
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-date-range-picker/DSControlledDateRangePicker.visual.spec.js

@@ -0,0 +1,115 @@
+import { Key } from 'webdriverio';
+import DSControlledDateRangePickerCO from './DSControlledDateRangePickerCO';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-9219 - DSControlledDateRangePicker:: Basic -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display contr. date range picker empty and closed', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-empty'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display contr. date range picker open and with 1 date selected', async () => {
+      await browser.eyesOpen();
+      const openDatePicker = await DSControlledDateRangePickerCO.getPickerBtn();
+      await openDatePicker.click();
+      const day = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(10);
+      await day.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-one-date'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should display contr. date range picker open and with 2 dates selected', async () => {
+      await browser.eyesOpen();
+      const day = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(20);
+      await day.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-two-date'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('04: should display contr. date range picker open and with long range end', async () => {
+      await browser.eyesOpen();
+      const nextMonthArrow = await DSControlledDateRangePickerCO.getNextMonthBtn();
+      await nextMonthArrow.click();
+      const day = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(10);
+      await day.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-long-end'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('05: should display contr. date range picker open and with long range start', async () => {
+      await browser.eyesOpen();
+      const prevMonthArrow = await DSControlledDateRangePickerCO.getPrevMonthBtn();
+      await prevMonthArrow.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-long-start'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-14859 - DSControlledDateRangePicker:: Invalid selection -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.invalidSelection.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display invalid date range picker with closed calendar matching baseline', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-invalid-close'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display invalid date range picker with expanded calendar matching baseline', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-invalid-open'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-14858 - DSControlledDateRangePicker:: Disabled -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display disabled date range picker and matching baseline', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-disabled'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-14857 - DSControlledDateRangePicker:: Clearable  -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.clearable.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display two clearable inputs. One populated, one empty', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await type('02032020');
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-clearable'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-date-range-picker/DSControlledDateRangePickerCO.js

@@ -1,10 +1,22 @@
 /* eslint-disable import/no-relative-packages */
 /* eslint-disable max-lines */
-import { PATH_E2E_CONTROLLEDFORM } from '../../../environments/storybook/paths';
+import { PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER } from '../../../environments/storybook/paths';
 import { PageObject, Urlbuilder, getElementByIndex } from '../../helpers';
 
 export default class DSControlledDateRangePickerCO extends PageObject {
-  static basic = new Urlbuilder(PATH_E2E_CONTROLLEDFORM, 'basic-date-range');
+  static basic = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'basic-test');
+
+  static clearable = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'clearable-test');
+
+  static invalidSelection = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'invalid-selection-test');
+
+  static fullFeatures = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'full-features-test');
+
+  static disabled = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'disabled-test');
+
+  static withValidation = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'example-with-validation-test');
+
+  static readOnly = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'read-only-test');
 
   // Story elements
 
@@ -12,6 +24,10 @@ export default class DSControlledDateRangePickerCO extends PageObject {
 
   static getPrevMonthBtn = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-prev-month"]');
 
+  static getNextYearBtn = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-next-year"]');
+
+  static getPrevYearBtn = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-prev-year"]');
+
   // DateInput
   static getMonthInput = async () => $('[data-testid="ds-controlled-date-time-picker-month-input"]');
 
@@ -19,6 +35,20 @@ export default class DSControlledDateRangePickerCO extends PageObject {
 
   static getYearInput = async () => $('[data-testid="ds-controlled-date-time-picker-year-input"]');
 
+  static getMonthInputByIndex = async (index = 0) =>
+    $$('[data-testid="ds-controlled-date-time-picker-month-input"]')[index];
+
+  static getDayInputByIndex = async (index = 0) =>
+    $$('[data-testid="ds-controlled-date-time-picker-day-input"]')[index];
+
+  static getYearInputByIndex = async (index = 0) =>
+    $$('[data-testid="ds-controlled-date-time-picker-year-input"]')[index];
+
+  static getClearableBtns = async () => $$(`[data-testid="ds-controlled-date-time-picker-clear-btn"]`);
+
+  static getClearableByIndex = async (index = 0) =>
+    $$(`[data-testid="ds-controlled-date-time-picker-clear-btn"]`)[index];
+
   // TimeInput
   static getHourInput = async () => $('[data-testid="ds-controlled-date-time-picker-hour-input"]');
 
@@ -30,6 +60,9 @@ export default class DSControlledDateRangePickerCO extends PageObject {
 
   static getDayOnCalendarByIndex = async (index) => getElementByIndex(this.getDaysOnCalendar, index);
 
+  static getInRangeDayByIndex = async (index = 0) =>
+    $$('[data-testid="ds-controlled-date-time-picker-calendar-in-range-day"]')[index];
+
   // Picker
   static getPickerBtn = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-trigger-icon"]');
 
@@ -44,7 +77,28 @@ export default class DSControlledDateRangePickerCO extends PageObject {
     return $(`[data-testid="ds-controlled-date-time-picker-timewheel-minute"]=${value}`);
   }
 
+  static async getRangeStartDay() {
+    return $(`[data-testid="ds-controlled-date-time-picker-calendar-start-range-day"]`);
+  }
+
+  static async getRangeEndDay() {
+    return $(`[data-testid="ds-controlled-date-time-picker-calendar-end-range-day"]`);
+  }
+
+  static async getFocusedDay() {
+    return $(`[data-testid="ds-controlled-date-time-picker-calendar-focused-day"]`);
+  }
+
   // Calendar
+
+  static async getDayOnCalendarWrapper() {
+    return $(`[data-testid="ds-controlled-date-time-picker-calendar-context-content-wrapper"]`);
+  }
+
+  static async getCalendarHeaderLabel() {
+    return $(`[data-testid="ds-controlled-date-time-picker-calendar-header-label"]`);
+  }
+
   // Time Wheel
   // Screenshots
   static snapshotPath(example = 'basic') {

package/ds-controlled-form/ds-controlled-date-range-picker/read-only/DSControlledDateRangePicker.ReadOnly.axe-core.spec.js

@@ -0,0 +1,17 @@
+import DSControlledDateRangePickerCO from '../DSControlledDateRangePickerCO';
+import { axeCoreCheck } from '../../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-15082  - DSControlledDateRangePicker:: ReadOnly -AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.readOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display a readOnly dateRangePicker with the calendar opened and pass axe-core scan', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -84,6 +84,18 @@ export default class DSDateTimePickerCO extends PageObject {
     'custom-aria-and-data-attributes-test',
   );
 
+  static dateInputReadOnly = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER, 'date-input-read-only');
+
+  static dateFullReadOnly = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER, 'date-full-read-only');
+
+  static dateTimeInputReadOnly = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER, 'date-time-input-read-only');
+
+  static dateTimeFullReadOnly = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER, 'date-time-full-read-only');
+
+  static timeInputReadOnly = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER, 'time-input-read-only');
+
+  static timeFullReadOnly = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_TIME_PICKER, 'time-full-read-only');
+
   // Story elements
   static getButton = async (text) => $(`button*=${text}`);
 

package/ds-controlled-form/ds-controlled-date-time-picker/date-full/DateFull.axe-core.func.spec.js

@@ -0,0 +1,27 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable max-len */
+/* eslint-disable max-lines */
+import { axeCoreCheck } from '../../../helpers';
+import DateTimePickerCO from '../DSControlledDateTimePickerCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-15078 - DateFull:: ReadOnly - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DateTimePickerCO.dateFullReadOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display a date full with readOnly and pass axe-core scan', async () => {
+      const picker = await DateTimePickerCO.getCalendarPickerBtn();
+      await picker.click();
+      const calendar = await DateTimePickerCO.getControllerCalendar();
+      await calendar.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -0,0 +1,27 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable max-len */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import { axeCoreCheck } from '../../../helpers';
+import DateTimePickerCO from '../DSControlledDateTimePickerCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-15077 - DateInput:: ReadOnly - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DateTimePickerCO.dateInputReadOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display a date input with readOnly and pass axe-core scan', async () => {
+      const month = await DateTimePickerCO.getMonthInput();
+      await month.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-date-time-picker/date-time-full/DateTimeFull.axe-core.func.spec.js

@@ -0,0 +1,27 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable max-len */
+/* eslint-disable max-lines */
+import { axeCoreCheck } from '../../../helpers';
+import DateTimePickerCO from '../DSControlledDateTimePickerCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-15082 - DateTimeFull:: ReadOnly - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DateTimePickerCO.dateTimeFullReadOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display a date time full with readOnly and pass axe-core scan', async () => {
+      const picker = await DateTimePickerCO.getCalendarTimeWheelPickerBtn();
+      await picker.click();
+      const calendar = await DateTimePickerCO.getControllerCalendarTimeWheel();
+      await calendar.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-date-time-picker/date-time-input/DateTimeInput.axe-core.func.spec.js

@@ -0,0 +1,27 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable max-len */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import { axeCoreCheck } from '../../../helpers';
+import DateTimePickerCO from '../DSControlledDateTimePickerCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-15081 - DateTimeInput:: ReadOnly - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DateTimePickerCO.dateTimeInputReadOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display a date time input with readOnly and pass axe-core scan', async () => {
+      const month = await DateTimePickerCO.getMonthInput();
+      await month.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-date-time-picker/time-full/TimeFull.axe-core.func.spec.js

@@ -0,0 +1,27 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable max-len */
+/* eslint-disable max-lines */
+import { axeCoreCheck } from '../../../helpers';
+import DateTimePickerCO from '../DSControlledDateTimePickerCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-15080 - TimeFull:: ReadOnly - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DateTimePickerCO.timeFullReadOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display a time full with readOnly and pass axe-core scan', async () => {
+      const picker = await DateTimePickerCO.getTimeWheelPickerBtn();
+      await picker.click();
+      const calendar = await DateTimePickerCO.getContextualMenuTimeWheel();
+      await calendar.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-date-time-picker/time-input/TimeInput.axe-core.func.spec.js

@@ -0,0 +1,27 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable max-len */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import { axeCoreCheck } from '../../../helpers';
+import DateTimePickerCO from '../DSControlledDateTimePickerCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-15079 - TimeInput:: ReadOnly - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DateTimePickerCO.timeInputReadOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display a time input with readOnly and pass axe-core scan', async () => {
+      const hour = await DateTimePickerCO.getHourInput();
+      await hour.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}