forked from boranton/testcafe-workshop
🌟 Tests working with webpack
This commit is contained in:
Kent C. Dodds
parent
d19a4c151f
commit
c0be042b9f
54
bundle.js
54
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);
|
||||
|
||||
|
||||
/***/ }
|
||||
|
||||
@ -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: [
|
||||
'test/**/*Spec.js',
|
||||
'js/helpers.js',
|
||||
'js/view.js',
|
||||
'js/controller.js'
|
||||
],
|
||||
files: [entry],
|
||||
|
||||
|
||||
// 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'
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
13
package.json
13
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:single": "karma start --single-run",
|
||||
"start": "webpack-dev-server"
|
||||
"test": "NODE_ENV=test karma start",
|
||||
"test:single": "NODE_ENV=test karma start --single-run",
|
||||
"start": "webpack-dev-server",
|
||||
"build": "webpack"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/*global app, jasmine, describe, it, beforeEach, expect */
|
||||
require('../js/controller');
|
||||
|
||||
describe('controller', function () {
|
||||
'use strict';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user