chore: update webdriverio and update tests (#2417)

* chore: update webdriverio to v7 * chore: migrate all integration tests to async mode * chore: trigger ci * chore: update CI to node 12.22.12 * chore: fix run integration test command in CI * chore: use latest chrome version * chore: use latest chrome version * chore: use latest chrome version * chore: add wait-on local server commando * chore: upgrade CI to node 14 * chore: update node Co-authored-by: LeandroTorresSicilia <[email protected]>
nexxtway · Jun 27, 2022 · 84e9782 · 84e9782
1 parent ff609a5
commit 84e9782
Show file tree

Hide file tree

Showing 135 changed files with 5,542 additions and 4,854 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -7,7 +7,7 @@ references:
     defaults: &defaults
         working_directory: ~/repo
         docker:
-            - image: cimg/node:12.19.0-browsers
+            - image: cimg/node:12.22.12-browsers
         resource_class: medium+
 
     create_env_file: &create_env_file
@@ -74,18 +74,18 @@ jobs:
             - run: yarn install
 
             - browser-tools/install-chrome:
-                  chrome-version: 100.0.4896.127
+                  chrome-version: 103.0.5060.53
 
             - run:
                   command: yarn start
                   background: true
 
-            - run: sleep 10
+            - run: yarn wait:on:local:server
 
             - run:
                   name: run integration test
                   command: |
-                      yarn test:integration --headless || true
+                      yarn test:integration --headless
             - run:
                   name: generate report
                   command: |

diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
@@ -10,7 +10,7 @@ jobs:
             - uses: actions/checkout@v2
             - uses: actions/setup-node@v2
               with:
-                  node-version: '12'
+                  node-version: '14'
             - run: 'yarn install'
             - run: 'yarn build:library'
             - uses: FirebaseExtended/action-hosting-deploy@v0

diff --git a/integration/constants.js b/integration/constants.js
@@ -1,17 +1,20 @@
 module.exports = {
-    TAB_KEY: '\uE004',
-    ENTER_KEY: '\uE006',
-    ESCAPE_KEY: '\uE00C',
-    SPACE_KEY: '\uE00D',
-    ARROW_LEFT_KEY: '\uE012',
-    ARROW_UP_KEY: '\uE013',
-    ARROW_RIGHT_KEY: '\uE014',
-    ARROW_DOWN_KEY: '\uE015',
-    SHIFT_KEY: '\uE008',
-    DELETE_KEY: '\ue003',
-    PAGEUP_KEY: '\uE00E',
-    PAGEDOWN_KEY: '\uE00F',
-    END_KEY: '\uE010',
-    HOME_KEY: '\uE011',
-    ALT_KEY: '\uE00A',
+    TAB_KEY: 'Tab',
+    ENTER_KEY: 'Enter',
+    ESCAPE_KEY: 'Escape',
+    SPACE_KEY: 'Space',
+    ARROW_LEFT_KEY: 'ArrowLeft',
+    ARROW_UP_KEY: 'ArrowUp',
+    ARROW_RIGHT_KEY: 'ArrowRight',
+    ARROW_DOWN_KEY: 'ArrowDown',
+    SHIFT_KEY: 'Shift',
+    DELETE_KEY: 'Delete',
+    PAGEUP_KEY: 'PageUp',
+    PAGEDOWN_KEY: 'PageDown',
+    END_KEY: 'End',
+    HOME_KEY: 'Home',
+    ALT_KEY: 'Alt',
+    BACKSPACE_KEY: 'Backspace',
+    // Unicode key points
+    SHIFT_KEY_UNICODE: '\uE008',
 };
diff --git a/integration/helpers/holdDownKey.js b/integration/helpers/holdDownKey.js
@@ -1,5 +1,5 @@
-function holdDownKey(character) {
-    browser.performActions([
+async function holdDownKey(character) {
+    await browser.performActions([
         {
             type: 'key',
             id: 'keyboard',

diff --git a/integration/helpers/releaseKey.js b/integration/helpers/releaseKey.js
@@ -1,5 +1,5 @@
-function releaseKey(character) {
-    browser.performActions([
+async function releaseKey(character) {
+    await browser.performActions([
         {
             type: 'key',
             id: 'keyboard',

diff --git a/integration/specs/Accordion/accordion-1.spec.js b/integration/specs/Accordion/accordion-1.spec.js
@@ -3,99 +3,100 @@ const PageAccordion = require('../../../src/components/Accordion/pageObject');
 const ACCORDION = '#accordion-1';
 
 describe('Accordion whend multiple is not passed', () => {
-    beforeAll(() => {
-        browser.url('/#!/Accordion/1');
+    beforeAll(async () => {
+        await browser.url('/#!/Accordion/1');
     });
-    beforeEach(() => {
-        browser.refresh();
-        const component = $(ACCORDION);
-        component.waitForExist();
+
+    beforeEach(async () => {
+        await browser.refresh();
+        const component = await $(ACCORDION);
+        await component.waitForExist();
     });
 
-    it('should expand the accordion section when its button icon is clicked', () => {
+    it('should expand the accordion section when its button icon is clicked', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const accordionSection = accordion.getItem(0);
-        accordionSection.clickButton();
-        expect(accordionSection.isExpanded()).toBe(true);
+        const accordionSection = await accordion.getItem(0);
+        await accordionSection.clickButton();
+        await expect(await accordionSection.isExpanded()).toBe(true);
     });
-    it('should collapse the accordion section when click twice on the button icon', () => {
+    it('should collapse the accordion section when click twice on the button icon', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const accordionSection = accordion.getItem(0);
-        accordionSection.clickButton();
-        accordionSection.clickButton();
-        expect(accordionSection.isExpanded()).toBe(false);
+        const accordionSection = await accordion.getItem(0);
+        await accordionSection.clickButton();
+        await accordionSection.clickButton();
+        await expect(await accordionSection.isExpanded()).toBe(false);
     });
-    it('should close the first accordion section and expand the second when the first is expanded and is clicked the button icon of the second', () => {
+    it('should close the first accordion section and expand the second when the first is expanded and is clicked the button icon of the second', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const firstAccordionSection = accordion.getItem(0);
-        const secondAccordionSection = accordion.getItem(1);
-        firstAccordionSection.clickButton();
-        secondAccordionSection.clickButton();
-        expect(firstAccordionSection.isExpanded()).toBe(false);
-        expect(secondAccordionSection.isExpanded()).toBe(true);
+        const firstAccordionSection = await accordion.getItem(0);
+        const secondAccordionSection = await accordion.getItem(1);
+        await firstAccordionSection.clickButton();
+        await secondAccordionSection.clickButton();
+        await expect(await firstAccordionSection.isExpanded()).toBe(false);
+        await expect(await secondAccordionSection.isExpanded()).toBe(true);
     });
-    it('should move focus to the next button icon when the first button icon is focused and press arrow down', () => {
+    it('should move focus to the next button icon when the first button icon is focused and press arrow down', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const firstAccordionSection = accordion.getItem(0);
-        const secondAccordionSection = accordion.getItem(1);
-        firstAccordionSection.clickButton();
-        browser.keys('ArrowDown');
-        expect(secondAccordionSection.hasFocusButton()).toBe(true);
+        const firstAccordionSection = await accordion.getItem(0);
+        const secondAccordionSection = await accordion.getItem(1);
+        await firstAccordionSection.clickButton();
+        await browser.keys('ArrowDown');
+        await expect(await secondAccordionSection.hasFocusButton()).toBe(true);
     });
-    it('should move focus to the last button icon when the first button icon is focused and press arrow up', () => {
+    it('should move focus to the last button icon when the first button icon is focused and press arrow up', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const firstAccordionSection = accordion.getItem(0);
-        const lastAccordionSection = accordion.getItem(2);
-        firstAccordionSection.clickButton();
-        browser.keys('ArrowUp');
-        expect(lastAccordionSection.hasFocusButton()).toBe(true);
+        const firstAccordionSection = await accordion.getItem(0);
+        const lastAccordionSection = await accordion.getItem(2);
+        await firstAccordionSection.clickButton();
+        await browser.keys('ArrowUp');
+        await expect(await lastAccordionSection.hasFocusButton()).toBe(true);
     });
-    it('should move focus to the previous button icon when the second button icon is focused and press arrow up', () => {
+    it('should move focus to the previous button icon when the second button icon is focused and press arrow up', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const firstAccordionSection = accordion.getItem(0);
-        const secondAccordionSection = accordion.getItem(1);
-        secondAccordionSection.clickButton();
-        browser.keys('ArrowUp');
-        expect(firstAccordionSection.hasFocusButton()).toBe(true);
+        const firstAccordionSection = await accordion.getItem(0);
+        const secondAccordionSection = await accordion.getItem(1);
+        await secondAccordionSection.clickButton();
+        await browser.keys('ArrowUp');
+        await expect(await firstAccordionSection.hasFocusButton()).toBe(true);
     });
-    it('should move focus to the first button icon when the last button icon is focused and press arrow down', () => {
+    it('should move focus to the first button icon when the last button icon is focused and press arrow down', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const firstAccordionSection = accordion.getItem(0);
-        const lastAccordionSection = accordion.getItem(2);
-        lastAccordionSection.clickButton();
-        browser.keys('ArrowDown');
-        expect(firstAccordionSection.hasFocusButton()).toBe(true);
+        const firstAccordionSection = await accordion.getItem(0);
+        const lastAccordionSection = await accordion.getItem(2);
+        await lastAccordionSection.clickButton();
+        await browser.keys('ArrowDown');
+        await expect(await firstAccordionSection.hasFocusButton()).toBe(true);
     });
-    it('should move focus to the next button icon when the first button icon is focused and press arrow right', () => {
+    it('should move focus to the next button icon when the first button icon is focused and press arrow right', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const firstAccordionSection = accordion.getItem(0);
-        const secondAccordionSection = accordion.getItem(1);
-        firstAccordionSection.clickButton();
-        browser.keys('ArrowRight');
-        expect(secondAccordionSection.hasFocusButton()).toBe(true);
+        const firstAccordionSection = await accordion.getItem(0);
+        const secondAccordionSection = await accordion.getItem(1);
+        await firstAccordionSection.clickButton();
+        await browser.keys('ArrowRight');
+        await expect(await secondAccordionSection.hasFocusButton()).toBe(true);
     });
-    it('should move focus to the last button icon when the first button icon is focused and press arrow left', () => {
+    it('should move focus to the last button icon when the first button icon is focused and press arrow left', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const firstAccordionSection = accordion.getItem(0);
-        const lastAccordionSection = accordion.getItem(2);
-        firstAccordionSection.clickButton();
-        browser.keys('ArrowLeft');
-        expect(lastAccordionSection.hasFocusButton()).toBe(true);
+        const firstAccordionSection = await accordion.getItem(0);
+        const lastAccordionSection = await accordion.getItem(2);
+        await firstAccordionSection.clickButton();
+        await browser.keys('ArrowLeft');
+        await expect(await lastAccordionSection.hasFocusButton()).toBe(true);
     });
-    it('should move focus to the previous button icon when the second button icon is focused and press arrow left', () => {
+    it('should move focus to the previous button icon when the second button icon is focused and press arrow left', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const firstAccordionSection = accordion.getItem(0);
-        const secondAccordionSection = accordion.getItem(1);
-        secondAccordionSection.clickButton();
-        browser.keys('ArrowLeft');
-        expect(firstAccordionSection.hasFocusButton()).toBe(true);
+        const firstAccordionSection = await accordion.getItem(0);
+        const secondAccordionSection = await accordion.getItem(1);
+        await secondAccordionSection.clickButton();
+        await browser.keys('ArrowLeft');
+        await expect(await firstAccordionSection.hasFocusButton()).toBe(true);
     });
-    it('should move focus to the first button icon when the last button icon is focused and press arrow right', () => {
+    it('should move focus to the first button icon when the last button icon is focused and press arrow right', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const firstAccordionSection = accordion.getItem(0);
-        const lastAccordionSection = accordion.getItem(2);
-        lastAccordionSection.clickButton();
-        browser.keys('ArrowRight');
-        expect(firstAccordionSection.hasFocusButton()).toBe(true);
+        const firstAccordionSection = await accordion.getItem(0);
+        const lastAccordionSection = await accordion.getItem(2);
+        await lastAccordionSection.clickButton();
+        await browser.keys('ArrowRight');
+        await expect(await firstAccordionSection.hasFocusButton()).toBe(true);
     });
 });
diff --git a/integration/specs/Accordion/accordion-11.spec.js b/integration/specs/Accordion/accordion-11.spec.js
@@ -5,47 +5,47 @@ const ACCORDION = '#accordion-11';
 const addAdvancedSettings = () => $('#button-icon_add-new-advanced-settings').click();
 
 describe('Accordion with AccordionOption changed dynamically', () => {
-    beforeAll(() => {
-        browser.url('/#!/Accordion/11');
+    beforeAll(async () => {
+        await browser.url('/#!/Accordion/11');
     });
-    beforeEach(() => {
-        browser.refresh();
-        const component = $(ACCORDION);
-        component.waitForExist();
+    beforeEach(async () => {
+        await browser.refresh();
+        const component = await $(ACCORDION);
+        await component.waitForExist();
     });
 
-    it('should select the new option with keyboard after it is added dynamically', () => {
+    it('should select the new option with keyboard after it is added dynamically', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const firstSection = accordion.getItem(0);
-        firstSection.clickButton();
-        browser.keys('ArrowDown');
-        browser.keys('Enter');
-        const secondSection = accordion.getItem(1);
-        expect(secondSection.isExpanded()).toBe(true);
-        expect(secondSection.getLabel()).toBe('Personal Profile');
-        browser.refresh();
-        addAdvancedSettings();
-        firstSection.clickButton();
-        browser.keys('ArrowDown');
-        browser.keys('Enter');
-        expect(secondSection.isExpanded()).toBe(true);
-        expect(secondSection.getLabel()).toBe('Advanced Settings');
+        const firstSection = await accordion.getItem(0);
+        await firstSection.clickButton();
+        await browser.keys('ArrowDown');
+        await browser.keys('Enter');
+        const secondSection = await accordion.getItem(1);
+        await expect(await secondSection.isExpanded()).toBe(true);
+        await expect(await secondSection.getLabel()).toBe('Personal Profile');
+        await browser.refresh();
+        await addAdvancedSettings();
+        await firstSection.clickButton();
+        await browser.keys('ArrowDown');
+        await browser.keys('Enter');
+        await expect(await secondSection.isExpanded()).toBe(true);
+        await expect(await secondSection.getLabel()).toBe('Advanced Settings');
     });
-    it('should select the second option with keyboard after it is added and removed dynamically a new element', () => {
+    it('should select the second option with keyboard after it is added and removed dynamically a new element', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        addAdvancedSettings();
-        const firstSection = accordion.getItem(0);
-        firstSection.clickButton();
-        browser.keys('ArrowDown');
-        browser.keys('Enter');
-        const secondSection = accordion.getItem(1);
-        expect(secondSection.isExpanded()).toBe(true);
-        expect(secondSection.getLabel()).toBe('Advanced Settings');
-        addAdvancedSettings();
-        firstSection.clickButton();
-        browser.keys('ArrowDown');
-        browser.keys('Enter');
-        expect(secondSection.isExpanded()).toBe(true);
-        expect(secondSection.getLabel()).toBe('Personal Profile');
+        await addAdvancedSettings();
+        const firstSection = await accordion.getItem(0);
+        await firstSection.clickButton();
+        await browser.keys('ArrowDown');
+        await browser.keys('Enter');
+        const secondSection = await accordion.getItem(1);
+        await expect(await secondSection.isExpanded()).toBe(true);
+        await expect(await secondSection.getLabel()).toBe('Advanced Settings');
+        await addAdvancedSettings();
+        await firstSection.clickButton();
+        await browser.keys('ArrowDown');
+        await browser.keys('Enter');
+        await expect(await secondSection.isExpanded()).toBe(true);
+        await expect(await secondSection.getLabel()).toBe('Personal Profile');
     });
 });
diff --git a/integration/specs/Accordion/accordion-5.spec.js b/integration/specs/Accordion/accordion-5.spec.js
@@ -3,29 +3,29 @@ const PageAccordion = require('../../../src/components/Accordion/pageObject');
 const ACCORDION = '#accordion-multiple-1';
 
 describe('Accordion when multiple is passed', () => {
-    beforeAll(() => {
-        browser.url('/#!/Accordion/5');
+    beforeAll(async () => {
+        await browser.url('/#!/Accordion/5');
     });
-    beforeEach(() => {
-        browser.refresh();
-        const component = $(ACCORDION);
-        component.waitForExist();
+    beforeEach(async () => {
+        await browser.refresh();
+        const component = await $(ACCORDION);
+        await component.waitForExist();
     });
 
-    it('should collapse the accordion section when the accordion section is expanded and click on the button icon', () => {
+    it('should collapse the accordion section when the accordion section is expanded and click on the button icon', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const accordionSection = accordion.getItem(0);
-        accordionSection.clickButton();
-        expect(accordionSection.isExpanded()).toBe(false);
+        const accordionSection = await accordion.getItem(0);
+        await accordionSection.clickButton();
+        await expect(await accordionSection.isExpanded()).toBe(false);
     });
-    it('should expand all accordion section when the first and second accordion section are expanded and click on the third button icon', () => {
+    it('should expand all accordion section when the first and second accordion section are expanded and click on the third button icon', async () => {
         const accordion = new PageAccordion(ACCORDION);
-        const firstAccordionSection = accordion.getItem(0);
-        const secondAccordionSection = accordion.getItem(1);
-        const thirdAccordionSection = accordion.getItem(2);
-        thirdAccordionSection.clickButton();
-        expect(firstAccordionSection.isExpanded()).toBe(true);
-        expect(secondAccordionSection.isExpanded()).toBe(true);
-        expect(thirdAccordionSection.isExpanded()).toBe(true);
+        const firstAccordionSection = await accordion.getItem(0);
+        const secondAccordionSection = await accordion.getItem(1);
+        const thirdAccordionSection = await accordion.getItem(2);
+        await thirdAccordionSection.clickButton();
+        await expect(await firstAccordionSection.isExpanded()).toBe(true);
+        await expect(await secondAccordionSection.isExpanded()).toBe(true);
+        await expect(await thirdAccordionSection.isExpanded()).toBe(true);
     });
 });