Create simple unit test with mocha, chai and karma

Author: PeachScript

app/index.js

@@ -10,7 +10,11 @@ var simpleFiles = {
   '_eslintrc.json': 'src/.eslintrc.json',
   '_route.js': 'src/route.js',
   '_Hello.vue': 'src/components/Hello.vue',
-  '_logo.png': 'src/assets/logo.png'
+  '_logo.png': 'src/assets/logo.png',
+  '_test.index.js': 'test/unit/index.js',
+  '_test.spec.Hello.js': 'test/unit/specs/Hello.spec.js',
+  '_test.eslintrc.json': 'test/unit/.eslintrc.json',
+  '_test.karma.conf.js': 'karma.conf.js'
 };
 var tplFiles = {
   '_index.html': 'index.html',

app/templates/_package.json

@@ -4,7 +4,8 @@
   "description": "<%= appname %> project",
   "scripts": {
     "dev": "webpack-dev-server --inline --hot --quiet",
-    "build": "rm -rf build/ && NODE_ENV=production webpack --progress --hide-modules"
+    "build": "rm -rf build/ && NODE_ENV=production webpack --progress --hide-modules",
+    "test": "karma start --single-run"
   },
   "dependencies": {<% if (extraConfig.isUseVueRouter) { %>
     "vue-router": "^0.7.13",<% } %>
@@ -16,6 +17,7 @@
     "babel-plugin-transform-runtime": "^6.7.5",
     "babel-preset-es2015": "^6.6.0",
     "babel-runtime": "^5.8.0",
+    "chai": "^3.5.0",
     "css-loader": "^0.23.1",
     "eslint": "^2.8.0",
     "eslint-config-airbnb-base": "^1.0.4",
@@ -25,8 +27,15 @@
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "html-webpack-plugin": "^2.16.0",
+    "karma": "^0.13.22",
+    "karma-chai": "^0.1.0",
+    "karma-mocha": "^1.0.1",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-webpack": "^1.7.0",
     "less": "^2.6.1",
     "less-loader": "^2.2.3",
+    "mocha": "^2.4.5",
+    "phantomjs-prebuilt": "^2.1.7",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "vue-hot-reload-api": "^1.3.2",

app/templates/_test.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "extends": "airbnb-base",
+  "env": {
+    "mocha": true
+  },
+  "globals": {
+    "expect": true
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".json", ".vue"]
+      }
+    }
+  }
+}

app/templates/_test.index.js

@@ -0,0 +1,2 @@
+const testsContext = require.context('./specs', true, /\.spec$/);
+testsContext.keys().forEach(testsContext);

app/templates/_test.karma.conf.js

@@ -0,0 +1,31 @@
+var webpackConfig = require('./webpack.config');
+delete webpackConfig.entry;
+
+// Karma configuration
+module.exports = function(config) {
+  config.set({
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['mocha', 'chai'],
+    // list of files / patterns to load in the browser
+    files: [
+      './test/unit/index.js'
+    ],
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+      './test/unit/index.js': 'webpack'
+    },
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['PhantomJS'],
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    // reporters: ['progress'],
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      noInfo: true
+    }
+  });
+}

app/templates/_test.spec.Hello.js

@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import Hello from '../../../src/components/Hello';
+
+describe('Hello.vue', () => {
+  it('should render correct contents', () => {
+    const vm = new Vue({
+      template: '<div><hello></hello></div>',
+      components: { Hello },
+    }).$mount();
+
+    expect(vm.$el.querySelector('.hello h1').textContent).to.contain('Hello World!');
+  });
+});