diff --git a/src/components/button-toggle/button-toggle.spec.ts b/src/components/button-toggle/button-toggle.spec.ts
index 53b7b65b59fa..218b8f2421c9 100644
--- a/src/components/button-toggle/button-toggle.spec.ts
+++ b/src/components/button-toggle/button-toggle.spec.ts
@@ -1,9 +1,7 @@
 import {
-  inject,
   async,
   fakeAsync,
   tick,
-  TestComponentBuilder,
   ComponentFixture,
   TestBed,
 } from '@angular/core/testing';
@@ -19,7 +17,6 @@ import {
 
 
 describe('MdButtonToggle', () => {
-  let builder: TestComponentBuilder;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -36,10 +33,6 @@ describe('MdButtonToggle', () => {
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-    builder = tcb;
-  }));
-
   describe('inside of an exclusive selection group', () => {
 
     let fixture: ComponentFixture<ButtonTogglesInsideButtonToggleGroup>;
@@ -53,26 +46,24 @@ describe('MdButtonToggle', () => {
     let testComponent: ButtonTogglesInsideButtonToggleGroup;
 
     beforeEach(async(() => {
-      builder.createAsync(ButtonTogglesInsideButtonToggleGroup).then(f => {
-        fixture = f;
-        fixture.detectChanges();
+      fixture = TestBed.createComponent(ButtonTogglesInsideButtonToggleGroup);
+      fixture.detectChanges();
 
-        testComponent = fixture.debugElement.componentInstance;
+      testComponent = fixture.debugElement.componentInstance;
 
-        groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
-        groupNativeElement = groupDebugElement.nativeElement;
-        groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
+      groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
+      groupNativeElement = groupDebugElement.nativeElement;
+      groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
 
-        buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
+      buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
 
-        buttonToggleNativeElements = buttonToggleDebugElements
-          .map(debugEl => debugEl.nativeElement);
+      buttonToggleNativeElements = buttonToggleDebugElements
+        .map(debugEl => debugEl.nativeElement);
 
-        buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('label'))
-          .map(debugEl => debugEl.nativeElement);
+      buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('label'))
+        .map(debugEl => debugEl.nativeElement);
 
-        buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
-      });
+      buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
     }));
 
     it('should set individual button toggle names based on the group name', () => {
@@ -215,22 +206,20 @@ describe('MdButtonToggle', () => {
     let groupNgControl: NgControl;
 
     beforeEach(async(() => {
-      builder.createAsync(ButtonToggleGroupWithNgModel).then(f => {
-        fixture = f;
-        fixture.detectChanges();
-
-        testComponent = fixture.debugElement.componentInstance;
-
-        groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
-        groupNativeElement = groupDebugElement.nativeElement;
-        groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
-        groupNgControl = groupDebugElement.injector.get(NgControl);
-
-        buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
-        buttonToggleNativeElements =
-            buttonToggleDebugElements.map(debugEl => debugEl.nativeElement);
-        buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
-      });
+      fixture = TestBed.createComponent(ButtonToggleGroupWithNgModel);
+      fixture.detectChanges();
+
+      testComponent = fixture.debugElement.componentInstance;
+
+      groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
+      groupNativeElement = groupDebugElement.nativeElement;
+      groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
+      groupNgControl = groupDebugElement.injector.get(NgControl);
+
+      buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
+      buttonToggleNativeElements =
+          buttonToggleDebugElements.map(debugEl => debugEl.nativeElement);
+      buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
     }));
 
     it('should set individual radio names based on the group name', () => {
@@ -303,23 +292,21 @@ describe('MdButtonToggle', () => {
     let groupNgControl: NgControl;
 
     beforeEach(async(() => {
-      builder.createAsync(ButtonToggleGroupWithNgModel).then(f => {
-        fixture = f;
+      fixture = TestBed.createComponent(ButtonToggleGroupWithNgModel);
 
-        testComponent = fixture.debugElement.componentInstance;
+      testComponent = fixture.debugElement.componentInstance;
 
-        groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
-        groupNativeElement = groupDebugElement.nativeElement;
-        groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
-        groupNgControl = groupDebugElement.injector.get(NgControl);
+      groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
+      groupNativeElement = groupDebugElement.nativeElement;
+      groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
+      groupNgControl = groupDebugElement.injector.get(NgControl);
 
-        buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
-        buttonToggleNativeElements =
-            buttonToggleDebugElements.map(debugEl => debugEl.nativeElement);
-        buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
+      buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
+      buttonToggleNativeElements =
+          buttonToggleDebugElements.map(debugEl => debugEl.nativeElement);
+      buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
 
-        fixture.detectChanges();
-      });
+      fixture.detectChanges();
     }));
 
     it('should update the model before firing change event', fakeAsync(() => {
@@ -347,23 +334,21 @@ describe('MdButtonToggle', () => {
     let testComponent: ButtonTogglesInsideButtonToggleGroupMultiple;
 
     beforeEach(async(() => {
-      builder.createAsync(ButtonTogglesInsideButtonToggleGroupMultiple).then(f => {
-        fixture = f;
-        fixture.detectChanges();
-
-        testComponent = fixture.debugElement.componentInstance;
-
-        groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroupMultiple));
-        groupNativeElement = groupDebugElement.nativeElement;
-        groupInstance = groupDebugElement.injector.get(MdButtonToggleGroupMultiple);
-
-        buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
-        buttonToggleNativeElements = buttonToggleDebugElements
-          .map(debugEl => debugEl.nativeElement);
-        buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('label'))
-          .map(debugEl => debugEl.nativeElement);
-        buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
-      });
+      fixture = TestBed.createComponent(ButtonTogglesInsideButtonToggleGroupMultiple);
+      fixture.detectChanges();
+
+      testComponent = fixture.debugElement.componentInstance;
+
+      groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroupMultiple));
+      groupNativeElement = groupDebugElement.nativeElement;
+      groupInstance = groupDebugElement.injector.get(MdButtonToggleGroupMultiple);
+
+      buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
+      buttonToggleNativeElements = buttonToggleDebugElements
+        .map(debugEl => debugEl.nativeElement);
+      buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('label'))
+        .map(debugEl => debugEl.nativeElement);
+      buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
     }));
 
     it('should disable click interactions when the group is disabled', () => {
@@ -446,17 +431,15 @@ describe('MdButtonToggle', () => {
     let testComponent: StandaloneButtonToggle;
 
     beforeEach(async(() => {
-      builder.createAsync(StandaloneButtonToggle).then(f => {
-        fixture = f;
-        fixture.detectChanges();
+      fixture = TestBed.createComponent(StandaloneButtonToggle);
+      fixture.detectChanges();
 
-        testComponent = fixture.debugElement.componentInstance;
+      testComponent = fixture.debugElement.componentInstance;
 
-        buttonToggleDebugElement = fixture.debugElement.query(By.directive(MdButtonToggle));
-        buttonToggleNativeElement = buttonToggleDebugElement.nativeElement;
-        buttonToggleLabelElement = fixture.debugElement.query(By.css('label')).nativeElement;
-        buttonToggleInstance = buttonToggleDebugElement.componentInstance;
-      });
+      buttonToggleDebugElement = fixture.debugElement.query(By.directive(MdButtonToggle));
+      buttonToggleNativeElement = buttonToggleDebugElement.nativeElement;
+      buttonToggleLabelElement = fixture.debugElement.query(By.css('label')).nativeElement;
+      buttonToggleInstance = buttonToggleDebugElement.componentInstance;
     }));
 
     it('should toggle when clicked', () => {
diff --git a/src/components/button/button.spec.ts b/src/components/button/button.spec.ts
index ed327f7ce279..93fd854fad69 100644
--- a/src/components/button/button.spec.ts
+++ b/src/components/button/button.spec.ts
@@ -1,6 +1,4 @@
 import {
-  inject,
-  TestComponentBuilder,
   async,
   TestBed,
 } from '@angular/core/testing';
@@ -10,7 +8,6 @@ import {MdButtonModule} from './button';
 
 
 describe('MdButton', () => {
-  let builder: TestComponentBuilder;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -21,125 +18,107 @@ describe('MdButton', () => {
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-    builder = tcb;
-  }));
-
   // General button tests
-  it('should apply class based on color attribute', (done: () => void) => {
-    return builder.createAsync(TestApp).then(fixture => {
-      let testComponent = fixture.debugElement.componentInstance;
-      let buttonDebugElement = fixture.debugElement.query(By.css('button'));
-      let aDebugElement = fixture.debugElement.query(By.css('a'));
-
-      testComponent.buttonColor = 'primary';
-      fixture.detectChanges();
-      expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
-      expect(aDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
-
-      testComponent.buttonColor = 'accent';
-      fixture.detectChanges();
-      expect(buttonDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
-      expect(aDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
-      done();
-    });
+  it('should apply class based on color attribute', () => {
+    let fixture = TestBed.createComponent(TestApp);
+
+    let testComponent = fixture.debugElement.componentInstance;
+    let buttonDebugElement = fixture.debugElement.query(By.css('button'));
+    let aDebugElement = fixture.debugElement.query(By.css('a'));
+
+    testComponent.buttonColor = 'primary';
+    fixture.detectChanges();
+    expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
+    expect(aDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
+
+    testComponent.buttonColor = 'accent';
+    fixture.detectChanges();
+    expect(buttonDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
+    expect(aDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
   });
 
-  it('should should not clear previous defined classes', (done: () => void) => {
-    return builder.createAsync(TestApp).then(fixture => {
-      let testComponent = fixture.debugElement.componentInstance;
-      let buttonDebugElement = fixture.debugElement.query(By.css('button'));
+  it('should should not clear previous defined classes', () => {
+    let fixture = TestBed.createComponent(TestApp);
+    let testComponent = fixture.debugElement.componentInstance;
+    let buttonDebugElement = fixture.debugElement.query(By.css('button'));
 
-      buttonDebugElement.nativeElement.classList.add('custom-class');
+    buttonDebugElement.nativeElement.classList.add('custom-class');
 
-      testComponent.buttonColor = 'primary';
-      fixture.detectChanges();
+    testComponent.buttonColor = 'primary';
+    fixture.detectChanges();
 
-      expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
-      expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
+    expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
+    expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
 
-      testComponent.buttonColor = 'accent';
-      fixture.detectChanges();
+    testComponent.buttonColor = 'accent';
+    fixture.detectChanges();
 
-      expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(false);
-      expect(buttonDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
-      expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
+    expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(false);
+    expect(buttonDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
+    expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
 
-      done();
-    });
   });
 
   // Regular button tests
   describe('button[md-button]', () => {
-    it('should handle a click on the button', (done: () => void) => {
-      return builder.createAsync(TestApp).then(fixture => {
-        let testComponent = fixture.debugElement.componentInstance;
-        let buttonDebugElement = fixture.debugElement.query(By.css('button'));
-
-        buttonDebugElement.nativeElement.click();
-        expect(testComponent.clickCount).toBe(1);
-        done();
-      });
+    it('should handle a click on the button', () => {
+      let fixture = TestBed.createComponent(TestApp);
+      let testComponent = fixture.debugElement.componentInstance;
+      let buttonDebugElement = fixture.debugElement.query(By.css('button'));
+
+      buttonDebugElement.nativeElement.click();
+      expect(testComponent.clickCount).toBe(1);
     });
 
-    it('should not increment if disabled', (done: () => void) => {
-      return builder.createAsync(TestApp).then(fixture => {
-        let testComponent = fixture.debugElement.componentInstance;
-        let buttonDebugElement = fixture.debugElement.query(By.css('button'));
+    it('should not increment if disabled', () => {
+      let fixture = TestBed.createComponent(TestApp);
+      let testComponent = fixture.debugElement.componentInstance;
+      let buttonDebugElement = fixture.debugElement.query(By.css('button'));
 
-        testComponent.isDisabled = true;
-        fixture.detectChanges();
+      testComponent.isDisabled = true;
+      fixture.detectChanges();
 
-        buttonDebugElement.nativeElement.click();
+      buttonDebugElement.nativeElement.click();
 
-        expect(testComponent.clickCount).toBe(0);
-        done();
-      });
+      expect(testComponent.clickCount).toBe(0);
     });
 
   });
 
   // Anchor button tests
   describe('a[md-button]', () => {
-    it('should not redirect if disabled', (done: () => void) => {
-      return builder.createAsync(TestApp).then(fixture => {
-        let testComponent = fixture.debugElement.componentInstance;
-        let buttonDebugElement = fixture.debugElement.query(By.css('a'));
-
-        testComponent.isDisabled = true;
-        fixture.detectChanges();
-
-        buttonDebugElement.nativeElement.click();
-        // will error if page reloads
-        done();
-      });
+    it('should not redirect if disabled', () => {
+      let fixture = TestBed.createComponent(TestApp);
+      let testComponent = fixture.debugElement.componentInstance;
+      let buttonDebugElement = fixture.debugElement.query(By.css('a'));
+
+      testComponent.isDisabled = true;
+      fixture.detectChanges();
+
+      buttonDebugElement.nativeElement.click();
     });
 
-    it('should remove tabindex if disabled', (done: () => void) => {
-      return builder.createAsync(TestApp).then(fixture => {
-        let testComponent = fixture.debugElement.componentInstance;
-        let buttonDebugElement = fixture.debugElement.query(By.css('a'));
-        expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe(null);
-
-        testComponent.isDisabled = true;
-        fixture.detectChanges();
-        expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe('-1');
-        done();
-      });
+    it('should remove tabindex if disabled', () => {
+      let fixture = TestBed.createComponent(TestApp);
+      let testComponent = fixture.debugElement.componentInstance;
+      let buttonDebugElement = fixture.debugElement.query(By.css('a'));
+      expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe(null);
+
+      testComponent.isDisabled = true;
+      fixture.detectChanges();
+      expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe('-1');
     });
 
-    it('should add aria-disabled attribute if disabled', (done: () => void) => {
-      return builder.createAsync(TestApp).then(fixture => {
-        let testComponent = fixture.debugElement.componentInstance;
-        let buttonDebugElement = fixture.debugElement.query(By.css('a'));
-        fixture.detectChanges();
-        expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toBe('false');
-
-        testComponent.isDisabled = true;
-        fixture.detectChanges();
-        expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toBe('true');
-        done();
-      });
+    it('should add aria-disabled attribute if disabled', () => {
+      let fixture = TestBed.createComponent(TestApp);
+      let testComponent = fixture.debugElement.componentInstance;
+      let buttonDebugElement = fixture.debugElement.query(By.css('a'));
+      fixture.detectChanges();
+      expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toBe('false');
+
+      testComponent.isDisabled = true;
+      fixture.detectChanges();
+      expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toBe('true');
     });
 
   });
diff --git a/src/components/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox.spec.ts
index 9e1d9fa7f8f6..95ed458b3915 100644
--- a/src/components/checkbox/checkbox.spec.ts
+++ b/src/components/checkbox/checkbox.spec.ts
@@ -1,9 +1,7 @@
 import {
-    inject,
     async,
     fakeAsync,
     flushMicrotasks,
-    TestComponentBuilder,
     ComponentFixture,
     TestBed,
 } from '@angular/core/testing';
@@ -19,7 +17,6 @@ import {MdCheckbox, MdCheckboxChange, MdCheckboxModule} from './checkbox';
 // TODO: Implement E2E tests for spacebar/click behavior for checking/unchecking
 
 describe('MdCheckbox', () => {
-  let builder: TestComponentBuilder;
   let fixture: ComponentFixture<any>;
 
   beforeEach(async(() => {
@@ -40,10 +37,6 @@ describe('MdCheckbox', () => {
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-    builder = tcb;
-  }));
-
   describe('basic behaviors', () => {
     let checkboxDebugElement: DebugElement;
     let checkboxNativeElement: HTMLElement;
@@ -53,17 +46,15 @@ describe('MdCheckbox', () => {
     let labelElement: HTMLLabelElement;
 
     beforeEach(async(() => {
-      builder.createAsync(SingleCheckbox).then(f => {
-        fixture = f;
-        fixture.detectChanges();
+      fixture = TestBed.createComponent(SingleCheckbox);
+      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');
-      });
+      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');
     }));
 
     it('should add and remove the checked state', () => {
@@ -328,17 +319,15 @@ describe('MdCheckbox', () => {
     let labelElement: HTMLLabelElement;
 
     beforeEach(async(() => {
-      builder.createAsync(CheckboxWithChangeEvent).then(f => {
-        fixture = f;
-        fixture.detectChanges();
+      fixture = TestBed.createComponent(CheckboxWithChangeEvent);
+      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');
-      });
+      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');
     }));
 
     it('should emit the event to the change observable', () => {
@@ -382,15 +371,13 @@ describe('MdCheckbox', () => {
     let inputElement: HTMLInputElement;
 
     it('should use the provided aria-label', async(() => {
-      builder.createAsync(CheckboxWithAriaLabel).then(f => {
-        fixture = f;
-        checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
-        checkboxNativeElement = checkboxDebugElement.nativeElement;
-        inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
+      fixture = TestBed.createComponent(CheckboxWithAriaLabel);
+      checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
+      checkboxNativeElement = checkboxDebugElement.nativeElement;
+      inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
 
-        fixture.detectChanges();
-        expect(inputElement.getAttribute('aria-label')).toBe('Super effective');
-      });
+      fixture.detectChanges();
+      expect(inputElement.getAttribute('aria-label')).toBe('Super effective');
     }));
   });
 
@@ -400,27 +387,23 @@ describe('MdCheckbox', () => {
     let inputElement: HTMLInputElement;
 
     it('should use the provided aria-labelledby', async(() => {
-      builder.createAsync(CheckboxWithAriaLabelledby).then(f => {
-        fixture = f;
-        checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
-        checkboxNativeElement = checkboxDebugElement.nativeElement;
-        inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
+      fixture = TestBed.createComponent(CheckboxWithAriaLabelledby);
+      checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
+      checkboxNativeElement = checkboxDebugElement.nativeElement;
+      inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
 
-        fixture.detectChanges();
-        expect(inputElement.getAttribute('aria-labelledby')).toBe('some-id');
-      });
+      fixture.detectChanges();
+      expect(inputElement.getAttribute('aria-labelledby')).toBe('some-id');
     }));
 
     it('should not assign aria-labelledby if none is provided', async(() => {
-      builder.createAsync(SingleCheckbox).then(f => {
-        fixture = f;
-        checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
-        checkboxNativeElement = checkboxDebugElement.nativeElement;
-        inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
+      fixture = TestBed.createComponent(SingleCheckbox);
+      checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
+      checkboxNativeElement = checkboxDebugElement.nativeElement;
+      inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
 
-        fixture.detectChanges();
-        expect(inputElement.getAttribute('aria-labelledby')).toBe(null);
-      });
+      fixture.detectChanges();
+      expect(inputElement.getAttribute('aria-labelledby')).toBe(null);
     }));
   });
 
@@ -432,16 +415,14 @@ describe('MdCheckbox', () => {
     let labelElement: HTMLLabelElement;
 
     beforeEach(async(() => {
-      builder.createAsync(CheckboxWithTabIndex).then(f => {
-        fixture = f;
-        fixture.detectChanges();
+      fixture = TestBed.createComponent(CheckboxWithTabIndex);
+      fixture.detectChanges();
 
-        testComponent = fixture.debugElement.componentInstance;
-        checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
-        checkboxNativeElement = checkboxDebugElement.nativeElement;
-        inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
-        labelElement = <HTMLLabelElement>checkboxNativeElement.querySelector('label');
-      });
+      testComponent = fixture.debugElement.componentInstance;
+      checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
+      checkboxNativeElement = checkboxDebugElement.nativeElement;
+      inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
+      labelElement = <HTMLLabelElement>checkboxNativeElement.querySelector('label');
     }));
 
     it('should preserve any given tabIndex', async(() => {
@@ -464,10 +445,8 @@ describe('MdCheckbox', () => {
 
   describe('with multiple checkboxes', () => {
     beforeEach(async(() => {
-      builder.createAsync(MultipleCheckboxes).then(f => {
-        fixture = f;
-        fixture.detectChanges();
-      });
+      fixture = TestBed.createComponent(MultipleCheckboxes);
+      fixture.detectChanges();
     }));
 
     it('should assign a unique id to each checkbox', () => {
@@ -483,10 +462,8 @@ describe('MdCheckbox', () => {
 
   describe('with ngModel', () => {
     beforeEach(async(() => {
-      builder.createAsync(CheckboxWithFormDirectives).then(f => {
-        f.detectChanges();
-        fixture = f;
-      });
+      fixture = TestBed.createComponent(CheckboxWithFormDirectives);
+      fixture.detectChanges();
     }));
 
     it('should be in pristine, untouched, and valid states initially', fakeAsync(() => {
@@ -506,10 +483,8 @@ describe('MdCheckbox', () => {
 
   describe('with name attribute', () => {
     beforeEach(async(() => {
-      builder.createAsync(CheckboxWithNameAttribute).then(f => {
-        f.detectChanges();
-        fixture = f;
-      });
+      fixture = TestBed.createComponent(CheckboxWithNameAttribute);
+      fixture.detectChanges();
     }));
 
     it('should forward name value to input element', fakeAsync(() => {
@@ -610,4 +585,3 @@ class CheckboxWithNameAttribute {}
 class CheckboxWithChangeEvent {
   lastEvent: MdCheckboxChange;
 }
-
diff --git a/src/components/dialog/dialog.spec.ts b/src/components/dialog/dialog.spec.ts
index 1b8257b60153..75f9f08aa759 100644
--- a/src/components/dialog/dialog.spec.ts
+++ b/src/components/dialog/dialog.spec.ts
@@ -2,8 +2,6 @@ import {
   inject,
   fakeAsync,
   async,
-  addProviders,
-  TestComponentBuilder,
   ComponentFixture,
   TestBed,
 } from '@angular/core/testing';
@@ -12,7 +10,6 @@ import {
   Directive,
   ViewChild,
   ViewContainerRef,
-  ChangeDetectorRef,
 } from '@angular/core';
 import {MdDialog, MdDialogModule} from './dialog';
 import {OverlayContainer} from '@angular2-material/core/overlay/overlay-container';
@@ -22,7 +19,6 @@ import {MdDialogRef} from './dialog-ref';
 
 
 describe('MdDialog', () => {
-  let builder: TestComponentBuilder;
   let dialog: MdDialog;
   let overlayContainerElement: HTMLElement;
 
@@ -33,32 +29,27 @@ describe('MdDialog', () => {
     TestBed.configureTestingModule({
       imports: [MdDialogModule],
       declarations: [PizzaMsg, ComponentWithChildViewContainer, DirectiveWithViewContainer],
+      providers: [
+        {provide: OverlayContainer, useFactory: () => {
+          overlayContainerElement = document.createElement('div');
+          return {getContainerElement: () => overlayContainerElement};
+        }}
+      ],
     });
 
-    addProviders([
-      {provide: OverlayContainer, useFactory: () => {
-        overlayContainerElement = document.createElement('div');
-        return {getContainerElement: () => overlayContainerElement};
-      }}
-    ]);
-
     TestBed.compileComponents();
   }));
 
-  let deps = [TestComponentBuilder, MdDialog];
-  beforeEach(inject(deps, fakeAsync((tcb: TestComponentBuilder, d: MdDialog) => {
-    builder = tcb;
+  beforeEach(inject([MdDialog], fakeAsync((d: MdDialog) => {
     dialog = d;
   })));
 
-  beforeEach(async(() => {
-    builder.createAsync(ComponentWithChildViewContainer).then(fixture => {
-      viewContainerFixture = fixture;
+  beforeEach(() => {
+    viewContainerFixture = TestBed.createComponent(ComponentWithChildViewContainer);
 
-      viewContainerFixture.detectChanges();
-      testViewContainerRef = fixture.componentInstance.childViewContainer;
-    });
-  }));
+    viewContainerFixture.detectChanges();
+    testViewContainerRef = viewContainerFixture.componentInstance.childViewContainer;
+  });
 
   it('should open a dialog with a component', async(() => {
     let config = new MdDialogConfig();
@@ -139,8 +130,6 @@ class DirectiveWithViewContainer {
 class ComponentWithChildViewContainer {
   @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer;
 
-  constructor(public changeDetectorRef: ChangeDetectorRef) { }
-
   get childViewContainer() {
     return this.childWithViewContainer.viewContainerRef;
   }
diff --git a/src/components/grid-list/grid-list.spec.ts b/src/components/grid-list/grid-list.spec.ts
index 4150d88a751d..87a3c4df8f63 100644
--- a/src/components/grid-list/grid-list.spec.ts
+++ b/src/components/grid-list/grid-list.spec.ts
@@ -1,4 +1,4 @@
-import {inject, async, TestComponentBuilder, TestBed} from '@angular/core/testing';
+import {async, TestBed} from '@angular/core/testing';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdGridList, MdGridListModule} from './grid-list';
@@ -6,312 +6,207 @@ import {MdGridTile, MdGridTileText} from './grid-tile';
 
 
 describe('MdGridList', () => {
-  let builder: TestComponentBuilder;
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MdGridListModule],
-      declarations: [TestGridList],
+      declarations: [
+        GridListWithoutCols,
+        GridListWithInvalidRowHeightRatio,
+        GridListWithTooWideColspan,
+        GridListWithUnspecifiedRowHeight,
+        GirdListWithRowHeightRatio,
+        GridListWithFitRowHeightMode,
+        GridListWithFixedRowHeightMode,
+        GridListWithUnitlessFixedRowHeight,
+        GridListWithUnspecifiedGutterSize,
+        GridListWithGutterSize,
+        GridListWithUnitlessGutterSize,
+        GridListWithRatioHeightAndMulipleRows,
+        GridListWithFixRowHeightAndMultipleRows,
+        GridListWithColspanBinding,
+        GridListWithRowspanBinding,
+        GridListWithComplexLayout,
+        GridListWithFootersWithoutLines,
+        GridListWithFooterContainingTwoLines,
+      ],
     });
 
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-    builder = tcb;
-  }));
+  it('should throw error if cols is not defined', () => {
+    let fixture = TestBed.createComponent(GridListWithoutCols);
 
-  it('should throw error if cols is not defined', async(() => {
-    var template = `<md-grid-list></md-grid-list>`;
-      builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-        expect(() => {
-          fixture.detectChanges();
-        }).toThrowError(/must pass in number of columns/);
-      });
-  }));
+    expect(() => fixture.detectChanges()).toThrowError(/must pass in number of columns/);
+  });
 
-  it('should throw error if rowHeight ratio is invalid', async(() => {
-    var template = `<md-grid-list cols="4" rowHeight="4:3:2"></md-grid-list>`;
+  it('should throw error if rowHeight ratio is invalid', () => {
+    let fixture = TestBed.createComponent(GridListWithInvalidRowHeightRatio);
 
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      expect(() => {
-        fixture.detectChanges();
-      }).toThrowError(/invalid ratio given for row-height/);
-    });
-  }));
+    expect(() => fixture.detectChanges()).toThrowError(/invalid ratio given for row-height/);
+  });
 
-  it('should throw error if tile colspan is wider than total cols', async(() => {
-    var template = `
-      <md-grid-list cols="4">
-        <md-grid-tile colspan="5"></md-grid-tile>
-      </md-grid-list>`;
+  it('should throw error if tile colspan is wider than total cols', () => {
+    let fixture = TestBed.createComponent(GridListWithTooWideColspan);
 
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      expect(() => {
-        fixture.detectChanges();
-      }).toThrowError(/tile with colspan 5 is wider than grid/);
-    });
-  }));
+    expect(() => fixture.detectChanges()).toThrowError(/tile with colspan 5 is wider than grid/);
+  });
 
-  it('should default to 1:1 row height if undefined ', async(() => {
-    var template = `
-      <div style="width:200px">
-        <md-grid-list cols="1">
-          <md-grid-tile></md-grid-tile>
-        </md-grid-list>
-      </div>`;
+  it('should default to 1:1 row height if undefined ', () => {
+    let fixture = TestBed.createComponent(GridListWithUnspecifiedRowHeight);
+    fixture.detectChanges();
+    let tile = fixture.debugElement.query(By.directive(MdGridTile));
 
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      fixture.detectChanges();
-      let tile = fixture.debugElement.query(By.directive(MdGridTile));
+    // In ratio mode, heights are set using the padding-top property.
+    expect(getStyle(tile, 'padding-top')).toBe('200px');
+  });
 
-      // in ratio mode, heights are set using the padding-top property
-      expect(getProp(tile, 'padding-top')).toBe('200px');
-    });
-  }));
+  it('should use a ratio row height if passed in', () => {
+    let fixture = TestBed.createComponent(GirdListWithRowHeightRatio);
 
-  it('should use a ratio row height if passed in', async(() => {
-    var template = `
-      <div style="width:400px">
-        <md-grid-list cols="1" [rowHeight]="height">
-          <md-grid-tile></md-grid-tile>
-        </md-grid-list>
-      </div>`;
+    fixture.componentInstance.heightRatio = '4:1';
+    fixture.detectChanges();
 
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      fixture.componentInstance.height = '4:1';
-      fixture.detectChanges();
+    let tile = fixture.debugElement.query(By.directive(MdGridTile));
+    expect(getStyle(tile, 'padding-top')).toBe('100px');
 
-      let tile = fixture.debugElement.query(By.directive(MdGridTile));
-      expect(getProp(tile, 'padding-top')).toBe('100px');
+    fixture.componentInstance.heightRatio = '2:1';
+    fixture.detectChanges();
 
-      fixture.componentInstance.height = '2:1';
-      fixture.detectChanges();
+    expect(getStyle(tile, 'padding-top')).toBe('200px');
+  });
 
-      expect(getProp(tile, 'padding-top')).toBe('200px');
-    });
-  }));
+  it('should divide row height evenly in "fit" mode', () => {
+    let fixture = TestBed.createComponent(GridListWithFitRowHeightMode);
 
-  it('should divide row height evenly in "fit" mode', async(() => {
-    var template = `
-      <md-grid-list cols="1" rowHeight="fit" [style.height]="height">
-        <md-grid-tile></md-grid-tile>
-        <md-grid-tile></md-grid-tile>
-      </md-grid-list>`;
+    fixture.componentInstance.totalHeight = '300px';
+    fixture.detectChanges();
+    let tile = fixture.debugElement.query(By.directive(MdGridTile));
 
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      fixture.componentInstance.height = '300px';
-      fixture.detectChanges();
-      let tile = fixture.debugElement.query(By.directive(MdGridTile));
+    // 149.5 * 2 = 299px + 1px gutter = 300px
+    expect(getStyle(tile, 'height')).toBe('149.5px');
 
-      // 149.5 * 2 = 299px + 1px gutter = 300px
-      expect(getProp(tile, 'height')).toBe('149.5px');
+    fixture.componentInstance.totalHeight = '200px';
+    fixture.detectChanges();
 
-      fixture.componentInstance.height = '200px';
-      fixture.detectChanges();
+    // 99.5 * 2 = 199px + 1px gutter = 200px
+    expect(getStyle(tile, 'height')).toBe('99.5px');
+  });
 
-      // 99.5 * 2 = 199px + 1px gutter = 200px
-      expect(getProp(tile, 'height')).toBe('99.5px');
-    });
-  }));
+  it('should use the fixed row height if passed in', () => {
+    let fixture = TestBed.createComponent(GridListWithFixedRowHeightMode);
 
-  it('should use the fixed row height if passed in', async(() => {
-    var template = `
-      <md-grid-list cols="4" [rowHeight]="height">
-        <md-grid-tile></md-grid-tile>
-      </md-grid-list>`;
+    fixture.componentInstance.rowHeight = '100px';
+    fixture.detectChanges();
 
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      fixture.componentInstance.height = '100px';
-      fixture.detectChanges();
+    let tile = fixture.debugElement.query(By.directive(MdGridTile));
+    expect(getStyle(tile, 'height')).toBe('100px');
 
-      let tile = fixture.debugElement.query(By.directive(MdGridTile));
-      expect(getProp(tile, 'height')).toBe('100px');
+    fixture.componentInstance.rowHeight = '200px';
+    fixture.detectChanges();
 
-      fixture.componentInstance.height = '200px';
-      fixture.detectChanges();
+    expect(getStyle(tile, 'height')).toBe('200px');
+  });
 
-      expect(getProp(tile, 'height')).toBe('200px');
-    });
-  }));
+  it('should default to pixels if row height units are missing', () => {
+    let fixture = TestBed.createComponent(GridListWithUnitlessFixedRowHeight);
+    fixture.detectChanges();
 
-  it('should default to pixels if row height units are missing', async(() => {
-    var template = `
-      <md-grid-list cols="4" rowHeight="100">
-        <md-grid-tile></md-grid-tile>
-      </md-grid-list>`;
+    let tile = fixture.debugElement.query(By.directive(MdGridTile));
+    expect(getStyle(tile, 'height')).toBe('100px');
+  });
 
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      fixture.detectChanges();
+  it('should default gutter size to 1px', () => {
+    let fixture = TestBed.createComponent(GridListWithUnspecifiedGutterSize);
+    fixture.detectChanges();
 
-      fixture.whenStable().then(() => {
-        let tile = fixture.debugElement.query(By.directive(MdGridTile));
-        expect(getProp(tile, 'height')).toBe('100px');
-      });
-    });
-  }));
+    let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
 
-  it('should default gutter size to 1px', async(() => {
-    var template = `
-      <div style="width:200px">
-        <md-grid-list cols="2" rowHeight="100px">
-          <md-grid-tile></md-grid-tile>
-          <md-grid-tile></md-grid-tile>
-          <md-grid-tile></md-grid-tile>
-        </md-grid-list>
-      </div>`;
-
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      fixture.detectChanges();
-      fixture.whenStable().then(() => {
-        let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
+    // check horizontal gutter
+    expect(getStyle(tiles[0], 'width')).toBe('99.5px');
+    expect(getComputedLeft(tiles[1])).toBe(100.5);
 
-        // check horizontal gutter
-        expect(getProp(tiles[0], 'width')).toBe('99.5px');
-        expect(getComputedLeft(tiles[1])).toBe(100.5);
+    // check vertical gutter
+    expect(getStyle(tiles[0], 'height')).toBe('100px');
+    expect(getStyle(tiles[2], 'top')).toBe('101px');
+  });
 
-        // check vertical gutter
-        expect(getProp(tiles[0], 'height')).toBe('100px');
-        expect(getProp(tiles[2], 'top')).toBe('101px');
-      });
-    });
-  }));
+  it('should set the gutter size if passed', () => {
+    let fixture = TestBed.createComponent(GridListWithGutterSize);
+    fixture.detectChanges();
 
-  it('should set the gutter size if passed', async(() => {
-    var template = `
-      <div style="width:200px">
-        <md-grid-list cols="2" gutterSize="2px" rowHeight="100px">
-          <md-grid-tile></md-grid-tile>
-          <md-grid-tile></md-grid-tile>
-          <md-grid-tile></md-grid-tile>
-        </md-grid-list>
-      </div>`;
-
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      fixture.detectChanges();
-      fixture.whenStable().then(() => {
-        let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
+    let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
 
-        // check horizontal gutter
-        expect(getProp(tiles[0], 'width')).toBe('99px');
-        expect(getComputedLeft(tiles[1])).toBe(101);
+    // check horizontal gutter
+    expect(getStyle(tiles[0], 'width')).toBe('99px');
+    expect(getComputedLeft(tiles[1])).toBe(101);
 
-        // check vertical gutter
-        expect(getProp(tiles[0], 'height')).toBe('100px');
-        expect(getProp(tiles[2], 'top')).toBe('102px');
-      });
-    });
-  }));
+    // check vertical gutter
+    expect(getStyle(tiles[0], 'height')).toBe('100px');
+    expect(getStyle(tiles[2], 'top')).toBe('102px');
+  });
 
-  it('should use pixels if gutter units are missing', async(() => {
-    var template = `
-      <div style="width:200px">
-        <md-grid-list cols="2" gutterSize="2" rowHeight="100px">
-          <md-grid-tile></md-grid-tile>
-          <md-grid-tile></md-grid-tile>
-          <md-grid-tile></md-grid-tile>
-        </md-grid-list>
-      </div>`;
-
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      fixture.detectChanges();
-      fixture.whenStable().then(() => {
-        let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
+  it('should use pixels if gutter units are missing', () => {
+    let fixture = TestBed.createComponent(GridListWithUnitlessGutterSize);
+    fixture.detectChanges();
 
-        // check horizontal gutter
-        expect(getProp(tiles[0], 'width')).toBe('99px');
-        expect(getComputedLeft(tiles[1])).toBe(101);
+    let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
 
-        // check vertical gutter
-        expect(getProp(tiles[0], 'height')).toBe('100px');
-        expect(getProp(tiles[2], 'top')).toBe('102px');
-      });
-    });
-  }));
+    // check horizontal gutter
+    expect(getStyle(tiles[0], 'width')).toBe('99px');
+    expect(getComputedLeft(tiles[1])).toBe(101);
 
-  it('should set the correct list height in ratio mode', async(() => {
-    var template = `
-      <div style="width:400px">
-        <md-grid-list cols="1" rowHeight="4:1">
-          <md-grid-tile></md-grid-tile>
-          <md-grid-tile></md-grid-tile>
-        </md-grid-list>
-      </div>
-    `;
-
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      fixture.detectChanges();
-      let list = fixture.debugElement.query(By.directive(MdGridList));
-      expect(getProp(list, 'padding-bottom')).toBe('201px');
-    });
-  }));
+    // check vertical gutter
+    expect(getStyle(tiles[0], 'height')).toBe('100px');
+    expect(getStyle(tiles[2], 'top')).toBe('102px');
+  });
 
-  it('should set the correct list height in fixed mode', async(() => {
-    var template = `
-      <md-grid-list cols="1" rowHeight="100px">
-        <md-grid-tile></md-grid-tile>
-        <md-grid-tile></md-grid-tile>
-      </md-grid-list>`;
+  it('should set the correct list height in ratio mode', () => {
+    let fixture = TestBed.createComponent(GridListWithRatioHeightAndMulipleRows);
+    fixture.detectChanges();
 
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      fixture.detectChanges();
-      let list = fixture.debugElement.query(By.directive(MdGridList));
-      expect(getProp(list, 'height')).toBe('201px');
-    });
-  }));
+    let list = fixture.debugElement.query(By.directive(MdGridList));
+    expect(getStyle(list, 'padding-bottom')).toBe('201px');
+  });
+
+  it('should set the correct list height in fixed mode', () => {
+    let fixture = TestBed.createComponent(GridListWithFixRowHeightAndMultipleRows);
+    fixture.detectChanges();
 
-  it('should allow adjustment of tile colspan', async(() => {
-    var template = `
-      <div style="width:400px">
-        <md-grid-list cols="4">
-          <md-grid-tile [colspan]="colspan"></md-grid-tile>
-        </md-grid-list>
-      </div>`;
+    let list = fixture.debugElement.query(By.directive(MdGridList));
+    expect(getStyle(list, 'height')).toBe('201px');
+  });
 
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
+  it('should allow adjustment of tile colspan', () => {
+    let fixture = TestBed.createComponent(GridListWithColspanBinding);
       fixture.componentInstance.colspan = 2;
       fixture.detectChanges();
 
       let tile = fixture.debugElement.query(By.directive(MdGridTile));
-      expect(getProp(tile, 'width')).toBe('199.5px');
+      expect(getStyle(tile, 'width')).toBe('199.5px');
 
       fixture.componentInstance.colspan = 3;
       fixture.detectChanges();
-      expect(getProp(tile, 'width')).toBe('299.75px');
-    });
-  }));
+      expect(getStyle(tile, 'width')).toBe('299.75px');
+  });
 
-  it('should allow adjustment of tile rowspan', async(() => {
-    var template = `
-      <md-grid-list cols="1" rowHeight="100px">
-        <md-grid-tile [rowspan]="rowspan"></md-grid-tile>
-      </md-grid-list>`;
+  it('should allow adjustment of tile rowspan', () => {
+    let fixture = TestBed.createComponent(GridListWithRowspanBinding);
 
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      fixture.componentInstance.rowspan = 2;
-      fixture.detectChanges();
+    fixture.componentInstance.rowspan = 2;
+    fixture.detectChanges();
 
-      let tile = fixture.debugElement.query(By.directive(MdGridTile));
-      expect(getProp(tile, 'height')).toBe('201px');
+    let tile = fixture.debugElement.query(By.directive(MdGridTile));
+    expect(getStyle(tile, 'height')).toBe('201px');
 
-      fixture.componentInstance.rowspan = 3;
-      fixture.detectChanges();
-      expect(getProp(tile, 'height')).toBe('302px');
-    });
-  }));
+    fixture.componentInstance.rowspan = 3;
+    fixture.detectChanges();
+    expect(getStyle(tile, 'height')).toBe('302px');
+  });
+
+  it('should lay out tiles correctly for a complex layout', () => {
+    let fixture = TestBed.createComponent(GridListWithComplexLayout);
 
-  it('should lay out tiles correctly for a complex layout', async(() => {
-    var template = `
-      <div style="width:400px">
-        <md-grid-list cols="4" rowHeight="100px">
-          <md-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
-                        [style.background]="tile.color">
-            {{tile.text}}
-          </md-grid-tile>
-        </md-grid-list>
-      </div>`;
-
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
       fixture.componentInstance.tiles = [
         {cols: 3, rows: 1},
         {cols: 1, rows: 2},
@@ -320,83 +215,48 @@ describe('MdGridList', () => {
       ];
 
       fixture.detectChanges();
-      fixture.whenStable().then(() => {
-        let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
-
-        expect(getProp(tiles[0], 'width')).toBe('299.75px');
-        expect(getProp(tiles[0], 'height')).toBe('100px');
-        expect(getComputedLeft(tiles[0])).toBe(0);
-        expect(getProp(tiles[0], 'top')).toBe('0px');
-
-        expect(getProp(tiles[1], 'width')).toBe('99.25px');
-        expect(getProp(tiles[1], 'height')).toBe('201px');
-        expect(getComputedLeft(tiles[1])).toBe(300.75);
-        expect(getProp(tiles[1], 'top')).toBe('0px');
-
-        expect(getProp(tiles[2], 'width')).toBe('99.25px');
-        expect(getProp(tiles[2], 'height')).toBe('100px');
-        expect(getComputedLeft(tiles[2])).toBe(0);
-        expect(getProp(tiles[2], 'top')).toBe('101px');
-
-        expect(getProp(tiles[3], 'width')).toBe('199.5px');
-        expect(getProp(tiles[3], 'height')).toBe('100px');
-        expect(getComputedLeft(tiles[3])).toBe(100.25);
-        expect(getProp(tiles[3], 'top')).toBe('101px');
-      });
-    });
-  }));
-
-  it('should add not add any classes to footers without lines', async(() => {
-    var template = `
-      <md-grid-list cols="1">
-        <md-grid-tile>
-          <md-grid-tile-footer>
-            I'm a footer!
-          </md-grid-tile-footer>
-        </md-grid-tile>
-      </md-grid-list>`;
-
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      fixture.detectChanges();
-
-      let footer = fixture.debugElement.query(By.directive(MdGridTileText));
-      expect(footer.nativeElement.classList.contains('md-2-line')).toBe(false);
-    });
-  }));
-
-  it('should add class to footers with two lines', async(() => {
-    var template = `
-      <md-grid-list cols="1">
-        <md-grid-tile>
-          <md-grid-tile-footer>
-            <h3 md-line>First line</h3>
-            <span md-line>Second line</span>
-          </md-grid-tile-footer>
-        </md-grid-tile>
-      </md-grid-list>`;
-
-    builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
-      fixture.detectChanges();
-
-      let footer = fixture.debugElement.query(By.directive(MdGridTileText));
-      expect(footer.nativeElement.classList.contains('md-2-line')).toBe(true);
-    });
-  }));
-
+      let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
+
+      expect(getStyle(tiles[0], 'width')).toBe('299.75px');
+      expect(getStyle(tiles[0], 'height')).toBe('100px');
+      expect(getComputedLeft(tiles[0])).toBe(0);
+      expect(getStyle(tiles[0], 'top')).toBe('0px');
+
+      expect(getStyle(tiles[1], 'width')).toBe('99.25px');
+      expect(getStyle(tiles[1], 'height')).toBe('201px');
+      expect(getComputedLeft(tiles[1])).toBe(300.75);
+      expect(getStyle(tiles[1], 'top')).toBe('0px');
+
+      expect(getStyle(tiles[2], 'width')).toBe('99.25px');
+      expect(getStyle(tiles[2], 'height')).toBe('100px');
+      expect(getComputedLeft(tiles[2])).toBe(0);
+      expect(getStyle(tiles[2], 'top')).toBe('101px');
+
+      expect(getStyle(tiles[3], 'width')).toBe('199.5px');
+      expect(getStyle(tiles[3], 'height')).toBe('100px');
+      expect(getComputedLeft(tiles[3])).toBe(100.25);
+      expect(getStyle(tiles[3], 'top')).toBe('101px');
+  });
+
+  it('should add not add any classes to footers without lines', () => {
+    let fixture = TestBed.createComponent(GridListWithFootersWithoutLines);
+    fixture.detectChanges();
+
+    let footer = fixture.debugElement.query(By.directive(MdGridTileText));
+    expect(footer.nativeElement.classList.contains('md-2-line')).toBe(false);
+  });
+
+  it('should add class to footers with two lines', () => {
+    let fixture = TestBed.createComponent(GridListWithFooterContainingTwoLines);
+    fixture.detectChanges();
+
+    let footer = fixture.debugElement.query(By.directive(MdGridTileText));
+    expect(footer.nativeElement.classList.contains('md-2-line')).toBe(true);
+  });
 });
 
-@Component({
-  selector: 'test-grid-list',
-  template: ``
-})
-class TestGridList {
-  tiles: any[];
-  height: string | number;
-  colspan: number;
-  rowspan: number;
-}
 
-function getProp(el: DebugElement, prop: string): string {
+function getStyle(el: DebugElement, prop: string): string {
   return getComputedStyle(el.nativeElement).getPropertyValue(prop);
 }
 
@@ -411,3 +271,156 @@ function getComputedLeft(element: DebugElement): number {
 
   return elementRect.left - bodyRect.left;
 }
+
+
+
+@Component({template: '<md-grid-list></md-grid-list>'})
+class GridListWithoutCols { }
+
+@Component({template: '<md-grid-list cols="4" rowHeight="4:3:2"></md-grid-list>'})
+class GridListWithInvalidRowHeightRatio { }
+
+@Component({template:
+    '<md-grid-list cols="4"><md-grid-tile colspan="5"></md-grid-tile></md-grid-list>'})
+class GridListWithTooWideColspan { }
+
+@Component({template: `
+    <div style="width:200px">
+      <md-grid-list cols="1">
+        <md-grid-tile></md-grid-tile>
+      </md-grid-list>
+    </div>`})
+class GridListWithUnspecifiedRowHeight { }
+
+@Component({template: `
+    <div style="width:400px">
+      <md-grid-list cols="1" [rowHeight]="heightRatio">
+        <md-grid-tile></md-grid-tile>
+      </md-grid-list>
+    </div>`})
+class GirdListWithRowHeightRatio {
+  heightRatio: string;
+}
+
+@Component({template: `
+    <md-grid-list cols="1" rowHeight="fit" [style.height]="totalHeight">
+      <md-grid-tile></md-grid-tile>
+      <md-grid-tile></md-grid-tile>
+    </md-grid-list>`})
+class GridListWithFitRowHeightMode {
+  totalHeight: string;
+}
+
+@Component({template: `
+    <md-grid-list cols="4" [rowHeight]="rowHeight">
+      <md-grid-tile></md-grid-tile>
+    </md-grid-list>`})
+class GridListWithFixedRowHeightMode {
+  rowHeight: string;
+}
+
+@Component({template: `
+    <md-grid-list cols="4" rowHeight="100">
+      <md-grid-tile></md-grid-tile>
+    </md-grid-list>`})
+class GridListWithUnitlessFixedRowHeight {
+  rowHeight: string;
+}
+
+@Component({template: `
+    <div style="width:200px">
+      <md-grid-list cols="2" rowHeight="100px">
+        <md-grid-tile></md-grid-tile>
+        <md-grid-tile></md-grid-tile>
+        <md-grid-tile></md-grid-tile>
+      </md-grid-list>
+    </div>`})
+class GridListWithUnspecifiedGutterSize { }
+
+@Component({template: `
+    <div style="width:200px">
+      <md-grid-list cols="2" gutterSize="2px" rowHeight="100px">
+        <md-grid-tile></md-grid-tile>
+        <md-grid-tile></md-grid-tile>
+        <md-grid-tile></md-grid-tile>
+      </md-grid-list>
+    </div>`})
+class GridListWithGutterSize { }
+
+@Component({template: `
+    <div style="width:200px">
+      <md-grid-list cols="2" gutterSize="2" rowHeight="100px">
+        <md-grid-tile></md-grid-tile>
+        <md-grid-tile></md-grid-tile>
+        <md-grid-tile></md-grid-tile>
+      </md-grid-list>
+    </div>`})
+class GridListWithUnitlessGutterSize { }
+
+@Component({template: `
+    <div style="width:400px">
+      <md-grid-list cols="1" rowHeight="4:1">
+        <md-grid-tile></md-grid-tile>
+        <md-grid-tile></md-grid-tile>
+      </md-grid-list>
+    </div>`})
+class GridListWithRatioHeightAndMulipleRows { }
+
+@Component({template: `
+    <md-grid-list cols="1" rowHeight="100px">
+      <md-grid-tile></md-grid-tile>
+      <md-grid-tile></md-grid-tile>
+    </md-grid-list>`})
+class GridListWithFixRowHeightAndMultipleRows { }
+
+@Component({template: `
+    <div style="width:400px">
+      <md-grid-list cols="4">
+        <md-grid-tile [colspan]="colspan"></md-grid-tile>
+      </md-grid-list>
+    </div>`})
+class GridListWithColspanBinding {
+  colspan: number;
+}
+
+@Component({template: `
+    <md-grid-list cols="1" rowHeight="100px">
+      <md-grid-tile [rowspan]="rowspan"></md-grid-tile>
+    </md-grid-list>`})
+class GridListWithRowspanBinding {
+  rowspan: number;
+}
+
+@Component({template: `
+    <div style="width:400px">
+      <md-grid-list cols="4" rowHeight="100px">
+        <md-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
+                      [style.background]="tile.color">
+          {{tile.text}}
+        </md-grid-tile>
+      </md-grid-list>
+    </div>`})
+class GridListWithComplexLayout {
+  tiles: any[];
+}
+
+@Component({template: `
+    <md-grid-list cols="1">
+      <md-grid-tile>
+        <md-grid-tile-footer>
+          I'm a footer!
+        </md-grid-tile-footer>
+      </md-grid-tile>
+    </md-grid-list>`})
+class GridListWithFootersWithoutLines { }
+
+@Component({template: `
+    <md-grid-list cols="1">
+      <md-grid-tile>
+        <md-grid-tile-footer>
+          <h3 md-line>First line</h3>
+          <span md-line>Second line</span>
+        </md-grid-tile-footer>
+      </md-grid-tile>
+    </md-grid-list>`})
+class GridListWithFooterContainingTwoLines { }
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 6c8c7b0638b2..b4cbc611abf2 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -1,8 +1,6 @@
 import {
-  addProviders,
   inject,
   async,
-  TestComponentBuilder,
   TestBed,
 } from '@angular/core/testing';
 import {XHRBackend} from '@angular/http';
@@ -49,24 +47,20 @@ describe('MdIcon', () => {
         MdIconFromSvgUrlTestApp,
         MdIconFromSvgNameTestApp,
       ],
+      providers: [
+        MockBackend,
+        {provide: XHRBackend, useExisting: MockBackend},
+      ]
     });
 
-    addProviders([
-      MockBackend,
-      {provide: XHRBackend, useExisting: MockBackend},
-    ]);
-
     TestBed.compileComponents();
   }));
 
-  let builder: TestComponentBuilder;
   let mdIconRegistry: MdIconRegistry;
   let httpRequestUrls: string[];
 
-  beforeEach(
-      inject([TestComponentBuilder, MdIconRegistry, MockBackend],
-      (tcb: TestComponentBuilder, mir: MdIconRegistry, mockBackend: MockBackend) => {
-    builder = tcb;
+  let deps = [MdIconRegistry, MockBackend];
+  beforeEach(inject(deps, (mir: MdIconRegistry, mockBackend: MockBackend) => {
     mdIconRegistry = mir;
     // Keep track of requests so we can verify caching behavior.
     // Return responses for the SVGs defined in fake-svgs.ts.
@@ -79,328 +73,333 @@ describe('MdIcon', () => {
   }));
 
   describe('Ligature icons', () => {
-    it('should add material-icons class by default', async(() => {
-      builder.createAsync(MdIconLigatureTestApp).then(fixture => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        testComponent.iconName = 'home';
-        fixture.detectChanges();
-        expect(sortedClassNames(mdIconElement)).toEqual(['material-icons']);
-      });
-    }));
-
-    it('should use alternate icon font if set', async(() => {
+    it('should add material-icons class by default', () => {
+      let fixture = TestBed.createComponent(MdIconLigatureTestApp);
+
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      testComponent.iconName = 'home';
+      fixture.detectChanges();
+      expect(sortedClassNames(mdIconElement)).toEqual(['material-icons']);
+    });
+
+    it('should use alternate icon font if set', () => {
       mdIconRegistry.setDefaultFontSetClass('myfont');
-      builder.createAsync(MdIconLigatureTestApp).then(fixture => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        testComponent.iconName = 'home';
-        fixture.detectChanges();
-        expect(sortedClassNames(mdIconElement)).toEqual(['myfont']);
-      });
-    }));
+
+      let fixture = TestBed.createComponent(MdIconLigatureTestApp);
+
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      testComponent.iconName = 'home';
+      fixture.detectChanges();
+      expect(sortedClassNames(mdIconElement)).toEqual(['myfont']);
+    });
   });
 
   describe('Icons from URLs', () => {
-    it('should fetch SVG icon from URL and inline the content', async(() => {
-      builder.createAsync(MdIconFromSvgUrlTestApp).then(fixture => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        let svgElement: any;
-
-        testComponent.iconUrl = 'cat.svg';
-        fixture.detectChanges();
-        // An <svg> element should have been added as a child of <md-icon>.
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        // Default attributes should be set.
-        expect(svgElement.getAttribute('height')).toBe('100%');
-        expect(svgElement.getAttribute('height')).toBe('100%');
-        // Make sure SVG content is taken from response.
-        verifyPathChildElement(svgElement, 'meow');
-
-        // Change the icon, and the SVG element should be replaced.
-        testComponent.iconUrl = 'dog.svg';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        verifyPathChildElement(svgElement, 'woof');
-
-        expect(httpRequestUrls).toEqual(['cat.svg', 'dog.svg']);
-        // Using an icon from a previously loaded URL should not cause another HTTP request.
-        testComponent.iconUrl = 'cat.svg';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        verifyPathChildElement(svgElement, 'meow');
-        expect(httpRequestUrls).toEqual(['cat.svg', 'dog.svg']);
-      });
-    }));
-
-    it('should register icon URLs by name', async(() => {
+    it('should fetch SVG icon from URL and inline the content', () => {
+      let fixture = TestBed.createComponent(MdIconFromSvgUrlTestApp);
+
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      let svgElement: any;
+
+      testComponent.iconUrl = 'cat.svg';
+      fixture.detectChanges();
+      // An <svg> element should have been added as a child of <md-icon>.
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      // Default attributes should be set.
+      expect(svgElement.getAttribute('height')).toBe('100%');
+      expect(svgElement.getAttribute('height')).toBe('100%');
+      // Make sure SVG content is taken from response.
+      verifyPathChildElement(svgElement, 'meow');
+
+      // Change the icon, and the SVG element should be replaced.
+      testComponent.iconUrl = 'dog.svg';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      verifyPathChildElement(svgElement, 'woof');
+
+      expect(httpRequestUrls).toEqual(['cat.svg', 'dog.svg']);
+      // Using an icon from a previously loaded URL should not cause another HTTP request.
+      testComponent.iconUrl = 'cat.svg';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      verifyPathChildElement(svgElement, 'meow');
+      expect(httpRequestUrls).toEqual(['cat.svg', 'dog.svg']);
+    });
+
+    it('should register icon URLs by name', () => {
       mdIconRegistry.addSvgIcon('fluffy', 'cat.svg');
       mdIconRegistry.addSvgIcon('fido', 'dog.svg');
-      builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        let svgElement: SVGElement;
-
-        testComponent.iconName = 'fido';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        verifyPathChildElement(svgElement, 'woof');
-        // The aria label should be taken from the icon name.
-        expect(mdIconElement.getAttribute('aria-label')).toBe('fido');
-
-        // Change the icon, and the SVG element should be replaced.
-        testComponent.iconName = 'fluffy';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        verifyPathChildElement(svgElement, 'meow');
-        expect(mdIconElement.getAttribute('aria-label')).toBe('fluffy');
-
-        expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
-        // Using an icon from a previously loaded URL should not cause another HTTP request.
-        testComponent.iconName = 'fido';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        verifyPathChildElement(svgElement, 'woof');
-        expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
-      });
-    }));
-
-    it('should extract icon from SVG icon set', async(() => {
+
+      let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      let svgElement: SVGElement;
+
+      testComponent.iconName = 'fido';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      verifyPathChildElement(svgElement, 'woof');
+      // The aria label should be taken from the icon name.
+      expect(mdIconElement.getAttribute('aria-label')).toBe('fido');
+
+      // Change the icon, and the SVG element should be replaced.
+      testComponent.iconName = 'fluffy';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      verifyPathChildElement(svgElement, 'meow');
+      expect(mdIconElement.getAttribute('aria-label')).toBe('fluffy');
+
+      expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
+      // Using an icon from a previously loaded URL should not cause another HTTP request.
+      testComponent.iconName = 'fido';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      verifyPathChildElement(svgElement, 'woof');
+      expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
+    });
+
+    it('should extract icon from SVG icon set', () => {
       mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-1.svg');
-      builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        let svgElement: any;
-        let svgChild: any;
-
-        testComponent.iconName = 'farm:pig';
-        fixture.detectChanges();
-
-        expect(mdIconElement.childNodes.length).toBe(1);
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        expect(svgElement.childNodes.length).toBe(1);
-        svgChild = svgElement.childNodes[0];
-        // The first <svg> child should be the <g id="pig"> element.
-        expect(svgChild.tagName.toLowerCase()).toBe('g');
-        expect(svgChild.getAttribute('id')).toBe('pig');
-        verifyPathChildElement(svgChild, 'oink');
-        // The aria label should be taken from the icon name (without the icon set portion).
-        expect(mdIconElement.getAttribute('aria-label')).toBe('pig');
-
-        // Change the icon, and the SVG element should be replaced.
-        testComponent.iconName = 'farm:cow';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        svgChild = svgElement.childNodes[0];
-        // The first <svg> child should be the <g id="cow"> element.
-        expect(svgChild.tagName.toLowerCase()).toBe('g');
-        expect(svgChild.getAttribute('id')).toBe('cow');
-        verifyPathChildElement(svgChild, 'moo');
-        expect(mdIconElement.getAttribute('aria-label')).toBe('cow');
-      });
-    }));
-
-    it('should allow multiple icon sets in a namespace', async(() => {
+
+      let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      let svgElement: any;
+      let svgChild: any;
+
+      testComponent.iconName = 'farm:pig';
+      fixture.detectChanges();
+
+      expect(mdIconElement.childNodes.length).toBe(1);
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      expect(svgElement.childNodes.length).toBe(1);
+      svgChild = svgElement.childNodes[0];
+      // The first <svg> child should be the <g id="pig"> element.
+      expect(svgChild.tagName.toLowerCase()).toBe('g');
+      expect(svgChild.getAttribute('id')).toBe('pig');
+      verifyPathChildElement(svgChild, 'oink');
+      // The aria label should be taken from the icon name (without the icon set portion).
+      expect(mdIconElement.getAttribute('aria-label')).toBe('pig');
+
+      // Change the icon, and the SVG element should be replaced.
+      testComponent.iconName = 'farm:cow';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      svgChild = svgElement.childNodes[0];
+      // The first <svg> child should be the <g id="cow"> element.
+      expect(svgChild.tagName.toLowerCase()).toBe('g');
+      expect(svgChild.getAttribute('id')).toBe('cow');
+      verifyPathChildElement(svgChild, 'moo');
+      expect(mdIconElement.getAttribute('aria-label')).toBe('cow');
+    });
+
+    it('should allow multiple icon sets in a namespace', () => {
       mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-1.svg');
       mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-2.svg');
       mdIconRegistry.addSvgIconSetInNamespace('arrows', 'arrow-set.svg');
-      builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        let svgElement: any;
-        let svgChild: any;
-
-        testComponent.iconName = 'farm:pig';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        expect(svgElement.childNodes.length).toBe(1);
-        svgChild = svgElement.childNodes[0];
-        // The <svg> child should be the <g id="pig"> element.
-        expect(svgChild.tagName.toLowerCase()).toBe('g');
-        expect(svgChild.getAttribute('id')).toBe('pig');
-        expect(svgChild.childNodes.length).toBe(1);
-        verifyPathChildElement(svgChild, 'oink');
-        // The aria label should be taken from the icon name (without the namespace).
-        expect(mdIconElement.getAttribute('aria-label')).toBe('pig');
-
-        // Both icon sets registered in the 'farm' namespace should have been fetched.
-        expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
-
-        // Change the icon name to one that appears in both icon sets. The icon from the set that
-        // was registered last should be used (with id attribute of 'moo moo' instead of 'moo'),
-        // and no additional HTTP request should be made.
-        testComponent.iconName = 'farm:cow';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        svgChild = svgElement.childNodes[0];
-        // The first <svg> child should be the <g id="cow"> element.
-        expect(svgChild.tagName.toLowerCase()).toBe('g');
-        expect(svgChild.getAttribute('id')).toBe('cow');
-        expect(svgChild.childNodes.length).toBe(1);
-        verifyPathChildElement(svgChild, 'moo moo');
-        expect(mdIconElement.getAttribute('aria-label')).toBe('cow');
-        expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
-      });
-    }));
-
-    it('should not wrap <svg> elements in icon sets in another svg tag', async(() => {
+
+      let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      let svgElement: any;
+      let svgChild: any;
+
+      testComponent.iconName = 'farm:pig';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      expect(svgElement.childNodes.length).toBe(1);
+      svgChild = svgElement.childNodes[0];
+      // The <svg> child should be the <g id="pig"> element.
+      expect(svgChild.tagName.toLowerCase()).toBe('g');
+      expect(svgChild.getAttribute('id')).toBe('pig');
+      expect(svgChild.childNodes.length).toBe(1);
+      verifyPathChildElement(svgChild, 'oink');
+      // The aria label should be taken from the icon name (without the namespace).
+      expect(mdIconElement.getAttribute('aria-label')).toBe('pig');
+
+      // Both icon sets registered in the 'farm' namespace should have been fetched.
+      expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
+
+      // Change the icon name to one that appears in both icon sets. The icon from the set that
+      // was registered last should be used (with id attribute of 'moo moo' instead of 'moo'),
+      // and no additional HTTP request should be made.
+      testComponent.iconName = 'farm:cow';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      svgChild = svgElement.childNodes[0];
+      // The first <svg> child should be the <g id="cow"> element.
+      expect(svgChild.tagName.toLowerCase()).toBe('g');
+      expect(svgChild.getAttribute('id')).toBe('cow');
+      expect(svgChild.childNodes.length).toBe(1);
+      verifyPathChildElement(svgChild, 'moo moo');
+      expect(mdIconElement.getAttribute('aria-label')).toBe('cow');
+      expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
+    });
+
+    it('should not wrap <svg> elements in icon sets in another svg tag', () => {
       mdIconRegistry.addSvgIconSet('arrow-set.svg');
-      builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        let svgElement: any;
-
-        testComponent.iconName = 'left-arrow';
-        fixture.detectChanges();
-        // arrow-set.svg stores its icons as nested <svg> elements, so they should be used
-        // directly and not wrapped in an outer <svg> tag like the <g> elements in other sets.
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        verifyPathChildElement(svgElement, 'left');
-        expect(mdIconElement.getAttribute('aria-label')).toBe('left-arrow');
-      });
-    }));
-
-    it('should return unmodified copies of icons from URLs', async(() => {
-      builder.createAsync(MdIconFromSvgUrlTestApp).then(fixture => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        let svgElement: any;
-
-        testComponent.iconUrl = 'cat.svg';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        verifyPathChildElement(svgElement, 'meow');
-        // Modify the SVG element by setting a viewBox attribute.
-        svgElement.setAttribute('viewBox', '0 0 100 100');
-
-        // Switch to a different icon.
-        testComponent.iconUrl = 'dog.svg';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        verifyPathChildElement(svgElement, 'woof');
-
-        // Switch back to the first icon. The viewBox attribute should not be present.
-        testComponent.iconUrl = 'cat.svg';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        verifyPathChildElement(svgElement, 'meow');
-        expect(svgElement.getAttribute('viewBox')).toBeFalsy();
-      });
-    }));
-
-    it('should return unmodified copies of icons from icon sets', async(() => {
+
+      let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      let svgElement: any;
+
+      testComponent.iconName = 'left-arrow';
+      fixture.detectChanges();
+      // arrow-set.svg stores its icons as nested <svg> elements, so they should be used
+      // directly and not wrapped in an outer <svg> tag like the <g> elements in other sets.
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      verifyPathChildElement(svgElement, 'left');
+      expect(mdIconElement.getAttribute('aria-label')).toBe('left-arrow');
+    });
+
+    it('should return unmodified copies of icons from URLs', () => {
+      let fixture = TestBed.createComponent(MdIconFromSvgUrlTestApp);
+
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      let svgElement: any;
+
+      testComponent.iconUrl = 'cat.svg';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      verifyPathChildElement(svgElement, 'meow');
+      // Modify the SVG element by setting a viewBox attribute.
+      svgElement.setAttribute('viewBox', '0 0 100 100');
+
+      // Switch to a different icon.
+      testComponent.iconUrl = 'dog.svg';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      verifyPathChildElement(svgElement, 'woof');
+
+      // Switch back to the first icon. The viewBox attribute should not be present.
+      testComponent.iconUrl = 'cat.svg';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      verifyPathChildElement(svgElement, 'meow');
+      expect(svgElement.getAttribute('viewBox')).toBeFalsy();
+    });
+
+    it('should return unmodified copies of icons from icon sets', () => {
       mdIconRegistry.addSvgIconSet('arrow-set.svg');
-      builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        let svgElement: any;
-
-        testComponent.iconName = 'left-arrow';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        verifyPathChildElement(svgElement, 'left');
-        // Modify the SVG element by setting a viewBox attribute.
-        svgElement.setAttribute('viewBox', '0 0 100 100');
-
-        // Switch to a different icon.
-        testComponent.iconName = 'right-arrow';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        verifyPathChildElement(svgElement, 'right');
-
-        // Switch back to the first icon. The viewBox attribute should not be present.
-        testComponent.iconName = 'left-arrow';
-        fixture.detectChanges();
-        svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-        verifyPathChildElement(svgElement, 'left');
-        expect(svgElement.getAttribute('viewBox')).toBeFalsy();
-      });
-    }));
+
+      let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      let svgElement: any;
+
+      testComponent.iconName = 'left-arrow';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      verifyPathChildElement(svgElement, 'left');
+      // Modify the SVG element by setting a viewBox attribute.
+      svgElement.setAttribute('viewBox', '0 0 100 100');
+
+      // Switch to a different icon.
+      testComponent.iconName = 'right-arrow';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      verifyPathChildElement(svgElement, 'right');
+
+      // Switch back to the first icon. The viewBox attribute should not be present.
+      testComponent.iconName = 'left-arrow';
+      fixture.detectChanges();
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+      verifyPathChildElement(svgElement, 'left');
+      expect(svgElement.getAttribute('viewBox')).toBeFalsy();
+    });
   });
 
   describe('custom fonts', () => {
-    it('should apply CSS classes for custom font and icon', async(() => {
+    it('should apply CSS classes for custom font and icon', () => {
       mdIconRegistry.registerFontClassAlias('f1', 'font1');
       mdIconRegistry.registerFontClassAlias('f2');
-      builder.createAsync(MdIconCustomFontCssTestApp).then(fixture => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        testComponent.fontSet = 'f1';
-        testComponent.fontIcon = 'house';
-        fixture.detectChanges();
-        expect(sortedClassNames(mdIconElement)).toEqual(['font1', 'house']);
-        expect(mdIconElement.getAttribute('aria-label')).toBe('house');
-
-        testComponent.fontSet = 'f2';
-        testComponent.fontIcon = 'igloo';
-        fixture.detectChanges();
-        expect(sortedClassNames(mdIconElement)).toEqual(['f2', 'igloo']);
-        expect(mdIconElement.getAttribute('aria-label')).toBe('igloo');
-
-        testComponent.fontSet = 'f3';
-        testComponent.fontIcon = 'tent';
-        fixture.detectChanges();
-        expect(sortedClassNames(mdIconElement)).toEqual(['f3', 'tent']);
-        expect(mdIconElement.getAttribute('aria-label')).toBe('tent');
-      });
-    }));
+
+      let fixture = TestBed.createComponent(MdIconCustomFontCssTestApp);
+
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      testComponent.fontSet = 'f1';
+      testComponent.fontIcon = 'house';
+      fixture.detectChanges();
+      expect(sortedClassNames(mdIconElement)).toEqual(['font1', 'house']);
+      expect(mdIconElement.getAttribute('aria-label')).toBe('house');
+
+      testComponent.fontSet = 'f2';
+      testComponent.fontIcon = 'igloo';
+      fixture.detectChanges();
+      expect(sortedClassNames(mdIconElement)).toEqual(['f2', 'igloo']);
+      expect(mdIconElement.getAttribute('aria-label')).toBe('igloo');
+
+      testComponent.fontSet = 'f3';
+      testComponent.fontIcon = 'tent';
+      fixture.detectChanges();
+      expect(sortedClassNames(mdIconElement)).toEqual(['f3', 'tent']);
+      expect(mdIconElement.getAttribute('aria-label')).toBe('tent');
+    });
   });
 
   describe('aria label', () => {
-    it('should set aria label from text content if not specified', async(() => {
-      builder.createAsync(MdIconLigatureTestApp).then(fixture => {
-
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        testComponent.iconName = 'home';
-
-        fixture.detectChanges();
-        expect(mdIconElement.getAttribute('aria-label')).toBe('home');
-
-        testComponent.iconName = 'hand';
-        fixture.detectChanges();
-        expect(mdIconElement.getAttribute('aria-label')).toBe('hand');
-      });
-    }));
-
-    it('should use alt tag if aria label is not specified', async(() => {
-      builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then(fixture => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        testComponent.iconName = 'home';
-        testComponent.altText = 'castle';
-        fixture.detectChanges();
-        expect(mdIconElement.getAttribute('aria-label')).toBe('castle');
-
-        testComponent.ariaLabel = 'house';
-        fixture.detectChanges();
-        expect(mdIconElement.getAttribute('aria-label')).toBe('house');
-      });
-    }));
-
-    it('should use provided aria label rather than icon name', async(() => {
-      builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then(fixture => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        testComponent.iconName = 'home';
-        testComponent.ariaLabel = 'house';
-        fixture.detectChanges();
-        expect(mdIconElement.getAttribute('aria-label')).toBe('house');
-      });
-    }));
-
-    it('should use provided aria label rather than font icon', async(() => {
-      builder.createAsync(MdIconCustomFontCssTestApp).then(fixture => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-        testComponent.fontSet = 'f1';
-        testComponent.fontIcon = 'house';
-        testComponent.ariaLabel = 'home';
-        fixture.detectChanges();
-        expect(mdIconElement.getAttribute('aria-label')).toBe('home');
-      });
-    }));
+    it('should set aria label from text content if not specified', () => {
+      let fixture = TestBed.createComponent(MdIconLigatureTestApp);
+
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      testComponent.iconName = 'home';
+
+      fixture.detectChanges();
+      expect(mdIconElement.getAttribute('aria-label')).toBe('home');
+
+      testComponent.iconName = 'hand';
+      fixture.detectChanges();
+      expect(mdIconElement.getAttribute('aria-label')).toBe('hand');
+    });
+
+    it('should use alt tag if aria label is not specified', () => {
+      let fixture = TestBed.createComponent(MdIconLigatureWithAriaBindingTestApp);
+
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      testComponent.iconName = 'home';
+      testComponent.altText = 'castle';
+      fixture.detectChanges();
+      expect(mdIconElement.getAttribute('aria-label')).toBe('castle');
+
+      testComponent.ariaLabel = 'house';
+      fixture.detectChanges();
+      expect(mdIconElement.getAttribute('aria-label')).toBe('house');
+    });
+
+    it('should use provided aria label rather than icon name', () => {
+      let fixture = TestBed.createComponent(MdIconLigatureWithAriaBindingTestApp);
+
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      testComponent.iconName = 'home';
+      testComponent.ariaLabel = 'house';
+      fixture.detectChanges();
+      expect(mdIconElement.getAttribute('aria-label')).toBe('house');
+    });
+
+    it('should use provided aria label rather than font icon', () => {
+      let fixture = TestBed.createComponent(MdIconCustomFontCssTestApp);
+
+      const testComponent = fixture.debugElement.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+      testComponent.fontSet = 'f1';
+      testComponent.fontIcon = 'house';
+      testComponent.ariaLabel = 'home';
+      fixture.detectChanges();
+      expect(mdIconElement.getAttribute('aria-label')).toBe('home');
+    });
   });
 });
 
diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts
index cef7ee77cc4c..c89551318392 100644
--- a/src/components/input/input.spec.ts
+++ b/src/components/input/input.spec.ts
@@ -1,7 +1,5 @@
 import {
   async,
-  inject,
-  TestComponentBuilder,
   TestBed,
 } from '@angular/core/testing';
 import {Component} from '@angular/core';
@@ -11,8 +9,6 @@ import {MdInput, MdInputModule} from './input';
 
 
 describe('MdInput', function () {
-  var builder: TestComponentBuilder;
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MdInputModule, FormsModule],
@@ -30,798 +26,674 @@ describe('MdInput', function () {
         MdInputBaseTestController,
         MdInputAriaTestController,
         MdInputWithBlurAndFocusEvents,
-        MdInputOptionalAttributeController,
         MdInputWithNameTestController,
+        MdInputWithId,
+        MdInputWithAutocomplete,
+        MdInputWithUnboundAutocomplete,
+        MdInputWithUnboundAutocompleteWithValue,
+        MdInputWithAutocorrect,
+        MdInputWithUnboundAutocorrect,
+        MdInputWithAutocapitalize,
+        MdInputWithUnboundAutocapitalize,
+        MdInputWithAutofocus,
+        MdInputWithUnboundAutofocus,
+        MdInputWithReadonly,
+        MdInputWithUnboundReadonly,
+        MdInputWithSpellcheck,
+        MdInputWithUnboundSpellcheck,
+        MdInputWithDisabled,
+        MdInputWithUnboundDisabled,
+        MdInputWithRequired,
+        MdInputWithUnboundRequired,
+        MdInputWithList,
+        MdInputWithMax,
+        MdInputWithMin,
+        MdInputWithStep,
+        MdInputWithTabindex,
       ],
     });
 
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
-    builder = tcb;
-  }));
-
-  it('creates a native <input> element', async(() => {
-    builder.createAsync(MdInputBaseTestController)
-      .then(fixture => {
-        fixture.detectChanges();
-        expect(fixture.debugElement.query(By.css('input'))).toBeTruthy();
-      });
-  }));
+  it('creates a native <input> element', () => {
+    let fixture = TestBed.createComponent(MdInputBaseTestController);
+    fixture.detectChanges();
 
+    expect(fixture.debugElement.query(By.css('input'))).toBeTruthy();
+  });
 
   // TODO(kara): update when core/testing adds fix
   it('support ngModel', async(() => {
-    builder.createAsync(MdInputBaseTestController)
-      .then(fixture => {
-        fixture.detectChanges();
-        let instance = fixture.componentInstance;
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
-
-        instance.model = 'hello';
-        fixture.detectChanges();
-        fixture.whenStable().then(() => {
-
-          // this workaround is temp, see https://github.com/angular/angular/issues/10148
-          fixture.detectChanges();
-          fixture.whenStable().then(() => {
-            expect(el.value).toBe('hello');
-          });
-        });
-      });
-  }));
-
-  it('should have a different ID for outer element and internal input', async(() => {
-    builder
-        .overrideTemplate(MdInputBaseTestController, `
-          <md-input id="test-id"></md-input>
-        `)
-        .createAsync(MdInputBaseTestController)
-        .then(fixture => {
-          fixture.detectChanges();
-          const componentElement: HTMLElement = fixture.debugElement
-              .query(By.directive(MdInput)).nativeElement;
-          const inputElement: HTMLInputElement = fixture.debugElement.query(By.css('input'))
-              .nativeElement;
-          expect(componentElement.id).toBe('test-id');
-          expect(inputElement.id).toBeTruthy();
-          expect(inputElement.id).not.toBe(componentElement.id);
-        });
-  }));
+    let fixture = TestBed.createComponent(MdInputBaseTestController);
 
-  it('counts characters', async(() => {
-    builder.createAsync(MdInputBaseTestController).then(fixture => {
-      let instance = fixture.componentInstance;
-      fixture.detectChanges();
-      let inputInstance = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-      expect(inputInstance.characterCount).toEqual(0);
+    fixture.detectChanges();
+    let instance = fixture.componentInstance;
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-      instance.model = 'hello';
+    instance.model = 'hello';
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      // Temporary workaround, see https://github.com/angular/angular/issues/10148
       fixture.detectChanges();
       fixture.whenStable().then(() => {
-        expect(inputInstance.characterCount).toEqual(5);
-      });
-    });
-  }));
-
-  it('copies aria attributes to the inner input', async(() => {
-    builder.createAsync(MdInputAriaTestController)
-      .then(fixture => {
-        let instance = fixture.componentInstance;
-        fixture.detectChanges();
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
-        expect(el.getAttribute('aria-label')).toEqual('label');
-        instance.ariaLabel = 'label 2';
-        fixture.detectChanges();
-        expect(el.getAttribute('aria-label')).toEqual('label 2');
-
-        expect(el.getAttribute('aria-disabled')).toBeTruthy();
-      });
-  }));
-
-  it('validates there\'s only one hint label per side', async(() => {
-
-    builder.createAsync(MdInputInvalidHintTestController)
-      .then(fixture => {
-          expect(() => fixture.detectChanges())
-            .toThrow();
-            // TODO(jelbourn): .toThrow(new MdInputDuplicatedHintError('start'));
-            // See https://github.com/angular/angular/issues/8348
-      });
-  }));
-
-  it(`validates there's only one hint label per side (attribute)`, async(() => {
-    builder.createAsync(MdInputInvalidHint2TestController)
-      .then(fixture => {
-        expect(() => fixture.detectChanges())
-          .toThrow();
-          // TODO(jelbourn): .toThrow(new MdInputDuplicatedHintError('start'));
-          // See https://github.com/angular/angular/issues/8348
-      });
-  }));
-
-  it('validates there\'s only one placeholder', async(() => {
-    builder.createAsync(MdInputInvalidPlaceholderTestController)
-      .then(fixture => {
-        expect(() => fixture.detectChanges())
-          .toThrow();
-          // TODO(jelbourn): .toThrow(new MdInputPlaceholderConflictError());
-          // See https://github.com/angular/angular/issues/8348
+        expect(el.value).toBe('hello');
       });
-  }));
-
-  it('validates the type', async(() => {
-    builder.createAsync(MdInputInvalidTypeTestController).then(fixture => {
-      // Technically this throws during the OnChanges detection phase,
-      // so the error is really a ChangeDetectionError and it becomes
-      // hard to build a full exception to compare with.
-      // We just check for any exception in this case.
-      expect(() => fixture.detectChanges())
-        .toThrow(/* new MdInputUnsupportedTypeError('file') */);
     });
   }));
 
-  it('supports hint labels attribute', async(() => {
-    builder.createAsync(MdInputHintLabelTestController)
-      .then(fixture => {
-        fixture.detectChanges();
-
-        // If the hint label is empty, expect no label.
-        expect(fixture.debugElement.query(By.css('.md-hint'))).toBeNull();
-
-        fixture.componentInstance.label = 'label';
-        fixture.detectChanges();
-        expect(fixture.debugElement.query(By.css('.md-hint'))).not.toBeNull();
-      });
-  }));
-
-  it('supports hint labels elements', async(() => {
-    builder.createAsync(MdInputHintLabel2TestController).then(fixture => {
-      fixture.detectChanges();
-
-      // In this case, we should have an empty <md-hint>.
-      let el = fixture.debugElement.query(By.css('md-hint')).nativeElement;
-      expect(el.textContent).toBeFalsy();
-
-      fixture.componentInstance.label = 'label';
-      fixture.detectChanges();
-      el = fixture.debugElement.query(By.css('md-hint')).nativeElement;
-      expect(el.textContent).toBe('label');
-      });
-  }));
-
-  it('supports placeholder attribute', async(() => {
-    builder.createAsync(MdInputPlaceholderAttrTestComponent).then(fixture => {
-      fixture.detectChanges();
-
-      let el = fixture.debugElement.query(By.css('label'));
-      expect(el).toBeNull();
-
-      fixture.componentInstance.placeholder = 'Other placeholder';
-      fixture.detectChanges();
-      el = fixture.debugElement.query(By.css('label'));
-      expect(el).not.toBeNull();
-      expect(el.nativeElement.textContent).toMatch('Other placeholder');
-      expect(el.nativeElement.textContent).not.toMatch(/\*/g);
-    });
-  }));
+  it('should have a different ID for outer element and internal input', () => {
+    let fixture = TestBed.createComponent(MdInputWithId);
+    fixture.detectChanges();
 
-  it('supports placeholder element', async(() => {
-    builder.createAsync(MdInputPlaceholderElementTestComponent).then(fixture => {
-      fixture.detectChanges();
+    const componentElement: HTMLElement =
+        fixture.debugElement.query(By.directive(MdInput)).nativeElement;
+    const inputElement: HTMLInputElement =
+        fixture.debugElement.query(By.css('input')).nativeElement;
 
-      let el = fixture.debugElement.query(By.css('label'));
-      expect(el).not.toBeNull();
-      expect(el.nativeElement.textContent).toMatch('Default Placeholder');
+    expect(componentElement.id).toBe('test-id');
+    expect(inputElement.id).toBeTruthy();
+    expect(inputElement.id).not.toBe(componentElement.id);
+  });
 
-      fixture.componentInstance.placeholder = 'Other placeholder';
-      fixture.detectChanges();
-      el = fixture.debugElement.query(By.css('label'));
-      expect(el).not.toBeNull();
-      expect(el.nativeElement.textContent).toMatch('Other placeholder');
-      expect(el.nativeElement.textContent).not.toMatch(/\*/g);
-    });
-  }));
-
-  it('supports placeholder required star', async(() => {
-    builder.createAsync(MdInputPlaceholderRequiredTestComponent).then(fixture => {
-      fixture.detectChanges();
-
-      let el = fixture.debugElement.query(By.css('label'));
-      expect(el).not.toBeNull();
-      expect(el.nativeElement.textContent).toMatch(/hello\s+\*/g);
-    });
-  }));
-
-  it('supports number types and conserved its value type from Angular', async(() => {
-    builder.createAsync(MdInputNumberTypeConservedTestComponent).then(fixture => {
-      fixture.detectChanges();
-
-      const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
-      inputEl.value = '3';
-
-      // Manually trigger an onchange event.
-      var evt = document.createEvent('HTMLEvents');
-      evt.initEvent('change', true, true);
-      inputEl.dispatchEvent(evt);
-
-      fixture.detectChanges();
-      fixture.whenStable().then(() => {
-        expect(fixture.componentInstance.value).toBe(3);
-        expect(typeof fixture.componentInstance.value).toBe('number');
-      });
+  it('counts characters', async(() => {
+    let fixture = TestBed.createComponent(MdInputBaseTestController);
+    let instance = fixture.componentInstance;
+    fixture.detectChanges();
+    let inputInstance = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    expect(inputInstance.characterCount).toEqual(0);
+
+    instance.model = 'hello';
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      expect(inputInstance.characterCount).toEqual(5);
     });
   }));
 
-  it('supports blur and focus events', async(() => {
-    builder.createAsync(MdInputWithBlurAndFocusEvents).then(fixture => {
-      const testComponent = fixture.componentInstance;
-      const inputComponent = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-      const fakeEvent = <FocusEvent>{};
+  it('copies aria attributes to the inner input', () => {
+    let fixture = TestBed.createComponent(MdInputAriaTestController);
+    let instance = fixture.componentInstance;
+    fixture.detectChanges();
+
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    expect(el.getAttribute('aria-label')).toEqual('label');
+    instance.ariaLabel = 'label 2';
+    fixture.detectChanges();
+    expect(el.getAttribute('aria-label')).toEqual('label 2');
+
+    expect(el.getAttribute('aria-disabled')).toBeTruthy();
+  });
+
+  it(`validates there's only one hint label per side`, () => {
+    let fixture = TestBed.createComponent(MdInputInvalidHintTestController);
+
+    expect(() => fixture.detectChanges()).toThrow();
+    // TODO(jelbourn): .toThrow(new MdInputDuplicatedHintError('start'));
+    // See https://github.com/angular/angular/issues/8348
+  });
+
+  it(`validates there's only one hint label per side (attribute)`, () => {
+    let fixture = TestBed.createComponent(MdInputInvalidHint2TestController);
+
+    expect(() => fixture.detectChanges()).toThrow();
+    // TODO(jelbourn): .toThrow(new MdInputDuplicatedHintError('start'));
+    // See https://github.com/angular/angular/issues/8348
+  });
+
+  it('validates there\'s only one placeholder', () => {
+    let fixture = TestBed.createComponent(MdInputInvalidPlaceholderTestController);
+
+    expect(() => fixture.detectChanges()).toThrow();
+    // TODO(jelbourn): .toThrow(new MdInputPlaceholderConflictError());
+    // See https://github.com/angular/angular/issues/8348
+  });
+
+  it('validates the type', () => {
+    let fixture = TestBed.createComponent(MdInputInvalidTypeTestController);
+
+    // Technically this throws during the OnChanges detection phase,
+    // so the error is really a ChangeDetectionError and it becomes
+    // hard to build a full exception to compare with.
+    // We just check for any exception in this case.
+    expect(() => fixture.detectChanges()).toThrow(/* new MdInputUnsupportedTypeError('file') */);
+  });
+
+  it('supports hint labels attribute', () => {
+    let fixture = TestBed.createComponent(MdInputHintLabelTestController);
+    fixture.detectChanges();
+
+    // If the hint label is empty, expect no label.
+    expect(fixture.debugElement.query(By.css('.md-hint'))).toBeNull();
+
+    fixture.componentInstance.label = 'label';
+    fixture.detectChanges();
+    expect(fixture.debugElement.query(By.css('.md-hint'))).not.toBeNull();
+  });
+
+  it('supports hint labels elements', () => {
+    let fixture = TestBed.createComponent(MdInputHintLabel2TestController);
+    fixture.detectChanges();
+
+    // In this case, we should have an empty <md-hint>.
+    let el = fixture.debugElement.query(By.css('md-hint')).nativeElement;
+    expect(el.textContent).toBeFalsy();
+
+    fixture.componentInstance.label = 'label';
+    fixture.detectChanges();
+    el = fixture.debugElement.query(By.css('md-hint')).nativeElement;
+    expect(el.textContent).toBe('label');
+  });
+
+  it('supports placeholder attribute', () => {
+    let fixture = TestBed.createComponent(MdInputPlaceholderAttrTestComponent);
+    fixture.detectChanges();
+
+    let el = fixture.debugElement.query(By.css('label'));
+    expect(el).toBeNull();
+
+    fixture.componentInstance.placeholder = 'Other placeholder';
+    fixture.detectChanges();
+    el = fixture.debugElement.query(By.css('label'));
+    expect(el).not.toBeNull();
+    expect(el.nativeElement.textContent).toMatch('Other placeholder');
+    expect(el.nativeElement.textContent).not.toMatch(/\*/g);
+  });
 
-      spyOn(testComponent, 'onFocus');
-      spyOn(testComponent, 'onBlur');
+  it('supports placeholder element', () => {
+    let fixture = TestBed.createComponent(MdInputPlaceholderElementTestComponent);
+    fixture.detectChanges();
+
+    let el = fixture.debugElement.query(By.css('label'));
+    expect(el).not.toBeNull();
+    expect(el.nativeElement.textContent).toMatch('Default Placeholder');
+
+    fixture.componentInstance.placeholder = 'Other placeholder';
+    fixture.detectChanges();
+    el = fixture.debugElement.query(By.css('label'));
+    expect(el).not.toBeNull();
+    expect(el.nativeElement.textContent).toMatch('Other placeholder');
+    expect(el.nativeElement.textContent).not.toMatch(/\*/g);
+  });
+
+  it('supports placeholder required star', () => {
+    let fixture = TestBed.createComponent(MdInputPlaceholderRequiredTestComponent);
+    fixture.detectChanges();
+
+    let el = fixture.debugElement.query(By.css('label'));
+    expect(el).not.toBeNull();
+    expect(el.nativeElement.textContent).toMatch(/hello\s+\*/g);
+  });
 
-      expect(testComponent.onFocus).not.toHaveBeenCalled();
-      expect(testComponent.onBlur).not.toHaveBeenCalled();
+  it('supports number types and conserved its value type from Angular', () => {
+    let fixture = TestBed.createComponent(MdInputNumberTypeConservedTestComponent);
+    fixture.detectChanges();
+
+    const input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-      inputComponent._handleFocus(fakeEvent);
-      expect(testComponent.onFocus).toHaveBeenCalledWith(fakeEvent);
-
-      inputComponent._handleBlur(fakeEvent);
-      expect(testComponent.onBlur).toHaveBeenCalledWith(fakeEvent);
-    });
-  }));
+    // Fake a `change` event being triggered.
+    inputElement.value = '3';
+    input._handleChange(<any> {target: inputElement});
 
-  it('supports the autoComplete attribute', async(() => {
-    var template = '<md-input [autoComplete]="autoComplete"></md-input>';
+    fixture.detectChanges();
+    expect(fixture.componentInstance.value).toBe(3);
+    expect(typeof fixture.componentInstance.value).toBe('number');
+  });
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
+  it('supports blur and focus events', () => {
+    let fixture = TestBed.createComponent(MdInputWithBlurAndFocusEvents);
+    const testComponent = fixture.componentInstance;
+    const inputComponent = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    const fakeEvent = <FocusEvent>{};
 
-        let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    spyOn(testComponent, 'onFocus');
+    spyOn(testComponent, 'onBlur');
 
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('autocomplete')).toBeNull();
+    expect(testComponent.onFocus).not.toHaveBeenCalled();
+    expect(testComponent.onBlur).not.toHaveBeenCalled();
+
+    inputComponent._handleFocus(fakeEvent);
+    expect(testComponent.onFocus).toHaveBeenCalledWith(fakeEvent);
 
-        input.autoComplete = 'on';
-        fixture.detectChanges();
-        expect(el.getAttribute('autocomplete')).toEqual('on');
-      });
-  }));
+    inputComponent._handleBlur(fakeEvent);
+    expect(testComponent.onBlur).toHaveBeenCalledWith(fakeEvent);
+  });
 
-  it('supports the autoCorrect attribute', async(() => {
-    var template = '<md-input [autoCorrect]="autoCorrect"></md-input>';
+  it('supports the autoComplete attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithAutocomplete);
+    fixture.detectChanges();
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
+    let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-        let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('autocomplete')).toBeNull();
 
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('autocorrect')).toBeNull();
+    input.autoComplete = 'on';
+    fixture.detectChanges();
+    expect(el.getAttribute('autocomplete')).toEqual('on');
+  });
 
-        input.autoCorrect = 'on';
-        fixture.detectChanges();
-        expect(el.getAttribute('autocorrect')).toEqual('on');
-      });
-  }));
+  it('supports the autoCorrect attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithAutocorrect);
+    fixture.detectChanges();
 
-  it('supports the autoCapitalize attribute', async(() => {
-    var template = '<md-input [autoCapitalize]="autoCapitalize"></md-input>';
+    let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('autocorrect')).toBeNull();
 
-        let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    input.autoCorrect = 'on';
+    fixture.detectChanges();
+    expect(el.getAttribute('autocorrect')).toEqual('on');
+  });
 
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('autocapitalize')).toBeNull();
+  it('supports the autoCapitalize attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithAutocapitalize);
+    fixture.detectChanges();
 
-        input.autoCapitalize = 'on';
-        fixture.detectChanges();
-        expect(el.getAttribute('autocapitalize')).toEqual('on');
-      });
-  }));
+    let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-  it('supports the autoComplete attribute as an unbound attribute', async(() => {
-    var template = '<md-input autoComplete></md-input>';
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('autocapitalize')).toBeNull();
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
-
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
-
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('autocomplete')).toEqual('');
-      });
-  }));
-
-  it('supports the autoComplete attribute as an unbound value attribute', async(() => {
-    var template = '<md-input autoComplete="name"></md-input>';
-
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
-
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
-
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('autocomplete')).toEqual('name');
-      });
-  }));
-
-  it('supports the autoFocus attribute', async(() => {
-    var template = '<md-input [autoFocus]="autoFocus"></md-input>';
-
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
-
-        let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
-
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('autofocus')).toBeNull();
-
-        input.autoFocus = true;
-        fixture.detectChanges();
-        expect(el.getAttribute('autofocus')).toEqual('');
-      });
-  }));
-
-  it('supports the autoFocus attribute as an unbound attribute', async(() => {
-    var template = '<md-input autoFocus></md-input>';
-
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
-
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
-
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('autofocus')).toEqual('');
-      });
-  }));
+    input.autoCapitalize = 'on';
+    fixture.detectChanges();
+    expect(el.getAttribute('autocapitalize')).toEqual('on');
+  });
 
-  it('supports the disabled attribute', async(() => {
-    var template = '<md-input [disabled]="disabled"></md-input>';
+  it('supports the autoComplete attribute as an unbound attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithUnboundAutocomplete);
+    fixture.detectChanges();
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-        input.disabled = false;
-        fixture.detectChanges();
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
-        expect(el).not.toBeNull();
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('autocomplete')).toEqual('');
+  });
 
-        fixture.detectChanges();
-        expect(el.getAttribute('disabled')).toEqual(null);
+  it('supports the autoComplete attribute as an unbound value attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithUnboundAutocompleteWithValue);
+    fixture.detectChanges();
 
-        fixture.componentInstance.disabled = true;
-        fixture.detectChanges();
-        expect(el.getAttribute('disabled')).toEqual('');
-      });
-  }));
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-  it('supports the disabled attribute as an unbound attribute', async(() => {
-    var template = '<md-input disabled></md-input>';
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('autocomplete')).toEqual('name');
+  });
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
+  it('supports the autoFocus attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithAutofocus);
+    fixture.detectChanges();
 
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('disabled')).toEqual('');
-      });
-  }));
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('autofocus')).toBeNull();
 
-  it('supports the list attribute', async(() => {
-    var template = '<md-input [list]="list"></md-input>';
+    input.autoFocus = true;
+    fixture.detectChanges();
+    expect(el.getAttribute('autofocus')).toEqual('');
+  });
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-        input.disabled = false;
-        fixture.detectChanges();
+  it('supports the autoFocus attribute as an unbound attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithUnboundAutofocus);
+    fixture.detectChanges();
 
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
-        fixture.detectChanges();
-        expect(el.getAttribute('list')).toEqual(null);
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-        input.list = 'datalist-id';
-        fixture.detectChanges();
-        expect(el.getAttribute('list')).toEqual('datalist-id');
-      });
-  }));
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('autofocus')).toEqual('');
+  });
 
-  it('supports the max attribute', async(() => {
-    var template = '<md-input [max]="max"></md-input>';
+  it('supports the disabled attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithDisabled);
+    let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    input.disabled = false;
+    fixture.detectChanges();
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-        input.disabled = false;
-        fixture.detectChanges();
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    expect(el).not.toBeNull();
 
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
-        expect(el).not.toBeNull();
+    fixture.detectChanges();
+    expect(el.getAttribute('disabled')).toEqual(null);
 
-        fixture.detectChanges();
-        expect(el.getAttribute('max')).toEqual(null);
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+    expect(el.getAttribute('disabled')).toEqual('');
+  });
 
-        input.max = 10;
-        fixture.detectChanges();
-        expect(el.getAttribute('max')).toEqual('10');
+  it('supports the disabled attribute as an unbound attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithUnboundDisabled);
+    fixture.detectChanges();
 
-        input.max = '2000-01-02';
-        fixture.detectChanges();
-        expect(el.getAttribute('max')).toEqual('2000-01-02');
-      });
-  }));
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-  it('supports the min attribute', async(() => {
-    var template = '<md-input [min]="min"></md-input>';
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('disabled')).toEqual('');
+  });
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-        input.disabled = false;
-        fixture.detectChanges();
+  it('supports the list attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithList);
+    let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    input.disabled = false;
+    fixture.detectChanges();
 
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
-        expect(el).not.toBeNull();
-        fixture.detectChanges();
-        expect(el.getAttribute('min')).toEqual(null);
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    fixture.detectChanges();
+    expect(el.getAttribute('list')).toEqual(null);
 
-        input.min = 10;
-        fixture.detectChanges();
-        expect(el.getAttribute('min')).toEqual('10');
+    input.list = 'datalist-id';
+    fixture.detectChanges();
+    expect(el.getAttribute('list')).toEqual('datalist-id');
+  });
 
-        input.min = '2000-01-02';
-        fixture.detectChanges();
-        expect(el.getAttribute('min')).toEqual('2000-01-02');
-      });
-  }));
+  it('supports the max attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithMax);
+    let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    input.disabled = false;
+    fixture.detectChanges();
 
-  it('supports the readOnly attribute', async(() => {
-    var template = '<md-input [readOnly]="readOnly"></md-input>';
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    expect(el).not.toBeNull();
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
+    fixture.detectChanges();
+    expect(el.getAttribute('max')).toEqual(null);
 
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
-        let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    input.max = 10;
+    fixture.detectChanges();
+    expect(el.getAttribute('max')).toEqual('10');
 
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('readonly')).toBeNull();
+    input.max = '2000-01-02';
+    fixture.detectChanges();
+    expect(el.getAttribute('max')).toEqual('2000-01-02');
+  });
 
-        input.readOnly = true;
-        fixture.detectChanges();
-        expect(el.getAttribute('readonly')).toEqual('');
-      });
-  }));
+  it('supports the min attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithMin);
+    let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    input.disabled = false;
+    fixture.detectChanges();
 
-  it('supports the readOnly attribute as an unbound attribute', async(() => {
-    var template = '<md-input readOnly></md-input>';
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    expect(el).not.toBeNull();
+    fixture.detectChanges();
+    expect(el.getAttribute('min')).toEqual(null);
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
+    input.min = 10;
+    fixture.detectChanges();
+    expect(el.getAttribute('min')).toEqual('10');
 
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    input.min = '2000-01-02';
+    fixture.detectChanges();
+    expect(el.getAttribute('min')).toEqual('2000-01-02');
+  });
 
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('readonly')).toEqual('');
-      });
-  }));
+  it('supports the readOnly attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithReadonly);
+    fixture.detectChanges();
 
-  it('supports the required attribute', async(() => {
-    var template = '<md-input [required]="required"></md-input>';
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('readonly')).toBeNull();
 
-        let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    input.readOnly = true;
+    fixture.detectChanges();
+    expect(el.getAttribute('readonly')).toEqual('');
+  });
 
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('required')).toBeNull();
+  it('supports the readOnly attribute as an unbound attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithUnboundReadonly);
+    fixture.detectChanges();
 
-        input.required = true;
-        fixture.detectChanges();
-        expect(el.getAttribute('required')).toEqual('');
-      });
-  }));
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-  it('supports the required attribute as an unbound attribute', async(() => {
-    var template = '<md-input required></md-input>';
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('readonly')).toEqual('');
+  });
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
+  it('supports the required attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithRequired);
+    fixture.detectChanges();
 
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('required')).toEqual('');
-      });
-  }));
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('required')).toBeNull();
 
-  it('supports the spellCheck attribute', async(() => {
-    var template = '<md-input [spellCheck]="spellCheck"></md-input>';
+    input.required = true;
+    fixture.detectChanges();
+    expect(el.getAttribute('required')).toEqual('');
+  });
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
+  it('supports the required attribute as an unbound attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithUnboundRequired);
+    fixture.detectChanges();
 
-        let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('spellcheck')).toEqual('false');
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('required')).toEqual('');
+  });
 
-        input.spellCheck = true;
-        fixture.detectChanges();
-        expect(el.getAttribute('spellcheck')).toEqual('true');
-      });
-  }));
+  it('supports the spellCheck attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithSpellcheck);
+    fixture.detectChanges();
 
-  it('supports the spellCheck attribute as an unbound attribute', async(() => {
-    var template = '<md-input spellCheck></md-input>';
+    let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('spellcheck')).toEqual('false');
 
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    input.spellCheck = true;
+    fixture.detectChanges();
+    expect(el.getAttribute('spellcheck')).toEqual('true');
+  });
 
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('spellcheck')).toEqual('true');
-      });
-  }));
+  it('supports the spellCheck attribute as an unbound attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithUnboundSpellcheck);
+    fixture.detectChanges();
 
-  it('supports the step attribute', async(() => {
-    var template = '<md-input [step]="step"></md-input>';
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('spellcheck')).toEqual('true');
+  });
 
-        let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+  it('supports the step attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithStep);
+    fixture.detectChanges();
 
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('step')).toEqual(null);
+    let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-        input.step = 0.5;
-        fixture.detectChanges();
-        expect(el.getAttribute('step')).toEqual('0.5');
-      });
-  }));
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('step')).toEqual(null);
 
-  it('supports the tabIndex attribute', async(() => {
-    var template = '<md-input [tabIndex]="tabIndex"></md-input>';
+    input.step = 0.5;
+    fixture.detectChanges();
+    expect(el.getAttribute('step')).toEqual('0.5');
+  });
 
-    builder.overrideTemplate(MdInputOptionalAttributeController, template)
-      .createAsync(MdInputOptionalAttributeController)
-      .then(fixture => {
-        fixture.detectChanges();
+  it('supports the tabIndex attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithTabindex);
+    fixture.detectChanges();
 
-        let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-        let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    let input: MdInput = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
-        expect(el).not.toBeNull();
-        expect(el.getAttribute('tabindex')).toEqual(null);
+    expect(el).not.toBeNull();
+    expect(el.getAttribute('tabindex')).toEqual(null);
 
-        input.tabIndex = 1;
-        fixture.detectChanges();
-        expect(el.getAttribute('tabindex')).toEqual('1');
-      });
-  }));
+    input.tabIndex = 1;
+    fixture.detectChanges();
+    expect(el.getAttribute('tabindex')).toEqual('1');
+  });
 
-  it('supports a name attribute', async(() => {
-    builder.createAsync(MdInputWithNameTestController).then(fixture => {
-      const inputElement: HTMLInputElement = fixture.debugElement.query(By.css('input'))
-          .nativeElement;
-      fixture.detectChanges();
+  it('supports a name attribute', () => {
+    let fixture = TestBed.createComponent(MdInputWithNameTestController);
+    const inputElement: HTMLInputElement = fixture.debugElement.query(By.css('input'))
+        .nativeElement;
+    fixture.detectChanges();
 
-      expect(inputElement.name).toBe('some-name');
-    });
-  }));
+    expect(inputElement.name).toBe('some-name');
+  });
 });
 
-@Component({
-  selector: 'test-input-controller',
-  template: `
-    <md-input type="number" [(ngModel)]="value">
-    </md-input>
-  `
-})
+@Component({template: `<md-input id="test-id"></md-input>`})
+class MdInputWithId {
+  value: number = 0;
+}
+
+@Component({template: `<md-input type="number" [(ngModel)]="value"></md-input>`})
 class MdInputNumberTypeConservedTestComponent {
   value: number = 0;
 }
 
-@Component({
-  selector: 'test-input-controller',
-  template: `
-    <md-input required placeholder="hello">
-    </md-input>
-  `
-})
+@Component({template: `<md-input required placeholder="hello"></md-input>`})
 class MdInputPlaceholderRequiredTestComponent {
 }
 
-@Component({
-  selector: 'test-input-controller',
-  template: `
-    <md-input>
-      <md-placeholder>{{placeholder}}</md-placeholder>
-    </md-input>
-  `
-})
+@Component({template: `<md-input> <md-placeholder>{{placeholder}}</md-placeholder> </md-input>`})
 class MdInputPlaceholderElementTestComponent {
   placeholder: string = 'Default Placeholder';
 }
 
-@Component({
-  selector: 'test-input-controller',
-  template: `
-    <md-input [placeholder]="placeholder">
-    </md-input>
-  `
-})
+@Component({template: `<md-input [placeholder]="placeholder"></md-input>`})
 class MdInputPlaceholderAttrTestComponent {
   placeholder: string = '';
 }
 
-@Component({
-  selector: 'test-input-controller',
-  template: `
-    <md-input>
-      <md-hint>{{label}}</md-hint>
-    </md-input>
-  `
-})
+@Component({template: `<md-input> <md-hint>{{label}}</md-hint> </md-input>`})
 class MdInputHintLabel2TestController {
   label: string = '';
 }
 
-@Component({
-  selector: 'test-input-controller',
-  template: `
-    <md-input [hintLabel]="label">
-    </md-input>
-  `
-})
+@Component({template: `<md-input [hintLabel]="label"></md-input>`})
 class MdInputHintLabelTestController {
   label: string = '';
 }
 
-@Component({
-  selector: 'test-input-controller',
-  template: `
-    <md-input type="file">
-    </md-input>
-  `
-})
-class MdInputInvalidTypeTestController {
-}
+@Component({template: `<md-input type="file"></md-input>`})
+class MdInputInvalidTypeTestController { }
 
 @Component({
-  selector: 'test-input-controller',
   template: `
     <md-input placeholder="Hello">
       <md-placeholder>World</md-placeholder>
-    </md-input>
-  `
+    </md-input>`
 })
-class MdInputInvalidPlaceholderTestController {
-}
+class MdInputInvalidPlaceholderTestController { }
 
 @Component({
-  selector: 'test-input-controller',
   template: `
     <md-input hintLabel="Hello">
       <md-hint>World</md-hint>
-    </md-input>
-  `
+    </md-input>`
 })
-class MdInputInvalidHint2TestController {
-}
+class MdInputInvalidHint2TestController { }
 
 @Component({
-  selector: 'test-input-controller',
   template: `
     <md-input>
       <md-hint>Hello</md-hint>
       <md-hint>World</md-hint>
-    </md-input>
-  `
+    </md-input>`
 })
-class MdInputInvalidHintTestController {
-}
+class MdInputInvalidHintTestController { }
 
-@Component({
-  selector: 'test-input-controller',
-  template: `
-    <md-input [(ngModel)]="model">
-    </md-input>
-  `
-})
+@Component({template: `<md-input [(ngModel)]="model"></md-input>`})
 class MdInputBaseTestController {
   model: any = '';
 }
 
-@Component({
-  selector: 'test-input-controller',
-  template: `
-    <md-input [aria-label]="ariaLabel" [aria-disabled]="ariaDisabled">
-    </md-input>
-  `
-})
+@Component({template:
+    `<md-input [aria-label]="ariaLabel" [aria-disabled]="ariaDisabled"></md-input>`})
 class MdInputAriaTestController {
   ariaLabel: string = 'label';
   ariaDisabled: boolean = true;
 }
 
-@Component({
-  selector: 'test-input-controller',
-  template: `
-    <md-input (focus)="onFocus($event)" (blur)="onBlur($event)"></md-input>
-  `
-})
+@Component({template: `<md-input (focus)="onFocus($event)" (blur)="onBlur($event)"></md-input>`})
 class MdInputWithBlurAndFocusEvents {
   onBlur(event: FocusEvent) {}
   onFocus(event: FocusEvent) {}
 }
 
-@Component({
-  selector: 'test-input-controller',
-  template: `
-    <md-input></md-input>
-  `
-})
-class MdInputOptionalAttributeController {
-  disabled: boolean = false;
+@Component({template: `<md-input name="some-name"></md-input>`})
+class MdInputWithNameTestController { }
+
+@Component({template: `<md-input [autoComplete]="autoComplete"></md-input>`})
+class MdInputWithAutocomplete { }
+
+@Component({template: `<md-input autoComplete></md-input>`})
+class MdInputWithUnboundAutocomplete { }
+
+@Component({template: `<md-input autoComplete="name"></md-input>`})
+class MdInputWithUnboundAutocompleteWithValue { }
+
+@Component({template: `<md-input [autoCorrect]="autoCorrect"></md-input>`})
+class MdInputWithAutocorrect { }
+
+@Component({template: `<md-input autoCorrect></md-input>`})
+class MdInputWithUnboundAutocorrect { }
+
+@Component({template: `<md-input [autoCapitalize]="autoCapitalize"></md-input>`})
+class MdInputWithAutocapitalize { }
+
+@Component({template: `<md-input autoCapitalize></md-input>`})
+class MdInputWithUnboundAutocapitalize { }
+
+@Component({template: `<md-input [autoFocus]="autoFocus"></md-input>`})
+class MdInputWithAutofocus { }
+
+@Component({template: `<md-input autoFocus></md-input>`})
+class MdInputWithUnboundAutofocus { }
+
+@Component({template: `<md-input [readOnly]="readOnly"></md-input>`})
+class MdInputWithReadonly { }
+
+@Component({template: `<md-input readOnly></md-input>`})
+class MdInputWithUnboundReadonly { }
+
+@Component({template: `<md-input [spellCheck]="spellcheck"></md-input>`})
+class MdInputWithSpellcheck { }
+
+@Component({template: `<md-input spellCheck></md-input>`})
+class MdInputWithUnboundSpellcheck { }
+
+@Component({template: `<md-input [disabled]="disabled"></md-input>`})
+class MdInputWithDisabled {
+  disabled: boolean;
 }
 
-@Component({
-  selector: 'test-input-controller',
-  template: `
-    <md-input name="some-name"></md-input>
-  `
-})
-class MdInputWithNameTestController {}
+@Component({template: `<md-input disabled></md-input>`})
+class MdInputWithUnboundDisabled { }
+
+@Component({template: `<md-input [required]="required"></md-input>`})
+class MdInputWithRequired { }
+
+@Component({template: `<md-input required></md-input>`})
+class MdInputWithUnboundRequired { }
+
+@Component({template: `<md-input [list]="list"></md-input>`})
+class MdInputWithList { }
+
+@Component({template: `<md-input [max]="max"></md-input>`})
+class MdInputWithMax { }
+
+@Component({template: `<md-input [min]="min"></md-input>`})
+class MdInputWithMin { }
+
+@Component({template: `<md-input [step]="step"></md-input>`})
+class MdInputWithStep { }
+
+@Component({template: `<md-input [tabIndex]="tabIndex"></md-input>`})
+class MdInputWithTabindex { }