WEBUI-1266: (Backport) update package.js files

.github/workflows/a11y.yaml

@@ -40,9 +40,21 @@ jobs:
     - uses: actions/setup-node@v3
       with:
         registry-url: ${{ env.NPM_REPOSITORY }}
-        node-version: 14
+        node-version: 18
         scope: '@nuxeo'
 
+    - name: Install Web UI
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_PACKAGES_TOKEN }}
+      run: |
+        npm install
+        pushd packages/nuxeo-web-ui-ftest
+        npm install
+        popd
+        pushd packages/nuxeo-designer-catalog
+        npm install
+        popd
+
     - uses: actions/setup-java@v2
       with:
         distribution: 'zulu'
@@ -70,3 +82,4 @@ jobs:
 
     - name: A11y checks
       run: mvn -B -ntp -f plugin/a11y install
+

package.json

@@ -7,7 +7,10 @@
   "license": "Apache-2.0",
   "vendor": "Nuxeo",
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=18.0.0"
+  },
+  "config": {
+    "workboxCli": "3.6.3"
   },
   "devDependencies": {
     "@cucumber/cucumber": "^7.0.0",
@@ -55,9 +58,9 @@
     "style-loader": "^2.0.0",
     "url-loader": "^4.1.1",
     "vm-browserify": "^1.1.2",
-    "wdio-chromedriver-service": "^8.0.0",
+    "wdio-chromedriver-service": "^8.1.1",
     "wdio-cucumber-reporter": "0.0.2",
-    "wdio-json-reporter": "^2.0.0",
+    "wdio-json-reporter": "^3.0.0",
     "webpack": "^5.3.0",
     "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^4.1.0",
@@ -74,7 +77,7 @@
     "prebuild": "npm-run-all prepare:*",
     "prepare:tmp": "rm -rf .tmp",
     "prepare:i18n": "node scripts/merge-messages.js",
-    "prepare:workbox": "workbox copyLibraries .tmp && mv .tmp/workbox-v$npm_package_devDependencies_workbox_cli .tmp/workbox",
+    "prepare:workbox": "workbox copyLibraries .tmp && mv .tmp/workbox-v${npm_package_config_workboxCli} .tmp/workbox",
     "build": "webpack --env production",
     "postbuild": "npm-run-all fix:*",
     "fix:preview": "replace 'elements/' '${window.location.pathname}/' dist/index.html",
@@ -174,7 +177,7 @@
     "@polymer/paper-toolbar": "^3.0.0",
     "@polymer/paper-tooltip": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@wdio/allure-reporter": "^7.2.0",
+    "@wdio/allure-reporter": "^7.32.0",
     "@webcomponents/html-imports": "^1.2.0",
     "aws-sdk": "^2.420.0",
     "dotenv": "^8.0.0",

packages/nuxeo-web-ui-ftest/package.json

@@ -11,20 +11,19 @@
   },
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=10.23.0 <15.0.0"
+    "node": ">=18.0.0"
   },
   "dependencies": {
     "@babel/core": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/register": "^7.14.5",
     "@cucumber/cucumber": "^7.0.0",
     "@cucumber/tag-expressions": "^2.0.4",
-    "@wdio/cli": "7.20.5",
-    "@wdio/cucumber-framework": "^7.20.3",
-    "@wdio/local-runner": "^7.2.0",
-    "@wdio/selenium-standalone-service": "7.2.0",
-    "@wdio/spec-reporter": "^7.2.0",
-    "@wdio/sync": "^7.2.0",
+    "@wdio/cli": "^8.16.11",
+    "@wdio/cucumber-framework": "^8.16.11",
+    "@wdio/local-runner": "^8.16.11",
+    "@wdio/selenium-standalone-service": "^8.15.0",
+    "@wdio/spec-reporter": "^8.16.9",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "babel-preset-env": "^1.7.0",
     "babel-register": "^6.26.0",
@@ -40,8 +39,8 @@
     "multiple-cucumber-html-reporter": "^1.18.0",
     "node-fetch": "^2.6.1",
     "nuxeo": "^4.0.3",
-    "wdio-chromedriver-service": "^7.0.0",
-    "wdio-cucumberjs-json-reporter": "^2.0.3",
-    "webdriverio": "^7.2.0"
+    "wdio-chromedriver-service": "^8.1.1",
+    "wdio-cucumberjs-json-reporter": "^5.1.7",
+    "webdriverio": "^8.16.11"
   }
 }

packages/nuxeo-web-ui-ftest/scripts/test.js

@@ -118,21 +118,23 @@ if (process.env.DRIVER_VERSION == null) {
     //  we will revert this once driver issue is resolved.
     const checkVersion = 114;
     try {
-      done = fetch(`https://chromedriver.storage.googleapis.com/LATEST_RELEASE_${checkVersion}`).then((response) => {
-        if (response.ok) {
-          return response
-            .text()
-            .then((newDriverVersion) => {
-              // eslint-disable-next-line no-console
-              console.log(`ChromeDriver ${newDriverVersion} needed.`);
-              process.env.DRIVER_VERSION = newDriverVersion;
-            })
-            .catch((e) => {
-              console.error('unable to parse ChromeDriver version: ', e);
-            });
-        }
-        console.error('unable to fetch ChromeDriver version: ', response);
-      });
+      done = fetch(`https://googlechromelabs.github.io/chrome-for-testing/LATEST_RELEASE_${checkVersion}`).then(
+        (response) => {
+          if (response.ok) {
+            return response
+              .text()
+              .then((newDriverVersion) => {
+                // eslint-disable-next-line no-console
+                console.log(`ChromeDriver ${newDriverVersion} needed.`);
+                process.env.DRIVER_VERSION = newDriverVersion;
+              })
+              .catch((e) => {
+                console.error('unable to parse ChromeDriver version: ', e);
+              });
+          }
+          console.error('unable to fetch ChromeDriver version: ', response);
+        },
+      );
     } catch (e) {
       console.error('unable to fetch ChromeDriver version: ', e);
     }

plugin/a11y/getDriverVersion.js

@@ -17,7 +17,7 @@ if (match) {
   //  we will revert this once driver issue is resolved.
   const checkVersion = 114;
   try {
-    fetch(`https://chromedriver.storage.googleapis.com/LATEST_RELEASE_${checkVersion}`).then((response) => {
+    fetch(`https://googlechromelabs.github.io/chrome-for-testing/LATEST_RELEASE_${checkVersion}`).then((response) => {
       if (response.ok) {
         return response
           .text()

plugin/a11y/package.json

@@ -2,7 +2,7 @@
   "name": "@nuxeo/nuxeo-web-ui-a11y",
   "version": "1.0.0",
   "engines": {
-    "node": ">=10.23.0"
+    "node": ">=18.0.0"
   },
   "scripts": {
     "start": "npm run test",
@@ -15,15 +15,14 @@
     "@babel/preset-env": "^7.15.0",
     "@babel/register": "^7.14.5",
     "@nuxeo/nuxeo-web-ui-ftest": "file:../../packages/nuxeo-web-ui-ftest",
-    "@wdio/cli": "7.20.5",
-    "@wdio/local-runner": "^7.20.5",
-    "@wdio/mocha-framework": "^7.2.0",
-    "@wdio/selenium-standalone-service": "7.2.0",
-    "@wdio/spec-reporter": "^7.2.0",
-    "@wdio/sync": "^7.2.0",
+    "@wdio/cli": "^8.16.11",
+    "@wdio/local-runner": "^8.16.11",
+    "@wdio/mocha-framework": "8.16.11",
+    "@wdio/selenium-standalone-service": "^8.15.0",
+    "@wdio/spec-reporter": "^8.16.9",
     "axe-core": "^4.1.2",
     "chrome-launcher": "^0.14.0",
     "node-fetch": "^2.6.1",
-    "wdio-chromedriver-service": "^7.0.0"
+    "wdio-chromedriver-service": "^8.1.1"
   }
 }

plugin/a11y/test/a11y-reporter.js

@@ -2,31 +2,27 @@ import { runAxeCore } from './axe-reporter.js';
 
 export function reportA11y(expectedViolations, expectedIncompleteViolations, setup) {
   let _report;
-
-  const getReport = () => {
+  const getReport = async () => {
     if (_report) {
       return _report;
     }
-    browser.setTimeout({ script: 240000 });
-
-    setup();
-
-    browser.pause(3000);
-    _report = runAxeCore();
-
+    await setup();
+    await browser.setTimeout({ script: 240000 });
+    await browser.pause(3000);
+    _report = await runAxeCore();
     return _report;
   };
 
   context('Violations', () => {
     let report;
 
-    before(() => {
-      report = getReport();
+    before(async () => {
+      report = await getReport();
     });
 
     Object.entries(expectedViolations).forEach(([violation, issues]) => {
-      it(`${violation}: ${issues} issue(s)`, () => {
-        expect(report.violations).toEqual(
+      it(`${violation}: ${issues} issue(s)`, async () => {
+        await expect(report.violations).toEqual(
           expect.arrayContaining([
             {
               id: violation,
@@ -41,13 +37,13 @@ export function reportA11y(expectedViolations, expectedIncompleteViolations, set
   context('Incomplete violations', () => {
     let report;
 
-    before(() => {
-      report = getReport();
+    before(async () => {
+      report = await getReport();
     });
 
     Object.entries(expectedIncompleteViolations).forEach(([violation, issues]) => {
-      it(`${violation}: ${issues} issue(s)`, () => {
-        expect(report.incomplete).toEqual(
+      it(`${violation}: ${issues} issue(s)`, async () => {
+        await expect(report.incomplete).toEqual(
           expect.arrayContaining([
             {
               id: violation,

plugin/a11y/test/axe-reporter.js

@@ -1,35 +1,40 @@
 // eslint-disable-next-line import/no-unresolved
 import { source } from 'axe-core';
 
-export function runAxeCore() {
-  // inject the axe-core lib
-  browser.execute(source);
+class AxeCore {
+  async run() {
+    await browser.execute(source);
+    const options = {
+      runOnly: {
+        type: 'tag',
+        values: ['ACT', 'best-practice', 'wcag2a', 'wcag2aa'],
+      },
+    };
+    // run inside browser and get results
+    const results = await browser.executeAsync((opts, done) => {
+      // eslint-disable-next-line no-undef
+      axe
+        .run(opts)
+        .then((res) => done(res))
+        .catch((err) => {
+          throw err;
+        });
+    }, options);
+    return this.process(await results);
+  }
 
-  // https://github.com/dequelabs/axe-core/blob/develop/doc/API.md
-  const options = {
-    runOnly: {
-      type: 'tag',
-      values: ['ACT', 'best-practice', 'wcag2a', 'wcag2aa'],
-    },
-  };
-  // run inside browser and get results
-  const results = browser.executeAsync((opts, done) => {
-    // eslint-disable-next-line no-undef
-    axe
-      .run(opts)
-      .then((res) => done(res))
-      .catch((err) => {
-        throw err;
-      });
-  }, options);
-
-  return {
-    results,
-    incomplete: results.incomplete.map((a) => {
-      return { id: a.id, issues: a.nodes.length };
-    }),
-    violations: results.violations.map((a) => {
-      return { id: a.id, issues: a.nodes.length };
-    }),
-  };
+  process(results) {
+    return {
+      results,
+      incomplete: results.incomplete.map((a) => {
+        return { id: a.id, issues: a.nodes.length };
+      }),
+      violations: results.violations.map((a) => {
+        return { id: a.id, issues: a.nodes.length };
+      }),
+    };
+  }
+}
+export async function runAxeCore() {
+  return new AxeCore().run();
 }

plugin/a11y/test/helpers/login.js

@@ -1,13 +1,18 @@
 import Login from '@nuxeo/nuxeo-web-ui-ftest/pages/login';
-import UI from '@nuxeo/nuxeo-web-ui-ftest/pages/ui';
 
-const login = (username = 'Administrator', password = 'Administrator') => {
+const login = async (username = 'Administrator', password = 'Administrator') => {
   const logIn = Login.get();
-  logIn.username = username;
-  logIn.password = password;
-  logIn.submit();
-  const ui = UI.get();
-  ui.waitForVisible('nuxeo-page');
+  await logIn.setUsername(username);
+  await logIn.setPassword(password);
+  await logIn.submit();
+};
+
+export const authRedirect = async (browser, path) => {
+  await login();
+  await browser.url(path);
+  await browser.execute(() => {
+    document.dispatchEvent(new CustomEvent('automation-ready'));
+  });
 };
 
 export default login;

plugin/a11y/test/specs/browser.js

@@ -1,7 +1,6 @@
 import '../imports';
-import UI from '@nuxeo/nuxeo-web-ui-ftest/pages/ui';
 import documentService from '@nuxeo/nuxeo-web-ui-ftest/features/step_definitions/support/services/documentService';
-import login from '../helpers/login';
+import { authRedirect } from '../helpers/login';
 import { reportA11y } from '../a11y-reporter.js';
 
 const EXPECTED_VIOLATIONS = {
@@ -34,10 +33,11 @@ describe('Nuxeo Browser', () => {
 
   after(async () => documentService.reset());
 
-  reportA11y(EXPECTED_VIOLATIONS, EXPECTED_INCOMPLETE_VIOLATIONS, () => {
-    login();
-    const ui = UI.get();
-    ui.browser.browseTo(doc.path);
-    ui.browser.currentPage.waitForDisplayed();
+  reportA11y(EXPECTED_VIOLATIONS, EXPECTED_INCOMPLETE_VIOLATIONS, async () => {
+    await authRedirect(browser, `#!/browse${doc.path}`);
+    await browser.$('#documentViewsItems nuxeo-page-item.iron-selected').waitForExist({ timeout: 15000 });
+    const elementName = await browser.getAttribute('#documentViewsItems nuxeo-page-item.iron-selected', 'name');
+    const context = await browser.$(`#nxContent [name='${elementName}']`);
+    return context;
   });
 });

plugin/a11y/test/specs/home.js

@@ -1,7 +1,6 @@
 import '../imports';
-import UI from '@nuxeo/nuxeo-web-ui-ftest/pages/ui';
 import documentService from '@nuxeo/nuxeo-web-ui-ftest/features/step_definitions/support/services/documentService';
-import login from '../helpers/login';
+import { authRedirect } from '../helpers/login';
 import { reportA11y } from '../a11y-reporter.js';
 
 const EXPECTED_VIOLATIONS = {
@@ -28,9 +27,10 @@ describe('Nuxeo Home', () => {
     await documentService.create(parent.path, child);
   });
 
-  reportA11y(EXPECTED_VIOLATIONS, EXPECTED_INCOMPLETE_VIOLATIONS, () => {
-    login();
-    const ui = UI.get();
-    ui.home.el.$('nuxeo-card[icon="nuxeo:edit"]').waitForDisplayed();
+  reportA11y(EXPECTED_VIOLATIONS, EXPECTED_INCOMPLETE_VIOLATIONS, async () => {
+    await authRedirect(browser, '#!/home');
+    await browser.$('nuxeo-card[icon="nuxeo:edit"]').waitForExist({ timeout: 5000 });
+    const context = await browser.$(`nuxeo-card[icon="nuxeo:edit"]`);
+    return context;
   });
 });