dimsum-e2e-tests 3.22.0-next.36

package/ds-date-time-picker/DSDateTimePicker.func.spec.js

@@ -0,0 +1,210 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DateTimePickerCO from './DateTimePickerCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-3998 - DateTimePicker - persist values', () => {
+    before(async () => {
+      const errorOnGo = await DateTimePickerCO.persistTimeValue.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should be persist value', async () => {
+      const day = '16';
+      const dateTimePickerBtn = await DateTimePickerCO.getDateTimePickerBtn();
+      await expect(dateTimePickerBtn).toBeDisplayed();
+      await (await DateTimePickerCO.getDateTimePickerBtn()).click();
+      await (await DateTimePickerCO.getDateTimePicker()).waitForDisplayed();
+      await (await DateTimePickerCO.getDayPicker(day)).click();
+      const dayValue = await (await DateTimePickerCO.getDay()).getValue();
+      await expect(dayValue).toBe(day);
+      await (await DateTimePickerCO.getHideBtn()).click();
+      await (await DateTimePickerCO.getShowBtn()).click();
+      const dayValue2 = await (await DateTimePickerCO.getDay()).getValue();
+      await expect(dayValue2).toBe(day);
+    });
+  });
+  describe('PUI-4218 - DateTimePicker - Initial state as undefined', () => {
+    before(async () => {
+      const errorOnGo = await DateTimePickerCO.undefinedDate.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should set date properly', async () => {
+      const day = '15';
+      const dateTimePickerBtn = await (await DateTimePickerCO.getDateTimePickerBtn()).isDisplayed();
+      await expect(dateTimePickerBtn).toBe(true);
+      await (await DateTimePickerCO.getDateTimePickerBtn()).click();
+      await (await DateTimePickerCO.getDateTimePicker()).waitForDisplayed();
+      await (await DateTimePickerCO.getDayPicker(day)).click();
+      const dayValue = await (await DateTimePickerCO.getDay()).getValue();
+      await expect(dayValue).toBe(day);
+      await (await DateTimePickerCO.getHideBtn()).click();
+      await (await DateTimePickerCO.getShowBtn()).click();
+      const dayValue2 = await (await DateTimePickerCO.getDay()).getValue();
+      await expect(dayValue2).toBe(day);
+    });
+  });
+  describe('PUI-4656 - DateTimePicker - Should not be able to select 12', () => {
+    before(async () => {
+      const errorOnGo = await DateTimePickerCO.invalidTime.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('12 is not selectable', async () => {
+      await (
+        await DateTimePickerCO.getDateTimePickerBtn()
+      ).waitForDisplayed({
+        timeout: 5000,
+      });
+      await (await DateTimePickerCO.getDateTimePickerBtn()).click();
+      await DateTimePickerCO.clickArrowDown(12);
+      const hours = await DateTimePickerCO.getHours();
+      await expect(hours).toHaveValue('11');
+    });
+  });
+  describe('PUI-4647 - DateTimePicker - 0 should be added automatically', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DateTimePickerCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('O1 is set as month', async () => {
+      await (await DateTimePickerCO.getMonth()).setValue('1');
+      await browser.keys(Key.Tab);
+      const month = await DateTimePickerCO.getMonth();
+      await expect(month).toHaveValue('01');
+    });
+    it('O5 is set as day', async () => {
+      await (await DateTimePickerCO.getDay()).setValue('5');
+      await browser.keys(Key.Tab);
+      const day = await DateTimePickerCO.getDay();
+      await expect(day).toHaveValue('05');
+    });
+    it('O5 is set as month', async () => {
+      await (await DateTimePickerCO.getMonth()).setValue('05');
+      await browser.keys(Key.Tab);
+      const month = await DateTimePickerCO.getMonth();
+      await expect(month).toHaveValue('05');
+    });
+    it('O9 is set as day', async () => {
+      await (await DateTimePickerCO.getDay()).setValue('09');
+      await browser.keys(Key.Tab);
+      const day = await DateTimePickerCO.getDay();
+      await expect(day).toHaveValue('09');
+    });
+    it('31 is set as month', async () => {
+      await (await DateTimePickerCO.getMonth()).setValue('31');
+      await browser.keys(Key.Tab);
+      const month = await DateTimePickerCO.getMonth();
+      await expect(month).toHaveValue('03');
+    });
+    it('61 is set as day', async () => {
+      await (await DateTimePickerCO.getDay()).setValue('61');
+      await browser.keys(Key.Tab);
+      const day = await DateTimePickerCO.getDay();
+      await expect(day).toHaveValue('06');
+    });
+  });
+  describe('PUI-5554 - DateTimePicker - Opening the calendar in a current blocked time', () => {
+    before(async () => {
+      const errorOnGo = await DateTimePickerCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should match time in picker and dateInput', async () => {
+      await (await DateTimePickerCO.getDateTimePickerBtn()).waitForDisplayed();
+      await (await DateTimePickerCO.getDateTimePickerBtn()).click();
+      await browser.pause(1000);
+      const timePickerHeader = await DateTimePickerCO.getTimePickerHeader();
+      const timePickerHeaderText = await timePickerHeader.getText();
+      const inputTime = await DateTimePickerCO.getSelectedTime();
+      await expect(inputTime).toBe(timePickerHeaderText);
+    });
+  });
+  describe('PUI-5597 - DateTimePicker - invalid date', () => {
+    before(async () => {
+      const errorOnGo = await DateTimePickerCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display invalid date on dateInput', async () => {
+      await (
+        await DateTimePickerCO.getDateTimePickerBtn()
+      ).waitForDisplayed({
+        timeout: 5000,
+      });
+      await (await DateTimePickerCO.getMonth()).setValue('0');
+      await browser.keys(Key.Tab);
+      await (await DateTimePickerCO.getDay()).setValue('0');
+      await browser.keys(Key.Tab);
+      await (await DateTimePickerCO.getYear()).setValue('0');
+      await browser.keys(Key.Tab);
+      const month = await DateTimePickerCO.getMonth();
+      const day = await DateTimePickerCO.getDay();
+      const year = await DateTimePickerCO.getYear();
+      await expect(month).toHaveValue('00');
+      await expect(day).toHaveValue('00');
+      await expect(year).toHaveValue('0000');
+    });
+  });
+  describe('PUI-4795 - DateTimePicker - minutes intervals', () => {
+    before(async () => {
+      const errorOnGo = await DateTimePickerCO.minutesIntervals.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should change minutes from 0 to 50', async () => {
+      await (await DateTimePickerCO.getDateTimePickerBtn()).waitForDisplayed();
+      await (await DateTimePickerCO.getDateTimePickerBtn()).click();
+      const arrowDown = await DateTimePickerCO.getMinutesArrowDown();
+      await arrowDown.waitForDisplayed();
+      await arrowDown.click();
+      let minutes = await DateTimePickerCO.getMinutes();
+      await expect(minutes).toHaveValue('10');
+      await arrowDown.click();
+      minutes = await DateTimePickerCO.getMinutes();
+      await expect(minutes).toHaveValue('20');
+      await arrowDown.click();
+      minutes = await DateTimePickerCO.getMinutes();
+      await expect(minutes).toHaveValue('30');
+      await arrowDown.click();
+      minutes = await DateTimePickerCO.getMinutes();
+      await expect(minutes).toHaveValue('40');
+      await arrowDown.click();
+      minutes = await DateTimePickerCO.getMinutes();
+      await expect(minutes).toHaveValue('50');
+    });
+    // to be unskiped when PUI-5785 is fixed
+    it('should disabled down arrow when reach last value', async () => {
+      const ariaDisabled = await (await DateTimePickerCO.getMinutesArrowDown()).getAttribute('aria-disabled');
+      await expect(ariaDisabled).toBe('true');
+    });
+    it('should maintain same date/time after close and open picker', async () => {
+      const dateTime = await DateTimePickerCO.getInputDateTime();
+      await (await DateTimePickerCO.getBody()).click();
+      let inputaDateTime = await DateTimePickerCO.getInputDateTime();
+      await expect(inputaDateTime).toBe(dateTime);
+      await (await DateTimePickerCO.getDateTimePickerBtn()).click();
+      inputaDateTime = await DateTimePickerCO.getInputDateTime();
+      await expect(inputaDateTime).toBe(dateTime);
+    });
+    it('should return minutes to 0', async () => {
+      const arrowUp = await DateTimePickerCO.getMinutesArrowUp();
+      await arrowUp.waitForDisplayed();
+      await arrowUp.click();
+      let minutes = await DateTimePickerCO.getMinutes();
+      await expect(minutes).toHaveValue('40');
+      await arrowUp.click();
+      minutes = await DateTimePickerCO.getMinutes();
+      await expect(minutes).toHaveValue('30');
+      await arrowUp.click();
+      minutes = await DateTimePickerCO.getMinutes();
+      await expect(minutes).toHaveValue('20');
+      await arrowUp.click();
+      minutes = await DateTimePickerCO.getMinutes();
+      await expect(minutes).toHaveValue('10');
+      await arrowUp.click();
+      minutes = await DateTimePickerCO.getMinutes();
+      await expect(minutes).toHaveValue('00');
+    });
+    it('should disabled up arrow when reach first value', async () => {
+      const ariaDisabled = await (await DateTimePickerCO.getMinutesArrowUp()).getAttribute('aria-disabled');
+      await expect(ariaDisabled).toBe('true');
+    });
+  });
+}

package/ds-date-time-picker/DateTimePickerCO.js

@@ -0,0 +1,140 @@
+/* eslint-disable no-await-in-loop */
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-lines */
+// eslint-disable-next-line import/no-relative-packages
+import { PATH_E2E_DATE_TIME_PICKER, PATH_END_OF_LIFE_DATE_TIME_PICKER } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DateTimePickerCO extends PageObject {
+  static persistTimeValue = new Urlbuilder(PATH_E2E_DATE_TIME_PICKER, 'persist-time-value');
+
+  static undefinedDate = new Urlbuilder(PATH_E2E_DATE_TIME_PICKER, 'undefined-date');
+
+  static basic = new Urlbuilder(PATH_END_OF_LIFE_DATE_TIME_PICKER, 'basic');
+
+  static invalidTime = new Urlbuilder(PATH_END_OF_LIFE_DATE_TIME_PICKER, 'invalid-time');
+
+  static minutesIntervals = new Urlbuilder(PATH_END_OF_LIFE_DATE_TIME_PICKER, 'minutes-intervals');
+
+  // selectors
+  static async getMonth() {
+    return $('[data-testid="month"]');
+  }
+
+  static async getDay() {
+    return $('[data-testid="day"]');
+  }
+
+  static async getYear() {
+    return $('[data-testid="year"]');
+  }
+
+  static async getHours() {
+    return $('[data-testid="ds-time-input__hours"]');
+  }
+
+  static async getMinutes() {
+    return $('[data-testid="ds-time-input__minutes"]');
+  }
+
+  static async getAmPm() {
+    return $('[data-testid="ds-time-input__ampm"]');
+  }
+
+  static async getDateTimePickerBtn() {
+    return $('[data-testid="btn-date-picker"]');
+  }
+
+  static async getDateTimePicker() {
+    return $('[data-testid="date-time-picker"]');
+  }
+
+  static async getDayPicker(day) {
+    return $$(`//div[text()=${day}]`)[1];
+  }
+
+  static async getHideBtn() {
+    return $('button*=HIDE');
+  }
+
+  static async getShowBtn() {
+    return $('button*=SHOW');
+  }
+
+  static async getHourPicker(hour) {
+    return $(`//div[@data-testid="hour-list"]/div[contains(text(),${hour})]`);
+  }
+
+  static async getHourArrowUp() {
+    return $('//div[contains(text(),"H")]//button[@aria-label="Chevron Up"]');
+  }
+
+  static async getHourArrowDown() {
+    return $('[data-testid="hour-chevron-down"]');
+  }
+
+  static async getMinutesPicker(minutes) {
+    return $(`//div[@data-testid="minutes-list"]/div[contains(text(),${minutes})]`);
+  }
+
+  static async getMinutesArrowUp() {
+    return $('//div[contains(text(),"M")]/ancestor::div[1]//button[@aria-label="Chevron Up"]');
+  }
+
+  static async getMinutesArrowDown() {
+    return $('[data-testid="minutes-chevron-down"]');
+  }
+
+  static async getTimePickerHeader() {
+    return $('.em-ds-time-picker-menu__header');
+  }
+
+  static async getSelectedHour() {
+    return $('//div[@data-testid="hour-list"]/div[contains(@class, "selected")]');
+  }
+
+  static async getSelectedMinutes() {
+    return $('//div[@data-testid="minutes-list"]/div[contains(@class, "selected")]');
+  }
+
+  static async getSelectedAMPM() {
+    return $('//div[@data-testid="meridiem-list"]/div[contains(@class, "selected")]');
+  }
+
+  static async getInputTime() {
+    const minutes = await (await this.getMinutes()).getValue();
+    const hour = await (await this.getHours()).getValue();
+    const ampm = await (await this.getAmPm()).getValue();
+    return `${hour}:${minutes}${ampm}`;
+  }
+
+  static async getSelectedTime() {
+    const minutes = await (await this.getSelectedMinutes()).getText();
+    const hour = await (await this.getSelectedHour()).getText();
+    const ampm = await (await this.getSelectedAMPM()).getText();
+    return `${hour}:${minutes}${ampm}`;
+  }
+
+  static async getInputDateTime() {
+    const day = await (await this.getDay()).getValue();
+    const month = await (await this.getMonth()).getValue();
+    const year = await (await this.getYear()).getValue();
+    const hours = await (await this.getHours()).getValue();
+    const minutes = await (await this.getMinutes()).getValue();
+    const ampm = await (await this.getAmPm()).getValue();
+    return `${month}/${day}/${year} ${hours}:${minutes} ${ampm}`;
+  }
+
+  static async getBody() {
+    return $('body');
+  }
+  // actions
+
+  static async clickArrowDown(times) {
+    for (let i = 0; i <= times; i += 1) {
+      const arrowDown = await this.getHourArrowDown();
+      await arrowDown.click();
+      await browser.pause(100);
+    }
+  }
+}

package/ds-dialog/DSDialog.cases.visual.spec.js

@@ -0,0 +1,122 @@
+import { Key } from 'webdriverio';
+import DSDialog from './DSDialogCO';
+import { FiltersCO } from '../ds-data-table-async/components';
+import { type } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7956 - DSDialog, long body content -visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDialog.longBodyContent.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display long body content DSDialog correctly', async () => {
+      const triggerBtn = await DSDialog.getTriggerBtn();
+      await triggerBtn.click();
+      const dialog = await DSDialog.getDialog();
+      await dialog.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSDialog.snapshotPath('dialog-longbody-layout'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-7964 - DSDialog, Decision variants -visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDialog.decisionURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display decision DSDialog correctly with discard save', async () => {
+      const triggerBtn = await DSDialog.getTriggerBtnByIndex(0);
+      await triggerBtn.click();
+      const dialog = await DSDialog.getDialog();
+      await dialog.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSDialog.snapshotPath('dialog-decision-discardsave'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display decision DSDialog correctly with close discard save', async () => {
+      await browser.keys(Key.Escape);
+      const triggerBtn = await DSDialog.getTriggerBtnByIndex(1);
+      await triggerBtn.click();
+      const dialog = await DSDialog.getDialog();
+      await dialog.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSDialog.snapshotPath('dialog-decision-closediscardsave'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display decision DSDialog correctly with close save', async () => {
+      await browser.keys(Key.Escape);
+      const triggerBtn = await DSDialog.getTriggerBtnByIndex(2);
+      await triggerBtn.click();
+      const dialog = await DSDialog.getDialog();
+      await dialog.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSDialog.snapshotPath('dialog-decision-closesave'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-7962 - DSDialog, scrolled content -visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDialog.scrollBodyContent.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display scrolled DSDialog correctly', async () => {
+      const triggerBtn = await DSDialog.getTriggerBtn();
+      await triggerBtn.click();
+      const dialog = await DSDialog.getDialog();
+      await dialog.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      const snapshot = await browser.checkSnapshot(DSDialog.snapshotPath('dialog-scrolled'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8284 - DSDialog, With popover -visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDialog.withPopperjs.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should render popover within dialog', async () => {
+      const triggerBtn = await DSDialog.getOpenDialogBtn();
+      await triggerBtn.click();
+      const openPopoverBtn = await DSDialog.getBtnsByIndex(3);
+      await openPopoverBtn.click();
+      const snapshot = await browser.checkSnapshot(DSDialog.snapshotPath('dialog-withpopper'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should render with portal within dialog', async () => {
+      const openPopoverBtn = await DSDialog.getBtnsByIndex(2);
+      await openPopoverBtn.click();
+      const snapshot = await browser.checkSnapshot(DSDialog.snapshotPath('dialog-withpopper2'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8829 - DSDialog, With datatable -visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDialog.withDatatable.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should render a dialog with a datatable', async () => {
+      const triggerBtn = await DSDialog.getTriggerBtn();
+      await triggerBtn.click();
+      const dialog = await DSDialog.getDialog();
+      await dialog.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSDialog.snapshotPath('dialog-withdatatable'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should render a dialog with a datatable with open filter', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const inputSingleSelect = await FiltersCO.filterSingleSelectPopper.getInput();
+      await expect(inputSingleSelect).toBeFocused();
+      await type('JOHN');
+      const snapshot = await browser.checkSnapshot(DSDialog.snapshotPath('dialog-datatable-filter'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should render a dialog with a datatable with open filterbar menu', async () => {
+      await browser.keys(Key.Escape);
+      await (await FiltersCO.filterBarBtnTrigger()).click();
+      const snapshot = await browser.checkSnapshot(DSDialog.snapshotPath('dialog-datatable-filter'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-dialog/DSDialog.func.spec.js

@@ -0,0 +1,133 @@
+/* eslint-disable no-await-in-loop */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSDialogCO from './DSDialogCO';
+import { DialogFormsCO } from './components';
+import { FiltersCO } from '../ds-data-table-async/components';
+import { type } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7874 - DSDialog, Manage focus after close -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDialogCO.manageFocusURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open the dialog after clicking the trigger', async () => {
+      const triggerBtn = await DSDialogCO.getTriggerBtn();
+      await triggerBtn.click();
+      const dialog = await DSDialogCO.getDialog();
+      await dialog.waitForDisplayed();
+      await expect(dialog).toBeDisplayedInViewport();
+    });
+    it('should focus the trigger after closing the dialog', async () => {
+      const closeBtn = await DSDialogCO.getCloseBtn();
+      await closeBtn.click();
+      const triggerBtn = await DSDialogCO.getTriggerBtn();
+      await expect(triggerBtn).toBeFocused();
+    });
+  });
+  describe('PUI-7875 - DSDialog, Remove auto focus -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDialogCO.removeFocusURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open the dialog after clicking the trigger', async () => {
+      const triggerBtn = await DSDialogCO.getTriggerBtn();
+      await triggerBtn.click();
+      const dialog = await DSDialogCO.getDialog();
+      await dialog.waitForDisplayed();
+      await expect(dialog).toBeDisplayedInViewport();
+    });
+    it('should focus the first form input on the dialog and not the container', async () => {
+      const firstInput = await DialogFormsCO.getFormInputByIndex(0);
+      await expect(firstInput).toBeFocused();
+    });
+  });
+  describe('PUI-7933 - DSDialog, Accesible form -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDialogCO.accesibleForm.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open the dialog after clicking the trigger and focus on the first input', async () => {
+      const triggerBtn = await DSDialogCO.getTriggerBtn();
+      await triggerBtn.click();
+      const dialog = await DSDialogCO.getDialog();
+      await dialog.waitForDisplayed();
+      await expect(dialog).toBeDisplayedInViewport();
+      const firstInput = await DialogFormsCO.getFormInputByIndex(0);
+      await expect(firstInput).toBeFocused();
+    });
+    it('should focus the fisrst checkbox and mark it as checked', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const firstCheckbox = await $('[id="id3"]');
+      await expect(firstCheckbox).toBeFocused();
+    });
+    it('should focus the first toggle button', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const firstToggle = await $('[id="unique_id_1"]');
+      await expect(firstToggle).toBeFocused();
+    });
+    it('should focus the Apply button', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const applyButton = await DSDialogCO.getApplyBtn();
+      await expect(applyButton).toBeFocused();
+    });
+    it('should loop and focus the first input again', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const firstInput = await DialogFormsCO.getFormInputByIndex(0);
+      await expect(firstInput).toBeFocused();
+    });
+    it('should go back to focus the close button', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      const firstInput = await DSDialogCO.getCloseBtn();
+      await expect(firstInput).toBeFocused();
+    });
+  });
+  describe('PUI-7971 - DSDialog, LoopTrap -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDialogCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open the dialog after clicking the trigger', async () => {
+      const triggerBtn = await DSDialogCO.getTriggerBtn();
+      await triggerBtn.click();
+      const dialog = await DSDialogCO.getDialog();
+      await dialog.waitForDisplayed();
+      await expect(dialog).toBeDisplayedInViewport();
+    });
+    it('should press tab 7 times and still be within the dialog', async () => {
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < 7; i++) await browser.keys(Key.Tab);
+      const closeBtn = await DSDialogCO.getCloseBtn();
+      await expect(closeBtn).toBeFocused();
+    });
+  });
+  describe('PUI-8680 - DSDialog, LoopTrap with DataTable within -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDialogCO.withDatatable.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open the dialog after clicking the trigger', async () => {
+      const triggerBtn = await DSDialogCO.getTriggerBtn();
+      await triggerBtn.click();
+      const dialog = await DSDialogCO.getDialog();
+      await dialog.waitForDisplayed();
+      await expect(dialog).toBeDisplayedInViewport();
+    });
+    it('should be able to write on the text input within the datatable within the dialog', async () => {
+      // eslint-disable-next-line no-plusplus
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const inputSingleSelect = await FiltersCO.filterSingleSelectPopper.getInput();
+      await expect(inputSingleSelect).toBeFocused();
+      await type('JOHN');
+      const menuItems = await FiltersCO.filterSingleSelectPopper.getMenuItems();
+      const textFirstItem = await menuItems[0];
+      await expect(textFirstItem).toHaveTextContaining('John');
+    });
+  });
+}