WIP NEWER PACKAGES

Author: jelbourn

angular-cli-build.js

@@ -25,6 +25,7 @@ module.exports = function(defaults) {
 
   const ngTree = angularAppTree.toTree();
   const ngNewPackagesRelease = new Funnel('node_modules/@angular', {destDir: '@angular'});
+  const rxjs = new Funnel('node_modules/rxjs', {destDir: 'rxjs'});
   const cssAutoprefixed = autoPrefixerTree(new Funnel(ngTree, {
     include: [ '**/*.css' ]
   }));
@@ -34,5 +35,6 @@ module.exports = function(defaults) {
     angularAppTree.toTree(),
     cssAutoprefixed,
     ngNewPackagesRelease,
+    rxjs,
   ], { overwrite: true });
 };

package.json

@@ -27,13 +27,13 @@
   "dependencies": {
     "angular2": "2.0.0-beta.17",
 
-    "@angular/common": "0.0.0-2",
-    "@angular/compiler": "0.0.0-2",
-    "@angular/core": "0.0.0-2",
+    "@angular/common": "0.0.0-3",
+    "@angular/compiler": "0.0.0-3",
+    "@angular/core": "0.0.0-3",
     "@angular/router": "0.0.0-0",
-    "@angular/http": "0.0.0-0",
-    "@angular/platform-browser": "0.0.0-2",
-    "@angular/platform-browser-dynamic": "0.0.0-2",
+    "@angular/http": "0.0.0-3",
+    "@angular/platform-browser": "0.0.0-3",
+    "@angular/platform-browser-dynamic": "0.0.0-3",
 
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.35.0",

src/components/checkbox/check.spec.ts

@@ -0,0 +1,57 @@
+import {it, ddescribe, beforeEach, inject, async} from '@angular/core/testing';
+import {FORM_DIRECTIVES, NgModel, NgControlName, NgControlStatus, NgControl} from '@angular/common';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {MdCheckbox} from './checkbox';
+
+ddescribe('MdCheckbox', () => {
+  let builder: TestComponentBuilder;
+
+  beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+    builder = tcb;
+  }));
+
+  it('should apply appriate ngModel css classes', async(() => {
+    builder.createAsync(CheckboxWithFormDirectives).then(fixture => {
+      fixture.detectChanges();
+
+      let checkboxElement = fixture.debugElement.query(By.directive(MdCheckbox));
+      let ngControl = <NgControl> checkboxElement.injector.get(NgControl);
+      let testComponent = <CheckboxWithFormDirectives> fixture.debugElement.componentInstance;
+
+      fixture.whenStable().then(() => {
+        expect(ngControl.valid).toBe(true);
+        expect(ngControl.pristine).toBe(true);
+        expect(ngControl.touched).toBe(false);
+      }).then(() => {
+        testComponent.isGood = true;
+        fixture.detectChanges();
+        return fixture.whenStable();
+      }).then(() => {
+        fixture.detectChanges();
+        return fixture.whenStable();
+      }).then(() => {
+        console.log(ngControl.pristine);
+        fixture.whenStable().then(() => {
+          console.log(ngControl.pristine);
+        });
+      });
+    });
+  }));
+});
+
+
+/** Simple component for testing an MdCheckbox with ngModel and ngControl. */
+@Component({
+  selector: 'checkbox-with-form-directives',
+  directives: [MdCheckbox, FORM_DIRECTIVES, NgModel],
+  template: `
+    <form>
+      <md-checkbox ngControl="cb" [(ngModel)]="isGood">Be good</md-checkbox>
+    </form>
+  `,
+})
+class CheckboxWithFormDirectives {
+  isGood: boolean = false;
+}

src/components/checkbox/checkbox.spec.ts

@@ -1,29 +1,20 @@
 import {
-  it,
+  it, iit, xit,
   describe,
   expect,
   beforeEach,
   fakeAsync,
+  async,
   inject,
   tick,
+  flushMicrotasks,
 } from '@angular/core/testing';
 import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
 import {Component, DebugElement, EventEmitter} from '@angular/core';
 import {By} from '@angular/platform-browser';
 
 import {MdCheckbox} from './checkbox';
 
-// IE11 does not support event constructors, so we need to perform this check.
-var BROWSER_SUPPORTS_EVENT_CONSTRUCTORS: boolean = (function() {
-  // See: https://github.com/rauschma/event_constructors_check/blob/gh-pages/index.html#L39
-  try {
-    return new Event('submit', { bubbles: false }).bubbles === false &&
-           new Event('submit', { bubbles: true }).bubbles === true;
-  } catch (e) {
-    return false;
-  }
-})();
-
 export function main() {
   describe('MdCheckbox', function() {
     var builder: TestComponentBuilder;
@@ -477,63 +468,130 @@ export function main() {
       });
     });
 
+    describe('normal', () => {
+      xit('should support ngModel and ngControl', fakeAsync(() => {
+        let fixture: ComponentFixture;
+        builder.createAsync(CheckboxWithFormDirectives).then(f => {
+          console.log('HERE');
+          fixture = f;
+        });
+
+        flushMicrotasks();
+        flushMicrotasks();
+
+        console.log('FIX ', fixture);
+      }));
+
+      xit('should support ngModel and ngControl', () => {
+        return builder.createAsync(CheckboxWithFormDirectives).then(fixture => {
+          debugger;
+          let testComponentInstance = fixture.debugElement.componentInstance;
+          let checkboxElement = fixture.debugElement.query(By.directive(MdCheckbox));
+          let invalidMsg = checkboxElement.query(By.css('#invalid-msg'));
+          fixture.detectChanges();
+
+          return fixture.whenStable().then(() => {
+            console.log('making assertions');
+            expect(checkboxElement.nativeElement.className).toContain('ng-untouched');
+            expect(checkboxElement.nativeElement.className).toContain('ng-pristine');
+            expect(invalidMsg.nativeElement.hidden).toBe(true);
+          });
+
+          // expect(checkboxElement.nativeElement.className).toContain('ng-untouched');
+          // expect(checkboxElement.nativeElement.className).toContain('ng-pristine');
+          // expect(invalidMsg.nativeElement.hidden).toBe(true);
+
+          // testComponentInstance.model.isChecked = true;
+          // fixture.detectChanges();
+
+          // expect(checkboxElement.nativeElement.className).toContain('md-checkbox-checked');
+          // expect(checkboxElement.nativeElement.className).toContain('ng-dirty');
+          // expect(checkboxElement.nativeElement.className).toContain('ng-valid');
+
+          // dispatchBlurEvent(checkboxElement.nativeElement);
+        });
+      });
+
+    });
+
     describe('usage as a form control', function() {
       var fixture: ComponentFixture;
-      var controller: CheckboxFormcontrolController;
+      var controller: CheckboxWithFormDirectives;
 
-      beforeEach(function(done: () => void) {
-        builder.createAsync(CheckboxFormcontrolController).then(function(f) {
+      beforeEach(async(() => {
+        builder.createAsync(CheckboxWithFormDirectives).then(function(f) {
           fixture = f;
           controller = fixture.componentInstance;
           fixture.detectChanges();
-        }).then(done).catch(done);
-      });
+        });
+      }));
 
       // NOTE(traviskaufman): This test is not that elegant, but I have not found a better way
       // to test through ngModel as of now.
       // See: https://github.com/angular/angular/issues/7409
-      it('supports ngModel/ngControl', function(done: () => void) {
+      xit('supports ngModel/ngControl', fakeAsync(() => {
+        debugger;
         var el:  DebugElement;
         var invalidMsg: DebugElement;
 
-        fakeAsync(function() {
-          el = fixture.debugElement.query(By.css('.md-checkbox'));
-          invalidMsg = fixture.debugElement.query(By.css('#invalid-msg'));
+        el = fixture.debugElement.query(By.css('.md-checkbox'));
+        invalidMsg = fixture.debugElement.query(By.css('#invalid-msg'));
 
-          fixture.detectChanges();
-          tick();
-          expect(el.nativeElement.className).toContain('ng-untouched');
-          expect(el.nativeElement.className).toContain('ng-pristine');
-          expect(invalidMsg.nativeElement.hidden).toBe(true);
+        fixture.detectChanges();
+        flushMicrotasks();
 
-          controller.model.isChecked = true;
-          fixture.detectChanges();
-          tick();
-          fixture.detectChanges();
+        flushMicrotasks();
+        fixture.detectChanges();
 
-          expect(el.nativeElement.className).toContain('md-checkbox-checked');
-          expect(el.nativeElement.className).toContain('ng-dirty');
-          expect(el.nativeElement.className).toContain('ng-valid');
-
-          var blur: Event;
-          if (BROWSER_SUPPORTS_EVENT_CONSTRUCTORS) {
-            blur = new Event('blur');
-          } else {
-            blur = document.createEvent('UIEvent');
-            (<UIEvent>blur).initUIEvent('blur', true, true, window, 0);
-          }
-          el.nativeElement.dispatchEvent(blur);
-          fixture.detectChanges();
-          tick();
-          expect(el.nativeElement.className).toContain('ng-touched');
-        })();
+        expect(el.nativeElement.className).toContain('ng-untouched');
+        expect(el.nativeElement.className).toContain('ng-pristine');
+        expect(invalidMsg.nativeElement.hidden).toBe(true);
+
+        controller.model.isChecked = true;
+
+        flushMicrotasks();
+        fixture.detectChanges();
+
+        console.log('one');
+
+        fixture.whenStable().then(() => {
+          console.log('stable');
+        });
+
+        console.log('two');
+
+        //flushMicrotasks();
+
+        console.log('three');
+
+        //tick();
+
+        console.log('four');
+
+        expect(el.nativeElement.className).toContain('md-checkbox-checked');
+        expect(el.nativeElement.className).toContain('ng-dirty');
+        expect(el.nativeElement.className).toContain('ng-valid');
+
+        var blur: Event;
+        if (BROWSER_SUPPORTS_EVENT_CONSTRUCTORS) {
+          blur = new Event('blur');
+        } else {
+          blur = document.createEvent('UIEvent');
+          (<UIEvent>blur).initUIEvent('blur', true, true, window, 0);
+        }
+        el.nativeElement.dispatchEvent(blur);
+        fixture.detectChanges();
+        //tick();
+        expect(el.nativeElement.className).toContain('ng-touched');
 
         let onceChanged = controller.model.waitForChange();
         click(el, fixture);
         onceChanged.then(function() {
           expect(controller.model.isChecked).toBe(false);
-        }).then(done).catch(done);
-      });
+        });
+
+        //flushMicrotasks();
+      }));
     });
 
     describe('applying transition classes', function() {
@@ -780,18 +838,16 @@ class FormcontrolModel {
 }
 
 @Component({
-  selector: 'checkbox-formcontrol-controller',
+  selector: 'checkbox-with-form-directives',
   template: `
     <form>
-      <md-checkbox [(ngModel)]="model.isChecked"
-                   ngControl="cb" #cb="ngForm">
-      </md-checkbox>
+      <md-checkbox [(ngModel)]="model.isChecked" ngControl="cb" #cb="ngForm">Extra fun</md-checkbox>
       <p id="invalid-msg" [hidden]="cb.valid || cb.pristine">INVALID!</p>
     </form>
   `,
   directives: [MdCheckbox]
 })
-class CheckboxFormcontrolController {
+class CheckboxWithFormDirectives {
   model = new FormcontrolModel();
 }
 
@@ -810,3 +866,29 @@ class CheckboxEndAlignedController {}
 class CheckboxBarebonesController {
   public isIndeterminate: boolean = false;
 }
+
+// TODO(jelbourn): move things below here into common testing utilities.
+
+// IE11 does not support event constructors, so we need to perform this check.
+var BROWSER_SUPPORTS_EVENT_CONSTRUCTORS: boolean = (function() {
+  // See: https://github.com/rauschma/event_constructors_check/blob/gh-pages/index.html#L39
+  try {
+    return new Event('submit', { bubbles: false }).bubbles === false &&
+           new Event('submit', { bubbles: true }).bubbles === true;
+  } catch (e) {
+    return false;
+  }
+})();
+
+
+/** Dispatches a `blur` event on the given element. */
+function dispatchBlurEvent(element: HTMLElement) {
+  var blur: Event;
+  if (BROWSER_SUPPORTS_EVENT_CONSTRUCTORS) {
+    blur = new Event('blur');
+  } else {
+    blur = document.createEvent('UIEvent');
+    (<UIEvent>blur).initUIEvent('blur', true, true, window, 0);
+  }
+  element.dispatchEvent(blur);
+};

src/components/checkbox/checkbox.ts

@@ -111,6 +111,9 @@ export class MdCheckbox implements ControlValueAccessor {
   /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
   onTouched: () => any = () => {};
 
+  /** Whether the `checked` state has been set to its initial value. */
+  private _isInitialized: boolean = false;
+
   private _currentAnimationClass: string = '';
 
   private _currentCheckState: TransitionCheckState = TransitionCheckState.Init;
@@ -132,11 +135,20 @@ export class MdCheckbox implements ControlValueAccessor {
   }
 
   set checked(checked: boolean) {
-    this._indeterminate = false;
-    this._checked = checked;
-    this._transitionCheckState(
-        this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
-    this.change.emit(this._checked);
+    let wasAlreadyInitialized = this._isInitialized;
+    this._isInitialized = true;
+
+    if (checked != this.checked) {
+      this._indeterminate = false;
+      this._checked = checked;
+      this._transitionCheckState(
+          this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
+
+      // Only fire a change event if this isn't the first time the checked property is ever set.
+      if (wasAlreadyInitialized) {
+        this.change.emit(this._checked);
+      }
+    }
   }
 
   /**
@@ -209,7 +221,11 @@ export class MdCheckbox implements ControlValueAccessor {
     if (this._changeSubscription) {
       this._changeSubscription.unsubscribe();
     }
-    this._changeSubscription = <{unsubscribe: () => any}>this.change.subscribe(fn);
+    this._changeSubscription = <{unsubscribe: () => any}>this.change.subscribe(() => {
+      debugger;
+      console.log('CHANGE FN INVOKED');
+      fn();
+    });
   }
 
   /** Implemented as part of ControlValueAccessor. */