[WIP] Unit tests with karma + mocha + sinon-chai + chrome

meta.js

@@ -12,6 +12,7 @@ name = name && name.toString().trim();
 email = email && email.toString().trim();
 
 module.exports = {
+  skipInterpolation: 'src/**/*.vue',
   prompts: {
     name: {
       required: true,

template/package.json

@@ -25,15 +25,30 @@
     "vue": "latest"
   },
   "devDependencies": {
+    "chai": "^3.5.0",
+    "es6-promise": "^4.0.5",
     "eslint": "^3.7.1",
     "eslint-config-airbnb-base": "^8.0.0",
     "eslint-plugin-html": "^1.5.3",
     "eslint-plugin-import": "^1.16.0",
+    "karma": "^1.3.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.3.0",
+    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-rollup-preprocessor": "^3.0.1",
+    "karma-sinon-chai": "^1.2.4",
+    "karma-spec-reporter": "^0.0.26",
+    "mocha": "^3.2.0",
     "node-sass": "^3.10.1",
+    "phantomjs-prebuilt": "^2.1.14",
     "rollup": "^0.36.3",
     "rollup-plugin-buble": "^0.14.0",
     "rollup-plugin-commonjs": "^5.0.5",
     "rollup-plugin-node-resolve": "^2.0.0",
-    "rollup-plugin-vue": "^2.2.6"
+    "rollup-plugin-replace": "^1.1.1",
+    "rollup-plugin-vue": "^2.2.10",
+    "sinon": "^1.17.6",
+    "sinon-chai": "^2.8.0"
   }
 }

template/src/components/Hello.vue

@@ -4,12 +4,10 @@
 
 
 <script>
-import upper from 'lodash/startCase';
-
 export default {
   computed: {
     name() {
-      return upper('John Doe');
+      return 'John Doe';
     },
   },
 };
@@ -19,4 +17,4 @@ export default {
 #greetings {
   color: chocolate;
 }
-</style>
+</style>

template/test/unit/karma.conf.js

@@ -0,0 +1,57 @@
+// This is a karma config file. For more details see
+//   http://karma-runner.github.io/0.13/config/configuration-file.html
+// we are also using it with karma-webpack
+//   https://github.com/webpack/karma-webpack
+require('es6-promise/auto');
+require('phantomjs-prebuilt').path = '/usr/local/bin/phantomjs';
+
+var vue = require('rollup-plugin-vue');
+var buble = require('rollup-plugin-buble');
+var resolve = require('rollup-plugin-node-resolve');
+var commonjs = require('rollup-plugin-commonjs');
+var replace = require('rollup-plugin-replace');
+
+var bubleConfig = {
+  useStrict: false,
+};
+var rollupConfig = {
+  useStrict: false,
+  plugins: [
+    vue({compileTemplate: true}),
+    buble(bubleConfig),
+    resolve({
+      jsnext: true,
+      main: true,
+      browser: true,
+    }),
+    commonjs(),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify( 'production' )
+    })
+  ],
+};
+
+module.exports = function(config) {
+  config.set({
+    autoWatch: true,
+    browsers: ['Chrome'],
+    frameworks: ['mocha', 'sinon-chai'],
+    reporters: ['spec', 'coverage'],
+    files: [
+      './specs/**/*.spec.js'
+    ],
+    preprocessors: {
+      '../../src/**/*.js': ['rollup'],
+      '../../src/**/*.vue': ['rollup'],
+      './specs/**/*.spec.js': ['rollup']
+    },
+    rollupPreprocessor: rollupConfig,
+    coverageReporter: {
+      dir: './coverage',
+      reporters: [
+        { type: 'lcov', subdir: '.' },
+        { type: 'text-summary' },
+      ]
+    },
+  });
+}

template/test/unit/specs/hello.spec.js

@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import Hello from '../../../src/components/Hello.vue';
+
+describe('Hello.vue', () => {
+  it('should render correct contents', () => {
+    const Constructor = Vue.extend(Hello);
+    const vm = new Constructor().$mount();
+    expect(vm.$el.textContent).to.equal('Hello! John Doe');
+  });
+});