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({