update Views and Collections koans, added comments and cleaned up exp…

…ectations to make the failures clearer and easier to grok.

js/koans/aboutCollections.js

@@ -1,5 +1,5 @@
 describe('About Backbone.Collection', function() {
-    it('Can add Model instances as objects and arrays.', function() {
+    it('Can add Model instances as objects one at a time, or as arrays of models.', function() {
         var todos = new TodoList();
 
         expect(todos.length).toBe(0);
@@ -16,33 +16,42 @@ describe('About Backbone.Collection', function() {
     it('Can have a comparator function to keep the collection sorted.', function() {
         var todos = new TodoList();
 
-        // Without changing the sequence in which the todos are added, how would you
+        // Without changing the sequence of the Todo objects in the array, how would you
         // get the expectations below to pass?
+        //
+        // How is the collection sorting the models when they are added? (see TodoList.comparator in js/todos.js)
+        //
+        // Hint: Could you change attribute values on the todos themselves?
 
-        todos.add([{ text: 'Do the laundry',  order: 1},
-                   { text: 'Clean the house', order: 2},
+        todos.add([{ text: 'Do the laundry',  order: 4},
+                   { text: 'Clean the house', order: 8},
                    { text: 'Take a nap',      order: 3}]);
 
         expect(todos.at(0).get('text')).toEqual('Clean the house');
         expect(todos.at(1).get('text')).toEqual('Do the laundry');
         expect(todos.at(2).get('text')).toEqual('Take a nap');
     });
 
-    it('Fires custom named events when the collection changes.', function() {
+    // How are you supposed to know what Backbone objects trigger events? To the docs!
+    // http://documentcloud.github.com/backbone/#FAQ-events
+
+    it('Fires custom named events when the contents of the collection change.', function() {
         var todos = new TodoList();
 
         var addModelCallback = jasmine.createSpy('-add model callback-');
         todos.bind('add', addModelCallback);
 
-        // How would you get the 'add' event to fire?
+        // How would you get both expectations to pass with a single method call?
 
+        expect(todos.length).toEqual(1);
         expect(addModelCallback).toHaveBeenCalled();
 
         var removeModelCallback = jasmine.createSpy('-remove model callback-');
         todos.bind('remove', removeModelCallback);
 
-        // How would you get the 'remove' event to fire?
+        // How would you get both expectations to pass with a single method call?
 
+        expect(todos.length).toEqual(0);
         expect(removeModelCallback).toHaveBeenCalled();
     });
 });

js/koans/aboutViews.js

@@ -14,46 +14,51 @@ describe('About Backbone.View', function() {
         $('#todoList').remove();
     });
 
-    it('Should be tied to a DOM element when created, based off the property provided.', function() {
+    it('Views are tied to a DOM element when created, based off the property provided.', function() {
         var tagName = 'what html element represents this view?';
 
-        expect(todoView.el.tagName.toLowerCase()).toBe(tagName);
+        expect(tagName).toEqual(todoView.tagName)
+        expect(tagName).toEqual(todoView.el.tagName.toLowerCase());
     });
 
-    it('Is backed by a model instance, which provides the data representation.', function() {
+    it('Views are backed by a model instance, which provides the data when rendering the view.', function() {
         // What method would you call on todoView to get this expectation to pass?
         // Hint: You can accomplish this without accessing todoView.model directly.
 
         expect(todoView.model.get('done')).toBe(true);
     });
 
-    it('Can render, after which the DOM representation of the view will be visible.', function() {
+    it('When rendered, the view element contains the complete DOM representation of the view.', function() {
         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
+        // Hint: http://documentcloud.github.com/backbone/#View-el and TodoApp.addOne in todos.js
 
         expect($('#todoList').find('li').length).toBe(1);
     });
 
-    it('Can use an events hash to wire up view methods to DOM elements.', function() {
+    it('Views can contain an events hash to wire up view methods to DOM events.', function() {
         var viewElt;
 
         spyOn(todoView.model, 'toggle');
 
+        // Render the <li> for the view, and append it to the <ul>
         runs(function() {
             $('#todoList').append(todoView.render().el);
         });
 
+        // We use runs and waitsFor since this is an async process, and want to make
+        // sure we don't run our expectations until the view's markup is accessible in the DOM.
         waitsFor(function() {
             viewElt = $('#todoList li input.check').filter(':first');
 
             return viewElt.length > 0;
         }, 1000, 'Expected DOM Elt to exist');
 
+        // Make your changes within this function, you don't need to touch the code above.
         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.)