forked from boranton/testcafe-workshop
Make things nice
This commit is contained in:
Kent C. Dodds
parent
f80ec74553
commit
7aeab76dc9
10
.babelrc
Normal file
10
.babelrc
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"presets": ["es2015-webpack", "stage-2"],
|
||||
"env": {
|
||||
"test": {
|
||||
"plugins": [
|
||||
["__coverage__", {"ignore": "test"}]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
3
.eslintignore
Normal file
3
.eslintignore
Normal file
@ -0,0 +1,3 @@
|
||||
coverage/
|
||||
node_modules/
|
||||
bundle.js
|
||||
14
.eslintrc
Normal file
14
.eslintrc
Normal 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],
|
||||
}
|
||||
}
|
||||
40
js/app.js
40
js/app.js
@ -1,12 +1,14 @@
|
||||
import 'todomvc-common/base.css';
|
||||
import 'todomvc-app-css/index.css';
|
||||
import 'todomvc-common/base.css'
|
||||
import 'todomvc-app-css/index.css'
|
||||
|
||||
import View from './view';
|
||||
import {$on} from './helpers';
|
||||
import Controller from './controller';
|
||||
import Model from './model';
|
||||
import Store from './store';
|
||||
import Template from './template';
|
||||
import View from './view'
|
||||
import {$on} from './helpers'
|
||||
import Controller from './controller'
|
||||
import Model from './model'
|
||||
import Store from './store'
|
||||
import Template from './template'
|
||||
|
||||
var todo
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
function Todo(name) {
|
||||
this.storage = new Store(name);
|
||||
this.model = new Model(this.storage);
|
||||
this.template = new Template();
|
||||
this.view = new View(this.template);
|
||||
this.controller = new Controller(this.model, this.view);
|
||||
this.storage = new Store(name)
|
||||
this.model = new Model(this.storage)
|
||||
this.template = new Template()
|
||||
this.view = new View(this.template)
|
||||
this.controller = new Controller(this.model, this.view)
|
||||
}
|
||||
|
||||
var todo;
|
||||
|
||||
function setView() {
|
||||
todo.controller.setView(document.location.hash);
|
||||
todo.controller.setView(document.location.hash)
|
||||
}
|
||||
|
||||
$on(window, 'load', function() {
|
||||
todo = new Todo('todos-vanillajs');
|
||||
setView();
|
||||
});
|
||||
$on(window, 'hashchange', setView);
|
||||
todo = new Todo('todos-vanillajs')
|
||||
setView()
|
||||
})
|
||||
$on(window, 'hashchange', setView)
|
||||
|
||||
196
js/controller.js
196
js/controller.js
@ -1,4 +1,4 @@
|
||||
export default Controller;
|
||||
export default Controller
|
||||
/**
|
||||
* Takes a model and view and acts as the controller between them
|
||||
*
|
||||
@ -7,41 +7,41 @@ export default Controller;
|
||||
* @param {object} view The view instance
|
||||
*/
|
||||
function Controller(model, view) {
|
||||
var that = this;
|
||||
that.model = model;
|
||||
that.view = view;
|
||||
var that = this
|
||||
that.model = model
|
||||
that.view = view
|
||||
|
||||
that.view.bind('newTodo', function(title) {
|
||||
that.addItem(title);
|
||||
});
|
||||
that.addItem(title)
|
||||
})
|
||||
|
||||
that.view.bind('itemEdit', function(item) {
|
||||
that.editItem(item.id);
|
||||
});
|
||||
that.editItem(item.id)
|
||||
})
|
||||
|
||||
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.editItemCancel(item.id);
|
||||
});
|
||||
that.editItemCancel(item.id)
|
||||
})
|
||||
|
||||
that.view.bind('itemRemove', function(item) {
|
||||
that.removeItem(item.id);
|
||||
});
|
||||
that.removeItem(item.id)
|
||||
})
|
||||
|
||||
that.view.bind('itemToggle', function(item) {
|
||||
that.toggleComplete(item.id, item.completed);
|
||||
});
|
||||
that.toggleComplete(item.id, item.completed)
|
||||
})
|
||||
|
||||
that.view.bind('removeCompleted', function() {
|
||||
that.removeCompletedItems();
|
||||
});
|
||||
that.removeCompletedItems()
|
||||
})
|
||||
|
||||
that.view.bind('toggleAll', function(status) {
|
||||
that.toggleAll(status.completed);
|
||||
});
|
||||
that.toggleAll(status.completed)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
@ -50,92 +50,92 @@ function Controller(model, view) {
|
||||
* @param {string} '' | 'active' | 'completed'
|
||||
*/
|
||||
Controller.prototype.setView = function(locationHash) {
|
||||
var route = locationHash.split('/')[1];
|
||||
var page = route || '';
|
||||
this._updateFilterState(page);
|
||||
};
|
||||
var route = locationHash.split('/')[1]
|
||||
var page = route || ''
|
||||
this._updateFilterState(page)
|
||||
}
|
||||
|
||||
/**
|
||||
* An event to fire on load. Will get all items and display them in the
|
||||
* todo-list
|
||||
*/
|
||||
Controller.prototype.showAll = function() {
|
||||
var that = this;
|
||||
var that = this
|
||||
that.model.read(function(data) {
|
||||
that.view.render('showEntries', data);
|
||||
});
|
||||
};
|
||||
that.view.render('showEntries', data)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders all active tasks
|
||||
*/
|
||||
Controller.prototype.showActive = function() {
|
||||
var that = this;
|
||||
var that = this
|
||||
that.model.read({completed: false}, function(data) {
|
||||
that.view.render('showEntries', data);
|
||||
});
|
||||
};
|
||||
that.view.render('showEntries', data)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders all completed tasks
|
||||
*/
|
||||
Controller.prototype.showCompleted = function() {
|
||||
var that = this;
|
||||
var that = this
|
||||
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
|
||||
* object and it'll handle the DOM insertion and saving of the new item.
|
||||
*/
|
||||
Controller.prototype.addItem = function(title) {
|
||||
var that = this;
|
||||
var that = this
|
||||
|
||||
if (title.trim() === '') {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
that.model.create(title, function() {
|
||||
that.view.render('clearNewTodo');
|
||||
that._filter(true);
|
||||
});
|
||||
};
|
||||
that.view.render('clearNewTodo')
|
||||
that._filter(true)
|
||||
})
|
||||
}
|
||||
|
||||
/*
|
||||
* Triggers the item editing mode.
|
||||
*/
|
||||
Controller.prototype.editItem = function(id) {
|
||||
var that = this;
|
||||
var that = this
|
||||
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.
|
||||
*/
|
||||
Controller.prototype.editItemSave = function(id, title) {
|
||||
var that = this;
|
||||
var that = this
|
||||
if (title.trim()) {
|
||||
that.model.update(id, {title: title}, function () {
|
||||
that.view.render('editItemDone', {id: id, title: title});
|
||||
});
|
||||
that.model.update(id, {title}, function() {
|
||||
that.view.render('editItemDone', {id, title})
|
||||
})
|
||||
} else {
|
||||
that.removeItem(id);
|
||||
that.removeItem(id)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Cancels the item editing mode.
|
||||
*/
|
||||
Controller.prototype.editItemCancel = function(id) {
|
||||
var that = this;
|
||||
var that = this
|
||||
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,
|
||||
@ -145,27 +145,27 @@ Controller.prototype.editItemCancel = function (id) {
|
||||
* storage
|
||||
*/
|
||||
Controller.prototype.removeItem = function(id) {
|
||||
var that = this;
|
||||
var that = this
|
||||
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.
|
||||
*/
|
||||
Controller.prototype.removeCompletedItems = function() {
|
||||
var that = this;
|
||||
var that = this
|
||||
that.model.read({completed: true}, function(data) {
|
||||
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
|
||||
@ -177,71 +177,71 @@ Controller.prototype.removeCompletedItems = function () {
|
||||
* @param {boolean|undefined} silent Prevent re-filtering the todo items
|
||||
*/
|
||||
Controller.prototype.toggleComplete = function(id, completed, silent) {
|
||||
var that = this;
|
||||
that.model.update(id, {completed: completed}, function () {
|
||||
var that = this
|
||||
that.model.update(id, {completed}, function() {
|
||||
that.view.render('elementComplete', {
|
||||
id: id,
|
||||
completed: completed
|
||||
});
|
||||
});
|
||||
id,
|
||||
completed,
|
||||
})
|
||||
})
|
||||
|
||||
if (!silent) {
|
||||
that._filter();
|
||||
that._filter()
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Will toggle ALL checkboxes' on/off state and completeness of models.
|
||||
* Just pass in the event object.
|
||||
*/
|
||||
Controller.prototype.toggleAll = function(completed) {
|
||||
var that = this;
|
||||
var that = this
|
||||
that.model.read({completed: !completed}, function(data) {
|
||||
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
|
||||
* number of todos.
|
||||
*/
|
||||
Controller.prototype._updateCount = function() {
|
||||
var that = this;
|
||||
var that = this
|
||||
that.model.getCount(function(todos) {
|
||||
that.view.render('updateElementCount', todos.active);
|
||||
that.view.render('updateElementCount', todos.active)
|
||||
that.view.render('clearCompletedButton', {
|
||||
completed: todos.completed,
|
||||
visible: todos.completed > 0
|
||||
});
|
||||
})
|
||||
|
||||
that.view.render('toggleAll', {checked: todos.completed === todos.total});
|
||||
that.view.render('contentBlockVisibility', {visible: todos.total > 0});
|
||||
});
|
||||
};
|
||||
that.view.render('toggleAll', {checked: todos.completed === todos.total})
|
||||
that.view.render('contentBlockVisibility', {visible: todos.total > 0})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-filters the todo items, based on the active route.
|
||||
* @param {boolean|undefined} force forces a re-painting of todo items.
|
||||
*/
|
||||
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
|
||||
this._updateCount();
|
||||
this._updateCount()
|
||||
|
||||
// If the last active route isn't "All", or we're switching routes, we
|
||||
// re-create the todo item elements, calling:
|
||||
// this.show[All|Active|Completed]();
|
||||
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
|
||||
@ -249,13 +249,13 @@ Controller.prototype._filter = function (force) {
|
||||
Controller.prototype._updateFilterState = function(currentPage) {
|
||||
// Store a reference to the active route, allowing us to re-filter todo
|
||||
// items as they are marked complete or incomplete.
|
||||
this._activeRoute = currentPage;
|
||||
this._activeRoute = currentPage
|
||||
|
||||
if (currentPage === '') {
|
||||
this._activeRoute = 'All';
|
||||
this._activeRoute = 'All'
|
||||
}
|
||||
|
||||
this._filter();
|
||||
this._filter()
|
||||
|
||||
this.view.render('setFilter', currentPage);
|
||||
};
|
||||
this.view.render('setFilter', currentPage)
|
||||
}
|
||||
|
||||
@ -1,50 +1,49 @@
|
||||
/*global NodeList */
|
||||
export {qs, qsa, $on, $delegate, $parent};
|
||||
export {qs, qsa, $on, $delegate, $parent}
|
||||
|
||||
// Get element(s) by CSS selector:
|
||||
function qs(selector, scope) {
|
||||
return (scope || document).querySelector(selector);
|
||||
return (scope || document).querySelector(selector)
|
||||
}
|
||||
function qsa(selector, scope) {
|
||||
return (scope || document).querySelectorAll(selector);
|
||||
return (scope || document).querySelectorAll(selector)
|
||||
}
|
||||
|
||||
// addEventListener wrapper:
|
||||
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,
|
||||
// now or in the future, based on a root element
|
||||
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) {
|
||||
var targetElement = event.target;
|
||||
var potentialElements = qsa(selector, target);
|
||||
var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0;
|
||||
var targetElement = event.target
|
||||
var potentialElements = qsa(selector, target)
|
||||
var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0
|
||||
|
||||
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:
|
||||
// $parent(qs('a'), 'div');
|
||||
function $parent(element, tagName) {
|
||||
if (!element.parentNode) {
|
||||
return;
|
||||
return undefined
|
||||
}
|
||||
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:
|
||||
// qsa('.foo').forEach(function () {})
|
||||
NodeList.prototype.forEach = Array.prototype.forEach;
|
||||
NodeList.prototype.forEach = Array.prototype.forEach
|
||||
|
||||
62
js/model.js
62
js/model.js
@ -1,4 +1,4 @@
|
||||
export default Model;
|
||||
export default Model
|
||||
|
||||
/**
|
||||
* Creates a new Model instance and hooks up the storage.
|
||||
@ -7,7 +7,7 @@ export default Model;
|
||||
* @param {object} storage A reference to the client side storage class
|
||||
*/
|
||||
function Model(storage) {
|
||||
this.storage = storage;
|
||||
this.storage = storage
|
||||
}
|
||||
|
||||
/**
|
||||
@ -17,23 +17,22 @@ function Model(storage) {
|
||||
* @param {function} [callback] The callback to fire after the model is created
|
||||
*/
|
||||
Model.prototype.create = function(title, callback) {
|
||||
title = title || '';
|
||||
title = title || ''
|
||||
callback = callback || function() {
|
||||
};
|
||||
}
|
||||
|
||||
var newItem = {
|
||||
title: title.trim(),
|
||||
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
|
||||
* 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
|
||||
* against.
|
||||
* the ID of the model to find. Lastly, you can pass it an object to match against.
|
||||
*
|
||||
* @param {string|number|object} [query] A query to match models against
|
||||
* @param {function} [callback] The callback to fire after the model is found
|
||||
@ -45,20 +44,21 @@ Model.prototype.create = function (title, callback) {
|
||||
* model.read({ foo: 'bar', hello: 'world' });
|
||||
*/
|
||||
Model.prototype.read = function(query, callback) {
|
||||
var queryType = typeof query;
|
||||
var queryType = typeof query
|
||||
callback = callback || function() {
|
||||
};
|
||||
}
|
||||
|
||||
if (queryType === 'function') {
|
||||
callback = query;
|
||||
return this.storage.findAll(callback);
|
||||
callback = query
|
||||
return this.storage.findAll(callback)
|
||||
} else if (queryType === 'string' || queryType === 'number') {
|
||||
query = parseInt(query, 10);
|
||||
this.storage.find({id: query}, callback);
|
||||
query = parseInt(query, 10)
|
||||
this.storage.find({id: query}, callback)
|
||||
} 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
|
||||
@ -69,8 +69,8 @@ Model.prototype.read = function (query, callback) {
|
||||
* @param {function} callback The callback to fire when the update is complete.
|
||||
*/
|
||||
Model.prototype.update = function(id, data, callback) {
|
||||
this.storage.save(data, callback, id);
|
||||
};
|
||||
this.storage.save(data, callback, id)
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes a model from storage
|
||||
@ -79,8 +79,8 @@ Model.prototype.update = function (id, data, callback) {
|
||||
* @param {function} callback The callback to fire when the removal is complete.
|
||||
*/
|
||||
Model.prototype.remove = function(id, callback) {
|
||||
this.storage.remove(id, callback);
|
||||
};
|
||||
this.storage.remove(id, callback)
|
||||
}
|
||||
|
||||
/**
|
||||
* WARNING: Will remove ALL data from storage.
|
||||
@ -88,8 +88,8 @@ Model.prototype.remove = function (id, callback) {
|
||||
* @param {function} callback The callback to fire when the storage is wiped.
|
||||
*/
|
||||
Model.prototype.removeAll = function(callback) {
|
||||
this.storage.drop(callback);
|
||||
};
|
||||
this.storage.drop(callback)
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a count of all todos
|
||||
@ -99,18 +99,18 @@ Model.prototype.getCount = function (callback) {
|
||||
active: 0,
|
||||
completed: 0,
|
||||
total: 0
|
||||
};
|
||||
}
|
||||
|
||||
this.storage.findAll(function(data) {
|
||||
data.forEach(function(todo) {
|
||||
if (todo.completed) {
|
||||
todos.completed++;
|
||||
todos.completed++
|
||||
} else {
|
||||
todos.active++;
|
||||
todos.active++
|
||||
}
|
||||
|
||||
todos.total++;
|
||||
});
|
||||
callback(todos);
|
||||
});
|
||||
};
|
||||
todos.total++
|
||||
})
|
||||
callback(todos)
|
||||
})
|
||||
}
|
||||
|
||||
81
js/store.js
81
js/store.js
@ -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
|
||||
* collection if no collection already exists.
|
||||
@ -10,19 +9,19 @@ export default Store;
|
||||
*/
|
||||
function Store(name, callback) {
|
||||
callback = callback || function() {
|
||||
};
|
||||
}
|
||||
|
||||
this._dbName = name;
|
||||
this._dbName = name
|
||||
|
||||
if (!localStorage[name]) {
|
||||
var data = {
|
||||
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]))
|
||||
}
|
||||
|
||||
/**
|
||||
@ -40,20 +39,20 @@ function Store(name, callback) {
|
||||
*/
|
||||
Store.prototype.find = function(query, 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) {
|
||||
for (var q in query) {
|
||||
if (query[q] !== todo[q]) {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}));
|
||||
};
|
||||
return true
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* Will retrieve all data from the collection
|
||||
@ -62,9 +61,9 @@ Store.prototype.find = function (query, callback) {
|
||||
*/
|
||||
Store.prototype.findAll = function(callback) {
|
||||
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
|
||||
@ -75,34 +74,34 @@ Store.prototype.findAll = function (callback) {
|
||||
* @param {number} id An optional param to enter an ID of an item to update
|
||||
*/
|
||||
Store.prototype.save = function(updateData, callback, id) {
|
||||
var data = JSON.parse(localStorage[this._dbName]);
|
||||
var todos = data.todos;
|
||||
var data = JSON.parse(localStorage[this._dbName])
|
||||
var todos = data.todos
|
||||
|
||||
callback = callback || function() {
|
||||
};
|
||||
}
|
||||
|
||||
// If an ID was actually given, find the item and update each property
|
||||
if (id) {
|
||||
for (var i = 0; i < todos.length; i++) {
|
||||
if (todos[i].id === id) {
|
||||
for (var key in updateData) {
|
||||
todos[i][key] = updateData[key];
|
||||
for (var key in updateData) { // eslint-disable-line guard-for-in
|
||||
todos[i][key] = updateData[key]
|
||||
}
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
localStorage[this._dbName] = JSON.stringify(data);
|
||||
callback.call(this, JSON.parse(localStorage[this._dbName]).todos);
|
||||
localStorage[this._dbName] = JSON.stringify(data)
|
||||
callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
|
||||
} else {
|
||||
// Generate an ID
|
||||
updateData.id = new Date().getTime();
|
||||
updateData.id = new Date().getTime()
|
||||
|
||||
todos.push(updateData);
|
||||
localStorage[this._dbName] = JSON.stringify(data);
|
||||
callback.call(this, [updateData]);
|
||||
todos.push(updateData)
|
||||
localStorage[this._dbName] = JSON.stringify(data)
|
||||
callback.call(this, [updateData])
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Will remove an item from the Store based on its ID
|
||||
@ -111,19 +110,19 @@ Store.prototype.save = function (updateData, callback, id) {
|
||||
* @param {function} callback The callback to fire after saving
|
||||
*/
|
||||
Store.prototype.remove = function(id, callback) {
|
||||
var data = JSON.parse(localStorage[this._dbName]);
|
||||
var todos = data.todos;
|
||||
var data = JSON.parse(localStorage[this._dbName])
|
||||
var todos = data.todos
|
||||
|
||||
for (var i = 0; i < todos.length; i++) {
|
||||
if (todos[i].id == id) {
|
||||
todos.splice(i, 1);
|
||||
break;
|
||||
if (todos[i].id === id) {
|
||||
todos.splice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
localStorage[this._dbName] = JSON.stringify(data);
|
||||
callback.call(this, JSON.parse(localStorage[this._dbName]).todos);
|
||||
};
|
||||
localStorage[this._dbName] = JSON.stringify(data)
|
||||
callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
|
||||
}
|
||||
|
||||
/**
|
||||
* Will drop all storage and start fresh
|
||||
@ -131,6 +130,6 @@ Store.prototype.remove = function (id, callback) {
|
||||
* @param {function} callback The callback to fire after dropping the data
|
||||
*/
|
||||
Store.prototype.drop = function(callback) {
|
||||
localStorage[this._dbName] = JSON.stringify({todos: []});
|
||||
callback.call(this, JSON.parse(localStorage[this._dbName]).todos);
|
||||
};
|
||||
localStorage[this._dbName] = JSON.stringify({todos: []})
|
||||
callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
/*jshint laxbreak:true */
|
||||
export default Template;
|
||||
export default Template
|
||||
|
||||
var htmlEscapes = {
|
||||
'&': '&',
|
||||
@ -8,20 +7,22 @@ var htmlEscapes = {
|
||||
'"': '"',
|
||||
'\'': ''',
|
||||
'`': '`'
|
||||
};
|
||||
}
|
||||
|
||||
var escapeHtmlChar = function(chr) {
|
||||
return htmlEscapes[chr];
|
||||
};
|
||||
return htmlEscapes[chr]
|
||||
}
|
||||
|
||||
var reUnescapedHtml = /[&<>"'`]/g,
|
||||
reHasUnescapedHtml = new RegExp(reUnescapedHtml.source);
|
||||
var reUnescapedHtml = /[&<>"'`]/g
|
||||
var reHasUnescapedHtml = new RegExp(reUnescapedHtml.source)
|
||||
|
||||
var escape = function(string) {
|
||||
return (string && reHasUnescapedHtml.test(string))
|
||||
? string.replace(reUnescapedHtml, escapeHtmlChar)
|
||||
: string;
|
||||
};
|
||||
if (string && reHasUnescapedHtml.test(string)) {
|
||||
return string.replace(reUnescapedHtml, escapeHtmlChar)
|
||||
} else {
|
||||
return string
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up defaults for all the Template methods such as a default template
|
||||
@ -29,14 +30,15 @@ var escape = function (string) {
|
||||
* @constructor
|
||||
*/
|
||||
function Template() {
|
||||
this.defaultTemplate
|
||||
= '<li data-id="{{id}}" class="{{completed}}">'
|
||||
+ '<div class="view">'
|
||||
+ '<input class="toggle" type="checkbox" {{checked}}>'
|
||||
+ '<label>{{title}}</label>'
|
||||
+ '<button class="destroy"></button>'
|
||||
+ '</div>'
|
||||
+ '</li>';
|
||||
this.defaultTemplate = `
|
||||
<li data-id="{{id}}" class="{{completed}}">
|
||||
<div class="view">
|
||||
<input class="toggle" type="checkbox" {{checked}} />
|
||||
<label>{{title}}</label>
|
||||
<button class="destroy"></button>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
}
|
||||
|
||||
/**
|
||||
@ -57,29 +59,29 @@ function Template() {
|
||||
* });
|
||||
*/
|
||||
Template.prototype.show = function(data) {
|
||||
var i, l;
|
||||
var view = '';
|
||||
var i, l
|
||||
var view = ''
|
||||
|
||||
for (i = 0, l = data.length; i < l; i++) {
|
||||
var template = this.defaultTemplate;
|
||||
var completed = '';
|
||||
var checked = '';
|
||||
var template = this.defaultTemplate
|
||||
var completed = ''
|
||||
var checked = ''
|
||||
|
||||
if (data[i].completed) {
|
||||
completed = 'completed';
|
||||
checked = 'checked';
|
||||
completed = 'completed'
|
||||
checked = 'checked'
|
||||
}
|
||||
|
||||
template = template.replace('{{id}}', data[i].id);
|
||||
template = template.replace('{{title}}', escape(data[i].title));
|
||||
template = template.replace('{{completed}}', completed);
|
||||
template = template.replace('{{checked}}', checked);
|
||||
template = template.replace('{{id}}', data[i].id)
|
||||
template = template.replace('{{title}}', escape(data[i].title))
|
||||
template = template.replace('{{completed}}', completed)
|
||||
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
|
||||
@ -88,10 +90,10 @@ Template.prototype.show = function (data) {
|
||||
* @returns {string} String containing the count
|
||||
*/
|
||||
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
|
||||
@ -101,8 +103,8 @@ Template.prototype.itemCounter = function (activeTodos) {
|
||||
*/
|
||||
Template.prototype.clearCompletedButton = function(completedTodos) {
|
||||
if (completedTodos > 0) {
|
||||
return 'Clear completed';
|
||||
return 'Clear completed'
|
||||
} else {
|
||||
return '';
|
||||
return ''
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
196
js/view.js
196
js/view.js
@ -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.
|
||||
@ -11,198 +11,194 @@ import {qs, qsa, $on, $parent, $delegate} from './helpers';
|
||||
*/
|
||||
class View {
|
||||
constructor(template) {
|
||||
this.template = template;
|
||||
this.template = template
|
||||
|
||||
this.ENTER_KEY = 13;
|
||||
this.ESCAPE_KEY = 27;
|
||||
this.ENTER_KEY = 13
|
||||
this.ESCAPE_KEY = 27
|
||||
|
||||
this.$todoList = qs('.todo-list');
|
||||
this.$todoItemCounter = qs('.todo-count');
|
||||
this.$clearCompleted = qs('.clear-completed');
|
||||
this.$main = qs('.main');
|
||||
this.$footer = qs('.footer');
|
||||
this.$toggleAll = qs('.toggle-all');
|
||||
this.$newTodo = qs('.new-todo');
|
||||
this.$todoList = qs('.todo-list')
|
||||
this.$todoItemCounter = qs('.todo-count')
|
||||
this.$clearCompleted = qs('.clear-completed')
|
||||
this.$main = qs('.main')
|
||||
this.$footer = qs('.footer')
|
||||
this.$toggleAll = qs('.toggle-all')
|
||||
this.$newTodo = qs('.new-todo')
|
||||
}
|
||||
_removeItem(id) {
|
||||
var elem = qs('[data-id="' + id + '"]');
|
||||
var elem = qs('[data-id="' + id + '"]')
|
||||
|
||||
if (elem) {
|
||||
this.$todoList.removeChild(elem);
|
||||
this.$todoList.removeChild(elem)
|
||||
}
|
||||
}
|
||||
_clearCompletedButton(completedCount, visible) {
|
||||
this.$clearCompleted.innerHTML = this.template.clearCompletedButton(completedCount);
|
||||
this.$clearCompleted.style.display = visible ? 'block' : 'none';
|
||||
this.$clearCompleted.innerHTML = this.template.clearCompletedButton(completedCount)
|
||||
this.$clearCompleted.style.display = visible ? 'block' : 'none'
|
||||
}
|
||||
_editItemDone(id, title) {
|
||||
var listItem = qs('[data-id="' + id + '"]');
|
||||
var listItem = qs('[data-id="' + id + '"]')
|
||||
|
||||
if (!listItem) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
var input = qs('input.edit', listItem);
|
||||
listItem.removeChild(input);
|
||||
var input = qs('input.edit', listItem)
|
||||
listItem.removeChild(input)
|
||||
|
||||
listItem.className = listItem.className.replace('editing', '');
|
||||
listItem.className = listItem.className.replace('editing', '')
|
||||
|
||||
qsa('label', listItem).forEach(function(label) {
|
||||
label.textContent = title;
|
||||
});
|
||||
label.textContent = title
|
||||
})
|
||||
}
|
||||
render(viewCmd, parameter) {
|
||||
var that = this;
|
||||
var viewCommands = {
|
||||
showEntries: function () {
|
||||
that.$todoList.innerHTML = that.template.show(parameter);
|
||||
showEntries: () => {
|
||||
this.$todoList.innerHTML = this.template.show(parameter)
|
||||
},
|
||||
removeItem: function () {
|
||||
that._removeItem(parameter);
|
||||
removeItem: () => {
|
||||
this._removeItem(parameter)
|
||||
},
|
||||
updateElementCount: function () {
|
||||
that.$todoItemCounter.innerHTML = that.template.itemCounter(parameter);
|
||||
updateElementCount: () => {
|
||||
this.$todoItemCounter.innerHTML = this.template.itemCounter(parameter)
|
||||
},
|
||||
clearCompletedButton: function () {
|
||||
that._clearCompletedButton(parameter.completed, parameter.visible);
|
||||
clearCompletedButton: () => {
|
||||
this._clearCompletedButton(parameter.completed, parameter.visible)
|
||||
},
|
||||
contentBlockVisibility: function () {
|
||||
that.$main.style.display = that.$footer.style.display = parameter.visible ? 'block' : 'none';
|
||||
contentBlockVisibility: () => {
|
||||
this.$main.style.display = this.$footer.style.display = parameter.visible ? 'block' : 'none'
|
||||
},
|
||||
toggleAll: function () {
|
||||
that.$toggleAll.checked = parameter.checked;
|
||||
toggleAll: () => {
|
||||
this.$toggleAll.checked = parameter.checked
|
||||
},
|
||||
setFilter: function () {
|
||||
_setFilter(parameter);
|
||||
setFilter: () => {
|
||||
_setFilter(parameter)
|
||||
},
|
||||
clearNewTodo: function () {
|
||||
that.$newTodo.value = '';
|
||||
clearNewTodo: () => {
|
||||
this.$newTodo.value = ''
|
||||
},
|
||||
elementComplete: function () {
|
||||
_elementComplete(parameter.id, parameter.completed);
|
||||
elementComplete: () => {
|
||||
_elementComplete(parameter.id, parameter.completed)
|
||||
},
|
||||
editItem: function () {
|
||||
_editItem(parameter.id, parameter.title);
|
||||
editItem: () => {
|
||||
_editItem(parameter.id, parameter.title)
|
||||
},
|
||||
editItemDone: function () {
|
||||
that._editItemDone(parameter.id, parameter.title);
|
||||
editItemDone: () => {
|
||||
this._editItemDone(parameter.id, parameter.title)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
viewCommands[viewCmd]();
|
||||
viewCommands[viewCmd]()
|
||||
}
|
||||
_bindItemEditDone(handler) {
|
||||
var that = this;
|
||||
$delegate(that.$todoList, 'li .edit', 'blur', function () {
|
||||
$delegate(this.$todoList, 'li .edit', 'blur', () => {
|
||||
if (!this.dataset.iscanceled) {
|
||||
handler({
|
||||
id: _itemId(this),
|
||||
title: this.value
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
$delegate(that.$todoList, 'li .edit', 'keypress', function (event) {
|
||||
if (event.keyCode === that.ENTER_KEY) {
|
||||
$delegate(this.$todoList, 'li .edit', 'keypress', (event) => {
|
||||
if (event.keyCode === this.ENTER_KEY) {
|
||||
// Remove the cursor from the input when you hit enter just like if it
|
||||
// were a real form
|
||||
this.blur();
|
||||
this.blur()
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
_bindItemEditCancel(handler) {
|
||||
var that = this;
|
||||
$delegate(that.$todoList, 'li .edit', 'keyup', function (event) {
|
||||
if (event.keyCode === that.ESCAPE_KEY) {
|
||||
this.dataset.iscanceled = true;
|
||||
this.blur();
|
||||
$delegate(this.$todoList, 'li .edit', 'keyup', (event) => {
|
||||
if (event.keyCode === this.ESCAPE_KEY) {
|
||||
this.dataset.iscanceled = true
|
||||
this.blur()
|
||||
|
||||
handler({id: _itemId(this)});
|
||||
handler({id: _itemId(this)})
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
bind(event, handler) {
|
||||
var that = this;
|
||||
bind(event, handler) { // eslint-disable-line complexity
|
||||
if (event === 'newTodo') {
|
||||
$on(that.$newTodo, 'change', function () {
|
||||
handler(that.$newTodo.value);
|
||||
});
|
||||
$on(this.$newTodo, 'change', () => {
|
||||
handler(this.$newTodo.value)
|
||||
})
|
||||
|
||||
} else if (event === 'removeCompleted') {
|
||||
$on(that.$clearCompleted, 'click', function () {
|
||||
handler();
|
||||
});
|
||||
$on(this.$clearCompleted, 'click', () => {
|
||||
handler()
|
||||
})
|
||||
|
||||
} else if (event === 'toggleAll') {
|
||||
$on(that.$toggleAll, 'click', function () {
|
||||
handler({completed: this.checked});
|
||||
});
|
||||
$on(this.$toggleAll, 'click', () => {
|
||||
handler({completed: this.checked})
|
||||
})
|
||||
|
||||
} else if (event === 'itemEdit') {
|
||||
$delegate(that.$todoList, 'li label', 'dblclick', function () {
|
||||
handler({id: _itemId(this)});
|
||||
});
|
||||
$delegate(this.$todoList, 'li label', 'dblclick', () => {
|
||||
handler({id: _itemId(this)})
|
||||
})
|
||||
|
||||
} else if (event === 'itemRemove') {
|
||||
$delegate(that.$todoList, '.destroy', 'click', function () {
|
||||
handler({id: _itemId(this)});
|
||||
});
|
||||
$delegate(this.$todoList, '.destroy', 'click', () => {
|
||||
handler({id: _itemId(this)})
|
||||
})
|
||||
|
||||
} else if (event === 'itemToggle') {
|
||||
$delegate(that.$todoList, '.toggle', 'click', function () {
|
||||
$delegate(this.$todoList, '.toggle', 'click', () => {
|
||||
handler({
|
||||
id: _itemId(this),
|
||||
completed: this.checked
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
} else if (event === 'itemEditDone') {
|
||||
that._bindItemEditDone(handler);
|
||||
this._bindItemEditDone(handler)
|
||||
|
||||
} else if (event === 'itemEditCancel') {
|
||||
that._bindItemEditCancel(handler);
|
||||
this._bindItemEditCancel(handler)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function _setFilter(currentPage) {
|
||||
qs('.filters .selected').className = '';
|
||||
qs('.filters [href="#/' + currentPage + '"]').className = 'selected';
|
||||
qs('.filters .selected').className = ''
|
||||
qs('.filters [href="#/' + currentPage + '"]').className = 'selected'
|
||||
}
|
||||
|
||||
function _elementComplete(id, completed) {
|
||||
var listItem = qs('[data-id="' + id + '"]');
|
||||
var listItem = qs('[data-id="' + id + '"]')
|
||||
|
||||
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
|
||||
qs('input', listItem).checked = completed;
|
||||
qs('input', listItem).checked = completed
|
||||
}
|
||||
|
||||
function _editItem(id, title) {
|
||||
var listItem = qs('[data-id="' + id + '"]');
|
||||
var listItem = qs('[data-id="' + id + '"]')
|
||||
|
||||
if (!listItem) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
listItem.className = listItem.className + ' editing';
|
||||
listItem.className = listItem.className + ' editing'
|
||||
|
||||
var input = document.createElement('input');
|
||||
input.className = 'edit';
|
||||
var input = document.createElement('input')
|
||||
input.className = 'edit'
|
||||
|
||||
listItem.appendChild(input);
|
||||
input.focus();
|
||||
input.value = title;
|
||||
listItem.appendChild(input)
|
||||
input.focus()
|
||||
input.value = title
|
||||
}
|
||||
|
||||
function _itemId(element) {
|
||||
var li = $parent(element, 'li');
|
||||
return parseInt(li.dataset.id, 10);
|
||||
var li = $parent(element, 'li')
|
||||
return parseInt(li.dataset.id, 10)
|
||||
}
|
||||
|
||||
export default View
|
||||
|
||||
@ -1,76 +1,29 @@
|
||||
var path = require('path');
|
||||
var webpackConfig = require('./webpack.config');
|
||||
var entry = path.resolve(webpackConfig.context, webpackConfig.entry);
|
||||
var preprocessors = {};
|
||||
preprocessors[entry] = ['webpack'];
|
||||
const webpackConfig = require('./webpack.config.babel')
|
||||
require('babel-register')
|
||||
|
||||
// Karma configuration
|
||||
// Generated on Mon Aug 10 2015 05:47:13 GMT-0600 (MDT)
|
||||
|
||||
module.exports = function (config) {
|
||||
module.exports = function setKarmaConfig(config) {
|
||||
config.set({
|
||||
|
||||
// base path that will be used to resolve all patterns (eg. files, exclude)
|
||||
basePath: '',
|
||||
|
||||
|
||||
// frameworks to use
|
||||
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||
frameworks: ['jasmine'],
|
||||
|
||||
|
||||
// list of files / patterns to load in the browser
|
||||
files: [entry],
|
||||
|
||||
|
||||
// list of files to exclude
|
||||
files: ['test/**/*Spec.js'],
|
||||
exclude: [],
|
||||
|
||||
|
||||
// preprocess matching files before serving them to the browser
|
||||
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
|
||||
preprocessors: preprocessors,
|
||||
preprocessors: {
|
||||
'test/**/*Spec.js': ['webpack'],
|
||||
},
|
||||
webpack: webpackConfig,
|
||||
webpackMiddleware: {noInfo: true},
|
||||
|
||||
// test results reporter to use
|
||||
// possible values: 'dots', 'progress'
|
||||
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
|
||||
reporters: ['progress', 'coverage'],
|
||||
|
||||
coverageReporter: {
|
||||
reporters: [
|
||||
{type: 'lcov', dir: 'coverage/', subdir: '.'},
|
||||
{type: 'json', dir: 'coverage/', subdir: '.'},
|
||||
{type: 'text-summary'}
|
||||
]
|
||||
{type: 'text-summary'},
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
// web server port
|
||||
port: 9876,
|
||||
|
||||
|
||||
// enable / disable colors in the output (reporters and logs)
|
||||
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,
|
||||
|
||||
|
||||
// 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'],
|
||||
|
||||
|
||||
// Continuous Integration mode
|
||||
// if true, Karma captures browsers, runs the tests and exits
|
||||
singleRun: false,
|
||||
});
|
||||
};
|
||||
singleRun: true,
|
||||
})
|
||||
}
|
||||
|
||||
14
package.json
14
package.json
@ -7,11 +7,16 @@
|
||||
"devDependencies": {
|
||||
"babel": "6.5.2",
|
||||
"babel-core": "6.7.4",
|
||||
"babel-eslint": "6.0.2",
|
||||
"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-stage-2": "6.5.0",
|
||||
"cross-env": "1.0.7",
|
||||
"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",
|
||||
"karma": "0.13.22",
|
||||
"karma-chrome-launcher": "0.2.3",
|
||||
@ -24,9 +29,10 @@
|
||||
"webpack-dev-server": "2.0.0-beta"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "NODE_ENV=test karma start",
|
||||
"test:single": "NODE_ENV=test karma start --single-run",
|
||||
"test": "cross-env NODE_ENV=test karma start",
|
||||
"watch:test": "cross-env NODE_ENV=test karma start --auto-watch --no-single-run",
|
||||
"start": "webpack-dev-server",
|
||||
"build": "webpack"
|
||||
"build": "webpack",
|
||||
"lint": "eslint ."
|
||||
}
|
||||
}
|
||||
|
||||
9
test/.eslintrc
Normal file
9
test/.eslintrc
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"globals": {
|
||||
"jasmine": false,
|
||||
"describe": false,
|
||||
"it": false,
|
||||
"beforeEach": false,
|
||||
"expect": false,
|
||||
}
|
||||
}
|
||||
@ -1,171 +1,170 @@
|
||||
/*global app, jasmine, describe, it, beforeEach, expect */
|
||||
import Controller from '../js/controller';
|
||||
import Controller from '../js/controller'
|
||||
|
||||
describe('controller', function () {
|
||||
var subject, model, view;
|
||||
describe('controller', () => {
|
||||
var subject, model, view
|
||||
|
||||
var setUpModel = function(todos) {
|
||||
model.read.and.callFake(function(query, callback) {
|
||||
callback = callback || query;
|
||||
callback(todos);
|
||||
});
|
||||
callback = callback || query
|
||||
callback(todos)
|
||||
})
|
||||
|
||||
model.getCount.and.callFake(function(callback) {
|
||||
|
||||
var todoCounts = {
|
||||
active: todos.filter(function(todo) {
|
||||
return !todo.completed;
|
||||
return !todo.completed
|
||||
}).length,
|
||||
completed: todos.filter(function(todo) {
|
||||
return !!todo.completed;
|
||||
return !!todo.completed
|
||||
}).length,
|
||||
total: todos.length
|
||||
};
|
||||
}
|
||||
|
||||
callback(todoCounts);
|
||||
});
|
||||
callback(todoCounts)
|
||||
})
|
||||
|
||||
model.remove.and.callFake(function(id, callback) {
|
||||
callback();
|
||||
});
|
||||
callback()
|
||||
})
|
||||
|
||||
model.create.and.callFake(function(title, callback) {
|
||||
callback();
|
||||
});
|
||||
callback()
|
||||
})
|
||||
|
||||
model.update.and.callFake(function(id, updateData, callback) {
|
||||
callback();
|
||||
});
|
||||
};
|
||||
callback()
|
||||
})
|
||||
}
|
||||
|
||||
var createViewStub = function () {
|
||||
var eventRegistry = {};
|
||||
var createViewStub = () => {
|
||||
var eventRegistry = {}
|
||||
return {
|
||||
render: jasmine.createSpy('render'),
|
||||
bind: function(event, handler) {
|
||||
eventRegistry[event] = handler;
|
||||
eventRegistry[event] = handler
|
||||
},
|
||||
trigger: function(event, parameter) {
|
||||
eventRegistry[event](parameter);
|
||||
eventRegistry[event](parameter)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
beforeEach(function () {
|
||||
model = jasmine.createSpyObj('model', ['read', 'getCount', 'remove', 'create', 'update']);
|
||||
view = createViewStub();
|
||||
subject = new Controller(model, view);
|
||||
});
|
||||
beforeEach(() => {
|
||||
model = jasmine.createSpyObj('model', ['read', 'getCount', 'remove', 'create', 'update'])
|
||||
view = createViewStub()
|
||||
subject = new Controller(model, view)
|
||||
})
|
||||
|
||||
it('should show entries on start-up', function () {
|
||||
setUpModel([]);
|
||||
it('should show entries on start-up', () => {
|
||||
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 () {
|
||||
var todo = {title: 'my todo'};
|
||||
setUpModel([todo]);
|
||||
it('should show all entries without a route', () => {
|
||||
var todo = {title: 'my 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 () {
|
||||
var todo = {title: 'my todo'};
|
||||
setUpModel([todo]);
|
||||
it('should show all entries without "all" route', () => {
|
||||
var todo = {title: 'my 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 () {
|
||||
var todo = {title: 'my todo', completed: false};
|
||||
setUpModel([todo]);
|
||||
it('should show active entries', () => {
|
||||
var todo = {title: 'my todo', completed: false}
|
||||
setUpModel([todo])
|
||||
|
||||
subject.setView('#/active');
|
||||
subject.setView('#/active')
|
||||
|
||||
expect(model.read).toHaveBeenCalledWith({completed: false}, jasmine.any(Function));
|
||||
expect(view.render).toHaveBeenCalledWith('showEntries', [todo]);
|
||||
});
|
||||
expect(model.read).toHaveBeenCalledWith({completed: false}, jasmine.any(Function))
|
||||
expect(view.render).toHaveBeenCalledWith('showEntries', [todo])
|
||||
})
|
||||
|
||||
it('should show completed entries', function () {
|
||||
var todo = {title: 'my todo', completed: true};
|
||||
setUpModel([todo]);
|
||||
it('should show completed entries', () => {
|
||||
var todo = {title: 'my todo', completed: true}
|
||||
setUpModel([todo])
|
||||
|
||||
subject.setView('#/completed');
|
||||
subject.setView('#/completed')
|
||||
|
||||
expect(model.read).toHaveBeenCalledWith({completed: true}, jasmine.any(Function));
|
||||
expect(view.render).toHaveBeenCalledWith('showEntries', [todo]);
|
||||
});
|
||||
});
|
||||
expect(model.read).toHaveBeenCalledWith({completed: true}, jasmine.any(Function))
|
||||
expect(view.render).toHaveBeenCalledWith('showEntries', [todo])
|
||||
})
|
||||
})
|
||||
|
||||
it('should show the content block when todos exists', function () {
|
||||
setUpModel([{title: 'my todo', completed: true}]);
|
||||
it('should show the content block when todos exists', () => {
|
||||
setUpModel([{title: 'my todo', completed: true}])
|
||||
|
||||
subject.setView('');
|
||||
subject.setView('')
|
||||
|
||||
expect(view.render).toHaveBeenCalledWith('contentBlockVisibility', {
|
||||
visible: true
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
it('should hide the content block when no todos exists', function () {
|
||||
setUpModel([]);
|
||||
it('should hide the content block when no todos exists', () => {
|
||||
setUpModel([])
|
||||
|
||||
subject.setView('');
|
||||
subject.setView('')
|
||||
|
||||
expect(view.render).toHaveBeenCalledWith('contentBlockVisibility', {
|
||||
visible: false
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
it('should check the toggle all button, if all todos are completed', function () {
|
||||
setUpModel([{title: 'my todo', completed: true}]);
|
||||
it('should check the toggle all button, if all todos are completed', () => {
|
||||
setUpModel([{title: 'my todo', completed: true}])
|
||||
|
||||
subject.setView('');
|
||||
subject.setView('')
|
||||
|
||||
expect(view.render).toHaveBeenCalledWith('toggleAll', {
|
||||
checked: true
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
it('should set the "clear completed" button', function () {
|
||||
var todo = {id: 42, title: 'my todo', completed: true};
|
||||
setUpModel([todo]);
|
||||
it('should set the "clear completed" button', () => {
|
||||
var todo = {id: 42, title: 'my todo', completed: true}
|
||||
setUpModel([todo])
|
||||
|
||||
subject.setView('');
|
||||
subject.setView('')
|
||||
|
||||
expect(view.render).toHaveBeenCalledWith('clearCompletedButton', {
|
||||
completed: 1,
|
||||
visible: true
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
it('should highlight "All" filter by default', function () {
|
||||
setUpModel([]);
|
||||
it('should highlight "All" filter by default', () => {
|
||||
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 () {
|
||||
setUpModel([]);
|
||||
it('should highlight "Active" filter when switching to active view', () => {
|
||||
setUpModel([])
|
||||
|
||||
subject.setView('#/active');
|
||||
subject.setView('#/active')
|
||||
|
||||
expect(view.render).toHaveBeenCalledWith('setFilter', 'active');
|
||||
});
|
||||
expect(view.render).toHaveBeenCalledWith('setFilter', 'active')
|
||||
})
|
||||
|
||||
describe('toggle all', function () {
|
||||
it('should toggle all todos to completed', function () {
|
||||
describe('toggle all', () => {
|
||||
it('should toggle all todos to completed', () => {
|
||||
var todos = [{
|
||||
id: 42,
|
||||
title: 'my todo',
|
||||
@ -174,232 +173,232 @@ describe('controller', function () {
|
||||
id: 21,
|
||||
title: 'another todo',
|
||||
completed: false
|
||||
}];
|
||||
}]
|
||||
|
||||
setUpModel(todos);
|
||||
subject.setView('');
|
||||
setUpModel(todos)
|
||||
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(21, {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))
|
||||
})
|
||||
|
||||
it('should update the view', function () {
|
||||
it('should update the view', () => {
|
||||
var todos = [{
|
||||
id: 42,
|
||||
title: 'my todo',
|
||||
completed: true
|
||||
}];
|
||||
}]
|
||||
|
||||
setUpModel(todos);
|
||||
subject.setView('');
|
||||
setUpModel(todos)
|
||||
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 () {
|
||||
it('should add a new todo to the model', function () {
|
||||
setUpModel([]);
|
||||
describe('new todo', () => {
|
||||
it('should add a new todo to the model', () => {
|
||||
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 () {
|
||||
setUpModel([]);
|
||||
it('should add a new todo to the view', () => {
|
||||
setUpModel([])
|
||||
|
||||
subject.setView('');
|
||||
subject.setView('')
|
||||
|
||||
view.render.calls.reset();
|
||||
model.read.calls.reset();
|
||||
view.render.calls.reset()
|
||||
model.read.calls.reset()
|
||||
model.read.and.callFake(function(callback) {
|
||||
callback([{
|
||||
title: 'a new todo',
|
||||
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', [{
|
||||
title: 'a new todo',
|
||||
completed: false
|
||||
}]);
|
||||
});
|
||||
}])
|
||||
})
|
||||
|
||||
it('should clear the input field when a new todo is added', function () {
|
||||
setUpModel([]);
|
||||
it('should clear the input field when a new todo is added', () => {
|
||||
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 () {
|
||||
it('should remove an entry from the model', function () {
|
||||
var todo = {id: 42, title: 'my todo', completed: true};
|
||||
setUpModel([todo]);
|
||||
describe('element removal', () => {
|
||||
it('should remove an entry from the model', () => {
|
||||
var todo = {id: 42, title: 'my todo', completed: true}
|
||||
setUpModel([todo])
|
||||
|
||||
subject.setView('');
|
||||
view.trigger('itemRemove', {id: 42});
|
||||
subject.setView('')
|
||||
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 () {
|
||||
var todo = {id: 42, title: 'my todo', completed: true};
|
||||
setUpModel([todo]);
|
||||
it('should remove an entry from the view', () => {
|
||||
var todo = {id: 42, title: 'my todo', completed: true}
|
||||
setUpModel([todo])
|
||||
|
||||
subject.setView('');
|
||||
view.trigger('itemRemove', {id: 42});
|
||||
subject.setView('')
|
||||
view.trigger('itemRemove', {id: 42})
|
||||
|
||||
expect(view.render).toHaveBeenCalledWith('removeItem', 42);
|
||||
});
|
||||
expect(view.render).toHaveBeenCalledWith('removeItem', 42)
|
||||
})
|
||||
|
||||
it('should update the element count', function () {
|
||||
var todo = {id: 42, title: 'my todo', completed: true};
|
||||
setUpModel([todo]);
|
||||
it('should update the element count', () => {
|
||||
var todo = {id: 42, title: 'my todo', completed: true}
|
||||
setUpModel([todo])
|
||||
|
||||
subject.setView('');
|
||||
view.trigger('itemRemove', {id: 42});
|
||||
subject.setView('')
|
||||
view.trigger('itemRemove', {id: 42})
|
||||
|
||||
expect(view.render).toHaveBeenCalledWith('updateElementCount', 0);
|
||||
});
|
||||
});
|
||||
expect(view.render).toHaveBeenCalledWith('updateElementCount', 0)
|
||||
})
|
||||
})
|
||||
|
||||
describe('remove completed', function () {
|
||||
it('should remove a completed entry from the model', function () {
|
||||
var todo = {id: 42, title: 'my todo', completed: true};
|
||||
setUpModel([todo]);
|
||||
describe('remove completed', () => {
|
||||
it('should remove a completed entry from the model', () => {
|
||||
var todo = {id: 42, title: 'my todo', completed: true}
|
||||
setUpModel([todo])
|
||||
|
||||
subject.setView('');
|
||||
view.trigger('removeCompleted');
|
||||
subject.setView('')
|
||||
view.trigger('removeCompleted')
|
||||
|
||||
expect(model.read).toHaveBeenCalledWith({completed: true}, jasmine.any(Function));
|
||||
expect(model.remove).toHaveBeenCalledWith(42, jasmine.any(Function));
|
||||
});
|
||||
expect(model.read).toHaveBeenCalledWith({completed: true}, jasmine.any(Function))
|
||||
expect(model.remove).toHaveBeenCalledWith(42, jasmine.any(Function))
|
||||
})
|
||||
|
||||
it('should remove a completed entry from the view', function () {
|
||||
var todo = {id: 42, title: 'my todo', completed: true};
|
||||
setUpModel([todo]);
|
||||
it('should remove a completed entry from the view', () => {
|
||||
var todo = {id: 42, title: 'my todo', completed: true}
|
||||
setUpModel([todo])
|
||||
|
||||
subject.setView('');
|
||||
view.trigger('removeCompleted');
|
||||
subject.setView('')
|
||||
view.trigger('removeCompleted')
|
||||
|
||||
expect(view.render).toHaveBeenCalledWith('removeItem', 42);
|
||||
});
|
||||
});
|
||||
expect(view.render).toHaveBeenCalledWith('removeItem', 42)
|
||||
})
|
||||
})
|
||||
|
||||
describe('element complete toggle', function () {
|
||||
it('should update the model', function () {
|
||||
var todo = {id: 21, title: 'my todo', completed: false};
|
||||
setUpModel([todo]);
|
||||
subject.setView('');
|
||||
describe('element complete toggle', () => {
|
||||
it('should update the model', () => {
|
||||
var todo = {id: 21, title: 'my todo', completed: false}
|
||||
setUpModel([todo])
|
||||
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 () {
|
||||
var todo = {id: 42, title: 'my todo', completed: true};
|
||||
setUpModel([todo]);
|
||||
subject.setView('');
|
||||
it('should update the view', () => {
|
||||
var todo = {id: 42, title: 'my todo', completed: true}
|
||||
setUpModel([todo])
|
||||
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 () {
|
||||
it('should switch to edit mode', function () {
|
||||
var todo = {id: 21, title: 'my todo', completed: false};
|
||||
setUpModel([todo]);
|
||||
describe('edit item', () => {
|
||||
it('should switch to edit mode', () => {
|
||||
var todo = {id: 21, title: 'my todo', completed: false}
|
||||
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 () {
|
||||
var todo = {id: 21, title: 'my todo', completed: false};
|
||||
setUpModel([todo]);
|
||||
it('should leave edit mode on done', () => {
|
||||
var todo = {id: 21, title: 'my todo', completed: false}
|
||||
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 () {
|
||||
var todo = {id: 21, title: 'my todo', completed: false};
|
||||
setUpModel([todo]);
|
||||
it('should persist the changes on done', () => {
|
||||
var todo = {id: 21, title: 'my todo', completed: false}
|
||||
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 () {
|
||||
var todo = {id: 21, title: 'my todo', completed: false};
|
||||
setUpModel([todo]);
|
||||
it('should remove the element from the model when persisting an empty title', () => {
|
||||
var todo = {id: 21, title: 'my todo', completed: false}
|
||||
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 () {
|
||||
var todo = {id: 21, title: 'my todo', completed: false};
|
||||
setUpModel([todo]);
|
||||
it('should remove the element from the view when persisting an empty title', () => {
|
||||
var todo = {id: 21, title: 'my todo', completed: false}
|
||||
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 () {
|
||||
var todo = {id: 21, title: 'my todo', completed: false};
|
||||
setUpModel([todo]);
|
||||
it('should leave edit mode on cancel', () => {
|
||||
var todo = {id: 21, title: 'my todo', completed: false}
|
||||
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 () {
|
||||
var todo = {id: 21, title: 'my todo', completed: false};
|
||||
setUpModel([todo]);
|
||||
it('should not persist the changes on cancel', () => {
|
||||
var todo = {id: 21, title: 'my todo', completed: false}
|
||||
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
15
webpack.config.babel.js
Normal 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'},
|
||||
],
|
||||
},
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user