refactor(input): switch to fakeAsync tests

Moves all of the input tests away from the `async` zone either to the default one or to `fakeAsync`.

Author: crisbeto

src/lib/input/input.spec.ts

@@ -1,7 +1,7 @@
 import {Platform, PlatformModule} from '@angular/cdk/platform';
 import {createFakeEvent, dispatchFakeEvent, wrappedErrorMessage} from '@angular/cdk/testing';
 import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
-import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
+import {ComponentFixture, inject, TestBed, fakeAsync, flush} from '@angular/core/testing';
 import {
   FormControl,
   FormGroup,
@@ -29,7 +29,7 @@ import {MatInputModule} from './index';
 import {MatInput} from './input';
 
 describe('MatInput without forms', function () {
-  beforeEach(async(() => {
+  beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         FormsModule,
@@ -160,7 +160,7 @@ describe('MatInput without forms', function () {
     expect(el.classList.contains('mat-form-field-empty')).toBe(true);
   });
 
-  it('should not be empty after input entered', async(() => {
+  it('should not be empty after input entered', () => {
     let fixture = TestBed.createComponent(MatInputTextTestController);
     fixture.detectChanges();
 
@@ -176,9 +176,9 @@ describe('MatInput without forms', function () {
 
     el = fixture.debugElement.query(By.css('label')).nativeElement;
     expect(el.classList.contains('mat-form-field-empty')).toBe(false, 'should not be empty');
-  }));
+  });
 
-  it('should update the placeholder when input entered', async(() => {
+  it('should update the placeholder when input entered', () => {
     let fixture = TestBed.createComponent(MatInputWithStaticPlaceholder);
     fixture.detectChanges();
 
@@ -196,9 +196,9 @@ describe('MatInput without forms', function () {
 
     expect(labelEl.classList).not.toContain('mat-form-field-empty');
     expect(labelEl.classList).not.toContain('mat-form-field-float');
-  }));
+  });
 
-  it('should not be empty when the value set before view init', async(() => {
+  it('should not be empty when the value set before view init', () => {
     let fixture = TestBed.createComponent(MatInputWithValueBinding);
     fixture.detectChanges();
 
@@ -211,7 +211,7 @@ describe('MatInput without forms', function () {
     fixture.detectChanges();
 
     expect(placeholderEl.classList).toContain('mat-form-field-empty');
-  }));
+  });
 
   it('should add id', () => {
     let fixture = TestBed.createComponent(MatInputTextTestController);
@@ -296,7 +296,7 @@ describe('MatInput without forms', function () {
         wrappedErrorMessage(getMatFormFieldMissingControlError()));
   });
 
-  it('validates that matInput child is present after initialization', async(() => {
+  it('validates that matInput child is present after initialization', () => {
     let fixture = TestBed.createComponent(MatInputWithNgIf);
 
     expect(() => fixture.detectChanges()).not.toThrowError(
@@ -306,7 +306,7 @@ describe('MatInput without forms', function () {
 
     expect(() => fixture.detectChanges()).toThrowError(
         wrappedErrorMessage(getMatFormFieldMissingControlError()));
-  }));
+  });
 
   it('validates the type', () => {
     let fixture = TestBed.createComponent(MatInputInvalidTypeTestController);
@@ -367,7 +367,7 @@ describe('MatInput without forms', function () {
     expect(hint.getAttribute('id')).toBeTruthy();
   });
 
-  it('supports placeholder attribute', async(() => {
+  it('supports placeholder attribute', () => {
     let fixture = TestBed.createComponent(MatInputPlaceholderAttrTestComponent);
     fixture.detectChanges();
 
@@ -385,9 +385,9 @@ describe('MatInput without forms', function () {
     expect(labelEl).not.toBeNull();
     expect(labelEl.nativeElement.textContent).toMatch('Other placeholder');
     expect(labelEl.nativeElement.textContent).not.toMatch(/\*/g);
-  }));
+  });
 
-  it('supports placeholder element', async(() => {
+  it('supports placeholder element', () => {
     let fixture = TestBed.createComponent(MatInputPlaceholderElementTestComponent);
     fixture.detectChanges();
 
@@ -402,7 +402,7 @@ describe('MatInput without forms', function () {
     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(MatInputPlaceholderRequiredTestComponent);
@@ -436,7 +436,7 @@ describe('MatInput without forms', function () {
     expect(el.nativeElement.textContent).toMatch(/hello/g);
   });
 
-  it('supports the disabled attribute as binding', async(() => {
+  it('supports the disabled attribute as binding', () => {
     const fixture = TestBed.createComponent(MatInputWithDisabled);
     fixture.detectChanges();
 
@@ -454,9 +454,9 @@ describe('MatInput without forms', function () {
     expect(formFieldEl.classList.contains('mat-form-field-disabled'))
         .toBe(true, `Expected form field to look disabled after property is set.`);
     expect(inputEl.disabled).toBe(true);
-  }));
+  });
 
-  it('supports the required attribute as binding', async(() => {
+  it('supports the required attribute as binding', () => {
     let fixture = TestBed.createComponent(MatInputWithRequired);
     fixture.detectChanges();
 
@@ -468,9 +468,9 @@ describe('MatInput without forms', function () {
     fixture.detectChanges();
 
     expect(inputEl.required).toBe(true);
-  }));
+  });
 
-  it('supports the type attribute as binding', async(() => {
+  it('supports the type attribute as binding', () => {
     let fixture = TestBed.createComponent(MatInputWithType);
     fixture.detectChanges();
 
@@ -482,7 +482,7 @@ describe('MatInput without forms', function () {
     fixture.detectChanges();
 
     expect(inputEl.type).toBe('password');
-  }));
+  });
 
   it('supports textarea', () => {
     let fixture = TestBed.createComponent(MatInputTextareaWithBindings);
@@ -734,7 +734,7 @@ describe('MatInput without forms', function () {
 
 describe('MatInput with forms', () => {
 
-  beforeEach(async(() => {
+  beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         FormsModule,
@@ -777,43 +777,41 @@ describe('MatInput with forms', () => {
         .toBe('false', 'Expected aria-invalid to be set to "false".');
     });
 
-    it('should display an error message when the input is touched and invalid', async(() => {
+    it('should display an error message when the input is touched and invalid', fakeAsync(() => {
       expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
       expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
 
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
+      flush();
 
-      fixture.whenStable().then(() => {
-        expect(containerEl.classList)
-          .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
-        expect(containerEl.querySelectorAll('mat-error').length)
-          .toBe(1, 'Expected one error message to have been rendered.');
-        expect(inputEl.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to "true".');
-      });
+      expect(containerEl.classList)
+        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .toBe(1, 'Expected one error message to have been rendered.');
+      expect(inputEl.getAttribute('aria-invalid'))
+        .toBe('true', 'Expected aria-invalid to be set to "true".');
     }));
 
-    it('should display an error message when the parent form is submitted', async(() => {
+    it('should display an error message when the parent form is submitted', fakeAsync(() => {
       expect(testComponent.form.submitted).toBe(false, 'Expected form not to have been submitted');
       expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
       expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
 
       dispatchFakeEvent(fixture.debugElement.query(By.css('form')).nativeElement, 'submit');
       fixture.detectChanges();
+      flush();
 
-      fixture.whenStable().then(() => {
-        expect(testComponent.form.submitted).toBe(true, 'Expected form to have been submitted');
-        expect(containerEl.classList)
-          .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
-        expect(containerEl.querySelectorAll('mat-error').length)
-          .toBe(1, 'Expected one error message to have been rendered.');
-        expect(inputEl.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to "true".');
-      });
+      expect(testComponent.form.submitted).toBe(true, 'Expected form to have been submitted');
+      expect(containerEl.classList)
+        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .toBe(1, 'Expected one error message to have been rendered.');
+      expect(inputEl.getAttribute('aria-invalid'))
+        .toBe('true', 'Expected aria-invalid to be set to "true".');
     }));
 
-    it('should display an error message when the parent form group is submitted', async(() => {
+    it('should display an error message when the parent form group is submitted', fakeAsync(() => {
       fixture.destroy();
 
       let groupFixture = TestBed.createComponent(MatInputWithFormGroupErrorMessages);
@@ -833,46 +831,43 @@ describe('MatInput with forms', () => {
 
       dispatchFakeEvent(groupFixture.debugElement.query(By.css('form')).nativeElement, 'submit');
       groupFixture.detectChanges();
+      flush();
 
-      groupFixture.whenStable().then(() => {
-        expect(component.formGroupDirective.submitted)
-          .toBe(true, 'Expected form to have been submitted');
-        expect(containerEl.classList)
-          .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
-        expect(containerEl.querySelectorAll('mat-error').length)
-          .toBe(1, 'Expected one error message to have been rendered.');
-        expect(inputEl.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to "true".');
-      });
+      expect(component.formGroupDirective.submitted)
+        .toBe(true, 'Expected form to have been submitted');
+      expect(containerEl.classList)
+        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .toBe(1, 'Expected one error message to have been rendered.');
+      expect(inputEl.getAttribute('aria-invalid'))
+        .toBe('true', 'Expected aria-invalid to be set to "true".');
     }));
 
-    it('should hide the errors and show the hints once the input becomes valid', async(() => {
+    it('should hide the errors and show the hints once the input becomes valid', fakeAsync(() => {
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
+      flush();
 
-      fixture.whenStable().then(() => {
-        expect(containerEl.classList)
-          .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
-        expect(containerEl.querySelectorAll('mat-error').length)
-          .toBe(1, 'Expected one error message to have been rendered.');
-        expect(containerEl.querySelectorAll('mat-hint').length)
-          .toBe(0, 'Expected no hints to be shown.');
-
-        testComponent.formControl.setValue('something');
-        fixture.detectChanges();
-
-        fixture.whenStable().then(() => {
-          expect(containerEl.classList).not.toContain('mat-form-field-invalid',
-            'Expected container not to have the invalid class when valid.');
-          expect(containerEl.querySelectorAll('mat-error').length)
-            .toBe(0, 'Expected no error messages when the input is valid.');
-          expect(containerEl.querySelectorAll('mat-hint').length)
-            .toBe(1, 'Expected one hint to be shown once the input is valid.');
-        });
-      });
+      expect(containerEl.classList)
+        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .toBe(1, 'Expected one error message to have been rendered.');
+      expect(containerEl.querySelectorAll('mat-hint').length)
+        .toBe(0, 'Expected no hints to be shown.');
+
+      testComponent.formControl.setValue('something');
+      fixture.detectChanges();
+      flush();
+
+      expect(containerEl.classList).not.toContain('mat-form-field-invalid',
+        'Expected container not to have the invalid class when valid.');
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .toBe(0, 'Expected no error messages when the input is valid.');
+      expect(containerEl.querySelectorAll('mat-hint').length)
+        .toBe(1, 'Expected one hint to be shown once the input is valid.');
     }));
 
-    it('should not hide the hint if there are no error messages', async(() => {
+    it('should not hide the hint if there are no error messages', fakeAsync(() => {
       testComponent.renderError = false;
       fixture.detectChanges();
 
@@ -881,11 +876,10 @@ describe('MatInput with forms', () => {
 
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
+      flush();
 
-      fixture.whenStable().then(() => {
-        expect(containerEl.querySelectorAll('mat-hint').length)
-          .toBe(1, 'Expected one hint to still be shown.');
-      });
+      expect(containerEl.querySelectorAll('mat-hint').length)
+        .toBe(1, 'Expected one hint to still be shown.');
     }));
 
     it('should set the proper role on the error messages', () => {
@@ -970,7 +964,7 @@ describe('MatInput with forms', () => {
       expect(containerEl.querySelectorAll('mat-error').length).toBe(1, 'Expected an error message');
     });
 
-    it('should display an error message when using ShowOnDirtyErrorStateMatcher', async(() => {
+    it('should display an error message when using ShowOnDirtyErrorStateMatcher', () => {
       TestBed.resetTestingModule();
       TestBed.configureTestingModule({
         imports: [
@@ -1006,7 +1000,7 @@ describe('MatInput with forms', () => {
 
       expect(containerEl.querySelectorAll('mat-error').length)
         .toBe(1, 'Expected one error message when dirty');
-    }));
+    });
   });
 
   it('should update the value when using FormControl.setValue', () => {
@@ -1043,17 +1037,16 @@ describe('MatInput with forms', () => {
     expect(inputEl.disabled).toBe(true);
   });
 
-  it('should not treat the number 0 as empty', async(() => {
+  it('should not treat the number 0 as empty', fakeAsync(() => {
     let fixture = TestBed.createComponent(MatInputZeroTestController);
     fixture.detectChanges();
+    flush();
 
-    fixture.whenStable().then(() => {
-      fixture.detectChanges();
+    fixture.detectChanges();
 
-      let el = fixture.debugElement.query(By.css('label')).nativeElement;
-      expect(el).not.toBeNull();
-      expect(el.classList.contains('mat-form-field-empty')).toBe(false);
-    });
+    let el = fixture.debugElement.query(By.css('label')).nativeElement;
+    expect(el).not.toBeNull();
+    expect(el.classList.contains('mat-form-field-empty')).toBe(false);
   }));
 });