fix(client): check in bundled client code into version control (#3524)

New script will take care about building assets and also checking that bundled assets are up-to-date as part of CI.

This provides some improvements over the previous approach from f5521df#commitcomment-38967493:

1. It is possible to install `karma` from GitHub branch without the assumption that `browserify` is installed in user's project.
1. Karma contributors no longer need to run `npm run build` unless they want to change client code.
1. Simplifies runtime code.

.gitignore

@@ -1,7 +1,5 @@
 node_modules
 npm-debug.log
-static/context.js
-static/karma.js
 .idea/*
 *.iml
 docs/_build

.travis.yml

@@ -7,14 +7,12 @@ jobs:
     - node_js: "10"
       script:
         - npm run init
-        - npm run build
         - npm run test:unit
         - npm run test:e2e
 
     - node_js: "12"
       script:
         - npm run init
-        - npm run build
         - npm run test:unit
         - npm run test:e2e
 
@@ -23,7 +21,7 @@ jobs:
         - npm run init
         - commitlint-travis
         - npm run lint
-        - npm run build
+        - npm run build:check
         - npm run test:unit
         - npm run test:e2e
         - npm run test:client

appveyor.yml

@@ -24,7 +24,7 @@ install:
   - npm run init:windows
 
 test_script:
-  - npm run appveyor
+  - npm run test:appveyor
 
 build: off
 

docs/dev/02-making-changes.md

@@ -27,8 +27,6 @@ Here are some tips on how to set up a Karma workspace and how to send a good pul
   $ npm run init
   # or if you're on Windows
   $ npm run init:windows
-
-  $ npm run build
   ```
 
 ## Testing and Building

lib/server.js

@@ -8,7 +8,6 @@ const tmp = require('tmp')
 const fs = require('fs')
 const path = require('path')
 
-const BundleUtils = require('./utils/bundle-utils')
 const NetUtils = require('./utils/net-utils')
 const root = global || window || this
 
@@ -116,10 +115,6 @@ class Server extends KarmaEventEmitter {
   async start () {
     const config = this.get('config')
     try {
-      await Promise.all([
-        BundleUtils.bundleResourceIfNotExist('client/main.js', 'static/karma.js'),
-        BundleUtils.bundleResourceIfNotExist('context/main.js', 'static/context.js')
-      ])
       this._boundServer = await NetUtils.bindAvailablePort(config.port, config.listenAddress)
       this._boundServer.on('connection', (socket) => {
         // Attach an error handler to avoid UncaughtException errors.

package.json

@@ -491,14 +491,14 @@
     "test:e2e": "cucumber-js test/e2e/*.feature",
     "test:client": "grunt test:client",
     "test": "npm run test:unit && npm run test:e2e && npm run test:client",
-    "build": "grunt build",
+    "build": "node scripts/client.js build",
+    "build:check": "node scripts/client.js check",
     "test:appveyor": "grunt test-appveyor",
     "test:integration": "./scripts/integration-tests.sh",
     "link": "node --eval \"path=require('path'); require('fs').symlinkSync(path.resolve(__dirname), path.resolve(__dirname, 'node_modules', 'karma'), 'junction')\"",
     "unlink": "node --eval \"require('fs').unlinkSync(require('path').resolve(__dirname, 'node_modules', 'karma'))\"",
     "init": "rm -rf node_modules/karma && cd node_modules && ln -nsf ../ karma && cd ../",
     "init:windows": "(IF EXIST node_modules\\karma (rmdir node_modules\\karma /S /q)) && npm run link",
-    "appveyor": "npm run build && npm run test:appveyor",
     "semantic-release": "semantic-release"
   }
 }

scripts/client.js

@@ -0,0 +1,51 @@
+const browserify = require('browserify')
+const fs = require('fs')
+const { readFile } = require('fs').promises
+
+const bundleResourceToFile = (inPath, outPath) => {
+  return new Promise((resolve, reject) => {
+    browserify(inPath).bundle()
+      .pipe(fs.createWriteStream(outPath))
+      .once('finish', () => resolve())
+      .once('error', (e) => reject(e))
+  })
+}
+
+const bundleResource = (inPath) => {
+  return new Promise((resolve, reject) => {
+    browserify(inPath).bundle((err, buffer) => {
+      if (err != null) {
+        reject(err)
+        return
+      }
+
+      resolve(buffer)
+    })
+  })
+}
+
+const main = async () => {
+  if (process.argv[2] === 'build') {
+    await bundleResourceToFile('client/main.js', 'static/karma.js')
+    await bundleResourceToFile('context/main.js', 'static/context.js')
+  } else if (process.argv[2] === 'check') {
+    const expectedClient = await bundleResource('client/main.js')
+    const expectedContext = await bundleResource('context/main.js')
+
+    const actualClient = await readFile('static/karma.js')
+    const actualContext = await readFile('static/context.js')
+
+    if (Buffer.compare(expectedClient, actualClient) !== 0 || Buffer.compare(expectedContext, actualContext) !== 0) {
+      // eslint-disable-next-line no-throw-literal
+      throw 'Bundled client assets are outdated. Forgot to run "npm run build"?'
+    }
+  } else {
+    // eslint-disable-next-line no-throw-literal
+    throw `Unknown command: ${process.argv[2]}`
+  }
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})