feat(test): add support for client tests with karma

Author: klarkc

template/gulp-tasks/build.js

@@ -10,17 +10,6 @@ import source from 'vinyl-source-stream';
 import buffer from 'vinyl-buffer';
 import {dirs} from './config.js';
 
-gulp.task('build:test', () => {
-  return gulp.src([
-    path.resolve(dirs.test, '**/*.test.js'),
-    path.resolve(dirs.test, 'config.js'),
-  ])
-  .pipe(sourcemaps.init())
-  .pipe(babel())
-  .pipe(sourcemaps.write())
-  .pipe(gulp.dest(dirs.buildTest));
-});
-
 gulp.task('build:client', ['copy:client'], () => {
   let b = browserify({
     entries: path.resolve(dirs.srcClient, 'main.js'),
@@ -70,7 +59,6 @@ gulp.task('build:server', () => {
 });
 
 gulp.task('build', [
-  'build:test',
   'build:client',
   'build:common',
   'build:server',

template/gulp-tasks/config.js

@@ -8,6 +8,8 @@ dirs.buildClient = path.resolve(dirs.root, dirs.build, 'client');
 dirs.buildServer = path.resolve(dirs.root, dirs.build, 'server');
 dirs.buildCommon = path.resolve(dirs.root, dirs.build, 'common');
 dirs.test = path.resolve(dirs.root, 'test');
+dirs.testClient = path.resolve(dirs.test, 'client');
+dirs.testServer = path.resolve(dirs.test, 'server');
 dirs.srcClient = path.resolve(dirs.root, 'client');
 dirs.srcCommon = path.resolve(dirs.root, 'common');
 dirs.srcServer = path.resolve(dirs.root, 'server');

template/gulp-tasks/test.js

@@ -1,12 +1,23 @@
 import gulp from 'gulp';
 import mocha from 'gulp-mocha';
+import {Server} from 'karma';
 import path from 'path';
 import {dirs} from './config.js';
 
-gulp.task('test', ['build'], () => {
-  gulp.src(path.resolve(dirs.buildTest, '**/*.test.js'))
+gulp.task('test:server', () => {
+  gulp.src(path.resolve(dirs.testServer, '**/*.test.js'))
   .pipe(mocha({
     compilers: 'js:babel-core/register',
-    require: path.resolve(dirs.test, 'config.js'),
+    require: path.resolve(dirs.test, 'mocha.conf.js'),
   }));
 });
+
+gulp.task('test:client', (done) => {
+  new Server({
+    files: [path.resolve(dirs.testClient, '**/*.test.js')],
+    configFile: path.resolve(dirs.test, 'karma.conf.js'),
+    singleRun: true,
+  }, done).start();
+});
+
+gulp.task('test', ['test:server', 'test:client']);

template/package.json

@@ -27,9 +27,9 @@
     "babel-preset-es2015": "^6.24.1",
     "babelify": "^7.3.0",
     "browserify": "^14.4.0",
-    "css-modulesify": "^0.28.0",
     "chai": "^4.1.0",
     "chai-http": "^3.0.0",
+    "css-modulesify": "^0.28.0",
     "eslint": "^3.17.1",
     "eslint-config-loopback": "^8.0.0",
     "eslint-plugin-vue": "beta",
@@ -39,8 +39,13 @@
     "gulp-connect": "^5.0.0",
     "gulp-mocha": "^4.3.1",
     "gulp-sourcemaps": "^2.6.0",
+    "karma": "^1.7.1",
+    "karma-browserify": "^5.1.1",
+    "karma-chai": "^0.1.0",
+    "karma-mocha": "^1.3.0",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-phantomjs-shim": "^1.5.0",
     "mocha": "^3.4.2",
-    "nsp": "^2.1.0",
     "sinon": "^2.3.8",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",

template/test/.eslintrc

@@ -5,6 +5,7 @@
   "globals": {
     "expect": true,
     "assert": true,
-    "request": true
+    "request": true,
+    "sinon": true
   }
 }

template/test/client/app.test.js

@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import App from '../../client/App.vue';
+
+describe('App.vue', () => {
+  const Constructor = Vue.extend(App);
+
+  it('should render correct content', () => {
+    const vm = new Constructor().$mount();
+    return Vue.nextTick(() => {
+      expect(vm.$el.innerHTML).to.equal('Hello World!');
+    });
+  });
+});

template/test/karma.conf.js

@@ -0,0 +1,16 @@
+import babelify from 'babelify';
+import vueify from 'vueify';
+
+export default (config) => {
+  config.set({
+    browsers: ['PhantomJS'],
+    frameworks: ['browserify', 'mocha', 'chai', 'phantomjs-shim'],
+    preprocessors: {
+      '**/*.js': ['browserify'],
+    },
+    browserify: {
+      debug: true,
+      transform: [babelify, vueify],
+    },
+  });
+};