🌟 Tests working with webpack

bundle.js

@@ -45,18 +45,15 @@
 /***/ function(module, exports, __webpack_require__) {
 
 	/*global app, $on */
+	'use strict';
 	__webpack_require__(1);
 	__webpack_require__(5);
-	//require('todomvc-common');
 	__webpack_require__(7);
 	__webpack_require__(8);
 	__webpack_require__(9);
 	__webpack_require__(10);
 	__webpack_require__(11);
 	__webpack_require__(12);
-	(function () {
-		'use strict';
-
 	/**
 	 * Sets up a brand new Todo list.
 	 *
@@ -76,12 +73,11 @@
 		todo.controller.setView(document.location.hash);
 	}
 
-		$on(window, 'load', function() {
+	$on(window, 'load', function () {
 		todo = new Todo('todos-vanillajs');
 		setView();
 	});
 	$on(window, 'hashchange', setView);
-	})();
 
 
 /***/ },
@@ -450,10 +446,8 @@
 /***/ function(module, exports, __webpack_require__) {
 
 	/*global qs, qsa, $on, $parent, $delegate */
-	__webpack_require__(8);
-	(function (window) {
 	'use strict';
-
+	__webpack_require__(8);
 	/**
 	 * View that abstracts away the browser's DOM completely.
 	 * It has two simple entry points:
@@ -667,7 +661,6 @@
 	// Export to window
 	window.app = window.app || {};
 	window.app.View = View;
-	}(window));
 
 
 /***/ },
@@ -675,9 +668,7 @@
 /***/ function(module, exports) {
 
 	/*global NodeList */
-	(function (window) {
 	'use strict';
-
 	// Get element(s) by CSS selector:
 	window.qs = function (selector, scope) {
 		return (scope || document).querySelector(selector);
@@ -725,16 +716,13 @@
 	// Allow for looping on nodes by chaining:
 	// qsa('.foo').forEach(function () {})
 	NodeList.prototype.forEach = Array.prototype.forEach;
-	})(window);
 
 
 /***/ },
 /* 9 */
 /***/ function(module, exports) {
 
-	(function (window) {
 	'use strict';
-
 	/**
 	 * Takes a model and view and acts as the controller between them
 	 *
@@ -807,7 +795,7 @@
 	 */
 	Controller.prototype.showActive = function () {
 		var that = this;
-			that.model.read({ completed: false }, function (data) {
+		that.model.read({completed: false}, function (data) {
 			that.view.render('showEntries', data);
 		});
 	};
@@ -817,7 +805,7 @@
 	 */
 	Controller.prototype.showCompleted = function () {
 		var that = this;
-			that.model.read({ completed: true }, function (data) {
+		that.model.read({completed: true}, function (data) {
 			that.view.render('showEntries', data);
 		});
 	};
@@ -894,7 +882,7 @@
 	 */
 	Controller.prototype.removeCompletedItems = function () {
 		var that = this;
-			that.model.read({ completed: true }, function (data) {
+		that.model.read({completed: true}, function (data) {
 			data.forEach(function (item) {
 				that.removeItem(item.id);
 			});
@@ -914,7 +902,7 @@
 	 */
 	Controller.prototype.toggleComplete = function (id, completed, silent) {
 		var that = this;
-			that.model.update(id, { completed: completed }, function () {
+		that.model.update(id, {completed: completed}, function () {
 			that.view.render('elementComplete', {
 				id: id,
 				completed: completed
@@ -932,7 +920,7 @@
 	 */
 	Controller.prototype.toggleAll = function (completed) {
 		var that = this;
-			that.model.read({ completed: !completed }, function (data) {
+		that.model.read({completed: !completed}, function (data) {
 			data.forEach(function (item) {
 				that.toggleComplete(item.id, completed, true);
 			});
@@ -999,16 +987,13 @@
 	// Export to window
 	window.app = window.app || {};
 	window.app.Controller = Controller;
-	})(window);
 
 
 /***/ },
 /* 10 */
 /***/ function(module, exports) {
 
-	(function (window) {
 	'use strict';
-
 	/**
 	 * Creates a new Model instance and hooks up the storage.
 	 *
@@ -1027,7 +1012,8 @@
 	 */
 	Model.prototype.create = function (title, callback) {
 		title = title || '';
-			callback = callback || function () {};
+		callback = callback || function () {
+			};
 
 		var newItem = {
 			title: title.trim(),
@@ -1054,14 +1040,15 @@
 	 */
 	Model.prototype.read = function (query, callback) {
 		var queryType = typeof query;
-			callback = callback || function () {};
+		callback = callback || function () {
+			};
 
 		if (queryType === 'function') {
 			callback = query;
 			return this.storage.findAll(callback);
 		} else if (queryType === 'string' || queryType === 'number') {
 			query = parseInt(query, 10);
-				this.storage.find({ id: query }, callback);
+			this.storage.find({id: query}, callback);
 		} else {
 			this.storage.find(query, callback);
 		}
@@ -1125,7 +1112,6 @@
 	// Export to window
 	window.app = window.app || {};
 	window.app.Model = Model;
-	})(window);
 
 
 /***/ },
@@ -1133,9 +1119,7 @@
 /***/ function(module, exports) {
 
 	/*jshint eqeqeq:false */
-	(function (window) {
 	'use strict';
-
 	/**
 	 * Creates a new client side storage object and will create an empty
 	 * collection if no collection already exists.
@@ -1145,7 +1129,8 @@
 	 * real life you probably would be making AJAX calls
 	 */
 	function Store(name, callback) {
-			callback = callback || function () {};
+		callback = callback || function () {
+			};
 
 		this._dbName = name;
 
@@ -1196,7 +1181,8 @@
 	 * @param {function} callback The callback to fire upon retrieving data
 	 */
 	Store.prototype.findAll = function (callback) {
-			callback = callback || function () {};
+		callback = callback || function () {
+			};
 		callback.call(this, JSON.parse(localStorage[this._dbName]).todos);
 	};
 
@@ -1212,7 +1198,8 @@
 		var data = JSON.parse(localStorage[this._dbName]);
 		var todos = data.todos;
 
-			callback = callback || function () {};
+		callback = callback || function () {
+			};
 
 		// If an ID was actually given, find the item and update each property
 		if (id) {
@@ -1271,7 +1258,6 @@
 	// Export to window
 	window.app = window.app || {};
 	window.app.Store = Store;
-	})(window);
 
 
 /***/ },
@@ -1279,7 +1265,6 @@
 /***/ function(module, exports) {
 
 	/*jshint laxbreak:true */
-	(function (window) {
 	'use strict';
 
 	var htmlEscapes = {
@@ -1391,7 +1376,6 @@
 	// Export to window
 	window.app = window.app || {};
 	window.app.Template = Template;
-	})(window);
 
 
 /***/ }

karma.conf.js

@@ -1,3 +1,9 @@
+var path = require('path');
+var webpackConfig = require('./webpack.config');
+var entry = path.resolve(webpackConfig.context, webpackConfig.entry);
+var preprocessors = {};
+preprocessors[entry] = ['webpack'];
+
 // Karma configuration
 // Generated on Mon Aug 10 2015 05:47:13 GMT-0600 (MDT)
 
@@ -14,12 +20,7 @@ module.exports = function (config) {
 
 
 		// list of files / patterns to load in the browser
-		files: [
+		files: [entry],
-			'test/**/*Spec.js',
-			'js/helpers.js',
-			'js/view.js',
-			'js/controller.js'
-		],
 
 
 		// list of files to exclude
@@ -28,8 +29,9 @@ module.exports = function (config) {
 
 		// preprocess matching files before serving them to the browser
 		// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-		preprocessors: {},
+		preprocessors: preprocessors,
-
+		webpack: webpackConfig,
+		webpackMiddleware: {noInfo: true},
 
 		// test results reporter to use
 		// possible values: 'dots', 'progress'
@@ -61,6 +63,12 @@ module.exports = function (config) {
 
 		// Continuous Integration mode
 		// if true, Karma captures browsers, runs the tests and exits
-		singleRun: false
+		singleRun: false,
+
+		plugins: [
+			require('karma-webpack'),
+			'karma-jasmine',
+			'karma-chrome-launcher'
+		]
 	});
 };

package.json

@@ -6,17 +6,22 @@
   },
   "devDependencies": {
     "babel": "5.8.21",
-    "babel-core": "5.8.21",
+    "babel-core": "5.8.22",
     "babel-loader": "5.3.2",
     "css-loader": "0.15.6",
     "jasmine-core": "2.3.4",
+    "karma": "0.13.8",
+    "karma-chrome-launcher": "0.2.0",
+    "karma-jasmine": "0.3.6",
+    "karma-webpack": "1.7.0",
     "style-loader": "0.12.3",
     "webpack": "1.11.0",
     "webpack-dev-server": "1.10.1"
   },
   "scripts": {
-    "test": "karma start",
+    "test": "NODE_ENV=test karma start",
-    "test:single": "karma start --single-run",
+    "test:single": "NODE_ENV=test karma start --single-run",
-    "start": "webpack-dev-server"
+    "start": "webpack-dev-server",
+    "build": "webpack"
   }
 }

test/ControllerSpec.js

@@ -1,4 +1,5 @@
 /*global app, jasmine, describe, it, beforeEach, expect */
+require('../js/controller');
 
 describe('controller', function () {
 	'use strict';

webpack.config.js

@@ -1,6 +1,6 @@
 var path = require('path');
 
-module.exports = {
+var config = {
 	entry: './app.js',
 	output: {
 		filename: 'bundle.js',
@@ -9,11 +9,18 @@ module.exports = {
 	context: here('js'),
 	module: {
 		loaders: [
-			{test: /\.css$/, loaders: ['style', 'css']}
+			{test: /\.css$/, loader: 'style!css'}
 		]
 	}
 };
 
+if (process.env.NODE_ENV === 'test') {
+	config.entry = './ControllerSpec.js';
+	config.context = here('test');
+}
+
+module.exports = config;
+
 function here(d) {
 	return d ? path.join(__dirname, d) : __dirname;
 }