CI: Switch to karma for browser tests (#1233)

This should fix the false positives (failures to detect errors).

.travis.yml

@@ -16,17 +16,11 @@ matrix:
     - node_js: "14"
       env: OPENPGP_NODE_JS='14' OPENPGPJSTEST='unit'
     - node_js: "14"
-      env:  OPENPGP_NODE_JS='14' OPENPGPJSTEST='unit' LIGHTWEIGHT=1
+      env: OPENPGP_NODE_JS='14' OPENPGPJSTEST='unit' LIGHTWEIGHT=1
     - node_js: "14"
-      env: BROWSER='"firefox_68"' OPENPGPJSTEST='browserstack'
+      env: OPENPGP_NODE_JS='14' OPENPGPJSTEST='browserstack'
     - node_js: "14"
-      env:  BROWSER='"chrome_68"' OPENPGPJSTEST='browserstack' LIGHTWEIGHT=1
+      env: OPENPGP_NODE_JS='14' OPENPGPJSTEST='browserstack' LIGHTWEIGHT=1
-    - node_js: "14"
-      env: BROWSER='"chrome_68"' OPENPGPJSTEST='browserstack'
-    - node_js: "14"
-      env: BROWSER='"safari_11_1"' OPENPGPJSTEST='browserstack'
-    - node_js: "14"
-      env: BROWSER='{"os":"ios", "os_version":"12", "device":"iPhone 8 Plus", "real_mobile":true}' OPENPGPJSTEST='browserstack'
 
 before_script:
   - npm install -g codeclimate-test-reporter browserstack-runner

package.json

@@ -42,6 +42,7 @@
     "start": "http-server",
     "prebrowsertest": "npm run build-test",
     "browsertest": "npm start -- -o test/unittests.html",
+    "browserstack": "karma start test/karma.conf.js",
     "coverage": "nyc npm test",
     "lint": "eslint 'src/**/*.js' 'test/crypto/**/*.js'",
     "docs": "jsdoc --configure .jsdocrc.js --destination docs --recurse README.md src",
@@ -72,10 +73,13 @@
     "hash.js": "^1.1.3",
     "http-server": "^0.12.3",
     "jsdoc": "github:openpgpjs/jsdoc#0f1816eb4553856647b4ca9561b9307b11ec4f9e",
+    "karma": "^6.1.0",
+    "karma-browserstack-launcher": "^1.6.0",
+    "karma-mocha": "^2.0.1",
     "mocha": "^5.0.0",
     "nyc": "^14.1.1",
     "pako": "github:openpgpjs/pako#f38f7368a5fa511e54b95add2f04444c3a9d803f",
-    "rollup": "^2.7.2",
+    "rollup": "^2.38.5",
     "rollup-plugin-terser": "^5.3.0",
     "seek-bzip": "github:openpgpjs/seek-bzip#4b89457f20c0e1921b4689106a31c99782c29829",
     "sinon": "^4.3.0",

rollup.config.js

@@ -96,14 +96,16 @@ export default Object.assign([
       { file: 'test/lib/unittests-bundle.js', format: 'es', intro, sourcemap: true },
     ],
     inlineDynamicImports: true,
+    external: ['../..', '../../..'],
     plugins: [
       resolve({
         browser: true
       }),
       commonjs({
-        ignore: builtinModules.concat(nodeDependencies).concat(['../..', '../../..'])
+        ignore: builtinModules.concat(nodeDependencies)
       }),
       replace({
+        "import openpgpjs from '../../..';": `import * as openpgpjs from '/dist/${process.env.npm_config_lightweight ? 'lightweight/' : ''}openpgp.mjs'; window.openpgp = openpgpjs;`,
         'require(': 'void(',
         delimiters: ['', '']
       })

test/karma.conf.js

@@ -0,0 +1,133 @@
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '..',
+
+    // hostname for local
+    hostname: 'localhost',
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['mocha'],
+
+    // plugins
+    plugins: ['karma-mocha', 'karma-browserstack-launcher'],
+
+    client: {
+      mocha: {
+        reporter: 'html',
+        ui: 'bdd',
+        timeout: 10000,
+        grep: process.env.LIGHTWEIGHT ? '@lightweight' : undefined
+      }
+    },
+
+    // list of files / patterns to load in the browser
+    files: [
+      {
+        pattern: 'test/lib/unittests-bundle.js',
+        type: 'module'
+      },
+      {
+        pattern: 'dist/**/*',
+        included: false
+      },
+      {
+        pattern: 'test/**/*',
+        included: false
+      },
+    ],
+
+    proxies: {
+      '/lib': '/base/test/lib',
+      '/worker': '/base/test/worker',
+      '/dist': '/base/dist',
+    },
+
+    // list of files to exclude
+    exclude: [
+    ],
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+    },
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress', 'BrowserStack'],
+
+    // web server host and port
+    port: 9876,
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+    browserStack: {
+      username: process.env.BROWSERSTACK_USERNAME,
+      accessKey: process.env.BROWSERSTACK_KEY,
+      project: `openpgpjs/${process.env.TRAVIS_EVENT_TYPE || 'push'}${process.env.LIGHTWEIGHT ? '/lightweight' : ''}`
+    },
+
+    // define browsers
+    customLaunchers: {
+      bs_firefox_68: {
+        base: 'BrowserStack',
+        browser: 'Firefox',
+        browser_version: '68.0',
+        os: 'OS X',
+        os_version: 'High Sierra'
+      },
+      bs_chrome_68: {
+        base: 'BrowserStack',
+        browser: 'Chrome',
+        browser_version: '68.0',
+        os: 'OS X',
+        os_version: 'High Sierra'
+      },
+      bs_safari_11_1: {
+        base: 'BrowserStack',
+        browser: 'Safari',
+        browser_version: '11.1',
+        os: 'OS X',
+        os_version: 'High Sierra'
+      },
+      bs_ios_12: {
+        base: 'BrowserStack',
+        device: 'iPhone 8 Plus',
+        real_mobile: true,
+        os: 'ios',
+        os_version: '12'
+      },
+    },
+
+    captureTimeout: 6e5,
+    browserDisconnectTolerance: 0,
+    browserDisconnectTimeout: 6e5,
+    browserSocketTimeout: 3e5,
+    browserNoActivityTimeout: 6e5,
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: [
+      'bs_firefox_68',
+      'bs_chrome_68',
+      'bs_safari_11_1',
+      'bs_ios_12',
+    ],
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true
+
+  });
+};

test/unittests.html

@@ -16,15 +16,7 @@
     <div id="mocha"></div>
 
     <script type="module">
-    (async () => {
+      import './lib/unittests-bundle.js';
-      const openpgp = await import(
-        window.location.search.includes('lightweight=') ?
-          '../dist/lightweight/openpgp.mjs' :
-          '../dist/openpgp.mjs'
-      );
-      window.openpgp = openpgp;
-      await import('./lib/unittests-bundle.js');
-
       if (typeof openpgp !== 'undefined') {
         const runner = mocha.run();
         var wasScrolledDown = true;
@@ -44,7 +36,6 @@
         runner.on('suite', afterTestReport);
         runner.on('test end', afterTestReport);
       }
-    })();
     </script>
   </body>
 </html>

travis.sh

@@ -22,10 +22,7 @@ elif [ $OPENPGPJSTEST = "unit" ]; then
 elif [ $OPENPGPJSTEST = "browserstack" ]; then
   echo "Running OpenPGP.js browser unit tests on Browserstack."
 
-  npm run build-test
+  npm run build-test ${LIGHTWEIGHT+ -- --lightweight}
-  echo -n "Using config: "
-  echo "{\"browsers\": [$BROWSER], \"test_framework\": \"mocha\", \"test_path\": [\"test/unittests.html?ci=true${LIGHTWEIGHT+&lightweight=true&grep=lightweight}\"], \"timeout\": 1800, \"exit_with_fail\": true, \"project\": \"openpgpjs/${TRAVIS_EVENT_TYPE:-push}${LIGHTWEIGHT:+/lightweight}\"}" > browserstack.json
-  cat browserstack.json
 
   result=0
   count=1
@@ -34,7 +31,7 @@ elif [ $OPENPGPJSTEST = "browserstack" ]; then
       echo -e "\nThe command failed. Retrying, $count of 3.\n" >&2
     }
 
-    browserstack-runner &
+    npm run browserstack &
     background_process_pid=$!
 
     # https://github.com/travis-ci/travis-ci/issues/4190