set up unit tests

jasmine + karma

Author: Ellery Newcomer

aurelia_project/aurelia.json

@@ -19,13 +19,7 @@
       }
     ],
     "options": {
-      "minify": {
-        "prod": {
-            "compress": {
-                "collapse_vars": false
-            }
-        }
-      },
+      "minify": false,
       "sourcemaps": "dev & stage"
     },
     "bundles": [
@@ -221,7 +215,14 @@
     "id": "vscode",
     "displayName": "Visual Studio Code"
   },
-  "unitTestRunner": {
+  "unitTestRunners": [
+      {
+      "id": "karma",
+      "displayName": "Karma",
+      "source": "test/unit/**/*.ts"
+      }
+  ],
+  "integrationTestRunner": {
     "id": "none",
     "displayName": "None"
   },
@@ -236,5 +237,9 @@
     "attributes": "resources/attributes",
     "valueConverters": "resources/value-converters",
     "bindingBehaviors": "resources/binding-behaviors"
+  },
+  "testFramework": {
+    "id": "jasmine",
+    "displayName": "Jasmine"
   }
 }

aurelia_project/tasks/test.json

@@ -0,0 +1,16 @@
+{
+  "name": "test",
+  "description": "Runs all unit tests and reports the results.",
+  "flags": [
+    {
+      "name": "env",
+      "description": "Sets the build environment.",
+      "type": "string"
+    },
+    {
+      "name": "watch",
+      "description": "Watches test files for changes and re-runs the tests automatically.",
+      "type": "boolean"
+    }
+  ]
+}

aurelia_project/tasks/test.ts

@@ -0,0 +1,32 @@
+import * as gulp from 'gulp';
+import {Server as Karma} from 'karma';
+import {CLIOptions} from 'aurelia-cli';
+import build from './build';
+import watch from './watch';
+import * as path from 'path';
+
+let karma = done => {
+  new Karma({
+    configFile: path.join(__dirname, '/../../karma.conf.js'),
+    singleRun: !CLIOptions.hasFlag('watch')
+  }, done).start();
+};
+
+let unit;
+
+if (CLIOptions.hasFlag('watch')) {
+  unit = gulp.series(
+    build,
+    gulp.parallel(
+      done => { watch(); done(); },
+      karma
+    )
+  );
+} else {
+  unit = gulp.series(
+    build,
+    karma
+  );
+}
+
+export { unit as default };

karma.conf.js

@@ -0,0 +1,52 @@
+'use strict';
+const path = require('path');
+const project = require('./aurelia_project/aurelia.json');
+const tsconfig = require('./tsconfig.json');
+const karmaConfig = project.unitTestRunners.find(x => x.id === 'karma');
+
+let testSrc = [
+  { pattern: karmaConfig.source, included: false },
+  'test/aurelia-karma.js'
+];
+
+let output = project.platform.output;
+let appSrc = project.build.bundles.map(x => path.join(output, x.name));
+let entryIndex = appSrc.indexOf(path.join(output, project.build.loader.configTarget));
+let entryBundle = appSrc.splice(entryIndex, 1)[0];
+let sourceMaps = [{pattern:'scripts/**/*.js.map', included: false}];
+let files = [entryBundle].concat(testSrc).concat(appSrc).concat(sourceMaps);
+
+let compilerOptions = tsconfig.compilerOptions;
+compilerOptions.inlineSourceMap = true;
+compilerOptions.inlineSources = true;
+
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    frameworks: [project.testFramework.id],
+    files: files,
+    exclude: [],
+    preprocessors: {
+      [karmaConfig.source]: [project.transpiler.id],
+      [appSrc]: ['sourcemap']
+    },
+    typescriptPreprocessor: {
+      typescript: require('typescript'),
+      options: compilerOptions
+    },
+    reporters: ['progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    // client.args must be a array of string.
+    // Leave 'aurelia-root', project.paths.root in this order so we can find
+    // the root of the aurelia project.
+    client: {
+      args: ['aurelia-root', project.paths.root]
+    }
+  });
+};
+

package.json

@@ -62,6 +62,13 @@
     "tslint": "^3.11.0",
     "typescript": ">=1.9.0-dev || ^2.0.0",
     "uglify-js": "^3.0.19",
-    "vinyl-fs": "^2.4.3"
+    "vinyl-fs": "^2.4.3",
+    "jasmine-core": "^2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-jasmine": "^1.0.2",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-typescript-preprocessor": "^0.2.1",
+    "@types/jasmine": "^2.2.0"
   }
 }

test/aurelia-karma.js

@@ -0,0 +1,87 @@
+(function(global) {
+  var karma = global.__karma__;
+  var requirejs = global.requirejs
+  var locationPathname = global.location.pathname;
+  var root = 'src';
+  karma.config.args.forEach(function(value, index) {
+    if (value === 'aurelia-root') {
+      root = karma.config.args[index + 1];
+    }
+  });
+
+  if (!karma || !requirejs) {
+    return;
+  }
+
+  function normalizePath(path) {
+    var normalized = []
+    var parts = path
+      .split('?')[0] // cut off GET params, used by noext requirejs plugin
+      .split('/')
+
+    for (var i = 0; i < parts.length; i++) {
+      if (parts[i] === '.') {
+        continue
+      }
+
+      if (parts[i] === '..' && normalized.length && normalized[normalized.length - 1] !== '..') {
+        normalized.pop()
+        continue
+      }
+
+      normalized.push(parts[i])
+    }
+
+    // Use case of testing source code. RequireJS doesn't add .js extension to files asked via sibling selector
+    // If normalized path doesn't include some type of extension, add the .js to it
+    if (normalized.length > 0 && normalized[normalized.length - 1].indexOf('.') < 0) {
+      normalized[normalized.length - 1] = normalized[normalized.length - 1] + '.js'
+    }
+
+    return normalized.join('/')
+  }
+
+  function patchRequireJS(files, originalLoadFn, locationPathname) {
+    var IS_DEBUG = /debug\.html$/.test(locationPathname)
+
+    requirejs.load = function (context, moduleName, url) {
+      url = normalizePath(url)
+
+      if (files.hasOwnProperty(url) && !IS_DEBUG) {
+        url = url + '?' + files[url]
+      }
+
+      if (url.indexOf('/base') !== 0) {
+        url = '/base/' + url;
+      }
+
+      return originalLoadFn.call(this, context, moduleName, url)
+    }
+
+    var originalDefine = global.define;
+    global.define = function(name, deps, m) {
+      if (typeof name === 'string') {
+        originalDefine('/base/' + root + '/' + name, [name], function (result) { return result; });
+      }
+
+      return originalDefine(name, deps, m);
+    }
+  }
+
+  function requireTests() {
+    var TEST_REGEXP = /(spec)\.js$/i;
+    var allTestFiles = ['/base/test/unit/setup.js'];
+
+    Object.keys(window.__karma__.files).forEach(function(file) {
+      if (TEST_REGEXP.test(file)) {
+        allTestFiles.push(file);
+      }
+    });
+
+    require(allTestFiles, window.__karma__.start);
+  }
+
+  karma.loaded = function() {}; // make it async
+  patchRequireJS(karma.files, requirejs.load, locationPathname);
+  requireTests();
+})(window);

test/unit/app.spec.ts

@@ -0,0 +1,12 @@
+import {QrCodeDisplayDialog } from '../../src/qrcodes/display-dialog';
+
+describe('qrcode display', () => {
+  it('chunks data', () => {
+      let display = new QrCodeDisplayDialog(null);
+
+      let result = display.obtainData("abcdefghij", 3);
+
+      expect(result).toEqual(["abc", "def", "ghi", "j"]);
+
+  });
+});

test/unit/setup.ts

@@ -0,0 +1,3 @@
+import 'aurelia-polyfills';
+import {initialize} from 'aurelia-pal-browser';
+initialize();