Add example use of karma (+ jasmine and chai)

Author: SteveSandersonMS

templates/Angular2Spa/ClientApp/tests/counter.ts

@@ -0,0 +1,18 @@
+import 'angular2-universal-polyfills';
+import { assert } from 'chai';
+import { Counter } from '../components/counter/counter';
+
+describe('Counter component', () => {
+    it('should start with value 0', () => {
+        const instance = new Counter();
+        assert.equal(instance.currentCount, 0);
+    });
+
+    it('should increment the counter by 1 when requested', () => {
+        const instance = new Counter();
+        instance.incrementCounter();
+        assert.equal(instance.currentCount, 1);
+        instance.incrementCounter();
+        assert.equal(instance.currentCount, 2);
+    });
+});

templates/Angular2Spa/karma.conf.js

@@ -0,0 +1,26 @@
+module.exports = function(config) {
+  config.set({
+    frameworks: ['jasmine', 'chai'],
+    reporters: ['progress'],
+    logLevel: config.LOG_INFO,
+    browsers: ['Chrome'],
+    autoWatch: true,
+    autoWatchBatchDelay: 300,
+
+    files: [
+      // Note: you must have already run 'webpack --config webpack.config.vendor.js' for this file to exist
+      './wwwroot/dist/vendor.js',
+
+      './ClientApp/tests/*.ts',
+      './ClientApp/tests/**/*.ts'
+    ],
+
+    preprocessors: {
+      './ClientApp/tests/*.ts': ['webpack'],
+      './ClientApp/tests/**/*.ts': ['webpack']
+    },
+
+    webpack: require('./webpack.config.js'),
+    webpackMiddleware: { stats: 'errors-only' }
+  });
+};

templates/Angular2Spa/package.json

@@ -4,12 +4,19 @@
   "devDependencies": {
     "aspnet-webpack": "^1.0.6",
     "bootstrap": "^3.3.6",
+    "chai": "^3.5.0",
     "css-loader": "^0.23.1",
     "expose-loader": "^0.7.1",
     "extendify": "^1.0.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
+    "jasmine-core": "^2.5.1",
     "jquery": "^2.2.1",
+    "karma": "^1.2.0",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-jasmine": "^1.0.2",
+    "karma-webpack": "^1.8.0",
     "raw-loader": "^0.5.1",
     "style-loader": "^0.13.0",
     "ts-loader": "^0.8.1",

templates/Angular2Spa/tsd.json

@@ -10,6 +10,15 @@
     },
     "es6-shim/es6-shim.d.ts": {
       "commit": "c0d876601e0f8236fd6b57626eb62c4e485f1563"
+    },
+    "chai/chai.d.ts": {
+      "commit": "15d88ee05780bd6bbc4e376c5202b160895017f5"
+    },
+    "assertion-error/assertion-error.d.ts": {
+      "commit": "15d88ee05780bd6bbc4e376c5202b160895017f5"
+    },
+    "jasmine/jasmine.d.ts": {
+      "commit": "15d88ee05780bd6bbc4e376c5202b160895017f5"
     }
   }
 }

templates/Angular2Spa/typings/assertion-error/assertion-error.d.ts

@@ -0,0 +1,15 @@
+// Type definitions for assertion-error 1.0.0
+// Project: https://github.com/chaijs/assertion-error
+// Definitions by: Bart van der Schoor <https://github.com/Bartvds>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare module 'assertion-error' {
+	class AssertionError implements Error {
+		constructor(message: string, props?: any, ssf?: Function);
+		name: string;
+		message: string;
+		showDiff: boolean;
+		stack: string;
+	}
+	export = AssertionError;
+}