fix(checkbox): change event should now fire on first change

closes #481

Author: Robert Messerle

src/components/checkbox/checkbox.spec.ts

@@ -1,11 +1,21 @@
-import {it, beforeEach, inject, async, fakeAsync, flushMicrotasks} from '@angular/core/testing';
+import {
+    it,
+    beforeEach,
+    inject,
+    async,
+    fakeAsync,
+    flushMicrotasks,
+    tick
+} from '@angular/core/testing';
 import {FORM_DIRECTIVES, NgModel, NgControl} from '@angular/common';
 import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdCheckbox} from './checkbox';
 import {PromiseCompleter} from '@angular2-material/core/async/promise-completer';
 
+
+
 // TODO: Implement E2E tests for spacebar/click behavior for checking/unchecking
 
 describe('MdCheckbox', () => {
@@ -244,6 +254,42 @@ describe('MdCheckbox', () => {
     });
   });
 
+  describe('with change event and no initial value', () => {
+    let checkboxDebugElement: DebugElement;
+    let checkboxNativeElement: HTMLElement;
+    let checkboxInstance: MdCheckbox;
+    let testComponent: CheckboxWithChangeEvent;
+    let inputElement: HTMLInputElement;
+    let labelElement: HTMLLabelElement;
+
+    beforeEach(async(() => {
+      builder.createAsync(CheckboxWithChangeEvent).then(f => {
+        fixture = f;
+        fixture.detectChanges();
+
+        checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
+        checkboxNativeElement = checkboxDebugElement.nativeElement;
+        checkboxInstance = checkboxDebugElement.componentInstance;
+        testComponent = fixture.debugElement.componentInstance;
+        inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
+        labelElement = <HTMLLabelElement>checkboxNativeElement.querySelector('label');
+
+        spyOn(testComponent, 'handleChange');
+      });
+    }));
+
+    it('should call the change event on first change after initialization', fakeAsync(() => {
+      fixture.detectChanges();
+      expect(testComponent.handleChange).not.toHaveBeenCalled();
+
+      checkboxInstance.checked = true;
+      fixture.detectChanges();
+
+      tick();
+      expect(testComponent.handleChange).toHaveBeenCalled();
+    }));
+  });
+
   describe('with provided aria-label ', () => {
     let checkboxDebugElement: DebugElement;
     let checkboxNativeElement: HTMLElement;
@@ -471,3 +517,12 @@ class CheckboxWithAriaLabelledby {}
   template: `<md-checkbox name="test-name"></md-checkbox>`
 })
 class CheckboxWithNameAttribute {}
+
+/** Simple test component with change event */
+@Component({
+  directives: [MdCheckbox],
+  template: `<md-checkbox (change)="handleChange()"></md-checkbox>`
+})
+class CheckboxWithChangeEvent {
+  handleChange(): void {}
+}

src/components/checkbox/checkbox.ts

@@ -149,7 +149,9 @@ export class MdCheckbox implements ControlValueAccessor {
         this.change.emit(this._checked);
       }
     }
+  }
 
+  ngAfterContentInit() {
     this._isInitialized = true;
   }