Ported tests to typescript

Added chai assertions to karma
Fixed tsconfig to comply with recommended Vue configs

Author: CaptainAchilles

template/package.json

@@ -15,7 +15,10 @@
         "vue": "^2.1.0"
     },
     "devDependencies": {
+        "@types/chai": "^3.4.35",
+        "@types/mocha": "^2.2.40",
         "autoprefixer": "^6.4.0",
+        "chai": "^3.5.0",
         "chalk": "^1.1.3",
         "connect-history-api-fallback": "^1.1.0",
         "css-loader": "^0.28.0",
@@ -33,6 +36,7 @@
         "istanbul-instrumenter-loader": "^2.0.0",
         "json-loader": "^0.5.4",
         "karma": "^1.4.1",
+        "karma-chai": "^0.1.0",
         "karma-coverage-istanbul-reporter": "^1.0.0",
         "karma-mocha": "^1.3.0",
         "karma-phantomjs-launcher": "^1.0.2",

template/test/unit/init.test.js

@@ -5,21 +5,25 @@
 var webpackConfig = require('../../build/webpack.dev.conf')
 var path = require('path');
 
-module.exports = function (config) {
+module.exports = function(config) {
     config.set({
         // to run in additional browsers:
         // 1. install corresponding karma launcher
         //    http://karma-runner.github.io/0.13/config/browsers.html
         // 2. add it to the `browsers` array below.
 
         browsers: ['PhantomJS'],
-        frameworks: ['mocha'],
+        frameworks: ['mocha', 'chai'],
         reporters: ['spec', 'coverage-istanbul'],
 
-        files: ['./init.test.js'],
+        files: ["spec/**/*.ts"],
         preprocessors: {
-            './init.test.js': ['webpack']
+            "spec/**/*.ts": ['webpack']
         },
+        //files: ['./init.test.js'],
+        //preprocessors: {
+        //    './init.test.js': ['webpack']
+        //},
         webpack: webpackConfig,
         webpackMiddleware: {
             noInfo: true

template/test/unit/karma.conf.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import SideNav from 'components/SideNav'
-import assert from "assert";
+import  "chai";
+const assert = chai.assert;
 
 describe('SideNav.vue', function () {
     beforeEach(function () {
@@ -26,7 +27,7 @@ describe('SideNav.vue', function () {
 
         // The only child is the 'Toggle Links' item
         assert.equal(vm.$el.children.length, 1);
-        vm.$el.children[0].click();
+        (vm.$el.children[0] as HTMLElement).click();
 
         Vue.nextTick(function() {
             // There are 3 links + 1 toggle link item.
@@ -41,11 +42,11 @@ describe('SideNav.vue', function () {
 
         // The only child is the 'Toggle Links' item
         assert.equal(vm.$el.children.length, 1);
-        vm.$el.children[0].click();
+        (vm.$el.children[0] as HTMLElement).click();
 
         Vue.nextTick(function() {
             assert.equal(vm.$el.children.length, 4);
-            vm.$el.children[0].click();
+            (vm.$el.children[0] as HTMLElement).click();
 
             Vue.nextTick(function() {
                 // Clicking it again should hide all links

template/test/unit/spec/SideNav.spec.js renamed to template/test/unit/spec/SideNav.spec.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import WinnerIsYou from 'components/WinnerIsYou'
-import assert from "assert";
+import  "chai";
+const assert = chai.assert;
 
 describe('WinnerIsYou.vue', function () {
 

template/test/unit/spec/WinnerIsYou.spec.js renamed to template/test/unit/spec/WinnerIsYou.spec.ts

@@ -1,9 +1,12 @@
 {
     "compilerOptions": {
         "target": "es5",
+        "allowSyntheticDefaultImports": true,
         "lib": ["es5", "es2015.promise", "dom"],
         "experimentalDecorators": true,
-        "sourceMap": true
+        "sourceMap": true,
+        "module": "es2015",
+        "moduleResolution": "node"
     },
     "files": [
 	    "./src/main.ts"