From 9add627b92420430bcbab89238f7bd1d6a772ea1 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Mon, 27 Jun 2016 07:17:35 -0600 Subject: [PATCH 1/5] load css --- index.html | 3 +-- package.json | 2 ++ src/app.js | 2 ++ webpack.config.babel.js | 1 + 4 files changed, 6 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 0797a44..896d463 100755 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ VanillaJS • TodoMVC - +
@@ -39,6 +39,5 @@

Ported to ES6 by Kent C. Dodds

Part of TodoMVC

- diff --git a/package.json b/package.json index 3744065..bc305ba 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "babel-preset-es2015": "6.13.2", "babel-preset-es2016": "6.11.3", "babel-preset-stage-2": "6.13.0", + "css-loader": "0.23.1", "eslint": "3.2.2", "eslint-config-kentcdodds": "^9.0.0", "ghooks": "1.3.2", @@ -16,6 +17,7 @@ "npm-run-all": "2.3.0", "opt-cli": "1.5.1", "rimraf": "2.5.4", + "style-loader": "0.13.1", "webpack": "2.1.0-beta.20", "webpack-config-utils": "2.0.0", "webpack-dev-server": "2.1.0-beta.0", diff --git a/src/app.js b/src/app.js index f1f4f8e..bea3f58 100644 --- a/src/app.js +++ b/src/app.js @@ -1,3 +1,5 @@ +require('todomvc-app-css/index.css') + var View = require('./view') var helpers = require('./helpers') var Controller = require('./controller') diff --git a/webpack.config.babel.js b/webpack.config.babel.js index 41033b5..6818b09 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -18,6 +18,7 @@ module.exports = env => { module: { loaders: [ {test: /\.js$/, loaders: ['babel'], exclude: /node_modules/}, + {test: /\.css$/, loaders: ['style', 'css']}, ], }, }) From 19d9b92387fa08f0d2770b292c47ec2e7f7b49a2 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Tue, 19 Jul 2016 21:42:01 -0600 Subject: [PATCH 2/5] add HMR --- package.json | 2 +- src/bootstrap.js | 26 ++++++++++++++++++++++++-- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index bc305ba..2d31b3f 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "prebuild:dev": "rimraf dist", "build:dev": "webpack --env.dev", "start": "http-server", - "dev": "webpack-dev-server --env.dev", + "dev": "webpack-dev-server --env.dev --hot", "debug": "node-nightly --inspect --debug-brk node_modules/.bin/webpack --env.debug", "debug:dev": "npm run debug -- --env.dev", "debug:prod": "npm run debug -- --env.prod", diff --git a/src/bootstrap.js b/src/bootstrap.js index d223db6..4572f23 100644 --- a/src/bootstrap.js +++ b/src/bootstrap.js @@ -1,5 +1,27 @@ +/* eslint no-console:0 */ var app = require('./app') var helpers = require('./helpers') -helpers.$on(window, 'load', app.onLoad) -helpers.$on(window, 'hashchange', app.onLoad) +// this is only relevant when using `hot` mode with webpack +// special thanks to Eric Clemmons: https://github.com/ericclemmons/webpack-hot-server-example +const reloading = document.readyState === 'complete' +if (module.hot) { + module.hot.accept(function(err) { + console.log('❌ HMR Error:', err) + }) + if (reloading) { + console.log('🔁 HMR Reloading.') + app.onLoad() + } else { + console.info('✅ HMR Enabled.') + bootstrap() + } +} else { + console.info('❌ HMR Not Supported.') + bootstrap() +} + +function bootstrap() { + helpers.$on(window, 'load', app.onLoad) + helpers.$on(window, 'hashchange', app.onLoad) +} From b1b61939f6f1e02416fdaee75c309db962f0b210 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 29 Jun 2016 10:20:06 -0600 Subject: [PATCH 3/5] install deps and karma init --- karma.conf.js | 17 +++++++++++++++++ package.json | 8 +++++++- src/controller.test.js | 8 ++++++++ 3 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 karma.conf.js create mode 100644 src/controller.test.js diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 0000000..44e93aa --- /dev/null +++ b/karma.conf.js @@ -0,0 +1,17 @@ +module.exports = config => { + config.set({ + basePath: '', + frameworks: ['mocha'], + files: [ + 'src/**/*.test.js', + ], + reporters: ['progress'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: false, + browsers: ['Chrome'], + singleRun: true, + concurrency: Infinity, + }) +} diff --git a/package.json b/package.json index 2d31b3f..0019283 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,10 @@ "eslint-config-kentcdodds": "^9.0.0", "ghooks": "1.3.2", "http-server": "0.9.0", + "karma": "1.1.2", + "karma-chrome-launcher": "1.0.1", + "karma-mocha": "1.1.1", + "mocha": "3.0.1", "npm-run-all": "2.3.0", "opt-cli": "1.5.1", "rimraf": "2.5.4", @@ -38,7 +42,9 @@ "debug": "node-nightly --inspect --debug-brk node_modules/.bin/webpack --env.debug", "debug:dev": "npm run debug -- --env.dev", "debug:prod": "npm run debug -- --env.prod", - "validate": "npm-run-all --parallel lint build", + "test": "karma start", + "watch:test": "npm test -- --auto-watch --no-single-run", + "validate": "npm-run-all --parallel lint build test", "lint": "eslint ." } } diff --git a/src/controller.test.js b/src/controller.test.js new file mode 100644 index 0000000..0b07784 --- /dev/null +++ b/src/controller.test.js @@ -0,0 +1,8 @@ +describe('test', () => { + it('works', () => { + // test stuff + }) + it('works again', () => { + // other stuff + }) +}) From e7ed7b640fc6232fc2d88e7c308ddbea9f92e408 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Mon, 27 Jun 2016 06:41:58 -0600 Subject: [PATCH 4/5] add assertions --- karma.conf.js | 2 +- package.json | 2 ++ src/controller.test.js | 4 ++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/karma.conf.js b/karma.conf.js index 44e93aa..42b2337 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,7 +1,7 @@ module.exports = config => { config.set({ basePath: '', - frameworks: ['mocha'], + frameworks: ['mocha', 'chai'], files: [ 'src/**/*.test.js', ], diff --git a/package.json b/package.json index 0019283..654ece5 100644 --- a/package.json +++ b/package.json @@ -9,12 +9,14 @@ "babel-preset-es2015": "6.13.2", "babel-preset-es2016": "6.11.3", "babel-preset-stage-2": "6.13.0", + "chai": "3.5.0", "css-loader": "0.23.1", "eslint": "3.2.2", "eslint-config-kentcdodds": "^9.0.0", "ghooks": "1.3.2", "http-server": "0.9.0", "karma": "1.1.2", + "karma-chai": "0.1.0", "karma-chrome-launcher": "1.0.1", "karma-mocha": "1.1.1", "mocha": "3.0.1", diff --git a/src/controller.test.js b/src/controller.test.js index 0b07784..00436bc 100644 --- a/src/controller.test.js +++ b/src/controller.test.js @@ -1,8 +1,8 @@ describe('test', () => { it('works', () => { - // test stuff + expect(true).to.be.true }) it('works again', () => { - // other stuff + expect('hi').to.equal('hi') }) }) From 52495e81f885f01874bf5e1971787a305e77cbe7 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Tue, 7 Jun 2016 20:19:18 -0600 Subject: [PATCH 5/5] add webpack --- karma.conf.js | 13 ++++++++++--- package.json | 1 + src/controller.test.js | 11 +++++------ 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/karma.conf.js b/karma.conf.js index 42b2337..118f095 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,10 +1,17 @@ +const webpackEnv = {test: true} +const webpackConfig = require('./webpack.config.babel')(webpackEnv) +const fileGlob = 'src/**/*.test.js' + module.exports = config => { config.set({ basePath: '', frameworks: ['mocha', 'chai'], - files: [ - 'src/**/*.test.js', - ], + files: [fileGlob], + preprocessors: { + [fileGlob]: ['webpack'] + }, + webpack: webpackConfig, + webpackMiddleware: {noInfo: true}, reporters: ['progress'], port: 9876, colors: true, diff --git a/package.json b/package.json index 654ece5..825659f 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "karma-chai": "0.1.0", "karma-chrome-launcher": "1.0.1", "karma-mocha": "1.1.1", + "karma-webpack": "1.7.0", "mocha": "3.0.1", "npm-run-all": "2.3.0", "opt-cli": "1.5.1", diff --git a/src/controller.test.js b/src/controller.test.js index 00436bc..ba67dc9 100644 --- a/src/controller.test.js +++ b/src/controller.test.js @@ -1,8 +1,7 @@ -describe('test', () => { - it('works', () => { - expect(true).to.be.true - }) - it('works again', () => { - expect('hi').to.equal('hi') +var Controller = require('./controller') + +describe('controller', () => { + it('exists', () => { + expect(Controller).to.exist }) })