Fix nested checkbox demo and update test name

Fixes #575.

Author: devversion

src/components/checkbox/checkbox.spec.ts

@@ -214,7 +214,33 @@ describe('MdCheckbox', () => {
       expect(testComponent.onCheckboxClick).toHaveBeenCalledTimes(1);
     });
 
-    it('should emit a change event when the `checked` value changes', async(() => {
+    it('should trigger a change event when the native input does', async(() => {
+      spyOn(testComponent, 'onCheckboxChange');
+
+      expect(inputElement.checked).toBe(false);
+      expect(checkboxNativeElement.classList).not.toContain('md-checkbox-checked');
+
+      labelElement.click();
+      fixture.detectChanges();
+
+      expect(inputElement.checked).toBe(true);
+      expect(checkboxNativeElement.classList).toContain('md-checkbox-checked');
+
+      // Wait for the fixture to become stable, because the EventEmitter for the change event,
+      // will only fire after the zone async change detection has finished.
+      fixture.whenStable().then(() => {
+        // The change event shouldn't fire, because the value change was not caused
+        // by any interaction.
+        expect(testComponent.onCheckboxChange).toHaveBeenCalledTimes(1);
+      });
+    }));
+
+    it('should not trigger the change event by changing the native value', async(() => {
+      spyOn(testComponent, 'onCheckboxChange');
+
+      expect(inputElement.checked).toBe(false);
+      expect(checkboxNativeElement.classList).not.toContain('md-checkbox-checked');
+
       testComponent.isChecked = true;
       fixture.detectChanges();
 

src/demo-app/checkbox/checkbox-demo.html

@@ -40,6 +40,5 @@ <h1>md-checkbox: Basic Example</h1>
   </div>
 </div>
 
-<h1>Application Example: Nested Checklist</h1>
-<h2><em>Caution: WIP!</em></h2>
-<md-checkbox-demo-nested-checklist></md-checkbox-demo-nested-checklist>
+<h1>Nested Checklist</h1>
+<md-checkbox-demo-nested-checklist></md-checkbox-demo-nested-checklist>

src/demo-app/checkbox/nested-checklist.html

@@ -4,7 +4,7 @@ <h2>Tasks</h2>
     <md-checkbox [(ngModel)]="task.completed"
                  [checked]="allComplete(task)"
                  [indeterminate]="someComplete(task.subtasks)"
-                 (change)="setAllCompleted(task.subtasks, $event)">
+                 (change)="setAllCompleted(task.subtasks, $event.checked)">
       <h3>{{task.name}}</h3>
     </md-checkbox>
     <ul>