skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

tests(checkbox, slide-toggle): use fakeAsync instead of whenStable (#5547)

Browse Source 
* Most of the `whenStable()` promise calls can be replaced with the `flushMicrotasks` method, which just flushes them instead of waiting for them to really happen (when using `async`).
* This reduces nesting of functions and also makes the tests in theory faster.
This commit is contained in:
Paul Gschwendtner
2017-07-07 00:51:43 +02:00
committed by mmalerba
parent 24035b0f25
commit bb500b71cc
2 changed files with 68 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/checkbox/checkbox.spec.ts
+46 -37
View File
@@ -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(<Event>{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(<Event>{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(<Event>{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', () => {
src/lib/slide-toggle/slide-toggle.spec.ts
+22 -15
View File
@@ -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', () => {