Refactor tests and uplift libs

Author: ducksoupdev

.gitignore

@@ -1 +1,3 @@
-
+node_modules
+.idea
+.vscode

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change log
 
+## [v0.4.0] (2017-03-17)
+
+** Features **
+
+* Uplift to Vue 2.2
+* Refactor tests
+* Use es2015 style imports
+
+** Fixes **
+
+* Vue router is not a constructor [#6]
+* Typescript lint task not working
+
 ## [v0.3.1] (2017-02-20)
 
 ** Features **
@@ -32,6 +45,7 @@
 
 *  Initial release
 
+[v0.4.0]: https://github.com/ducksoupdev/vue-webpack-typescript/compare/v0.3.1...v0.4.0
 [v0.3.1]: https://github.com/ducksoupdev/vue-webpack-typescript/compare/v0.2.0...v0.3.1
 [v0.3.0]: https://github.com/ducksoupdev/vue-webpack-typescript/compare/v0.2.0...v0.3.0
 [v0.2.0]: https://github.com/ducksoupdev/vue-webpack-typescript/compare/v0.1.1...v0.2.0

README.md

@@ -19,5 +19,10 @@ $ npm run dev
 ### What's Included
 
 - `npm run dev`: Webpack + Typescript with proper config for source maps & hot-reload.
-- `npm test`: Jasmine-based tests and Karma coverage reporter
+- `npm test`: Jasmine-based tests
+- `npm run test-watch`: Jasmine-based 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.
+- `npm run ci-teamcity`: Teamcity CI integration
+- `npm run ci-jenkins`: Jenkins CI integration

template/README.md

@@ -11,12 +11,24 @@ npm install
 # serve with hot reload at localhost:8080
 npm run dev
 
+# lint the Typescript
+npm run lint
+
 # run the tests
 npm test
 
+# run the tests on changes
+npm run test-watch
+
 # run the test suite and generate a coverage report
 npm run coverage
 
+# run the tests on Teamcity
+npm run ci-teamcity
+
+# run the tests on Jenkins
+npm run ci-jenkins
+
 # build for production with minification
 npm run build
 

template/karma.coverage.js

@@ -8,8 +8,8 @@ var args = parseArgs(process.argv.slice(2), {
   }
 });
 
-webpackConfig.module.rules = [
-  { test: /\.ts$/,
+webpackConfig.module.rules = [{
+    test: /\.ts$/,
     exclude: /node_modules/,
     loader: "ts-loader",
     query: {
@@ -19,10 +19,10 @@ webpackConfig.module.rules = [
       }
     }
   },
-  { 
-    test: /\.html$/, 
-    loader: 'raw-loader', 
-    exclude: [ './src/index.html' ] 
+  {
+    test: /\.html$/,
+    loader: 'raw-loader',
+    exclude: ['./src/index.html']
   },
   {
     test: /\.ts$/,
@@ -31,12 +31,14 @@ webpackConfig.module.rules = [
     exclude: [
       'node_modules',
       /\.spec\.ts$/
-    ]
+    ],
+    query: {
+      esModules: true
+    }
   }
 ];
 
 var reporters = ['mocha', 'coverage'];
-var browsers = ['PhantomJS'];
 
 if (args.env === 'tc') {
   reporters = ['teamcity', 'coverage'];
@@ -63,7 +65,9 @@ module.exports = function (config) {
       resolve: webpackConfig.resolve,
       module: webpackConfig.module
     },
-    webpackServer: {noInfo: true},
+    webpackServer: {
+      noInfo: true
+    },
     junitReporter: {
       outputDir: 'reports/'
     },
@@ -78,7 +82,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: false,
-    browsers: browsers,
+    browsers: ['PhantomJS'],
     singleRun: true
   });
 };

template/package.json

@@ -7,67 +7,76 @@
   "scripts": {
     "build": "cross-env NODE_ENV=production npm run clean && npm run test && npm run sass && npm run build-parts && npm run clean-css && npm run process-html",
     "build-parts": "npm run sass && npm run compile",
+    "ci-teamcity": "karma --env=tc start karma.coverage.js && npm run ts-coverage-remap",
+    "ci-jenkins": "karma --env=jk start karma.coverage.js && npm run ts-coverage-remap",
     "clean": "rimraf dist && rimraf coverage",
-    "clean-css": "cleancss -o dist/css/main.min.css dist/css/main.css",
+    "clean-css": "cleancss -o dist/css/main.min.css src/css/bootstrap.css src/css/main.css",
     "compile": "webpack",
-    "coverage": "karma start karma.coverage.js && npm run ts-coverage-remap && npm run coverage-report-open",
-    "coverage-report-open": "http-server coverage/html-ts/ -o -p 8888",
+    "copy-bs": "ncp node_modules/bootstrap/dist/css/bootstrap.css src/css/bootstrap.css",
+    "coverage": "npm run coverage-run && npm run ts-coverage-remap && npm run coverage-report-open",
+    "coverage-run": "karma start karma.coverage.js",
+    "coverage-report-open": "opn coverage/html-ts/index.html",
     "dev": "cross-env NODE_ENV=development npm run sass && concurrently --kill-others \"webpack-dev-server --hot --inline\" \"node-sass --watch --output ./src/css ./src/sass\"",
-    "lint": "ts-node ./scripts/ts-lint.ts -f src/**/*.ts",
+    "lint": "tslint src/**/*.ts",
     "process-html": "htmlprocessor src/index.html -o dist/index.html",
     "sass": "node-sass --output ./src/css ./src/sass",
     "serve": "http-server dist/ -o",
     "test": "karma start karma.unit.js",
+    "test-watch": "karma start karma.unit.js --singleRun=false --auto-watch",
     "ts-coverage-remap": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html-ts -t html"
   },
   "dependencies": {
-    "axios": "^0.15.3",
-    "bootstrap": "^3.3.7",
-    "vue": "^2.1.10",
-    "vue-class-component": "^4.4.0",
-    "vue-property-decorator": "^3.4.0",
-    "vue-router": "^2.1.1"
+    "axios": "~0.15.3",
+    "bootstrap": "~3.3.7",
+    "vue": "~2.2.4",
+    "vue-class-component": "~5.0.0",
+    "vue-property-decorator": "~4.0.0",
+    "vue-router": "~2.3.0"
   },
   "devDependencies": {
-    "@types/axios": "^0.9.34",
-    "@types/jasmine": "^2.5.40",
-    "@types/jquery": "^2.0.39",
-    "@types/node": "^6.0.60",
-    "clean-css-cli": "^4.0.7",
-    "compression-webpack-plugin": "^0.3.2",
-    "concurrently": "^3.3.0",
-    "copy-webpack-plugin": "^4.0.1",
-    "cross-env": "^3.1.4",
-    "es6-promise": "^4.0.5",
-    "file-loader": "^0.10.0",
+    "@types/jasmine": "~2.5.46",
+    "@types/jquery": "~2.0.41",
+    "@types/node": "~7.0.8",
+    "awesome-typescript-loader": "~3.1.2",
+    "clean-css-cli": "~4.0.9",
+    "compression-webpack-plugin": "~0.3.2",
+    "concurrently": "~3.4.0",
+    "copy-webpack-plugin": "~4.0.1",
+    "cross-env": "~3.2.4",
+    "es6-promise": "~4.1.0",
+    "file-loader": "~0.10.1",
     "globby": "~6.1.0",
     "htmlprocessor": "~0.2.4",
-    "http-server": "^0.9.0",
-    "inject-loader": "^3.0.0-beta4",
-    "istanbul-instrumenter-loader": "^2.0.0",
-    "jasmine-core": "^2.5.2",
-    "json-loader": "^0.5.4",
-    "karma": "^1.4.1",
-    "karma-coverage": "^1.1.1",
-    "karma-jasmine": "^1.1.0",
-    "karma-junit-reporter": "^1.2.0",
-    "karma-mocha-reporter": "^2.2.2",
-    "karma-phantomjs-launcher": "^1.0.2",
-    "karma-source-map-support": "^1.2.0",
-    "karma-teamcity-reporter": "^1.0.0",
-    "karma-webpack": "^2.0.2",
-    "lodash.merge": "^4.6.0",
-    "minimist": "^1.2.0",
-    "node-sass": "^4.1.1",
-    "phantomjs-prebuilt": "^2.1.14",
-    "raw-loader": "^0.5.1",
-    "remap-istanbul": "^0.9.1",
-    "rimraf": "^2.5.4",
-    "ts-loader": "^2.0.0",
-    "tslint": "^4.4.2",
-    "tslint-loader": "^3.4.2",
-    "typescript": "^2.1.6",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.3.0"
+    "http-server": "~0.9.0",
+    "inject-loader": "~2.0.1",
+    "istanbul-instrumenter-loader": "~2.0.0",
+    "jasmine-core": "~2.5.2",
+    "json-loader": "~0.5.4",
+    "karma": "~1.5.0",
+    "karma-chrome-launcher": "~2.0.0",
+    "karma-coverage": "~1.1.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-junit-reporter": "~1.2.0",
+    "karma-mocha-reporter": "~2.2.2",
+    "karma-phantomjs-launcher": "~1.0.4",
+    "karma-source-map-support": "~1.2.0",
+    "karma-sourcemap-loader": "~0.3.7",
+    "karma-teamcity-reporter": "~1.0.0",
+    "karma-webpack": "~2.0.3",
+    "lodash.merge": "~4.6.0",
+    "minimist": "~1.2.0",
+    "ncp": "~2.0.0",
+    "node-sass": "~4.5.0",
+    "opn-cli": "~3.1.0",
+    "phantomjs-prebuilt": "~2.1.14",
+    "raw-loader": "~0.5.1",
+    "remap-istanbul": "~0.9.1",
+    "rimraf": "~2.6.1",
+    "ts-loader": "~2.0.2",
+    "tslint": "~4.5.1",
+    "tslint-loader": "~3.4.3",
+    "typescript": "~2.2.1",
+    "webpack": "~2.2.1",
+    "webpack-dev-server": "~2.4.2"
   }
 }

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

@@ -1,46 +1,34 @@
-import * as Vue from 'vue';
-import {ComponentTest} from '../../util/component-test';
-import {ILogger} from '../../util/log';
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { ComponentTest, MockLogger } from '../../util/component-test';
+import { ILogger } from '../../util/log';
+import { AboutComponent } from './about';
+
+let loggerSpy = jasmine.createSpy('loggerInfo');
+
+@Component({
+    template: require('./about.html')
+})
+class MockAboutComponent extends AboutComponent {
+  constructor() {
+    super();
+    this.logger = new MockLogger(loggerSpy);
+  }
+}
 
 describe('About component', () => {
-    // ensure component is loaded into webpack
-    // modules loaded using es6 imports (as above) that are not used are removed through transpilation
-    let aboutComponent = require('./about');
-
-    let directiveTest: ComponentTest;
-    let aboutComponentInjector: any;
-    let infoLoggerSpy = jasmine.createSpy('loggerInfo');
-
-    class MockLogger implements ILogger {
-        info(msg: any) {
-            infoLoggerSpy(msg);
-        }
-
-        warn(msg: any) {
-            infoLoggerSpy(msg);
-        }
-
-        error(msg: any) {
-            infoLoggerSpy(msg);
-        }
-    }
-
-    beforeEach(() => {
-        aboutComponentInjector = require('inject-loader!./about'); // load the module from the webpack bundle
-
-        let mockAboutComponent = aboutComponentInjector({
-            '../../util/log': { Logger: MockLogger }
-        }).AboutComponent;
-
-        directiveTest = new ComponentTest('<div><about></about></div>', { 'about': mockAboutComponent });
-    });
-
-    it('should render correct contents', (done) => {
-        directiveTest.createComponent();
-        directiveTest.execute((vm) => {
-            expect(vm.$el.querySelector('.repo-link').getAttribute('href')).toBe('https://github.com/ducksoupdev/vue-webpack-typescript');
-            expect(infoLoggerSpy).toHaveBeenCalledWith('about is ready!');
-            done();
-        });
+  let directiveTest: ComponentTest;
+
+  beforeEach(() => {
+    directiveTest = new ComponentTest('<div><about></about></div>', { 'about': MockAboutComponent });
+  });
+
+  it('should render correct contents', (done) => {
+    directiveTest.createComponent();
+    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!');
+      done();
     });
+  });
 });

template/src/components/about/about.ts

@@ -1,4 +1,4 @@
-import * as Vue from 'vue';
+import Vue from 'vue';
 import Component from 'vue-class-component';
 import {Logger} from '../../util/log';
 
@@ -7,7 +7,7 @@ import {Logger} from '../../util/log';
 })
 export class AboutComponent extends Vue {
 
-    private logger: Logger;
+    protected logger: Logger;
     repo: string = 'https://github.com/ducksoupdev/vue-webpack-typescript';
 
     mounted() {

template/src/components/home/home.ts

@@ -1,4 +1,4 @@
-import * as Vue from 'vue';
+import Vue from 'vue';
 import Component from 'vue-class-component';
 
 @Component({

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

@@ -1,35 +1,36 @@
-import * as Vue from 'vue';
-import {ComponentTest} from '../../util/component-test';
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { ComponentTest } from '../../util/component-test';
+import { ListComponent } from './list';
 
-describe('List component', () => {
-    // ensure component is loaded into webpack
-    // modules loaded using es6 imports (as above) that are not used are removed through transpilation
-    let listComponent = require('./list');
-
-    let directiveTest: ComponentTest;
-    let listComponentInjector: any;
+@Component({
+  template: require('./list.html')
+})
+class MockListComponent extends ListComponent {
+  constructor() {
+    super();
+    this.axios = {
+      get: () => {
+        return Promise.resolve({ data: [{ name: 'test 1' }, { name: 'test 2' }, { name: 'test 3' }] });
+      }
+    };
+  }
+}
 
-    beforeEach(() => {
-        listComponentInjector = require('inject-loader!./list'); // load the module from the webpack bundle
-
-        let mockListComponent = listComponentInjector({
-            axios: {
-                get: () => {
-                    return Promise.resolve({ data: [{ name: 'test 1' }, { name: 'test 2' }, { name: 'test 3' }] });
-                }
-            }
-        }).ListComponent;
+describe('List component', () => {
+  let directiveTest: ComponentTest;
 
-        directiveTest = new ComponentTest('<div><list></list></div>', { 'list': mockListComponent });
-    });
+  beforeEach(() => {
+    directiveTest = new ComponentTest('<div><list></list></div>', { 'list': MockListComponent });
+  });
 
-    it('should render correct contents', (done) => {
-        directiveTest.createComponent();
-        setTimeout(() => {
-            directiveTest.execute((vm) => { // ensure Vue has bootstrapped/run change detection
-                expect(vm.$el.querySelectorAll('ul li').length).toBe(3);
-                done();
-            });
-        }, 50);
-    });
+  it('should render correct contents', (done) => {
+    directiveTest.createComponent();
+    setTimeout(() => {
+      directiveTest.execute((vm) => { // ensure Vue has bootstrapped/run change detection
+        expect(vm.$el.querySelectorAll('ul li').length).toBe(3);
+        done();
+      });
+    }, 50);
+  });
 });

template/src/components/list/list.ts

@@ -1,6 +1,6 @@
-import * as Vue from 'vue';
+import Vue from 'vue';
 import Component from 'vue-class-component';
-import * as axios from 'axios';
+import axios, {AxiosResponse} from 'axios';
 
 interface UserResponse {
     id: string;
@@ -14,6 +14,12 @@ export class ListComponent extends Vue {
 
     items: UserResponse[] = [];
     private url = 'https://jsonplaceholder.typicode.com/users';
+    protected axios;
+
+    constructor() {
+      super();
+      this.axios = axios;
+    }
 
     mounted() {
         this.$nextTick(() => {
@@ -23,7 +29,7 @@ export class ListComponent extends Vue {
 
     private loadItems() {
         if (!this.items.length) {
-            axios.get(this.url).then((response: Axios.AxiosXHR<UserResponse[]>) => {
+            this.axios.get(this.url).then((response: AxiosResponse) => {
                 this.items = response.data;
             }, (error) => {
                 console.error(error);

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

@@ -1,42 +1,29 @@
-import * as Vue from 'vue';
+import Vue from 'vue';
 import VueRouter from 'vue-router';
-import {ComponentTest} from '../../util/component-test';
+import Component from 'vue-class-component';
+import {ComponentTest, MockLogger} from '../../util/component-test';
 import {ILogger} from '../../util/log';
+import { NavbarComponent } from './navbar';
 
-describe('Navbar component', () => {
-    // ensure component is loaded into webpack
-    // modules loaded using es6 imports (as above) that are not used are removed through transpilation
-    let navbarComponent = require('./navbar');
+let loggerSpy = jasmine.createSpy('loggerInfo');
+
+@Component({
+    template: require('./navbar.html')
+})
+class MockNavbarComponent extends NavbarComponent {
+  constructor() {
+    super();
+    this.logger = new MockLogger(loggerSpy);
+  }
+}
 
+describe('Navbar component', () => {
     let directiveTest: ComponentTest;
-    let navbarComponentInjector: any;
     let router: VueRouter;
-    let infoLoggerSpy = jasmine.createSpy('loggerInfo');
-
-    class MockLogger implements ILogger {
-        info(msg: any) {
-            infoLoggerSpy(msg);
-        }
-
-        warn(msg: any) {
-            infoLoggerSpy(msg);
-        }
-
-        error(msg: any) {
-            infoLoggerSpy(msg);
-        }
-    }
 
     beforeAll(() => {
         Vue.use(VueRouter);
-
-        navbarComponentInjector = require('inject-loader!./navbar'); // load the module from the webpack bundle
-
-        let mockNavbarComponent = navbarComponentInjector({
-            '../../util/log': { Logger: MockLogger }
-        }).NavbarComponent;
-
-        directiveTest = new ComponentTest('<div><navbar></navbar><router-view>loading...</router-view></div>', { 'navbar': mockNavbarComponent });
+        directiveTest = new ComponentTest('<div><navbar></navbar><router-view>loading...</router-view></div>', { 'navbar': MockNavbarComponent });
 
         let homeComponent = { template: '<div class="home">Home</div>' };
         let aboutComponent = { template: '<div class="about">About</div>' };
@@ -55,7 +42,7 @@ describe('Navbar component', () => {
         directiveTest.createComponent({ router: router });
 
         directiveTest.execute((vm) => { // ensure Vue has bootstrapped/run change detection
-            expect(infoLoggerSpy).toHaveBeenCalledWith('Default object property!');
+            expect(loggerSpy).toHaveBeenCalledWith('Default object property!');
             expect(vm.$el.querySelectorAll('ul.nav li').length).toBe(3);
             done();
         });

template/src/components/navbar/navbar.ts

@@ -1,4 +1,4 @@
-import * as Vue from 'vue';
+import Vue from 'vue';
 import { Component, watch } from 'vue-property-decorator';
 import { Link } from './link';
 import { Logger } from '../../util/log';
@@ -8,7 +8,7 @@ import { Logger } from '../../util/log';
 })
 export class NavbarComponent extends Vue {
 
-    private logger: Logger;
+    protected logger: Logger;
 
     inverted: boolean = true; // default value
 

template/src/index.html

@@ -5,11 +5,13 @@
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <title>{{ name }}</title>
+  <title>vue-upgrade4</title>
 
-  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+  <!-- build:remove -->
+  <link rel="stylesheet" href="css/bootstrap.css">
+  <!-- /build -->
   <!-- build:css css/main.min.css -->
-  <link rel="stylesheet" href="/css/main.css">
+  <link rel="stylesheet" href="css/main.css">
   <!-- /build -->
 </head>
 

template/src/util/component-test.ts

@@ -1,37 +1,56 @@
-import * as Vue from 'vue';
-import * as merge from 'lodash.merge';
+import Vue from 'vue';
+import merge from 'lodash.merge';
+import { ILogger } from './log';
 
 export interface IComponents {
-    [key: string]: Vue.Component;
+  [key: string]: Vue.Component;
 }
 
 interface IExecuteCallback {
-    (vm: Vue): void;
+  (vm: Vue): void;
 }
 
 export interface IComponentTest {
-    createComponent(createOptions?: any): void;
-    execute(callback: IExecuteCallback): void;
+  createComponent(createOptions?: any): void;
+  execute(callback: IExecuteCallback): void;
 }
 
 export class ComponentTest implements IComponentTest {
 
-    public vm: Vue;
+  public vm: Vue;
 
-    constructor(private template: string, private components: IComponents) {
-    }
+  constructor(private template: string, private components: IComponents) {
+  }
 
-    public createComponent(createOptions?: any): void {
-        let options = {
-            template: this.template,
-            components: this.components
-        };
-        if (createOptions) merge(options, createOptions);
-        this.vm = new Vue(options).$mount();
-    }
+  public createComponent(createOptions?: any): void {
+    let options = {
+      template: this.template,
+      components: this.components
+    };
+    if (createOptions) merge(options, createOptions);
+    this.vm = new Vue(options).$mount();
+  }
 
-    public execute(callback: IExecuteCallback): void {
-        Vue.nextTick(callback.bind(this, this.vm));
-    }
+  public execute(callback: IExecuteCallback): void {
+    Vue.nextTick(callback.bind(this, this.vm));
+  }
 
 }
+
+export class MockLogger implements ILogger {
+
+  constructor(private loggerSpy: jasmine.Spy) {
+  }
+
+  info(msg: any) {
+    this.loggerSpy(msg);
+  }
+
+  warn(msg: any) {
+    this.loggerSpy(msg);
+  }
+
+  error(msg: any) {
+    this.loggerSpy(msg);
+  }
+}

template/tsconfig.json

@@ -1,19 +1,17 @@
 {
   "compilerOptions": {
-     "lib":[
-       "dom",
+    "lib": [
+      "dom",
       "es5",
+      "es2015",
       "es2015.promise"
     ],
-    "module": "commonjs",
+    "module": "es2015",
     "moduleResolution": "node",
     "target": "es5",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true
-  },
-  "exclude": [
-    "node_modules"
-  ]
+  }
 }

template/webpack.config.js

@@ -14,6 +14,7 @@ var metadata = {
 };
 
 module.exports = {
+  stats: false,
   devtool: 'source-map', //to point console errors to ts files instead of compiled js
   entry: {
     'main': './src/main.ts', //app main file
@@ -24,15 +25,15 @@ module.exports = {
     filename: '[name].js'
   },
   resolve: {
-    extensions: ['.ts', '.js'],
+    extensions: ['.ts', '.js', '.html'],
     alias: {
       'vue$': 'vue/dist/vue.common.js'
     }
   },
   module: {
     rules: [
-      { test: /\.ts$/, enforce: 'pre', loader: 'tslint-loader' },
-      { test: /\.ts$/, exclude: /node_modules/, loader: "ts-loader" },
+      { test: /\.ts$/, exclude: /node_modules/, enforce: 'pre', loader: 'tslint-loader' },
+      { test: /\.ts$/, loader: 'ts-loader' },
       { test: /\.html$/, loader: 'raw-loader', exclude: [ './src/index.html' ] }
     ]
   },