dimsum-e2e-tests 3.50.0-next.2 → 3.50.0-rc.2

package/ds-controlled-form/ds-controlled-large-input-text/DSLargeInputTextCO.js

@@ -22,7 +22,7 @@ export default class DSLargeInputTextCO extends PageObject {
   static applyAriaDisabled = new Urlbuilder(PATH_E2E_CONTROLLEDLARGEINPUT, 'apply-aria-disabled-test');
 
   static async getInputs() {
-    return $$('[data-testid="ds-controlled-large-text-input"]');
+    return $$('[data-testid="ds-controlledlargetextinput-input"]');
   }
 
   static getDialogTrigger() {
@@ -32,19 +32,19 @@ export default class DSLargeInputTextCO extends PageObject {
   static getInputByIndex = async (index) => getElementByIndex(this.getInputs, index);
 
   static getCounter() {
-    return $('[data-testid="ds-form-layout-block-item-counter"]');
+    return $('[data-testid="ds-formlayoutblockitem-counter"]');
   }
 
   static getErrorMessage() {
-    return $('[data-testid="ds-form-layout-block-item-error-message"]');
+    return $('[data-testid="ds-formlayoutblockitem-error-message"]');
   }
 
   static getFeedbackMessage() {
-    return $('[data-testid="ds-form-layout-block-item-message"]');
+    return $('[data-testid="ds-formlayoutblockitem-message"]');
   }
 
   static getLabel() {
-    return $('[data-testid="ds-form-layout-block-item-label"]');
+    return $('[data-testid="ds-formlayoutblockitem-label"]');
   }
 
   static getTriggerBtn() {

package/ds-controlled-form/ds-controlled-large-input-text/aria-disabled/DSLargeInputText.aria-disabled.visual.spec.js

@@ -7,10 +7,15 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const errorOnGo = await DSLargeInputTextCO.applyAriaDisabled.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('01: aria-disabled LargeInput should be focused', async () => {
+    it('01: aria-disabled LargeInput should be default', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSLargeInputTextCO.snapshotPath('large-input-aria-dis-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: aria-disabled LargeInput should be focused', async () => {
       await browser.eyesOpen();
       await browser.keys(Key.Tab);
-      const snapshot = await browser.eyesCheckSnapshot(DSLargeInputTextCO.snapshotPath('large-input-aria-disabled'));
+      const snapshot = await browser.eyesCheckSnapshot(DSLargeInputTextCO.snapshotPath('large-input-aria-dis-focus'));
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-controlled-form/ds-controlled-large-input-text/read-only/DSLargeInputText.read-only.axe-core.func.spec.js

@@ -13,7 +13,7 @@ if (
       const errorOnGo = await DSLargeInputTextCO.readOnlyURL.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('01: should pass axe-core scan without violations', async () => {
+    it('01: should have readOnly large text input and pass axe-core scan without violations', async () => {
       const input = await DSLargeInputTextCO.getInputByIndex(0);
       await input.waitForDisplayed();
       const result = await axeCoreCheck();

package/ds-controlled-form/ds-controlled-large-input-text/read-only/DSLargeInputText.read-only.func.spec.js

@@ -0,0 +1,39 @@
+/* eslint-disable max-len */
+import { Key } from 'webdriverio';
+import DSLargeInputTextCO from '../DSLargeInputTextCO';
+import { axeCoreCheck, type } from '../../../helpers';
+
+const longText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In placerat dictum orci, non lacinia lorem congue a. Nullam vel tempus nibh. Nullam sed felis id est malesuada luctus. Morbi tortor quam, sollicitudin ut efficitur vel, congue nec leo. Donec venenatis ultricies ultrices. Pellentesque hendrerit est ac sapien tincidunt convallis. Fusce bibendum lorem ut fringilla fringilla. Sed sagittis lectus non condimentum tristique. In sit amet orci sit amet dolor egestas elementum. Donec malesuada dui nisl, non feugiat libero malesuada a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin vitae porttitor nunc. Nulla nec mi non augue volutpat semper sed a sem. Ut porttitor ultricies urna pellentesque tincidunt. Vivamus ultricies metus non ipsum malesuada, eu venenatis erat efficitur.';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-15015 - LargeInputText:: Read Only: Basic -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSLargeInputTextCO.readOnlyURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have readOnly attribute', async () => {
+      const input = await DSLargeInputTextCO.getInputByIndex(0);
+      await input.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should be able to focus but not be able to type', async () => {
+      const input = await DSLargeInputTextCO.getInputByIndex(0);
+      await input.click();
+      await type('New text');
+      const content = await input.getText();
+      await expect(input).toBeFocused();
+      await expect(content).toBe(longText);
+    });
+    it('03: should not be able to delete', async () => {
+      const input = await DSLargeInputTextCO.getInputByIndex(0);
+      await input.click();
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.Backspace);
+      const content = await input.getText();
+      await expect(input).toBeFocused();
+      await expect(content).toBe(longText);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-large-input-text/read-only/DSLargeInputText.read-only.visual.spec.js

@@ -1,4 +1,5 @@
 /* eslint-disable max-len */
+import { Key } from 'webdriverio';
 import DSLargeInputTextCO from '../DSLargeInputTextCO';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
@@ -11,7 +12,17 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.eyesOpen();
       const input = await DSLargeInputTextCO.getInputByIndex(0);
       await input.waitForDisplayed();
-      const snapshot = await browser.eyesCheckSnapshot(DSLargeInputTextCO.snapshotPath('large-input-text-read-only'));
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSLargeInputTextCO.snapshotPath('large-input-read-only-default'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display focused LargeInputText with readOnly', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      const input = await DSLargeInputTextCO.getInputByIndex(0);
+      await input.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSLargeInputTextCO.snapshotPath('large-input-read-onl-focused'));
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-controlled-form/ds-input-text/DSInputText.func.spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /* eslint-disable max-lines */
 import { Key } from 'webdriverio';
 import { type } from '../../helpers';
@@ -9,14 +10,14 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const errorOnGo = await DSInputTextCO.clearable.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('should write some text on the input and change the input value', async () => {
+    it('01: should write some text on the input and change the input value', async () => {
       const input = await DSInputTextCO.getInputText();
       await input.click();
       await type('Hola');
       const inputValue = await input.getAttribute('value');
       await expect(inputValue).toEqual('Hola');
     });
-    it('should erase the content from within the input and have an empty value for the input', async () => {
+    it('02: should erase the content from within the input and have an empty value for the input', async () => {
       const input = await DSInputTextCO.getInputText();
       await input.click();
       await browser.keys(Key.Backspace);
@@ -33,44 +34,45 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const errorOnGo = await DSInputTextCO.autocompleteURL.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('should not open the autocomplete list if there are no characters even with focus', async () => {
+    it('01: should not open the autocomplete list if there are no characters even with focus', async () => {
       const input = await DSInputTextCO.getInputText();
       await input.click();
       const autocompleteList = await DSInputTextCO.getAutocompleteMenuList();
       await expect(autocompleteList).not.toBeDisplayedInViewport();
     });
-    it('should display autocomplete list after getting one character in the input', async () => {
+    it('02: should display autocomplete list after getting one character in the input', async () => {
       await type('4');
       const autocompleteList = await DSInputTextCO.getAutocompleteMenuList();
       await expect(autocompleteList).toBeDisplayedInViewport();
     });
-    it('should not close the autocomplete list after getting more characters', async () => {
+    it('03: should not close the autocomplete list after getting more characters', async () => {
       await type('4');
       const autocompleteList = await DSInputTextCO.getAutocompleteMenuList();
       await expect(autocompleteList).toBeDisplayedInViewport();
     });
-    it('should close the autocomplete list after getting more characters which dont match any option', async () => {
+    it('04: should close the autocomplete list after getting more characters which dont match any option', async () => {
       await type('Z');
       const autocompleteList = await DSInputTextCO.getAutocompleteMenuList();
       await expect(autocompleteList).not.toBeDisplayedInViewport();
     });
-    it('should display autocomplete options after erasing the character which caused a mismatch', async () => {
+    it('05: should display autocomplete options after erasing the character which caused a mismatch', async () => {
       await browser.keys(Key.Backspace);
       const autocompleteList = await DSInputTextCO.getAutocompleteMenuList();
       await expect(autocompleteList).toBeDisplayedInViewport();
     });
-    it('should not close the autocomplete list after deleting a character if there are characters left', async () => {
+    it('06: should not close the autocomplete list after deleting a character if there are characters left', async () => {
       await browser.keys(Key.Backspace);
       const autocompleteList = await DSInputTextCO.getAutocompleteMenuList();
       await expect(autocompleteList).toBeDisplayedInViewport();
     });
-    it('should close the autocomplete list after deleting a character if there are no characters left', async () => {
+    it('07: should close the autocomplete list after deleting a character if there are no characters left', async () => {
       await browser.keys(Key.Backspace);
       const autocompleteList = await DSInputTextCO.getAutocompleteMenuList();
       await expect(autocompleteList).not.toBeDisplayedInViewport();
     });
-    it('should select the first autocomplete list item and change the value of the input', async () => {
+    it('08: should select the first autocomplete list item and change the value of the input', async () => {
       await type('4');
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Enter);
       const input = await DSInputTextCO.getInputText();
       const autocompleteList = await DSInputTextCO.getAutocompleteMenuList();
@@ -85,7 +87,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const errorOnGo = await DSInputTextCO.autocompleteURL.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('should click an autocomplete option and the input should have that value', async () => {
+    it('01: should click an autocomplete option and the input should have that value', async () => {
       const input = await DSInputTextCO.getInputText();
       await input.click();
       await type('44');
@@ -103,7 +105,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const errorOnGo = await DSInputTextCO.clearable.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('should click an autocomplete option and the input should have that value', async () => {
+    it('01: should click an autocomplete option and the input should have that value', async () => {
       const input = await DSInputTextCO.getInputText();
       await input.click();
       await type('Hola');

package/ds-controlled-form/ds-input-text/DSInputTextCO.js

@@ -1,8 +1,9 @@
 // eslint-disable-next-line import/no-relative-packages
+import { DSInputTextDataTestIds } from '@elliemae/ds-form-input-text';
 import { PATH_E2E_CONTROLLEDINPUT } from '../../../environments/storybook/paths';
 import { PageObject, Urlbuilder, getElementByIndex } from '../../helpers';
 
-export default class DSLargeInputCO extends PageObject {
+export default class DSInputTextCO extends PageObject {
   static clearable = new Urlbuilder(PATH_E2E_CONTROLLEDINPUT, 'clearable-E-2-e');
 
   static formLayoutBlockURL = new Urlbuilder(PATH_E2E_CONTROLLEDINPUT, 'with-form-layout-block-item');
@@ -23,6 +24,8 @@ export default class DSLargeInputCO extends PageObject {
 
   static placeholderURL = new Urlbuilder(PATH_E2E_CONTROLLEDINPUT, 'place-holder-test');
 
+  static readOnly = new Urlbuilder(PATH_E2E_CONTROLLEDINPUT, 'read-only-test');
+
   static async getAutocompleteMenuList() {
     return $('[data-testid="autocomplete-menu-list"]');
   }
@@ -33,22 +36,22 @@ export default class DSLargeInputCO extends PageObject {
 
   static getAutocompleteOptionByIndex = async (index) => getElementByIndex(this.getAutocompleteOptions, index);
 
-  static async getInputTexContainer() {
-    return $('//input[@data-testid="ds-input-text"]/ancestor::div');
-  }
-
   static async getInputText() {
-    return $('[data-testid="ds-input-text-input"]');
+    return $(`[data-testid="${DSInputTextDataTestIds.INPUT}"]`);
   }
 
   static async getInputTexts() {
-    return $$('[data-testid="ds-input-text-input"]');
+    return $$(`[data-testid="${DSInputTextDataTestIds.INPUT}"]`);
+  }
+
+  static async getInputValue(value) {
+    return $(`[data-testid="${DSInputTextDataTestIds.INPUT}"][value="${value}"]`);
   }
 
   static getInputTextByIndex = async (index) => getElementByIndex(this.getInputTexts, index);
 
   static async getClearBtn() {
-    return $('[data-testid="ds-input-text-clear-button"]');
+    return $(`[data-testid="${DSInputTextDataTestIds.CLEAR_BUTTON}"]`);
   }
 
   static snapshotPath(example = 'basic') {

package/ds-controlled-form/ds-input-text/aria-disabled/DSInputText.aria-disabled.func.spec.js

@@ -0,0 +1,23 @@
+/* eslint-disable max-lines */
+import DSInputTextCO from '../DSInputTextCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-15257 - [InputText] applyAriaDisabled prop - func test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSInputTextCO.applyAriaDisabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: first aria-disabled Input should not display the caret', async () => {
+      const input1 = await DSInputTextCO.getInputTextByIndex(0);
+      await input1.click();
+      const caretColor = await input1.getCSSProperty('caret-color');
+      const caretValue = caretColor.value;
+      await expect(caretValue).toBe('rgba(0,0,0,0)');
+    });
+  });
+}

package/ds-controlled-form/ds-input-text/read-only/DSInputText.read-only.axe-core.func.spec.js

@@ -0,0 +1,23 @@
+/* eslint-disable max-lines */
+import { axeCoreCheck } from '../../../helpers';
+import DSInputTextCO from '../DSInputTextCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-15331 - [InputText] readOnly prop - axe-core test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSInputTextCO.readOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: first readOnly Input should be focused and pass axe-core scan', async () => {
+      const input1 = await DSInputTextCO.getInputTextByIndex(0);
+      await input1.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-controlled-form/ds-input-text/read-only/DSInputText.read-only.func.spec.js

@@ -0,0 +1,23 @@
+/* eslint-disable max-lines */
+import DSInputTextCO from '../DSInputTextCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-15332 - [InputText] readOnly prop - func test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSInputTextCO.readOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: first readOnly Input should not display the caret', async () => {
+      const input1 = await DSInputTextCO.getInputTextByIndex(0);
+      await input1.click();
+      const caretColor = await input1.getCSSProperty('caret-color');
+      const caretValue = caretColor.value;
+      await expect(caretValue).toBe('rgba(0,0,0,0)');
+    });
+  });
+}

package/ds-controlled-form/ds-input-text/read-only/DSInputText.read-only.visual.spec.js

@@ -0,0 +1,28 @@
+/* eslint-disable max-lines */
+/* eslint-disable prettier/prettier */
+import { Key } from 'webdriverio';
+import DSInputTextCO from '../DSInputTextCO';
+import { type } from '../../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-15330 - [InputText] readOnly prop - visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSInputTextCO.readOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: first read-only Input should be focused', async () => {
+      await browser.eyesOpen();
+      const firstInput = await DSInputTextCO.getInputTextByIndex(0);
+      await firstInput.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSInputTextCO.snapshotPath('input-text-read-only-mouse'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: second read-only InputText should be focused and value not changed', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await type('Test');
+      const snapshot = await browser.eyesCheckSnapshot(DSInputTextCO.snapshotPath('input-text-read-only-kb-nav'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-controlled-form/react-hook-form/ReactHook.func.spec.js

@@ -3,6 +3,7 @@
 import { Key } from 'webdriverio';
 import ReactHookCO from './ReactHookCO';
 import { type } from '../../helpers';
+import DSInputTextCO from '../ds-input-text/DSInputTextCO';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-8180 - ds-controlled-form: with React Hook', () => {
@@ -11,7 +12,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('should correctly change the text input value sending keys', async () => {
-      const input = await ReactHookCO.getInputByIndex(0);
+      const input = await DSInputTextCO.getInputTextByIndex(0);
       await input.click();
       await type('Lucas caminador de cielos');
       const inputValue = await input.getAttribute('value');

package/ds-controlled-form/react-hook-form/ReactHook.visual.spec.js

@@ -1,6 +1,7 @@
 import { Key } from 'webdriverio';
 import { type } from '../../helpers';
 import ReactHookCO from './ReactHookCO';
+import DSInputTextCO from '../ds-input-text/DSInputTextCO';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-8081 - ds-controlled-form: with React Hook', () => {
@@ -9,7 +10,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('should interact elements, combobox open and checkbox checked', async () => {
-      const input = await ReactHookCO.getInput();
+      const input = await DSInputTextCO.getInputText();
       await input.click();
       await type('Lucas caminador de cielos');
       await browser.keys(Key.Tab);
@@ -19,6 +20,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const comboBox = await ReactHookCO.getCombobox();
       await comboBox.click();
       await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Return);
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Return);

package/ds-controlled-form/react-hook-form/ReactHookCO.js

@@ -4,10 +4,6 @@ import { PageObject, Urlbuilder, getElementByIndex } from '../../helpers';
 export default class ReactHookCO extends PageObject {
   static basicURL = new Urlbuilder(PATH_E2E_HOOK_FORM, 'on-submit-validation-form');
 
-  static async getInput() {
-    return $('[data-testid="ds-input-text-input"]');
-  }
-
   static async getCombobox() {
     return $('[data-testid="combobox-controls-wrapper"]');
   }
@@ -20,12 +16,6 @@ export default class ReactHookCO extends PageObject {
     return $('[data-testid="ds-controlled-toggle-checkbox"]');
   }
 
-  static async getInputs() {
-    return $$('[data-testid="ds-input-text-input"]');
-  }
-
-  static getInputByIndex = async (index) => getElementByIndex(this.getInputs, index);
-
   static async getMonthInputs() {
     return $$('[data-testid="ds-controlled-date-time-picker-month-input"]');
   }