NXP-32298: configure karma and npm modules setup to run frontend unit…

… tests

nuxeo-retention-web/karma.conf.js

@@ -0,0 +1,125 @@
+const path = require('path');
+
+const coverage = process.argv.find((arg) => arg.includes('coverage'));
+
+const reporters = coverage ? ['mocha', 'coverage-istanbul'] : ['mocha'];
+
+let customLaunchers = {
+  ChromeHeadlessNoSandbox: {
+    base: 'ChromeHeadless',
+    flags: ['--disable-gpu', '--no-sandbox'],
+  },
+};
+
+if (process.env.SAUCE_USERNAME && process.env.SAUCE_ACCESS_KEY) {
+  customLaunchers = {
+    sl_latest_chrome: {
+      base: 'SauceLabs',
+      browserName: 'chrome',
+      platform: 'Windows 10',
+      version: 'latest',
+    },
+    sl_latest_edge: {
+      base: 'SauceLabs',
+      browserName: 'microsoftedge',
+      platform: 'Windows 10',
+      version: 'latest',
+    },
+    sl_latest_safari: {
+      base: 'SauceLabs',
+      browserName: 'safari',
+      platform: 'macOS 12',
+      version: 'latest',
+    },
+  };
+
+  reporters.push('saucelabs');
+}
+
+module.exports = (config) => {
+  const sauceLabs = {};
+  if (config.record) {
+    sauceLabs.recordVideo = true;
+  } else if (config.sauceRunName) {
+    sauceLabs.testName = config.sauceRunName;
+  }
+
+  config.set({
+    sauceLabs,
+    basePath: '',
+    singleRun: true,
+    browsers: config.browsers && config.browsers.length > 0 ? config.browsers : Object.keys(customLaunchers),
+    browserDisconnectTimeout: 10 * 1000,
+    browserDisconnectTolerance: 1,
+    browserNoActivityTimeout: 5 * 60 * 1000,
+    customLaunchers,
+    middleware: ['static'],
+    static: {
+      path: path.join(process.cwd(), ''),
+    },
+    files: [
+      {
+        pattern: `test/*${config.grep || '*.test.js'}`,
+        type: 'module',
+      },
+    ],
+    plugins: [
+      // load plugin
+      require.resolve('@open-wc/karma-esm'),
+
+      // fallback: resolve any karma- plugins
+      'karma-*',
+    ],
+    frameworks: ['esm', 'mocha', 'sinon-chai', 'source-map-support'],
+    esm: {
+      // prevent auto loading of polyfills
+      compatibility: 'none',
+      coverage,
+      // if you are using 'bare module imports' you will need this option
+      nodeResolve: true,
+      // needed for npm link or lerna support
+      preserveSymlinks: true,
+    },
+
+    reporters,
+    port: 9876,
+    colors: true,
+    browserConsoleLogOptions: {
+      level: 'error',
+    },
+    logLevel: config.LOG_WARN,
+    /** Some errors come in JSON format with a message property. */
+    formatError(error) {
+      try {
+        if (typeof error !== 'string') {
+          return error;
+        }
+        const parsed = JSON.parse(error);
+        if (typeof parsed !== 'object' || !parsed.message) {
+          return error;
+        }
+        return parsed.message;
+      } catch (_) {
+        return error;
+      }
+    },
+
+    coverageIstanbulReporter: {
+      reports: ['html', 'lcovonly', 'text-summary'],
+      dir: path.join(__dirname, 'coverage'),
+      combineBrowserReports: true,
+      skipFilesWithNoCoverage: true,
+    },
+
+    client: {
+      mocha: {
+        reporter: 'html',
+        ui: 'tdd',
+        timeout: 3000,
+      },
+      chai: {
+        includeStack: true,
+      },
+    },
+  });
+};

nuxeo-retention-web/package.json

@@ -5,22 +5,36 @@
   "author": "Nuxeo",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@cucumber/cucumber": "^7.0.0",
     "@nuxeo/nuxeo-web-ui-ftest": "3.0.27-rc.0",
+    "@nuxeo/testing-helpers": "^3.1.5",
+    "@open-wc/karma-esm": "^2.16.18",
     "@rollup/plugin-node-resolve": "^7.1.3",
-    "@cucumber/cucumber": "^7.0.0",
+    "chai": "^5.0.3",
     "eslint": "^7.12.1",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-html": "^6.1.0",
     "eslint-plugin-import": "^2.22.1",
     "husky": "^4.3.0",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
+    "karma-firefox-launcher": "^2.1.2",
+    "karma-mocha": "^2.0.1",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-sauce-launcher": "^4.3.6",
+    "karma-sinon-chai": "^2.0.2",
+    "karma-source-map-support": "^1.4.0",
+    "karma-static": "^1.0.1",
     "lint-staged": "^10.5.1",
     "polymer-cli": "^1.9.11",
     "prettier": "2.1.2",
     "rollup": "^2.33.1",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-minify-html-literals": "^1.2.5",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-terser": "^7.0.2",
+    "sinon-chai": "^3.7.0"
   },
   "dependencies": {
     "@nuxeo/nuxeo-elements": "~3.0.2-rc.0",
@@ -52,6 +66,8 @@
     "format:polymer": "polymer lint --fix",
     "format:prettier": "prettier \"**/*.{js,html}\" --write",
     "ftest": "cd ftest && nuxeo-web-ui-ftest --screenshots --report --headless",
-    "ftest:watch": "cd ftest && nuxeo-web-ui-ftest --debug --tags=@watch"
+    "ftest:watch": "cd ftest && nuxeo-web-ui-ftest --debug --tags=@watch",
+    "test": "karma start --coverage",
+    "test:watch": "karma start --auto-watch=true --single-run=false"
   }
 }