diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index 14e7cc4498f..5ccecf52af5 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -102,7 +102,7 @@ describe('MdCheckbox', () => { expect(inputElement.indeterminate).toBe(false); }); - it('should set indeterminate to false when input clicked', async(() => { + it('should set indeterminate to false when input clicked', fakeAsync(() => { testComponent.isIndeterminate = true; fixture.detectChanges(); @@ -113,33 +113,40 @@ describe('MdCheckbox', () => { inputElement.click(); fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(checkboxInstance.checked).toBe(true); - expect(inputElement.indeterminate).toBe(false); - expect(inputElement.checked).toBe(true); - expect(testComponent.isIndeterminate).toBe(false); + // Flush the microtasks because the forms module updates the model state asynchronously. + flushMicrotasks(); - testComponent.isIndeterminate = true; - fixture.detectChanges(); + // The checked property has been updated from the model and now the view needs + // to reflect the state change. + fixture.detectChanges(); - expect(checkboxInstance.indeterminate).toBe(true); - expect(inputElement.indeterminate).toBe(true); - expect(inputElement.checked).toBe(true); - expect(testComponent.isIndeterminate).toBe(true); + expect(checkboxInstance.checked).toBe(true); + expect(inputElement.indeterminate).toBe(false); + expect(inputElement.checked).toBe(true); + expect(testComponent.isIndeterminate).toBe(false); - inputElement.click(); - fixture.detectChanges(); + testComponent.isIndeterminate = true; + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(checkboxInstance.checked).toBe(false); - expect(inputElement.indeterminate).toBe(false); - expect(inputElement.checked).toBe(false); - expect(testComponent.isIndeterminate).toBe(false); - }); - }); + expect(checkboxInstance.indeterminate).toBe(true); + expect(inputElement.indeterminate).toBe(true); + expect(inputElement.checked).toBe(true); + expect(testComponent.isIndeterminate).toBe(true); + inputElement.click(); + fixture.detectChanges(); + + // Flush the microtasks because the forms module updates the model state asynchronously. + flushMicrotasks(); + + // The checked property has been updated from the model and now the view needs + // to reflect the state change. + fixture.detectChanges(); + + expect(checkboxInstance.checked).toBe(false); + expect(inputElement.indeterminate).toBe(false); + expect(inputElement.checked).toBe(false); + expect(testComponent.isIndeterminate).toBe(false); })); it('should not set indeterminate to false when checked is set programmatically', async(() => { @@ -190,7 +197,7 @@ describe('MdCheckbox', () => { expect(checkboxInstance.checked).toBe(false); }); - it('should change from indeterminate to checked on click', async(() => { + it('should change from indeterminate to checked on click', fakeAsync(() => { testComponent.isChecked = false; testComponent.isIndeterminate = true; fixture.detectChanges(); @@ -200,16 +207,17 @@ describe('MdCheckbox', () => { checkboxInstance._onInputClick({stopPropagation: () => {}}); - fixture.whenStable().then(() => { - expect(checkboxInstance.checked).toBe(true); - expect(checkboxInstance.indeterminate).toBe(false); + // Flush the microtasks because the indeterminate state will be updated in the next tick. + flushMicrotasks(); - checkboxInstance._onInputClick({stopPropagation: () => {}}); - fixture.detectChanges(); + expect(checkboxInstance.checked).toBe(true); + expect(checkboxInstance.indeterminate).toBe(false); - expect(checkboxInstance.checked).toBe(false); - expect(checkboxInstance.indeterminate).toBe(false); - }); + checkboxInstance._onInputClick({stopPropagation: () => {}}); + fixture.detectChanges(); + + expect(checkboxInstance.checked).toBe(false); + expect(checkboxInstance.indeterminate).toBe(false); })); it('should add and remove disabled state', () => { @@ -242,17 +250,18 @@ describe('MdCheckbox', () => { expect(checkboxInstance.checked).toBe(false); }); - it('should overwrite indeterminate state when clicked', async(() => { + it('should overwrite indeterminate state when clicked', fakeAsync(() => { testComponent.isIndeterminate = true; fixture.detectChanges(); inputElement.click(); fixture.detectChanges(); - fixture.whenStable().then(() => { - expect(checkboxInstance.checked).toBe(true); - expect(checkboxInstance.indeterminate).toBe(false); - }); + // Flush the microtasks because the indeterminate state will be updated in the next tick. + flushMicrotasks(); + + expect(checkboxInstance.checked).toBe(true); + expect(checkboxInstance.indeterminate).toBe(false); })); it('should preserve the user-provided id', () => { diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts index cfe7466b30c..c0d52461ca6 100644 --- a/src/lib/slide-toggle/slide-toggle.spec.ts +++ b/src/lib/slide-toggle/slide-toggle.spec.ts @@ -1,6 +1,9 @@ import {Component} from '@angular/core'; import {By, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; -import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing'; +import { + async, ComponentFixture, TestBed, fakeAsync, tick, + flushMicrotasks +} from '@angular/core/testing'; import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms'; import {MdSlideToggle, MdSlideToggleChange, MdSlideToggleModule} from './index'; import {TestGestureConfig} from '../slider/test-gesture-config'; @@ -56,17 +59,17 @@ describe('MdSlideToggle', () => { labelElement = fixture.debugElement.query(By.css('label')).nativeElement; })); - // TODO(kara); update when core/testing adds fix - it('should update the model correctly', async(() => { + it('should update the model correctly', fakeAsync(() => { expect(slideToggleElement.classList).not.toContain('mat-checked'); testComponent.slideModel = true; fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(slideToggleElement.classList).toContain('mat-checked'); - }); + // Flush the microtasks because the forms module updates the model state asynchronously. + flushMicrotasks(); + + fixture.detectChanges(); + expect(slideToggleElement.classList).toContain('mat-checked'); })); it('should apply class based on color attribute', () => { @@ -333,19 +336,23 @@ describe('MdSlideToggle', () => { expect(slideToggleElement.classList).not.toContain('mat-checked'); }); - // TODO(kara): update when core/testing adds fix - it('should not set the control to touched when changing the model', async(() => { + it('should not set the control to touched when changing the model', fakeAsync(() => { // The control should start off with being untouched. expect(slideToggleModel.touched).toBe(false); testComponent.slideModel = true; fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(slideToggleModel.touched).toBe(false); - expect(slideToggle.checked).toBe(true); - expect(slideToggleElement.classList).toContain('mat-checked'); - }); + + // Flush the microtasks because the forms module updates the model state asynchronously. + flushMicrotasks(); + + // The checked property has been updated from the model and now the view needs + // to reflect the state change. + fixture.detectChanges(); + + expect(slideToggleModel.touched).toBe(false); + expect(slideToggle.checked).toBe(true); + expect(slideToggleElement.classList).toContain('mat-checked'); })); it('should forward the required attribute', () => {