dagolap/testcafe-workshop
1
0
Fork 0
forked from boranton/testcafe-workshop
Code Issues Pull Requests Releases Wiki Activity

Make things nice

Browse Source
This commit is contained in:
Kent C. Dodds 2016-04-04 21:30:28 -06:00
parent f80ec74553
commit 7aeab76dc9
16 changed files with 1036 additions and 1093 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.babelrc Normal file
View File

@ -0,0 +1,10 @@
{
"presets": ["es2015-webpack", "stage-2"],
"env": {
"test": {
"plugins": [
["__coverage__", {"ignore": "test"}]
]
}
}
}

3
.eslintignore Normal file
View File

@ -0,0 +1,3 @@
coverage/
node_modules/
bundle.js

14
.eslintrc Normal file
View File

@ -0,0 +1,14 @@
{
"extends": ["kentcdodds/es-next"],
"rules": {
// these are only here because I didn't
// want to update the entire codebase ¯\_(ツ)_/¯
"func-names": 0,
"no-var": 0,
"func-style": 0,
"comma-dangle": 0,
"valid-jsdoc": 0,
"vars-on-top": 0,
"complexity": [2, 6],
}
}

42
js/app.js
View File

@ -1,12 +1,14 @@
import 'todomvc-common/base.css'; import 'todomvc-common/base.css'
import 'todomvc-app-css/index.css'; import 'todomvc-app-css/index.css'
import View from './view'; import View from './view'
import {$on} from './helpers'; import {$on} from './helpers'
import Controller from './controller'; import Controller from './controller'
import Model from './model'; import Model from './model'
import Store from './store'; import Store from './store'
import Template from './template'; import Template from './template'
var todo
/** /**
* Sets up a brand new Todo list. * Sets up a brand new Todo list.
@ -14,21 +16,19 @@ import Template from './template';
* @param {string} name The name of your new to do list. * @param {string} name The name of your new to do list.
*/ */
function Todo(name) { function Todo(name) {
this.storage = new Store(name); this.storage = new Store(name)
this.model = new Model(this.storage); this.model = new Model(this.storage)
this.template = new Template(); this.template = new Template()
this.view = new View(this.template); this.view = new View(this.template)
this.controller = new Controller(this.model, this.view); this.controller = new Controller(this.model, this.view)
} }
var todo;
function setView() { function setView() {
todo.controller.setView(document.location.hash); todo.controller.setView(document.location.hash)
} }
$on(window, 'load', function () { $on(window, 'load', function() {
todo = new Todo('todos-vanillajs'); todo = new Todo('todos-vanillajs')
setView(); setView()
}); })
$on(window, 'hashchange', setView); $on(window, 'hashchange', setView)

372
js/controller.js
View File

@ -1,261 +1,261 @@
export default Controller; export default Controller
/** /**
* Takes a model and view and acts as the controller between them * Takes a model and view and acts as the controller between them
* *
* @constructor * @constructor
* @param {object} model The model instance * @param {object} model The model instance
* @param {object} view The view instance * @param {object} view The view instance
*/ */
function Controller(model, view) { function Controller(model, view) {
var that = this; var that = this
that.model = model; that.model = model
that.view = view; that.view = view
that.view.bind('newTodo', function (title) { that.view.bind('newTodo', function(title) {
that.addItem(title); that.addItem(title)
}); })
that.view.bind('itemEdit', function (item) { that.view.bind('itemEdit', function(item) {
that.editItem(item.id); that.editItem(item.id)
}); })
that.view.bind('itemEditDone', function (item) { that.view.bind('itemEditDone', function(item) {
that.editItemSave(item.id, item.title); that.editItemSave(item.id, item.title)
}); })
that.view.bind('itemEditCancel', function (item) { that.view.bind('itemEditCancel', function(item) {
that.editItemCancel(item.id); that.editItemCancel(item.id)
}); })
that.view.bind('itemRemove', function (item) { that.view.bind('itemRemove', function(item) {
that.removeItem(item.id); that.removeItem(item.id)
}); })
that.view.bind('itemToggle', function (item) { that.view.bind('itemToggle', function(item) {
that.toggleComplete(item.id, item.completed); that.toggleComplete(item.id, item.completed)
}); })
that.view.bind('removeCompleted', function () { that.view.bind('removeCompleted', function() {
that.removeCompletedItems(); that.removeCompletedItems()
}); })
that.view.bind('toggleAll', function (status) { that.view.bind('toggleAll', function(status) {
that.toggleAll(status.completed); that.toggleAll(status.completed)
}); })
} }
/** /**
* Loads and initialises the view * Loads and initialises the view
* *
* @param {string} '' | 'active' | 'completed' * @param {string} '' | 'active' | 'completed'
*/ */
Controller.prototype.setView = function (locationHash) { Controller.prototype.setView = function(locationHash) {
var route = locationHash.split('/')[1]; var route = locationHash.split('/')[1]
var page = route || ''; var page = route || ''
this._updateFilterState(page); this._updateFilterState(page)
}; }
/** /**
* An event to fire on load. Will get all items and display them in the * An event to fire on load. Will get all items and display them in the
* todo-list * todo-list
*/ */
Controller.prototype.showAll = function () { Controller.prototype.showAll = function() {
var that = this; var that = this
that.model.read(function (data) { that.model.read(function(data) {
that.view.render('showEntries', data); that.view.render('showEntries', data)
}); })
}; }
/** /**
* Renders all active tasks * Renders all active tasks
*/ */
Controller.prototype.showActive = function () { Controller.prototype.showActive = function() {
var that = this; var that = this
that.model.read({completed: false}, function (data) { that.model.read({completed: false}, function(data) {
that.view.render('showEntries', data); that.view.render('showEntries', data)
}); })
}; }
/** /**
* Renders all completed tasks * Renders all completed tasks
*/ */
Controller.prototype.showCompleted = function () { Controller.prototype.showCompleted = function() {
var that = this; var that = this
that.model.read({completed: true}, function (data) { that.model.read({completed: true}, function(data) {
that.view.render('showEntries', data); that.view.render('showEntries', data)
}); })
}; }
/** /**
* An event to fire whenever you want to add an item. Simply pass in the event * An event to fire whenever you want to add an item. Simply pass in the event
* object and it'll handle the DOM insertion and saving of the new item. * object and it'll handle the DOM insertion and saving of the new item.
*/ */
Controller.prototype.addItem = function (title) { Controller.prototype.addItem = function(title) {
var that = this; var that = this
if (title.trim() === '') { if (title.trim() === '') {
return; return
} }
that.model.create(title, function () { that.model.create(title, function() {
that.view.render('clearNewTodo'); that.view.render('clearNewTodo')
that._filter(true); that._filter(true)
}); })
}; }
/* /*
* Triggers the item editing mode. * Triggers the item editing mode.
*/ */
Controller.prototype.editItem = function (id) { Controller.prototype.editItem = function(id) {
var that = this; var that = this
that.model.read(id, function (data) { that.model.read(id, function(data) {
that.view.render('editItem', {id: id, title: data[0].title}); that.view.render('editItem', {id, title: data[0].title})
}); })
}; }
/* /*
* Finishes the item editing mode successfully. * Finishes the item editing mode successfully.
*/ */
Controller.prototype.editItemSave = function (id, title) { Controller.prototype.editItemSave = function(id, title) {
var that = this; var that = this
if (title.trim()) { if (title.trim()) {
that.model.update(id, {title: title}, function () { that.model.update(id, {title}, function() {
that.view.render('editItemDone', {id: id, title: title}); that.view.render('editItemDone', {id, title})
}); })
} else { } else {
that.removeItem(id); that.removeItem(id)
} }
}; }
/* /*
* Cancels the item editing mode. * Cancels the item editing mode.
*/ */
Controller.prototype.editItemCancel = function (id) { Controller.prototype.editItemCancel = function(id) {
var that = this; var that = this
that.model.read(id, function (data) { that.model.read(id, function(data) {
that.view.render('editItemDone', {id: id, title: data[0].title}); that.view.render('editItemDone', {id, title: data[0].title})
}); })
}; }
/** /**
* By giving it an ID it'll find the DOM element matching that ID, * By giving it an ID it'll find the DOM element matching that ID,
* remove it from the DOM and also remove it from storage. * remove it from the DOM and also remove it from storage.
* *
* @param {number} id The ID of the item to remove from the DOM and * @param {number} id The ID of the item to remove from the DOM and
* storage * storage
*/ */
Controller.prototype.removeItem = function (id) { Controller.prototype.removeItem = function(id) {
var that = this; var that = this
that.model.remove(id, function () { that.model.remove(id, function() {
that.view.render('removeItem', id); that.view.render('removeItem', id)
}); })
that._filter(); that._filter()
}; }
/** /**
* Will remove all completed items from the DOM and storage. * Will remove all completed items from the DOM and storage.
*/ */
Controller.prototype.removeCompletedItems = function () { Controller.prototype.removeCompletedItems = function() {
var that = this; var that = this
that.model.read({completed: true}, function (data) { that.model.read({completed: true}, function(data) {
data.forEach(function (item) { data.forEach(function(item) {
that.removeItem(item.id); that.removeItem(item.id)
}); })
}); })
that._filter(); that._filter()
}; }
/** /**
* Give it an ID of a model and a checkbox and it will update the item * Give it an ID of a model and a checkbox and it will update the item
* in storage based on the checkbox's state. * in storage based on the checkbox's state.
* *
* @param {number} id The ID of the element to complete or uncomplete * @param {number} id The ID of the element to complete or uncomplete
* @param {object} checkbox The checkbox to check the state of complete * @param {object} checkbox The checkbox to check the state of complete
* or not * or not
* @param {boolean|undefined} silent Prevent re-filtering the todo items * @param {boolean|undefined} silent Prevent re-filtering the todo items
*/ */
Controller.prototype.toggleComplete = function (id, completed, silent) { Controller.prototype.toggleComplete = function(id, completed, silent) {
var that = this; var that = this
that.model.update(id, {completed: completed}, function () { that.model.update(id, {completed}, function() {
that.view.render('elementComplete', { that.view.render('elementComplete', {
id: id, id,
completed: completed completed,
}); })
}); })
if (!silent) { if (!silent) {
that._filter(); that._filter()
} }
}; }
/** /**
* Will toggle ALL checkboxes' on/off state and completeness of models. * Will toggle ALL checkboxes' on/off state and completeness of models.
* Just pass in the event object. * Just pass in the event object.
*/ */
Controller.prototype.toggleAll = function (completed) { Controller.prototype.toggleAll = function(completed) {
var that = this; var that = this
that.model.read({completed: !completed}, function (data) { that.model.read({completed: !completed}, function(data) {
data.forEach(function (item) { data.forEach(function(item) {
that.toggleComplete(item.id, completed, true); that.toggleComplete(item.id, completed, true)
}); })
}); })
that._filter(); that._filter()
}; }
/** /**
* Updates the pieces of the page which change depending on the remaining * Updates the pieces of the page which change depending on the remaining
* number of todos. * number of todos.
*/ */
Controller.prototype._updateCount = function () { Controller.prototype._updateCount = function() {
var that = this; var that = this
that.model.getCount(function (todos) { that.model.getCount(function(todos) {
that.view.render('updateElementCount', todos.active); that.view.render('updateElementCount', todos.active)
that.view.render('clearCompletedButton', { that.view.render('clearCompletedButton', {
completed: todos.completed, completed: todos.completed,
visible: todos.completed > 0 visible: todos.completed > 0
}); })
that.view.render('toggleAll', {checked: todos.completed === todos.total}); that.view.render('toggleAll', {checked: todos.completed === todos.total})
that.view.render('contentBlockVisibility', {visible: todos.total > 0}); that.view.render('contentBlockVisibility', {visible: todos.total > 0})
}); })
}; }
/** /**
* Re-filters the todo items, based on the active route. * Re-filters the todo items, based on the active route.
* @param {boolean|undefined} force forces a re-painting of todo items. * @param {boolean|undefined} force forces a re-painting of todo items.
*/ */
Controller.prototype._filter = function (force) { Controller.prototype._filter = function(force) {
var activeRoute = this._activeRoute.charAt(0).toUpperCase() + this._activeRoute.substr(1); var activeRoute = this._activeRoute.charAt(0).toUpperCase() + this._activeRoute.substr(1)
// Update the elements on the page, which change with each completed todo // Update the elements on the page, which change with each completed todo
this._updateCount(); this._updateCount()
// If the last active route isn't "All", or we're switching routes, we // If the last active route isn't "All", or we're switching routes, we
// re-create the todo item elements, calling: // re-create the todo item elements, calling:
// this.show[All|Active|Completed](); // this.show[All|Active|Completed]();
if (force || this._lastActiveRoute !== 'All' || this._lastActiveRoute !== activeRoute) { if (force || this._lastActiveRoute !== 'All' || this._lastActiveRoute !== activeRoute) {
this['show' + activeRoute](); this['show' + activeRoute]()
} }
this._lastActiveRoute = activeRoute; this._lastActiveRoute = activeRoute
}; }
/** /**
* Simply updates the filter nav's selected states * Simply updates the filter nav's selected states
*/ */
Controller.prototype._updateFilterState = function (currentPage) { Controller.prototype._updateFilterState = function(currentPage) {
// Store a reference to the active route, allowing us to re-filter todo // Store a reference to the active route, allowing us to re-filter todo
// items as they are marked complete or incomplete. // items as they are marked complete or incomplete.
this._activeRoute = currentPage; this._activeRoute = currentPage
if (currentPage === '') { if (currentPage === '') {
this._activeRoute = 'All'; this._activeRoute = 'All'
} }
this._filter(); this._filter()
this.view.render('setFilter', currentPage); this.view.render('setFilter', currentPage)
}; }

33
js/helpers.js
View File

@ -1,50 +1,49 @@
/*global NodeList */ /*global NodeList */
export {qs, qsa, $on, $delegate, $parent}; export {qs, qsa, $on, $delegate, $parent}
// Get element(s) by CSS selector: // Get element(s) by CSS selector:
function qs(selector, scope) { function qs(selector, scope) {
return (scope || document).querySelector(selector); return (scope || document).querySelector(selector)
} }
function qsa(selector, scope) { function qsa(selector, scope) {
return (scope || document).querySelectorAll(selector); return (scope || document).querySelectorAll(selector)
} }
// addEventListener wrapper: // addEventListener wrapper:
function $on(target, type, callback, useCapture) { function $on(target, type, callback, useCapture) {
target.addEventListener(type, callback, !!useCapture); target.addEventListener(type, callback, !!useCapture)
} }
// Attach a handler to event for all elements that match the selector, // Attach a handler to event for all elements that match the selector,
// now or in the future, based on a root element // now or in the future, based on a root element
function $delegate(target, selector, type, handler) { function $delegate(target, selector, type, handler) {
// https://developer.mozilla.org/en-US/docs/Web/Events/blur
var useCapture = type === 'blur' || type === 'focus'
$on(target, type, dispatchEvent, useCapture)
function dispatchEvent(event) { function dispatchEvent(event) {
var targetElement = event.target; var targetElement = event.target
var potentialElements = qsa(selector, target); var potentialElements = qsa(selector, target)
var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0; var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0
if (hasMatch) { if (hasMatch) {
handler.call(targetElement, event); handler.call(targetElement, event)
} }
} }
// https://developer.mozilla.org/en-US/docs/Web/Events/blur
var useCapture = type === 'blur' || type === 'focus';
$on(target, type, dispatchEvent, useCapture);
} }
// Find the element's parent with the given tag name: // Find the element's parent with the given tag name:
// $parent(qs('a'), 'div'); // $parent(qs('a'), 'div');
function $parent(element, tagName) { function $parent(element, tagName) {
if (!element.parentNode) { if (!element.parentNode) {
return; return undefined
} }
if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase()) { if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase()) {
return element.parentNode; return element.parentNode
} }
return $parent(element.parentNode, tagName); return $parent(element.parentNode, tagName)
} }
// Allow for looping on nodes by chaining: // Allow for looping on nodes by chaining:
// qsa('.foo').forEach(function () {}) // qsa('.foo').forEach(function () {})
NodeList.prototype.forEach = Array.prototype.forEach; NodeList.prototype.forEach = Array.prototype.forEach

144
js/model.js
View File

@ -1,39 +1,38 @@
export default Model; export default Model
/** /**
* Creates a new Model instance and hooks up the storage. * Creates a new Model instance and hooks up the storage.
* *
* @constructor * @constructor
* @param {object} storage A reference to the client side storage class * @param {object} storage A reference to the client side storage class
*/ */
function Model(storage) { function Model(storage) {
this.storage = storage; this.storage = storage
} }
/** /**
* Creates a new todo model * Creates a new todo model
* *
* @param {string} [title] The title of the task * @param {string} [title] The title of the task
* @param {function} [callback] The callback to fire after the model is created * @param {function} [callback] The callback to fire after the model is created
*/ */
Model.prototype.create = function (title, callback) { Model.prototype.create = function(title, callback) {
title = title || ''; title = title || ''
callback = callback || function () { callback = callback || function() {
}; }
var newItem = { var newItem = {
title: title.trim(), title: title.trim(),
completed: false completed: false
}; }
this.storage.save(newItem, callback); this.storage.save(newItem, callback)
}; }
/** /**
* Finds and returns a model in storage. If no query is given it'll simply * Finds and returns a model in storage. If no query is given it'll simply
* return everything. If you pass in a string or number it'll look that up as * return everything. If you pass in a string or number it'll look that up as
* the ID of the model to find. Lastly, you can pass it an object to match * the ID of the model to find. Lastly, you can pass it an object to match against.
* against.
* *
* @param {string|number|object} [query] A query to match models against * @param {string|number|object} [query] A query to match models against
* @param {function} [callback] The callback to fire after the model is found * @param {function} [callback] The callback to fire after the model is found
@ -44,73 +43,74 @@ Model.prototype.create = function (title, callback) {
* //Below will find a model with foo equalling bar and hello equalling world. * //Below will find a model with foo equalling bar and hello equalling world.
* model.read({ foo: 'bar', hello: 'world' }); * model.read({ foo: 'bar', hello: 'world' });
*/ */
Model.prototype.read = function (query, callback) { Model.prototype.read = function(query, callback) {
var queryType = typeof query; var queryType = typeof query
callback = callback || function () { callback = callback || function() {
}; }
if (queryType === 'function') { if (queryType === 'function') {
callback = query; callback = query
return this.storage.findAll(callback); return this.storage.findAll(callback)
} else if (queryType === 'string' || queryType === 'number') { } else if (queryType === 'string' || queryType === 'number') {
query = parseInt(query, 10); query = parseInt(query, 10)
this.storage.find({id: query}, callback); this.storage.find({id: query}, callback)
} else { } else {
this.storage.find(query, callback); this.storage.find(query, callback)
} }
}; return undefined
}
/** /**
* Updates a model by giving it an ID, data to update, and a callback to fire when * Updates a model by giving it an ID, data to update, and a callback to fire when
* the update is complete. * the update is complete.
* *
* @param {number} id The id of the model to update * @param {number} id The id of the model to update
* @param {object} data The properties to update and their new value * @param {object} data The properties to update and their new value
* @param {function} callback The callback to fire when the update is complete. * @param {function} callback The callback to fire when the update is complete.
*/ */
Model.prototype.update = function (id, data, callback) { Model.prototype.update = function(id, data, callback) {
this.storage.save(data, callback, id); this.storage.save(data, callback, id)
}; }
/** /**
* Removes a model from storage * Removes a model from storage
* *
* @param {number} id The ID of the model to remove * @param {number} id The ID of the model to remove
* @param {function} callback The callback to fire when the removal is complete. * @param {function} callback The callback to fire when the removal is complete.
*/ */
Model.prototype.remove = function (id, callback) { Model.prototype.remove = function(id, callback) {
this.storage.remove(id, callback); this.storage.remove(id, callback)
}; }
/** /**
* WARNING: Will remove ALL data from storage. * WARNING: Will remove ALL data from storage.
* *
* @param {function} callback The callback to fire when the storage is wiped. * @param {function} callback The callback to fire when the storage is wiped.
*/ */
Model.prototype.removeAll = function (callback) { Model.prototype.removeAll = function(callback) {
this.storage.drop(callback); this.storage.drop(callback)
}; }
/** /**
* Returns a count of all todos * Returns a count of all todos
*/ */
Model.prototype.getCount = function (callback) { Model.prototype.getCount = function(callback) {
var todos = { var todos = {
active: 0, active: 0,
completed: 0, completed: 0,
total: 0 total: 0
};
this.storage.findAll(function (data) {
data.forEach(function (todo) {
if (todo.completed) {
todos.completed++;
} else {
todos.active++;
} }
todos.total++; this.storage.findAll(function(data) {
}); data.forEach(function(todo) {
callback(todos); if (todo.completed) {
}); todos.completed++
}; } else {
todos.active++
}
todos.total++
})
callback(todos)
})
}

163
js/store.js
View File

@ -1,5 +1,4 @@
/*jshint eqeqeq:false */ export default Store
export default Store;
/** /**
* Creates a new client side storage object and will create an empty * Creates a new client side storage object and will create an empty
* collection if no collection already exists. * collection if no collection already exists.
@ -9,128 +8,128 @@ export default Store;
* real life you probably would be making AJAX calls * real life you probably would be making AJAX calls
*/ */
function Store(name, callback) { function Store(name, callback) {
callback = callback || function () { callback = callback || function() {
}; }
this._dbName = name; this._dbName = name
if (!localStorage[name]) { if (!localStorage[name]) {
var data = { var data = {
todos: [] todos: []
};
localStorage[name] = JSON.stringify(data);
} }
callback.call(this, JSON.parse(localStorage[name])); localStorage[name] = JSON.stringify(data)
}
callback.call(this, JSON.parse(localStorage[name]))
} }
/** /**
* Finds items based on a query given as a JS object * Finds items based on a query given as a JS object
* *
* @param {object} query The query to match against (i.e. {foo: 'bar'}) * @param {object} query The query to match against (i.e. {foo: 'bar'})
* @param {function} callback The callback to fire when the query has * @param {function} callback The callback to fire when the query has
* completed running * completed running
* *
* @example * @example
* db.find({foo: 'bar', hello: 'world'}, function (data) { * db.find({foo: 'bar', hello: 'world'}, function (data) {
* // data will return any items that have foo: bar and * // data will return any items that have foo: bar and
* // hello: world in their properties * // hello: world in their properties
* }); * });
*/ */
Store.prototype.find = function (query, callback) { Store.prototype.find = function(query, callback) {
if (!callback) { if (!callback) {
return; return
} }
var todos = JSON.parse(localStorage[this._dbName]).todos; var todos = JSON.parse(localStorage[this._dbName]).todos
callback.call(this, todos.filter(function (todo) { callback.call(this, todos.filter(function(todo) {
for (var q in query) { for (var q in query) {
if (query[q] !== todo[q]) { if (query[q] !== todo[q]) {
return false; return false
} }
} }
return true; return true
})); }))
}; }
/** /**
* Will retrieve all data from the collection * Will retrieve all data from the collection
* *
* @param {function} callback The callback to fire upon retrieving data * @param {function} callback The callback to fire upon retrieving data
*/ */
Store.prototype.findAll = function (callback) { Store.prototype.findAll = function(callback) {
callback = callback || function () { callback = callback || function() {
}; }
callback.call(this, JSON.parse(localStorage[this._dbName]).todos); callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
}; }
/** /**
* Will save the given data to the DB. If no item exists it will create a new * Will save the given data to the DB. If no item exists it will create a new
* item, otherwise it'll simply update an existing item's properties * item, otherwise it'll simply update an existing item's properties
* *
* @param {object} updateData The data to save back into the DB * @param {object} updateData The data to save back into the DB
* @param {function} callback The callback to fire after saving * @param {function} callback The callback to fire after saving
* @param {number} id An optional param to enter an ID of an item to update * @param {number} id An optional param to enter an ID of an item to update
*/ */
Store.prototype.save = function (updateData, callback, id) { Store.prototype.save = function(updateData, callback, id) {
var data = JSON.parse(localStorage[this._dbName]); var data = JSON.parse(localStorage[this._dbName])
var todos = data.todos; var todos = data.todos
callback = callback || function () { callback = callback || function() {
}; }
// If an ID was actually given, find the item and update each property // If an ID was actually given, find the item and update each property
if (id) { if (id) {
for (var i = 0; i < todos.length; i++) { for (var i = 0; i < todos.length; i++) {
if (todos[i].id === id) { if (todos[i].id === id) {
for (var key in updateData) { for (var key in updateData) { // eslint-disable-line guard-for-in
todos[i][key] = updateData[key]; todos[i][key] = updateData[key]
} }
break; break
} }
} }
localStorage[this._dbName] = JSON.stringify(data); localStorage[this._dbName] = JSON.stringify(data)
callback.call(this, JSON.parse(localStorage[this._dbName]).todos); callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
} else { } else {
// Generate an ID // Generate an ID
updateData.id = new Date().getTime(); updateData.id = new Date().getTime()
todos.push(updateData); todos.push(updateData)
localStorage[this._dbName] = JSON.stringify(data); localStorage[this._dbName] = JSON.stringify(data)
callback.call(this, [updateData]); callback.call(this, [updateData])
} }
}; }
/** /**
* Will remove an item from the Store based on its ID * Will remove an item from the Store based on its ID
* *
* @param {number} id The ID of the item you want to remove * @param {number} id The ID of the item you want to remove
* @param {function} callback The callback to fire after saving * @param {function} callback The callback to fire after saving
*/ */
Store.prototype.remove = function (id, callback) { Store.prototype.remove = function(id, callback) {
var data = JSON.parse(localStorage[this._dbName]); var data = JSON.parse(localStorage[this._dbName])
var todos = data.todos; var todos = data.todos
for (var i = 0; i < todos.length; i++) { for (var i = 0; i < todos.length; i++) {
if (todos[i].id == id) { if (todos[i].id === id) {
todos.splice(i, 1); todos.splice(i, 1)
break; break
} }
} }
localStorage[this._dbName] = JSON.stringify(data); localStorage[this._dbName] = JSON.stringify(data)
callback.call(this, JSON.parse(localStorage[this._dbName]).todos); callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
}; }
/** /**
* Will drop all storage and start fresh * Will drop all storage and start fresh
* *
* @param {function} callback The callback to fire after dropping the data * @param {function} callback The callback to fire after dropping the data
*/ */
Store.prototype.drop = function (callback) { Store.prototype.drop = function(callback) {
localStorage[this._dbName] = JSON.stringify({todos: []}); localStorage[this._dbName] = JSON.stringify({todos: []})
callback.call(this, JSON.parse(localStorage[this._dbName]).todos); callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
}; }

98
js/template.js
View File

@ -1,5 +1,4 @@
/*jshint laxbreak:true */ export default Template
export default Template;
var htmlEscapes = { var htmlEscapes = {
'&': '&amp;', '&': '&amp;',
@ -8,35 +7,38 @@ var htmlEscapes = {
'"': '&quot;', '"': '&quot;',
'\'': '&#x27;', '\'': '&#x27;',
'`': '&#x60;' '`': '&#x60;'
}; }
var escapeHtmlChar = function (chr) { var escapeHtmlChar = function(chr) {
return htmlEscapes[chr]; return htmlEscapes[chr]
}; }
var reUnescapedHtml = /[&<>"'`]/g, var reUnescapedHtml = /[&<>"'`]/g
reHasUnescapedHtml = new RegExp(reUnescapedHtml.source); var reHasUnescapedHtml = new RegExp(reUnescapedHtml.source)
var escape = function (string) { var escape = function(string) {
return (string && reHasUnescapedHtml.test(string)) if (string && reHasUnescapedHtml.test(string)) {
? string.replace(reUnescapedHtml, escapeHtmlChar) return string.replace(reUnescapedHtml, escapeHtmlChar)
: string; } else {
}; return string
}
}
/** /**
* Sets up defaults for all the Template methods such as a default template * Sets up defaults for all the Template methods such as a default template
* *
* @constructor * @constructor
*/ */
function Template() { function Template() {
this.defaultTemplate this.defaultTemplate = `
= '<li data-id="{{id}}" class="{{completed}}">' <li data-id="{{id}}" class="{{completed}}">
+ '<div class="view">' <div class="view">
+ '<input class="toggle" type="checkbox" {{checked}}>' <input class="toggle" type="checkbox" {{checked}} />
+ '<label>{{title}}</label>' <label>{{title}}</label>
+ '<button class="destroy"></button>' <button class="destroy"></button>
+ '</div>' </div>
+ '</li>'; </li>
`
} }
/** /**
@ -56,30 +58,30 @@ function Template() {
* completed: 0, * completed: 0,
* }); * });
*/ */
Template.prototype.show = function (data) { Template.prototype.show = function(data) {
var i, l; var i, l
var view = ''; var view = ''
for (i = 0, l = data.length; i < l; i++) { for (i = 0, l = data.length; i < l; i++) {
var template = this.defaultTemplate; var template = this.defaultTemplate
var completed = ''; var completed = ''
var checked = ''; var checked = ''
if (data[i].completed) { if (data[i].completed) {
completed = 'completed'; completed = 'completed'
checked = 'checked'; checked = 'checked'
} }
template = template.replace('{{id}}', data[i].id); template = template.replace('{{id}}', data[i].id)
template = template.replace('{{title}}', escape(data[i].title)); template = template.replace('{{title}}', escape(data[i].title))
template = template.replace('{{completed}}', completed); template = template.replace('{{completed}}', completed)
template = template.replace('{{checked}}', checked); template = template.replace('{{checked}}', checked)
view = view + template; view = view + template
} }
return view; return view
}; }
/** /**
* Displays a counter of how many to dos are left to complete * Displays a counter of how many to dos are left to complete
@ -87,11 +89,11 @@ Template.prototype.show = function (data) {
* @param {number} activeTodos The number of active todos. * @param {number} activeTodos The number of active todos.
* @returns {string} String containing the count * @returns {string} String containing the count
*/ */
Template.prototype.itemCounter = function (activeTodos) { Template.prototype.itemCounter = function(activeTodos) {
var plural = activeTodos === 1 ? '' : 's'; var plural = activeTodos === 1 ? '' : 's'
return '<strong>' + activeTodos + '</strong> item' + plural + ' left'; return '<strong>' + activeTodos + '</strong> item' + plural + ' left'
}; }
/** /**
* Updates the text within the "Clear completed" button * Updates the text within the "Clear completed" button
@ -99,10 +101,10 @@ Template.prototype.itemCounter = function (activeTodos) {
* @param {[type]} completedTodos The number of completed todos. * @param {[type]} completedTodos The number of completed todos.
* @returns {string} String containing the count * @returns {string} String containing the count
*/ */
Template.prototype.clearCompletedButton = function (completedTodos) { Template.prototype.clearCompletedButton = function(completedTodos) {
if (completedTodos > 0) { if (completedTodos > 0) {
return 'Clear completed'; return 'Clear completed'
} else { } else {
return ''; return ''
} }
}; }

198
js/view.js
View File

@ -1,4 +1,4 @@
import {qs, qsa, $on, $parent, $delegate} from './helpers'; import {qs, qsa, $on, $parent, $delegate} from './helpers'
/** /**
* View that abstracts away the browser's DOM completely. * View that abstracts away the browser's DOM completely.
@ -11,198 +11,194 @@ import {qs, qsa, $on, $parent, $delegate} from './helpers';
*/ */
class View { class View {
constructor(template) { constructor(template) {
this.template = template; this.template = template
this.ENTER_KEY = 13; this.ENTER_KEY = 13
this.ESCAPE_KEY = 27; this.ESCAPE_KEY = 27
this.$todoList = qs('.todo-list'); this.$todoList = qs('.todo-list')
this.$todoItemCounter = qs('.todo-count'); this.$todoItemCounter = qs('.todo-count')
this.$clearCompleted = qs('.clear-completed'); this.$clearCompleted = qs('.clear-completed')
this.$main = qs('.main'); this.$main = qs('.main')
this.$footer = qs('.footer'); this.$footer = qs('.footer')
this.$toggleAll = qs('.toggle-all'); this.$toggleAll = qs('.toggle-all')
this.$newTodo = qs('.new-todo'); this.$newTodo = qs('.new-todo')
} }
_removeItem(id) { _removeItem(id) {
var elem = qs('[data-id="' + id + '"]'); var elem = qs('[data-id="' + id + '"]')
if (elem) { if (elem) {
this.$todoList.removeChild(elem); this.$todoList.removeChild(elem)
} }
} }
_clearCompletedButton(completedCount, visible) { _clearCompletedButton(completedCount, visible) {
this.$clearCompleted.innerHTML = this.template.clearCompletedButton(completedCount); this.$clearCompleted.innerHTML = this.template.clearCompletedButton(completedCount)
this.$clearCompleted.style.display = visible ? 'block' : 'none'; this.$clearCompleted.style.display = visible ? 'block' : 'none'
} }
_editItemDone(id, title) { _editItemDone(id, title) {
var listItem = qs('[data-id="' + id + '"]'); var listItem = qs('[data-id="' + id + '"]')
if (!listItem) { if (!listItem) {
return; return
} }
var input = qs('input.edit', listItem); var input = qs('input.edit', listItem)
listItem.removeChild(input); listItem.removeChild(input)
listItem.className = listItem.className.replace('editing', ''); listItem.className = listItem.className.replace('editing', '')
qsa('label', listItem).forEach(function (label) { qsa('label', listItem).forEach(function(label) {
label.textContent = title; label.textContent = title
}); })
} }
render(viewCmd, parameter) { render(viewCmd, parameter) {
var that = this;
var viewCommands = { var viewCommands = {
showEntries: function () { showEntries: () => {
that.$todoList.innerHTML = that.template.show(parameter); this.$todoList.innerHTML = this.template.show(parameter)
}, },
removeItem: function () { removeItem: () => {
that._removeItem(parameter); this._removeItem(parameter)
}, },
updateElementCount: function () { updateElementCount: () => {
that.$todoItemCounter.innerHTML = that.template.itemCounter(parameter); this.$todoItemCounter.innerHTML = this.template.itemCounter(parameter)
}, },
clearCompletedButton: function () { clearCompletedButton: () => {
that._clearCompletedButton(parameter.completed, parameter.visible); this._clearCompletedButton(parameter.completed, parameter.visible)
}, },
contentBlockVisibility: function () { contentBlockVisibility: () => {
that.$main.style.display = that.$footer.style.display = parameter.visible ? 'block' : 'none'; this.$main.style.display = this.$footer.style.display = parameter.visible ? 'block' : 'none'
}, },
toggleAll: function () { toggleAll: () => {
that.$toggleAll.checked = parameter.checked; this.$toggleAll.checked = parameter.checked
}, },
setFilter: function () { setFilter: () => {
_setFilter(parameter); _setFilter(parameter)
}, },
clearNewTodo: function () { clearNewTodo: () => {
that.$newTodo.value = ''; this.$newTodo.value = ''
}, },
elementComplete: function () { elementComplete: () => {
_elementComplete(parameter.id, parameter.completed); _elementComplete(parameter.id, parameter.completed)
}, },
editItem: function () { editItem: () => {
_editItem(parameter.id, parameter.title); _editItem(parameter.id, parameter.title)
}, },
editItemDone: function () { editItemDone: () => {
that._editItemDone(parameter.id, parameter.title); this._editItemDone(parameter.id, parameter.title)
}
} }
};
viewCommands[viewCmd](); viewCommands[viewCmd]()
} }
_bindItemEditDone(handler) { _bindItemEditDone(handler) {
var that = this; $delegate(this.$todoList, 'li .edit', 'blur', () => {
$delegate(that.$todoList, 'li .edit', 'blur', function () {
if (!this.dataset.iscanceled) { if (!this.dataset.iscanceled) {
handler({ handler({
id: _itemId(this), id: _itemId(this),
title: this.value title: this.value
}); })
} }
}); })
$delegate(that.$todoList, 'li .edit', 'keypress', function (event) { $delegate(this.$todoList, 'li .edit', 'keypress', (event) => {
if (event.keyCode === that.ENTER_KEY) { if (event.keyCode === this.ENTER_KEY) {
// Remove the cursor from the input when you hit enter just like if it // Remove the cursor from the input when you hit enter just like if it
// were a real form // were a real form
this.blur(); this.blur()
} }
}); })
} }
_bindItemEditCancel(handler) { _bindItemEditCancel(handler) {
var that = this; $delegate(this.$todoList, 'li .edit', 'keyup', (event) => {
$delegate(that.$todoList, 'li .edit', 'keyup', function (event) { if (event.keyCode === this.ESCAPE_KEY) {
if (event.keyCode === that.ESCAPE_KEY) { this.dataset.iscanceled = true
this.dataset.iscanceled = true; this.blur()
this.blur();
handler({id: _itemId(this)}); handler({id: _itemId(this)})
} }
}); })
} }
bind(event, handler) { bind(event, handler) { // eslint-disable-line complexity
var that = this;
if (event === 'newTodo') { if (event === 'newTodo') {
$on(that.$newTodo, 'change', function () { $on(this.$newTodo, 'change', () => {
handler(that.$newTodo.value); handler(this.$newTodo.value)
}); })
} else if (event === 'removeCompleted') { } else if (event === 'removeCompleted') {
$on(that.$clearCompleted, 'click', function () { $on(this.$clearCompleted, 'click', () => {
handler(); handler()
}); })
} else if (event === 'toggleAll') { } else if (event === 'toggleAll') {
$on(that.$toggleAll, 'click', function () { $on(this.$toggleAll, 'click', () => {
handler({completed: this.checked}); handler({completed: this.checked})
}); })
} else if (event === 'itemEdit') { } else if (event === 'itemEdit') {
$delegate(that.$todoList, 'li label', 'dblclick', function () { $delegate(this.$todoList, 'li label', 'dblclick', () => {
handler({id: _itemId(this)}); handler({id: _itemId(this)})
}); })
} else if (event === 'itemRemove') { } else if (event === 'itemRemove') {
$delegate(that.$todoList, '.destroy', 'click', function () { $delegate(this.$todoList, '.destroy', 'click', () => {
handler({id: _itemId(this)}); handler({id: _itemId(this)})
}); })
} else if (event === 'itemToggle') { } else if (event === 'itemToggle') {
$delegate(that.$todoList, '.toggle', 'click', function () { $delegate(this.$todoList, '.toggle', 'click', () => {
handler({ handler({
id: _itemId(this), id: _itemId(this),
completed: this.checked completed: this.checked
}); })
}); })
} else if (event === 'itemEditDone') { } else if (event === 'itemEditDone') {
that._bindItemEditDone(handler); this._bindItemEditDone(handler)
} else if (event === 'itemEditCancel') { } else if (event === 'itemEditCancel') {
that._bindItemEditCancel(handler); this._bindItemEditCancel(handler)
} }
} }
} }
function _setFilter(currentPage) { function _setFilter(currentPage) {
qs('.filters .selected').className = ''; qs('.filters .selected').className = ''
qs('.filters [href="#/' + currentPage + '"]').className = 'selected'; qs('.filters [href="#/' + currentPage + '"]').className = 'selected'
} }
function _elementComplete(id, completed) { function _elementComplete(id, completed) {
var listItem = qs('[data-id="' + id + '"]'); var listItem = qs('[data-id="' + id + '"]')
if (!listItem) { if (!listItem) {
return; return
} }
listItem.className = completed ? 'completed' : ''; listItem.className = completed ? 'completed' : ''
// In case it was toggled from an event and not by clicking the checkbox // In case it was toggled from an event and not by clicking the checkbox
qs('input', listItem).checked = completed; qs('input', listItem).checked = completed
} }
function _editItem(id, title) { function _editItem(id, title) {
var listItem = qs('[data-id="' + id + '"]'); var listItem = qs('[data-id="' + id + '"]')
if (!listItem) { if (!listItem) {
return; return
} }
listItem.className = listItem.className + ' editing'; listItem.className = listItem.className + ' editing'
var input = document.createElement('input'); var input = document.createElement('input')
input.className = 'edit'; input.className = 'edit'
listItem.appendChild(input); listItem.appendChild(input)
input.focus(); input.focus()
input.value = title; input.value = title
} }
function _itemId(element) { function _itemId(element) {
var li = $parent(element, 'li'); var li = $parent(element, 'li')
return parseInt(li.dataset.id, 10); return parseInt(li.dataset.id, 10)
} }
export default View export default View

71
karma.conf.js
View File

@ -1,76 +1,29 @@
var path = require('path'); const webpackConfig = require('./webpack.config.babel')
var webpackConfig = require('./webpack.config'); require('babel-register')
var entry = path.resolve(webpackConfig.context, webpackConfig.entry);
var preprocessors = {};
preprocessors[entry] = ['webpack'];
// Karma configuration module.exports = function setKarmaConfig(config) {
// Generated on Mon Aug 10 2015 05:47:13 GMT-0600 (MDT)
module.exports = function (config) {
config.set({ config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '', basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'], frameworks: ['jasmine'],
files: ['test/**/*Spec.js'],
// list of files / patterns to load in the browser
files: [entry],
// list of files to exclude
exclude: [], exclude: [],
preprocessors: {
'test/**/*Spec.js': ['webpack'],
// preprocess matching files before serving them to the browser },
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: preprocessors,
webpack: webpackConfig, webpack: webpackConfig,
webpackMiddleware: {noInfo: true}, webpackMiddleware: {noInfo: true},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage'], reporters: ['progress', 'coverage'],
coverageReporter: { coverageReporter: {
reporters: [ reporters: [
{type: 'lcov', dir: 'coverage/', subdir: '.'}, {type: 'lcov', dir: 'coverage/', subdir: '.'},
{type: 'json', dir: 'coverage/', subdir: '.'}, {type: 'json', dir: 'coverage/', subdir: '.'},
{type: 'text-summary'} {type: 'text-summary'},
] ],
}, },
// web server port
port: 9876, port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true, colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO, logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Firefox'], browsers: ['Firefox'],
singleRun: true,
})
// Continuous Integration mode }
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
});
};

14
package.json
View File

@ -7,11 +7,16 @@
"devDependencies": { "devDependencies": {
"babel": "6.5.2", "babel": "6.5.2",
"babel-core": "6.7.4", "babel-core": "6.7.4",
"babel-eslint": "6.0.2",
"babel-loader": "6.2.4", "babel-loader": "6.2.4",
"babel-plugin-__coverage__": "0.1111.1", "babel-plugin-__coverage__": "0.11111.0",
"babel-preset-es2015-webpack": "6.4.0", "babel-preset-es2015-webpack": "6.4.0",
"babel-preset-stage-2": "6.5.0", "babel-preset-stage-2": "6.5.0",
"cross-env": "1.0.7",
"css-loader": "0.23.1", "css-loader": "0.23.1",
"eslint": "2.7.0",
"eslint-config-kentcdodds": "6.1.1",
"eslint-loader": "1.3.0",
"jasmine-core": "2.4.1", "jasmine-core": "2.4.1",
"karma": "0.13.22", "karma": "0.13.22",
"karma-chrome-launcher": "0.2.3", "karma-chrome-launcher": "0.2.3",
@ -24,9 +29,10 @@
"webpack-dev-server": "2.0.0-beta" "webpack-dev-server": "2.0.0-beta"
}, },
"scripts": { "scripts": {
"test": "NODE_ENV=test karma start", "test": "cross-env NODE_ENV=test karma start",
"test:single": "NODE_ENV=test karma start --single-run", "watch:test": "cross-env NODE_ENV=test karma start --auto-watch --no-single-run",
"start": "webpack-dev-server", "start": "webpack-dev-server",
"build": "webpack" "build": "webpack",
"lint": "eslint ."
} }
} }

9
test/.eslintrc Normal file
View File

@ -0,0 +1,9 @@
{
"globals": {
"jasmine": false,
"describe": false,
"it": false,
"beforeEach": false,
"expect": false,
}
}

509
test/ControllerSpec.js
View File

@ -1,171 +1,170 @@
/*global app, jasmine, describe, it, beforeEach, expect */ import Controller from '../js/controller'
import Controller from '../js/controller';
describe('controller', function () { describe('controller', () => {
var subject, model, view; var subject, model, view
var setUpModel = function (todos) { var setUpModel = function(todos) {
model.read.and.callFake(function (query, callback) { model.read.and.callFake(function(query, callback) {
callback = callback || query; callback = callback || query
callback(todos); callback(todos)
}); })
model.getCount.and.callFake(function (callback) { model.getCount.and.callFake(function(callback) {
var todoCounts = { var todoCounts = {
active: todos.filter(function (todo) { active: todos.filter(function(todo) {
return !todo.completed; return !todo.completed
}).length, }).length,
completed: todos.filter(function (todo) { completed: todos.filter(function(todo) {
return !!todo.completed; return !!todo.completed
}).length, }).length,
total: todos.length total: todos.length
}; }
callback(todoCounts); callback(todoCounts)
}); })
model.remove.and.callFake(function (id, callback) { model.remove.and.callFake(function(id, callback) {
callback(); callback()
}); })
model.create.and.callFake(function (title, callback) { model.create.and.callFake(function(title, callback) {
callback(); callback()
}); })
model.update.and.callFake(function (id, updateData, callback) { model.update.and.callFake(function(id, updateData, callback) {
callback(); callback()
}); })
}; }
var createViewStub = function () { var createViewStub = () => {
var eventRegistry = {}; var eventRegistry = {}
return { return {
render: jasmine.createSpy('render'), render: jasmine.createSpy('render'),
bind: function (event, handler) { bind: function(event, handler) {
eventRegistry[event] = handler; eventRegistry[event] = handler
}, },
trigger: function (event, parameter) { trigger: function(event, parameter) {
eventRegistry[event](parameter); eventRegistry[event](parameter)
}
}
} }
};
};
beforeEach(function () { beforeEach(() => {
model = jasmine.createSpyObj('model', ['read', 'getCount', 'remove', 'create', 'update']); model = jasmine.createSpyObj('model', ['read', 'getCount', 'remove', 'create', 'update'])
view = createViewStub(); view = createViewStub()
subject = new Controller(model, view); subject = new Controller(model, view)
}); })
it('should show entries on start-up', function () { it('should show entries on start-up', () => {
setUpModel([]); setUpModel([])
subject.setView(''); subject.setView('')
expect(view.render).toHaveBeenCalledWith('showEntries', []); expect(view.render).toHaveBeenCalledWith('showEntries', [])
}); })
describe('routing', function () { describe('routing', () => {
it('should show all entries without a route', function () { it('should show all entries without a route', () => {
var todo = {title: 'my todo'}; var todo = {title: 'my todo'}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
expect(view.render).toHaveBeenCalledWith('showEntries', [todo]); expect(view.render).toHaveBeenCalledWith('showEntries', [todo])
}); })
it('should show all entries without "all" route', function () { it('should show all entries without "all" route', () => {
var todo = {title: 'my todo'}; var todo = {title: 'my todo'}
setUpModel([todo]); setUpModel([todo])
subject.setView('#/'); subject.setView('#/')
expect(view.render).toHaveBeenCalledWith('showEntries', [todo]); expect(view.render).toHaveBeenCalledWith('showEntries', [todo])
}); })
it('should show active entries', function () { it('should show active entries', () => {
var todo = {title: 'my todo', completed: false}; var todo = {title: 'my todo', completed: false}
setUpModel([todo]); setUpModel([todo])
subject.setView('#/active'); subject.setView('#/active')
expect(model.read).toHaveBeenCalledWith({completed: false}, jasmine.any(Function)); expect(model.read).toHaveBeenCalledWith({completed: false}, jasmine.any(Function))
expect(view.render).toHaveBeenCalledWith('showEntries', [todo]); expect(view.render).toHaveBeenCalledWith('showEntries', [todo])
}); })
it('should show completed entries', function () { it('should show completed entries', () => {
var todo = {title: 'my todo', completed: true}; var todo = {title: 'my todo', completed: true}
setUpModel([todo]); setUpModel([todo])
subject.setView('#/completed'); subject.setView('#/completed')
expect(model.read).toHaveBeenCalledWith({completed: true}, jasmine.any(Function)); expect(model.read).toHaveBeenCalledWith({completed: true}, jasmine.any(Function))
expect(view.render).toHaveBeenCalledWith('showEntries', [todo]); expect(view.render).toHaveBeenCalledWith('showEntries', [todo])
}); })
}); })
it('should show the content block when todos exists', function () { it('should show the content block when todos exists', () => {
setUpModel([{title: 'my todo', completed: true}]); setUpModel([{title: 'my todo', completed: true}])
subject.setView(''); subject.setView('')
expect(view.render).toHaveBeenCalledWith('contentBlockVisibility', { expect(view.render).toHaveBeenCalledWith('contentBlockVisibility', {
visible: true visible: true
}); })
}); })
it('should hide the content block when no todos exists', function () { it('should hide the content block when no todos exists', () => {
setUpModel([]); setUpModel([])
subject.setView(''); subject.setView('')
expect(view.render).toHaveBeenCalledWith('contentBlockVisibility', { expect(view.render).toHaveBeenCalledWith('contentBlockVisibility', {
visible: false visible: false
}); })
}); })
it('should check the toggle all button, if all todos are completed', function () { it('should check the toggle all button, if all todos are completed', () => {
setUpModel([{title: 'my todo', completed: true}]); setUpModel([{title: 'my todo', completed: true}])
subject.setView(''); subject.setView('')
expect(view.render).toHaveBeenCalledWith('toggleAll', { expect(view.render).toHaveBeenCalledWith('toggleAll', {
checked: true checked: true
}); })
}); })
it('should set the "clear completed" button', function () { it('should set the "clear completed" button', () => {
var todo = {id: 42, title: 'my todo', completed: true}; var todo = {id: 42, title: 'my todo', completed: true}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
expect(view.render).toHaveBeenCalledWith('clearCompletedButton', { expect(view.render).toHaveBeenCalledWith('clearCompletedButton', {
completed: 1, completed: 1,
visible: true visible: true
}); })
}); })
it('should highlight "All" filter by default', function () { it('should highlight "All" filter by default', () => {
setUpModel([]); setUpModel([])
subject.setView(''); subject.setView('')
expect(view.render).toHaveBeenCalledWith('setFilter', ''); expect(view.render).toHaveBeenCalledWith('setFilter', '')
}); })
it('should highlight "Active" filter when switching to active view', function () { it('should highlight "Active" filter when switching to active view', () => {
setUpModel([]); setUpModel([])
subject.setView('#/active'); subject.setView('#/active')
expect(view.render).toHaveBeenCalledWith('setFilter', 'active'); expect(view.render).toHaveBeenCalledWith('setFilter', 'active')
}); })
describe('toggle all', function () { describe('toggle all', () => {
it('should toggle all todos to completed', function () { it('should toggle all todos to completed', () => {
var todos = [{ var todos = [{
id: 42, id: 42,
title: 'my todo', title: 'my todo',
@ -174,232 +173,232 @@ describe('controller', function () {
id: 21, id: 21,
title: 'another todo', title: 'another todo',
completed: false completed: false
}]; }]
setUpModel(todos); setUpModel(todos)
subject.setView(''); subject.setView('')
view.trigger('toggleAll', {completed: true}); view.trigger('toggleAll', {completed: true})
expect(model.update).toHaveBeenCalledWith(42, {completed: true}, jasmine.any(Function)); expect(model.update).toHaveBeenCalledWith(42, {completed: true}, jasmine.any(Function))
expect(model.update).toHaveBeenCalledWith(21, {completed: true}, jasmine.any(Function)); expect(model.update).toHaveBeenCalledWith(21, {completed: true}, jasmine.any(Function))
}); })
it('should update the view', function () { it('should update the view', () => {
var todos = [{ var todos = [{
id: 42, id: 42,
title: 'my todo', title: 'my todo',
completed: true completed: true
}]; }]
setUpModel(todos); setUpModel(todos)
subject.setView(''); subject.setView('')
view.trigger('toggleAll', {completed: false}); view.trigger('toggleAll', {completed: false})
expect(view.render).toHaveBeenCalledWith('elementComplete', {id : 42, completed : false}); expect(view.render).toHaveBeenCalledWith('elementComplete', {id: 42, completed: false})
}); })
}); })
describe('new todo', function () { describe('new todo', () => {
it('should add a new todo to the model', function () { it('should add a new todo to the model', () => {
setUpModel([]); setUpModel([])
subject.setView(''); subject.setView('')
view.trigger('newTodo', 'a new todo'); view.trigger('newTodo', 'a new todo')
expect(model.create).toHaveBeenCalledWith('a new todo', jasmine.any(Function)); expect(model.create).toHaveBeenCalledWith('a new todo', jasmine.any(Function))
}); })
it('should add a new todo to the view', function () { it('should add a new todo to the view', () => {
setUpModel([]); setUpModel([])
subject.setView(''); subject.setView('')
view.render.calls.reset(); view.render.calls.reset()
model.read.calls.reset(); model.read.calls.reset()
model.read.and.callFake(function (callback) { model.read.and.callFake(function(callback) {
callback([{ callback([{
title: 'a new todo', title: 'a new todo',
completed: false completed: false
}]); }])
}); })
view.trigger('newTodo', 'a new todo'); view.trigger('newTodo', 'a new todo')
expect(model.read).toHaveBeenCalled(); expect(model.read).toHaveBeenCalled()
expect(view.render).toHaveBeenCalledWith('showEntries', [{ expect(view.render).toHaveBeenCalledWith('showEntries', [{
title: 'a new todo', title: 'a new todo',
completed: false completed: false
}]); }])
}); })
it('should clear the input field when a new todo is added', function () { it('should clear the input field when a new todo is added', () => {
setUpModel([]); setUpModel([])
subject.setView(''); subject.setView('')
view.trigger('newTodo', 'a new todo'); view.trigger('newTodo', 'a new todo')
expect(view.render).toHaveBeenCalledWith('clearNewTodo'); expect(view.render).toHaveBeenCalledWith('clearNewTodo')
}); })
}); })
describe('element removal', function () { describe('element removal', () => {
it('should remove an entry from the model', function () { it('should remove an entry from the model', () => {
var todo = {id: 42, title: 'my todo', completed: true}; var todo = {id: 42, title: 'my todo', completed: true}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('itemRemove', {id: 42}); view.trigger('itemRemove', {id: 42})
expect(model.remove).toHaveBeenCalledWith(42, jasmine.any(Function)); expect(model.remove).toHaveBeenCalledWith(42, jasmine.any(Function))
}); })
it('should remove an entry from the view', function () { it('should remove an entry from the view', () => {
var todo = {id: 42, title: 'my todo', completed: true}; var todo = {id: 42, title: 'my todo', completed: true}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('itemRemove', {id: 42}); view.trigger('itemRemove', {id: 42})
expect(view.render).toHaveBeenCalledWith('removeItem', 42); expect(view.render).toHaveBeenCalledWith('removeItem', 42)
}); })
it('should update the element count', function () { it('should update the element count', () => {
var todo = {id: 42, title: 'my todo', completed: true}; var todo = {id: 42, title: 'my todo', completed: true}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('itemRemove', {id: 42}); view.trigger('itemRemove', {id: 42})
expect(view.render).toHaveBeenCalledWith('updateElementCount', 0); expect(view.render).toHaveBeenCalledWith('updateElementCount', 0)
}); })
}); })
describe('remove completed', function () { describe('remove completed', () => {
it('should remove a completed entry from the model', function () { it('should remove a completed entry from the model', () => {
var todo = {id: 42, title: 'my todo', completed: true}; var todo = {id: 42, title: 'my todo', completed: true}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('removeCompleted'); view.trigger('removeCompleted')
expect(model.read).toHaveBeenCalledWith({completed: true}, jasmine.any(Function)); expect(model.read).toHaveBeenCalledWith({completed: true}, jasmine.any(Function))
expect(model.remove).toHaveBeenCalledWith(42, jasmine.any(Function)); expect(model.remove).toHaveBeenCalledWith(42, jasmine.any(Function))
}); })
it('should remove a completed entry from the view', function () { it('should remove a completed entry from the view', () => {
var todo = {id: 42, title: 'my todo', completed: true}; var todo = {id: 42, title: 'my todo', completed: true}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('removeCompleted'); view.trigger('removeCompleted')
expect(view.render).toHaveBeenCalledWith('removeItem', 42); expect(view.render).toHaveBeenCalledWith('removeItem', 42)
}); })
}); })
describe('element complete toggle', function () { describe('element complete toggle', () => {
it('should update the model', function () { it('should update the model', () => {
var todo = {id: 21, title: 'my todo', completed: false}; var todo = {id: 21, title: 'my todo', completed: false}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('itemToggle', {id: 21, completed: true}); view.trigger('itemToggle', {id: 21, completed: true})
expect(model.update).toHaveBeenCalledWith(21, {completed: true}, jasmine.any(Function)); expect(model.update).toHaveBeenCalledWith(21, {completed: true}, jasmine.any(Function))
}); })
it('should update the view', function () { it('should update the view', () => {
var todo = {id: 42, title: 'my todo', completed: true}; var todo = {id: 42, title: 'my todo', completed: true}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('itemToggle', {id: 42, completed: false}); view.trigger('itemToggle', {id: 42, completed: false})
expect(view.render).toHaveBeenCalledWith('elementComplete', {id: 42, completed: false}); expect(view.render).toHaveBeenCalledWith('elementComplete', {id: 42, completed: false})
}); })
}); })
describe('edit item', function () { describe('edit item', () => {
it('should switch to edit mode', function () { it('should switch to edit mode', () => {
var todo = {id: 21, title: 'my todo', completed: false}; var todo = {id: 21, title: 'my todo', completed: false}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('itemEdit', {id: 21}); view.trigger('itemEdit', {id: 21})
expect(view.render).toHaveBeenCalledWith('editItem', {id: 21, title: 'my todo'}); expect(view.render).toHaveBeenCalledWith('editItem', {id: 21, title: 'my todo'})
}); })
it('should leave edit mode on done', function () { it('should leave edit mode on done', () => {
var todo = {id: 21, title: 'my todo', completed: false}; var todo = {id: 21, title: 'my todo', completed: false}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('itemEditDone', {id: 21, title: 'new title'}); view.trigger('itemEditDone', {id: 21, title: 'new title'})
expect(view.render).toHaveBeenCalledWith('editItemDone', {id: 21, title: 'new title'}); expect(view.render).toHaveBeenCalledWith('editItemDone', {id: 21, title: 'new title'})
}); })
it('should persist the changes on done', function () { it('should persist the changes on done', () => {
var todo = {id: 21, title: 'my todo', completed: false}; var todo = {id: 21, title: 'my todo', completed: false}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('itemEditDone', {id: 21, title: 'new title'}); view.trigger('itemEditDone', {id: 21, title: 'new title'})
expect(model.update).toHaveBeenCalledWith(21, {title: 'new title'}, jasmine.any(Function)); expect(model.update).toHaveBeenCalledWith(21, {title: 'new title'}, jasmine.any(Function))
}); })
it('should remove the element from the model when persisting an empty title', function () { it('should remove the element from the model when persisting an empty title', () => {
var todo = {id: 21, title: 'my todo', completed: false}; var todo = {id: 21, title: 'my todo', completed: false}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('itemEditDone', {id: 21, title: ''}); view.trigger('itemEditDone', {id: 21, title: ''})
expect(model.remove).toHaveBeenCalledWith(21, jasmine.any(Function)); expect(model.remove).toHaveBeenCalledWith(21, jasmine.any(Function))
}); })
it('should remove the element from the view when persisting an empty title', function () { it('should remove the element from the view when persisting an empty title', () => {
var todo = {id: 21, title: 'my todo', completed: false}; var todo = {id: 21, title: 'my todo', completed: false}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('itemEditDone', {id: 21, title: ''}); view.trigger('itemEditDone', {id: 21, title: ''})
expect(view.render).toHaveBeenCalledWith('removeItem', 21); expect(view.render).toHaveBeenCalledWith('removeItem', 21)
}); })
it('should leave edit mode on cancel', function () { it('should leave edit mode on cancel', () => {
var todo = {id: 21, title: 'my todo', completed: false}; var todo = {id: 21, title: 'my todo', completed: false}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('itemEditCancel', {id: 21}); view.trigger('itemEditCancel', {id: 21})
expect(view.render).toHaveBeenCalledWith('editItemDone', {id: 21, title: 'my todo'}); expect(view.render).toHaveBeenCalledWith('editItemDone', {id: 21, title: 'my todo'})
}); })
it('should not persist the changes on cancel', function () { it('should not persist the changes on cancel', () => {
var todo = {id: 21, title: 'my todo', completed: false}; var todo = {id: 21, title: 'my todo', completed: false}
setUpModel([todo]); setUpModel([todo])
subject.setView(''); subject.setView('')
view.trigger('itemEditCancel', {id: 21}); view.trigger('itemEditCancel', {id: 21})
expect(model.update).not.toHaveBeenCalled(); expect(model.update).not.toHaveBeenCalled()
}); })
}); })
}); })

15
webpack.config.babel.js Normal file
View File

@ -0,0 +1,15 @@
module.exports = {
entry: './js/app.js',
output: {
filename: 'bundle.js',
path: __dirname,
},
context: __dirname,
devtool: 'eval',
module: {
loaders: [
{test: /\.js$/, loader: 'babel!eslint', exclude: /node_modules/},
{test: /\.css$/, loader: 'style!css'},
],
},
}

62
webpack.config.js
View File

@ -1,62 +0,0 @@
var path = require('path');
var config = {
entry: './app.js',
output: {
filename: 'bundle.js',
path: here()
},
context: here('js'),
devtool: 'eval',
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
}
};
config.module.loaders = getJSLoaders().concat(config.module.loaders);
if (process.env.NODE_ENV === 'test') {
config.entry = './ControllerSpec.js';
config.context = here('test');
}
module.exports = config;
function getJSLoaders() {
var jsLoaders = [];
var presets = ['es2015-webpack', 'stage-2']
var test = process.env.NODE_ENV === 'test'
if (test) {
jsLoaders.push({
test: /js\/.*\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: presets,
plugins: ['__coverage__'],
},
});
jsLoaders.push({
test: /test\/.*\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: presets,
},
});
} else {
jsLoaders.push({
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
});
}
return jsLoaders;
}
function here(d) {
return d ? path.join(__dirname, d) : __dirname;
}