Merge pull request #12 from ducksoupdev/dev2

Add chrome test debugging

Author: Matt Levy

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change log
 
+## [v0.6.0] (2017-04-07)
+
+**Features**
+
+* Implement chrome test debugging
+* Update chai and sinon assertions
+
 ## [v0.5.1] (2017-03-23)
 
 **Fixes**
@@ -8,7 +15,6 @@
 
 ## [v0.5.0] (2017-03-23)
 
-
 **Features**
 
 * Implement mocha for unit testing

README.md

@@ -19,8 +19,9 @@ $ npm run dev
 ### What's Included
 
 - `npm run dev`: Webpack + Typescript with proper config for source maps & hot-reload.
-- `npm test`: Mocha-based unit tests
-- `npm run test:watch`: Mocha-based unit tests with hot-reload
+- `npm test`: Mocha unit tests
+- `npm run test:debug`: Debug Mocha unit tests in Chrome
+- `npm run test:watch`: Fast feedback Mocha unit tests with hot-reload
 - `npm run coverage`: Karma coverage reporter
 - `npm run lint`: Lint all Typescript files
 - `npm run build`: build with HTML/CSS/JS minification.

template/config/webpack.config.test.js

@@ -1 +1,31 @@
-module.exports = require("./webpack.config.base");
+var webpack = require('webpack'),
+    webpackConfig = require('./webpack.config.base');
+
+webpackConfig.module.rules = [{
+    test: /\.ts$/,
+    exclude: /node_modules/,
+    loader: 'awesome-typescript-loader',
+    query: {
+      compilerOptions: {
+        inlineSourceMap: true,
+        sourceMap: false
+      }
+    }
+  },
+  {
+    test: /\.html$/,
+    loader: 'raw-loader',
+    exclude: ['./src/index.html']
+  }
+];
+
+webpackConfig.plugins = [
+    new webpack.SourceMapDevToolPlugin({
+        filename: null, // if no value is provided the sourcemap is inlined
+        test: /\.(ts|js)($|\?)/i
+    })
+];
+
+webpackConfig.devtool = 'inline-source-map';
+
+module.exports = webpackConfig;

template/karma.debug.js

@@ -0,0 +1,42 @@
+var webpackConfig = require('./config/webpack.config.test');
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['source-map-support', 'mocha', 'chai', 'sinon'],
+    files: [
+      'node_modules/es6-promise/dist/es6-promise.auto.js',
+      {
+        pattern: "node_modules/es6-promise/dist/es6-promise.auto.map",
+        watched: false,
+        included: false,
+        served: true
+      },
+      'src/test.ts'
+    ],
+    reporters: ['mocha'],
+    preprocessors: {
+      'src/test.ts': ['webpack']
+    },
+    webpack: webpackConfig,
+    webpackServer: {
+      noInfo: true
+    },
+    mime: {
+      'text/x-typescript': ['ts']
+    },
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ["Chrome_with_debugging"],
+    customLaunchers: {
+      Chrome_with_debugging: {
+        base: "Chrome",
+        flags: ["--remote-debugging-port=9222"],
+        debug: true
+      }
+    },
+    singleRun: false
+  });
+};

template/karma.unit.js

@@ -21,7 +21,10 @@ module.exports = function(config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: false,
-    browsers: ['PhantomJS'],
+    browsers: ['Chrome'],
+    mime: {
+      'text/x-typescript': ['ts']
+    },
     singleRun: true
   });
 };

template/package.json

@@ -27,6 +27,7 @@
     "sass": "node-sass --output ./src/css ./src/sass",
     "serve": "http-server dist/ -o",
     "test": "cross-env NODE_ENV=development karma start karma.unit.js",
+    "test:debug": "cross-env NODE_ENV=development karma start karma.debug.js",
     "test:watch": "cross-env NODE_ENV=development karma start karma.unit.js --singleRun=false --auto-watch"
   },
   "dependencies": {
@@ -79,7 +80,6 @@
     "remap-istanbul": "~0.9.1",
     "rimraf": "~2.6.1",
     "sinon": "~2.1.0",
-    "ts-loader": "~2.0.2",
     "tslint": "~4.5.1",
     "tslint-loader": "~3.4.3",
     "typescript": "~2.2.1",

template/src/components/about/about.spec.ts

@@ -1,10 +1,10 @@
-import Sinon from 'sinon';
-import {expect} from 'chai';
+import { spy, assert } from 'sinon';
+import { expect } from 'chai';
 import Component from 'vue-class-component';
 import { ComponentTest, MockLogger } from '../../util/component-test';
 import { AboutComponent } from './about';
 
-let loggerSpy = Sinon.spy();
+let loggerSpy = spy();
 
 @Component({
   template: require('./about.html')
@@ -24,11 +24,12 @@ describe('About component', () => {
   });
 
   it('should render correct contents', async () => {
+    debugger;
     directiveTest.createComponent();
 
     await directiveTest.execute((vm) => {
-      expect(vm.$el.querySelector('.repo-link').getAttribute('href')).toBe('https://github.com/ducksoupdev/vue-webpack-typescript');
-      expect(loggerSpy).toHaveBeenCalledWith('about is ready!');
+      expect(vm.$el.querySelector('.repo-link').getAttribute('href')).to.equal('https://github.com/ducksoupdev/vue-webpack-typescript');
+      assert.calledWith(loggerSpy, 'about is ready!');
     });
   });
 });

template/src/components/home/home.spec.ts

@@ -1,6 +1,6 @@
-import {expect} from 'chai';
-import {HomeComponent} from './home';
-import {ComponentTest} from '../../util/component-test';
+import { expect } from 'chai';
+import { HomeComponent } from './home';
+import { ComponentTest } from '../../util/component-test';
 
 describe('Home component', () => {
   let directiveTest: ComponentTest;
@@ -12,7 +12,8 @@ describe('Home component', () => {
   it('should render correct contents', async () => {
     directiveTest.createComponent();
     await directiveTest.execute((vm) => {
-      expect(vm.$el.querySelector('.package').textContent).toBe('vue-webpack-typescript');
+      debugger;
+      expect(vm.$el.querySelector('.package').textContent).to.equal('vue-webpack-typescript');
     });
   });
 });

template/src/components/list/list.spec.ts

@@ -1,5 +1,5 @@
 import Component from 'vue-class-component';
-import {expect} from 'chai';
+import { expect } from 'chai';
 import { ComponentTest } from '../../util/component-test';
 import { ListComponent } from './list';
 
@@ -28,7 +28,9 @@ describe('List component', () => {
     directiveTest.createComponent();
 
     await directiveTest.execute((vm) => { // ensure Vue has bootstrapped/run change detection
-      expect(vm.$el.querySelectorAll('ul li').length).toBe(3);
+      debugger;
+      console.log(vm.$el.querySelectorAll('.content ul li'));
+      expect(vm.$el.querySelectorAll('.content ul li').length).to.equal(3);
     });
   });
 });

template/src/components/navbar/navbar.spec.ts

@@ -1,12 +1,12 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Component from 'vue-class-component';
-import Sinon from 'sinon';
-import {expect} from 'chai';
-import {ComponentTest, MockLogger} from '../../util/component-test';
+import { spy, assert } from 'sinon';
+import { expect } from 'chai';
+import { ComponentTest, MockLogger } from '../../util/component-test';
 import { NavbarComponent } from './navbar';
 
-let loggerSpy = Sinon.spy();
+let loggerSpy = spy();
 
 @Component({
   template: require('./navbar.html')
@@ -32,9 +32,9 @@ describe('Navbar component', () => {
 
     router = new VueRouter({
       routes: [
-        {path: '/', component: homeComponent},
-        {path: '/about', component: aboutComponent},
-        {path: '/list', component: listComponent}
+        { path: '/', component: homeComponent },
+        { path: '/about', component: aboutComponent },
+        { path: '/list', component: listComponent }
       ]
     });
   });
@@ -43,8 +43,9 @@ describe('Navbar component', () => {
     directiveTest.createComponent({ router: router });
 
     await directiveTest.execute((vm) => { // ensure Vue has bootstrapped/run change detection
-      expect(loggerSpy).toHaveBeenCalledWith('Default object property!');
-      expect(vm.$el.querySelectorAll('ul.nav li').length).toBe(3);
+      debugger;
+      assert.calledWith(loggerSpy, 'Default object property!');
+      expect(vm.$el.querySelectorAll('ul.nav li').length).to.equal(3);
     });
   });
 
@@ -60,7 +61,7 @@ describe('Navbar component', () => {
 
     it('should render correct about contents', async () => {
       await directiveTest.execute((vm) => {
-        expect(vm.$el.querySelector('div.about').textContent).toEqual('About');
+        expect(vm.$el.querySelector('div.about').textContent).to.equal('About');
       });
     });
   });
@@ -77,7 +78,7 @@ describe('Navbar component', () => {
 
     it('should render correct about contents', async () => {
       await directiveTest.execute((vm) => {
-        expect(vm.$el.querySelector('div.list').textContent).toEqual('List');
+        expect(vm.$el.querySelector('div.list').textContent).to.equal('List');
       });
     });
   });