Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

minor formatting changes, removing tests requiring more complex spies…

… (to be covered later)
  • Loading branch information...
commit b776458d45f49b8e80dd330579b2d0e12a05be10 1 parent 0bb3c38
@addyosmani authored
View
6 js/ext/template.js
@@ -1,4 +1,5 @@
(function($) {
+
var cache = {};
function _render(elt, template, data, callback) {
@@ -9,6 +10,7 @@
elt.append(html);
callback();
}
+
/**
* Fetches the Underscore.js template at the given path,
@@ -30,7 +32,9 @@
cache[path] = _.template(data);
_render(self, cache[path], obj, callback);
});
-
+
return self;
};
+
+
})(jQuery);
View
27 js/koans/aboutApps.js
@@ -1,7 +1,5 @@
-
module('About Backbone Applications', {
-
setup: function() {
Backbone.localStorageDB = new Store('testTodos');
$('#qunit-fixture').append('<div id="app"></div>');
@@ -12,20 +10,17 @@ module('About Backbone Applications', {
this.App.todos.reset();
$('#app').remove();
}
-
});
- test('Should bootstrap the application by initializing the Collection.', function() {
- expect(2);
- notEqual(this.App.todos, undefined);
- equal(this.App.todos.length, 0);
- });
-
- /*
- test('Should bind Collection events to View creation.', function() {
- $('#new-todo').val('Foo');
- $('#new-todo').trigger(new $.Event('keypress', { keyCode: 13 }));
- equal(this.App.todos.length, 1);
- });
+test('Should bootstrap the application by initializing the Collection.', function() {
+ expect(2);
+ notEqual(this.App.todos, undefined);
+ equal(this.App.todos.length, 0);
+});
+
-*/
+test('Should bind Collection events to View creation.', function() {
+ $('#new-todo').val('Foo');
+ $('#new-todo').trigger(new $.Event('keypress', { keyCode: 13 }));
+ equal(this.App.todos.length, 1);
+});
View
109 js/koans/aboutCollections.js
@@ -1,63 +1,58 @@
-
module('About Backbone.Collection');
- test('Can add Model instances as objects and arrays.', function() {
-
- expect(3);
-
- var todos = new TodoList();
-
- equal(todos.length, 0);
-
- todos.add({ text: 'Clean the kitchen' });
-
- console.log(todos);
-
- equal(todos.length, 1);
-
- todos.add([
- { text: 'Do the laundry', done: true },
- { text: 'Go to the gym'}
- ]);
-
- equal(todos.length, 3);
- });
-
- test('Can have a url property to define the basic url structure for all contained models.', function() {
- expect(1);
- var todos = new TodoList();
- equal(todos.url, '/todos/');
- });
-
- test('Fires custom named events when the models change.', function() {
-
- expect(2);
- var todos = new TodoList();
-
- var addModelCallback = function(){
- ok( true, 'add model callback called');
- start();
- }
-
- stop();
- todos.bind('add', addModelCallback);
-
- // How would you get the 'add' event to trigger?
- todos.add({text:"New todo"});
-
- var removeModelCallback = function(){
- ok( true, 'remove model callback called');
- start();
- }
-
- stop();
- todos.bind('remove', removeModelCallback);
-
- // How would you get the 'remove' callback to trigger?
- todos.remove(todos.last());
-
- });
+test('Can add Model instances as objects and arrays.', function() {
+
+ expect(3);
+
+ var todos = new TodoList();
+ equal(todos.length, 0);
+
+ todos.add({ text: 'Clean the kitchen' });
+ equal(todos.length, 1);
+
+ todos.add([
+ { text: 'Do the laundry', done: true },
+ { text: 'Go to the gym'}
+ ]);
+
+ equal(todos.length, 3);
+});
+
+test('Can have a url property to define the basic url structure for all contained models.', function() {
+ expect(1);
+ var todos = new TodoList();
+ equal(todos.url, '/todos/');
+});
+
+test('Fires custom named events when the models change.', function() {
+
+ expect(2);
+ var todos = new TodoList();
+
+ var addModelCallback = function(){
+ ok( true, 'add model callback called');
+ start();
+ }
+
+ stop();
+ todos.bind('add', addModelCallback);
+
+ // How would you get the 'add' event to trigger?
+ todos.add({text:"New todo"});
+
+ var removeModelCallback = function(){
+ ok( true, 'remove model callback called');
+ start();
+ }
+
+ stop();
+ todos.bind('remove', removeModelCallback);
+
+ // How would you get the 'remove' callback to trigger?
+ todos.remove(todos.last());
+
+});
View
246 js/koans/aboutEvents.js
@@ -1,166 +1,162 @@
-
module('About Backbone.Events', {
-
setup: function() {
this.obj = {};
_.extend(this.obj, Backbone.Events);
this.obj.unbind(); // remove all custom events before each spec is run.
}
-
});
- test('Can extend javascript objects to support custom events.', function() {
- expect(3);
- var basicObject = {};
-
- // How would you give basicObject these functions?
- // Hint: http://documentcloud.github.com/backbone/#Events
-
- _.extend(basicObject, Backbone.Events);
- equal(typeof basicObject.bind, 'function');
- equal(typeof basicObject.unbind, 'function');
- equal(typeof basicObject.trigger, 'function');
- });
+test('Can extend javascript objects to support custom events.', function() {
+
+ expect(3);
+ var basicObject = {};
- test('Allows us to bind and trigger custom named events on an object.', function() {
-
- expect(1);
+ // How would you give basicObject these functions?
+ // Hint: http://documentcloud.github.com/backbone/#Events
+
+ _.extend(basicObject, Backbone.Events);
- var callback = function(){
- ok('custom event callback called');
- start();
- }
-
-
- this.obj.bind('basic event', callback);
+ equal(typeof basicObject.bind, 'function');
+ equal(typeof basicObject.unbind, 'function');
+ equal(typeof basicObject.trigger, 'function');
+});
- stop();
- this.obj.trigger("basic event");
- // How would you cause the callback for this custom event to be called?
-
- });
+
+
+test('Allows us to bind and trigger custom named events on an object.', function() {
- test('Also passes along any arguments to the callback when an event is triggered.', function() {
+ expect(1);
- expect(1);
+ var callback = function(){
+ ok('custom event callback called');
+ start();
+ }
+
+
+ this.obj.bind('basic event', callback);
- var passedArgs = [];
-
- this.obj.bind('some event', function() {
- for (var i = 0; i < arguments.length; i++) {
- passedArgs.push(arguments[i]);
- }
- });
-
- this.obj.trigger('some event', 'arg1', 'arg2');
-
- deepEqual(passedArgs, ['arg1', 'arg2']);
- });
+ stop();
+ this.obj.trigger("basic event");
+ // How would you cause the callback for this custom event to be called?
- test('Can also bind the passed context to the event callback.', function() {
+});
- expect(2);
+test('Also passes along any arguments to the callback when an event is triggered.', function() {
- var foo = { color: 'blue' };
-
- var changeColor = function() {
- this.color = 'red';
- ok('color changed');
- start();
+ expect(1);
+
+ var passedArgs = [];
+
+ this.obj.bind('some event', function() {
+ for (var i = 0; i < arguments.length; i++) {
+ passedArgs.push(arguments[i]);
}
-
- // How would you get 'this.color' to refer to 'foo' in the changeColor function?
-
- this.obj.bind('an event', changeColor, foo);
-
- stop();
- this.obj.trigger('an event');
-
- equal(foo.color, 'red');
});
- test("Uses 'all' as a special event name to capture all events bound to the object.", function() {
+ this.obj.trigger('some event', 'arg1', 'arg2');
+
+ deepEqual(passedArgs, ['arg1', 'arg2']);
+});
- expect(2);
+test('Can also bind the passed context to the event callback.', function() {
- var calledCount = 0;
- var callback = function(){
- ok('custom event callback called');
- calledCount +=1;
- start();
- }
-
-
- this.obj.bind('all', callback);
-
- stop();
- this.obj.trigger("custom event");
+ expect(2);
- equal(calledCount, 1);
+ var foo = { color: 'blue' };
+
+ var changeColor = function() {
+ this.color = 'red';
+ ok('color changed');
+ start();
+ }
+
+ // How would you get 'this.color' to refer to 'foo' in the changeColor function?
+
+ this.obj.bind('an event', changeColor, foo);
+
+ stop();
+ this.obj.trigger('an event');
+
+ equal(foo.color, 'red');
+});
- });
+
+test("Uses 'all' as a special event name to capture all events bound to the object.", function() {
+
+ expect(2);
+
+ var calledCount = 0;
+ var callback = function(){
+ ok('custom event callback called');
+ calledCount +=1;
+ start();
+ }
+
+ this.obj.bind('all', callback);
- test('Also can remove custom events from objects.', function() {
+ stop();
+ this.obj.trigger("custom event");
- expect(4);
+ equal(calledCount, 1);
- var spyCount1 = 0,
- spyCount2 = 0,
- spyCount3 = 0;
+});
- var spy1 = function(){
- ok( true, 'spy 1');
- spyCount1 +=1;
- start();
- }
- var spy2 = function(){
- ok( true, 'spy 2');
- spyCount2+=1;
- start();
- }
-
- var spy3 = function(){
- ok( true, 'spy 1');
- spyCount3+=1;
- start();
- }
- this.obj.bind('foo', spy1);
- this.obj.bind('foo', spy2);
- this.obj.bind('foo', spy3);
- this.obj.bind('bar', spy1);
-
- // How do you unbind just a single callback for the event?
+test('Also can remove custom events from objects.', function() {
- this.obj.unbind('foo', spy1);
+ expect(4);
- stop();
- this.obj.trigger('foo');
-
- //equal(spyCount1, 1);
-
- // How do you unbind all callbacks tied to the event with a single method?
-
- this.obj.unbind('foo');
+ var spyCount1 = 0,
+ spyCount2 = 0,
+ spyCount3 = 0;
- //stop();
- this.obj.trigger('foo');
-
- equal(spyCount2, 1);
- equal(spyCount3, 1);
-
- // How do you unbind all callbacks and events tied to the object with a single method?
-
- this.obj.unbind('bar');
+ var spy1 = function(){
+ ok( true, 'spy 1');
+ spyCount1 +=1;
+ start();
+ }
+ var spy2 = function(){
+ ok( true, 'spy 2');
+ spyCount2+=1;
+ start();
+ }
+
+ var spy3 = function(){
+ ok( true, 'spy 1');
+ spyCount3+=1;
+ start();
+ }
- //stop();
- this.obj.trigger('bar');
+ this.obj.bind('foo', spy1);
+ this.obj.bind('foo', spy2);
+ this.obj.bind('foo', spy3);
+ this.obj.bind('bar', spy1);
+
+ // How do you unbind just a single callback for the event?
+
+ this.obj.unbind('foo', spy1);
+
+ stop();
+ this.obj.trigger('foo');
+ // How do you unbind all callbacks tied to the event with a single method
+ this.obj.unbind('foo');
+
+ this.obj.trigger('foo');
- });
+ equal(spyCount2, 1);
+ equal(spyCount3, 1);
+
+ // How do you unbind all callbacks and events tied to the object with a single method?
+ this.obj.unbind('bar');
+
+ //stop();
+ this.obj.trigger('bar');
+
+});
View
107 js/koans/aboutModels.js
@@ -2,66 +2,63 @@
module('About Backbone.Model');
- test('Can be created with default values for its attributes.', function() {
- expect(1);
- var todo = new Todo();
- equal(todo.get('text'), "");
- });
-
- test('Will set passed attributes on the model instance when created.', function() {
+test('Can be created with default values for its attributes.', function() {
+ expect(1);
+ var todo = new Todo();
+ equal(todo.get('text'), "");
+});
- expect(3);
- var todo = new Todo({ text: 'Get oil change for car.' });
-
- equal(todo.get('text'), "Get oil change for car.");
- equal(todo.get('done'), false);
- equal(todo.get('order'), 0);
- });
-
- test('Will call a custom initialize function on the model instance when created.', function() {
+test('Will set passed attributes on the model instance when created.', function() {
- expect(1);
- var toot = new Todo({ text: 'Stop monkeys from throwing their own crap!' });
-
- equal(toot.get('text'), 'Stop monkeys from throwing their own rainbows!');
- });
+ expect(3);
+ var todo = new Todo({ text: 'Get oil change for car.' });
- test('Fires a custom event when the state changes.', function() {
+ equal(todo.get('text'), "Get oil change for car.");
+ equal(todo.get('done'), false);
+ equal(todo.get('order'), 0);
+});
+
+test('Will call a custom initialize function on the model instance when created.', function() {
+
+ expect(1);
+ var toot = new Todo({ text: 'Stop monkeys from throwing their own crap!' });
+ equal(toot.get('text'), 'Stop monkeys from throwing their own rainbows!');
+});
- expect(1);
- var spy = function(){
- ok( true, 'change event callback called');
- start();
- }
-
- var todo = new Todo();
-
- todo.bind('change', spy);
-
- stop();
- todo.set({text:"new text"});
- // How would you update a property on the todo here?
- // Hint: http://documentcloud.github.com/backbone/#Model-set
-
- });
+test('Fires a custom event when the state changes.', function() {
+
+ expect(1);
+ var spy = function(){
+ ok( true, 'A change event callback was correctly triggered');
+ start();
+ }
+
+ var todo = new Todo();
+
+ todo.bind('change', spy);
- test('Can contain custom validation rules, and will trigger an error event on failed validation.', function() {
-
- expect(1);
-
- var errorCallback = function(){
- ok( true, 'error callback called');
- start();
- }
-
- var todo = new Todo();
-
- todo.bind('error', errorCallback);
-
- // What would you need to set on the todo properties to cause validation to fail?
- todo.set({done:"not a boolean"});
+ stop();
+ todo.set({text:"new text"});
+ // How would you update a property on the todo here?
+ // Hint: http://documentcloud.github.com/backbone/#Model-set
+
+});
- //tobedefined, must be a boolean
+test('Can contain custom validation rules, and will trigger an error event on failed validation.', function() {
+
+ expect(1);
+
+ var errorCallback = function(){
+ ok( true, 'A failed validation correctly triggered an error');
+ start();
+ }
+
+ var todo = new Todo();
+
+ todo.bind('error', errorCallback);
+
+ // What would you need to set on the todo properties to cause validation to fail?
+ todo.set({done:"not a boolean"});
- });
+});
View
67 js/koans/aboutViews.js
@@ -1,10 +1,6 @@
-
module('About Backbone.View', {
-
-
setup: function() {
-
$('body').append('<ul id="todoList"></ul>');
this.todoView = new TodoView({ model: new Todo() });
},
@@ -16,49 +12,24 @@ module('About Backbone.View', {
});
- test('Should be tied to a DOM element when created, based off the property provided.', function() {
- equal(this.todoView.el.tagName.toLowerCase(), 'li');
- });
-
- test('Is backed by a model instance, which provides the data.', function() {
- notEqual(this.todoView.model, undefined);
- equal(this.todoView.model.get('done'), false);
- });
-
- test('Can render, after which the DOM representation of the view will be visible.', function() {
- this.todoView.render();
-
- // Hint: render() just builds the DOM representation of the view, but doesn't insert it into the DOM.
- // How would you append it to the ul#todoList?
- // How do you access the view's DOM representation?
- //
- // Hint: http://documentcloud.github.com/backbone/#View-el
+test('Should be tied to a DOM element when created, based off the property provided.', function() {
+ equal(this.todoView.el.tagName.toLowerCase(), 'li');
+});
- $('ul#todoList').append(this.todoView.el);
- equal($('#todoList').find('li').length, 1);
- });
-
- test('Can use an events hash to wire up view methods to DOM elements.', function() {
- var viewElt;
-
- //spyOn(todoView.model, 'toggle');
-
-
- $('#todoList').append(this.todoView.render().el);
-
-
- setTimeout(function() {
- viewElt = $('#todoList li input.check').filter(':first');
- equal(viewElt.length > 0, true);
- }, 1000);
-
- //runs(function() {
- // Hint: How would you trigger the view, via a DOM Event, to toggle the 'done' status?
- // (See todos.js line 70, where the events hash is defined.)
- //
- // Hint: http://api.jquery.com/click
- //todoView.toggleDone();
- //expect(todoView.model.toggle).toHaveBeenCalled();
- //});
- });
+test('Is backed by a model instance, which provides the data.', function() {
+ notEqual(this.todoView.model, undefined);
+ equal(this.todoView.model.get('done'), false);
+});
+test('Can render, after which the DOM representation of the view will be visible.', function() {
+ this.todoView.render();
+
+ // Hint: render() just builds the DOM representation of the view, but doesn't insert it into the DOM.
+ // How would you append it to the ul#todoList?
+ // How do you access the view's DOM representation?
+ //
+ // Hint: http://documentcloud.github.com/backbone/#View-el
+
+ $('ul#todoList').append(this.todoView.el);
+ equal($('#todoList').find('li').length, 1);
+});
View
5 js/todos.js
@@ -81,9 +81,12 @@
render: function() {
var self = this;
+
$(self.el).empty().template(TEMPLATE_URL + '/templates/item.html', self.model.toJSON(), function() {
self.setText();
});
+
+
return this;
},
@@ -139,6 +142,7 @@
TEMPLATE_URL = options.templateUrl || TEMPLATE_URL;
+
parentElt.template(TEMPLATE_URL + '/templates/app.html', {}, function() {
self.el = $('#todoapp');
self.delegateEvents();
@@ -151,6 +155,7 @@
self.todos.fetch();
});
+
},
render: function() {
View
10 specrunner.html
@@ -9,9 +9,8 @@
<script type="text/javascript" src="js/ext/backbone.localStorage.js"></script>
<script type="text/javascript" src="js/todos.js"></script>
-
<script type="text/javascript" src="http://code.jquery.com/qunit/qunit-git.js"></script>
-<link rel="stylesheet" type="text/css" href="http://code.jquery.com/qunit/qunit-1.2.0.css">
+ <link rel="stylesheet" type="text/css" href="http://code.jquery.com/qunit/qunit-1.2.0.css">
<script type="text/javascript" src="js/koans/aboutEvents.js"></script>
<script type="text/javascript" src="js/koans/aboutModels.js"></script>
@@ -22,13 +21,14 @@
</head>
<body>
<h1>Backbone Koans</h1>
-
+
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
- <div id="qunit-fixture">test markup, will be hidden</div>
+ <div id="qunit-fixture">
+ </div>
<script type="text/javascript">
@@ -39,5 +39,7 @@ <h2 id="qunit-userAgent"></h2>
});
</script>
+
+
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.