diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts index 3c74d6d315d8..f644bf337206 100644 --- a/src/lib/datepicker/datepicker.spec.ts +++ b/src/lib/datepicker/datepicker.spec.ts @@ -8,7 +8,7 @@ import { dispatchMouseEvent, } from '@angular/cdk/testing'; import {Component, ViewChild} from '@angular/core'; -import {async, ComponentFixture, inject, TestBed, fakeAsync, flush} from '@angular/core/testing'; +import {fakeAsync, flush, ComponentFixture, inject, TestBed} from '@angular/core/testing'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import { DEC, @@ -32,58 +32,47 @@ import {MatDatepickerIntl, MatDatepickerModule} from './index'; describe('MatDatepicker', () => { const SUPPORTS_INTL = typeof Intl != 'undefined'; + // Creates a test component fixture. + function createComponent(component: any, imports: any[] = [], providers: any[] = []): + ComponentFixture { + + TestBed.configureTestingModule({ + imports: [ + FormsModule, + MatDatepickerModule, + MatFormFieldModule, + MatInputModule, + NoopAnimationsModule, + ReactiveFormsModule, + ...imports + ], + providers, + declarations: [component], + }).compileComponents(); + + return TestBed.createComponent(component); + } + afterEach(inject([OverlayContainer], (container: OverlayContainer) => { container.getContainerElement().parentNode!.removeChild(container.getContainerElement()); })); describe('with MatNativeDateModule', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - FormsModule, - MatDatepickerModule, - MatFormFieldModule, - MatInputModule, - MatNativeDateModule, - NoopAnimationsModule, - ReactiveFormsModule, - ], - declarations: [ - DatepickerWithChangeAndInputEvents, - DatepickerWithFilterAndValidation, - DatepickerWithFormControl, - DatepickerWithISOStrings, - DatepickerWithMinAndMaxValidation, - DatepickerWithNgModel, - DatepickerWithStartAt, - DatepickerWithStartView, - DatepickerWithToggle, - FormFieldDatepicker, - MultiInputDatepicker, - NoInputDatepicker, - StandardDatepicker, - DatepickerWithEvents, - DatepickerOpeningOnFocus, - ], - }); - - TestBed.compileComponents(); - })); - describe('standard datepicker', () => { let fixture: ComponentFixture; let testComponent: StandardDatepicker; - beforeEach(async(() => { - fixture = TestBed.createComponent(StandardDatepicker); + beforeEach(fakeAsync(() => { + fixture = createComponent(StandardDatepicker, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; })); - afterEach(async(() => { + afterEach(fakeAsync(() => { testComponent.datepicker.close(); fixture.detectChanges(); + flush(); })); it('should initialize with correct value shown in input', () => { @@ -188,7 +177,7 @@ describe('MatDatepicker', () => { .toBe(true, 'Expected default ESCAPE action to be prevented.'); }); - it('close should close dialog', async(() => { + it('close should close dialog', fakeAsync(() => { testComponent.touch = true; fixture.detectChanges(); @@ -199,13 +188,12 @@ describe('MatDatepicker', () => { testComponent.datepicker.close(); fixture.detectChanges(); + flush(); - fixture.whenStable().then(() => { - expect(document.querySelector('mat-dialog-container')).toBeNull(); - }); + expect(document.querySelector('mat-dialog-container')).toBeNull(); })); - it('setting selected via click should update input and close calendar', async(() => { + it('setting selected via click should update input and close calendar', fakeAsync(() => { testComponent.touch = true; fixture.detectChanges(); @@ -218,11 +206,10 @@ describe('MatDatepicker', () => { let cells = document.querySelectorAll('.mat-calendar-body-cell'); dispatchMouseEvent(cells[1], 'click'); fixture.detectChanges(); + flush(); - fixture.whenStable().then(() => { - expect(document.querySelector('mat-dialog-container')).toBeNull(); - expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2)); - }); + expect(document.querySelector('mat-dialog-container')).toBeNull(); + expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2)); })); it('setting selected via enter press should update input and close calendar', () => { @@ -304,7 +291,7 @@ describe('MatDatepicker', () => { .toBe('input', 'popup should be attached to native input'); }); - it('input should aria-owns calendar after opened in non-touch mode', () => { + it('input should aria-owns calendar after opened in non-touch mode', fakeAsync(() => { let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; expect(inputEl.getAttribute('aria-owns')).toBeNull(); @@ -317,7 +304,7 @@ describe('MatDatepicker', () => { let ownedElement = document.getElementById(ownedElementId); expect(ownedElement).not.toBeNull(); expect((ownedElement as Element).tagName.toLowerCase()).toBe('mat-calendar'); - }); + })); it('input should aria-owns calendar after opened in touch mode', () => { testComponent.touch = true; @@ -368,8 +355,8 @@ describe('MatDatepicker', () => { }); describe('datepicker with too many inputs', () => { - it('should throw when multiple inputs registered', async(() => { - let fixture = TestBed.createComponent(MultiInputDatepicker); + it('should throw when multiple inputs registered', fakeAsync(() => { + let fixture = createComponent(MultiInputDatepicker, [MatNativeDateModule]); expect(() => fixture.detectChanges()).toThrow(); })); }); @@ -378,14 +365,14 @@ describe('MatDatepicker', () => { let fixture: ComponentFixture; let testComponent: NoInputDatepicker; - beforeEach(async(() => { - fixture = TestBed.createComponent(NoInputDatepicker); + beforeEach(fakeAsync(() => { + fixture = createComponent(NoInputDatepicker, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; })); - afterEach(async(() => { + afterEach(fakeAsync(() => { testComponent.datepicker.close(); fixture.detectChanges(); })); @@ -394,7 +381,7 @@ describe('MatDatepicker', () => { expect(() => testComponent.datepicker.disabled).not.toThrow(); }); - it('should throw when opened with no registered inputs', async(() => { + it('should throw when opened with no registered inputs', fakeAsync(() => { expect(() => testComponent.datepicker.open()).toThrow(); })); }); @@ -403,14 +390,14 @@ describe('MatDatepicker', () => { let fixture: ComponentFixture; let testComponent: DatepickerWithStartAt; - beforeEach(async(() => { - fixture = TestBed.createComponent(DatepickerWithStartAt); + beforeEach(fakeAsync(() => { + fixture = createComponent(DatepickerWithStartAt, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; })); - afterEach(async(() => { + afterEach(fakeAsync(() => { testComponent.datepicker.close(); fixture.detectChanges(); })); @@ -424,16 +411,17 @@ describe('MatDatepicker', () => { let fixture: ComponentFixture; let testComponent: DatepickerWithStartView; - beforeEach(async(() => { - fixture = TestBed.createComponent(DatepickerWithStartView); + beforeEach(fakeAsync(() => { + fixture = createComponent(DatepickerWithStartView, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; })); - afterEach(async(() => { + afterEach(fakeAsync(() => { testComponent.datepicker.close(); fixture.detectChanges(); + flush(); })); it('should start at the specified view', () => { @@ -453,8 +441,8 @@ describe('MatDatepicker', () => { let fixture: ComponentFixture; let testComponent: DatepickerWithNgModel; - beforeEach(async(() => { - fixture = TestBed.createComponent(DatepickerWithNgModel); + beforeEach(fakeAsync(() => { + fixture = createComponent(DatepickerWithNgModel, [MatNativeDateModule]); fixture.detectChanges(); fixture.whenStable().then(() => { @@ -464,41 +452,37 @@ describe('MatDatepicker', () => { }); })); - afterEach(async(() => { + afterEach(fakeAsync(() => { testComponent.datepicker.close(); fixture.detectChanges(); })); - it('should update datepicker when model changes', async(() => { + it('should update datepicker when model changes', fakeAsync(() => { expect(testComponent.datepickerInput.value).toBeNull(); expect(testComponent.datepicker._selected).toBeNull(); let selected = new Date(2017, JAN, 1); testComponent.selected = selected; fixture.detectChanges(); + flush(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - - expect(testComponent.datepickerInput.value).toEqual(selected); - expect(testComponent.datepicker._selected).toEqual(selected); - }); + expect(testComponent.datepickerInput.value).toEqual(selected); + expect(testComponent.datepicker._selected).toEqual(selected); })); - it('should update model when date is selected', async(() => { + it('should update model when date is selected', fakeAsync(() => { expect(testComponent.selected).toBeNull(); expect(testComponent.datepickerInput.value).toBeNull(); let selected = new Date(2017, JAN, 1); testComponent.datepicker._select(selected); fixture.detectChanges(); + flush(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - - expect(testComponent.selected).toEqual(selected); - expect(testComponent.datepickerInput.value).toEqual(selected); - }); + expect(testComponent.selected).toEqual(selected); + expect(testComponent.datepickerInput.value).toEqual(selected); })); it('should mark input dirty after input event', () => { @@ -512,34 +496,30 @@ describe('MatDatepicker', () => { expect(inputEl.classList).toContain('ng-dirty'); }); - it('should mark input dirty after date selected', async(() => { + it('should mark input dirty after date selected', fakeAsync(() => { let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; expect(inputEl.classList).toContain('ng-pristine'); testComponent.datepicker._select(new Date(2017, JAN, 1)); fixture.detectChanges(); + flush(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - - expect(inputEl.classList).toContain('ng-dirty'); - }); + expect(inputEl.classList).toContain('ng-dirty'); })); - it('should not mark dirty after model change', async(() => { + it('should not mark dirty after model change', fakeAsync(() => { let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; expect(inputEl.classList).toContain('ng-pristine'); testComponent.selected = new Date(2017, JAN, 1); fixture.detectChanges(); + flush(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - - expect(inputEl.classList).toContain('ng-pristine'); - }); + expect(inputEl.classList).toContain('ng-pristine'); })); it('should mark input touched on blur', () => { @@ -558,19 +538,17 @@ describe('MatDatepicker', () => { expect(inputEl.classList).toContain('ng-touched'); }); - it('should mark input touched on calendar selection', async(() => { + it('should mark input touched on calendar selection', fakeAsync(() => { let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; expect(inputEl.classList).toContain('ng-untouched'); testComponent.datepicker._select(new Date(2017, JAN, 1)); fixture.detectChanges(); + flush(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - - expect(inputEl.classList).toContain('ng-touched'); - }); + expect(inputEl.classList).toContain('ng-touched'); })); }); @@ -578,14 +556,14 @@ describe('MatDatepicker', () => { let fixture: ComponentFixture; let testComponent: DatepickerWithFormControl; - beforeEach(async(() => { - fixture = TestBed.createComponent(DatepickerWithFormControl); + beforeEach(fakeAsync(() => { + fixture = createComponent(DatepickerWithFormControl, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; })); - afterEach(async(() => { + afterEach(fakeAsync(() => { testComponent.datepicker.close(); fixture.detectChanges(); })); @@ -639,16 +617,17 @@ describe('MatDatepicker', () => { let fixture: ComponentFixture; let testComponent: DatepickerWithToggle; - beforeEach(async(() => { - fixture = TestBed.createComponent(DatepickerWithToggle); + beforeEach(fakeAsync(() => { + fixture = createComponent(DatepickerWithToggle, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; })); - afterEach(async(() => { + afterEach(fakeAsync(() => { testComponent.datepicker.close(); fixture.detectChanges(); + flush(); })); it('should open calendar when toggle clicked', () => { @@ -741,14 +720,14 @@ describe('MatDatepicker', () => { let fixture: ComponentFixture; let testComponent: FormFieldDatepicker; - beforeEach(async(() => { - fixture = TestBed.createComponent(FormFieldDatepicker); + beforeEach(fakeAsync(() => { + fixture = createComponent(FormFieldDatepicker, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; })); - afterEach(async(() => { + afterEach(fakeAsync(() => { testComponent.datepicker.close(); fixture.detectChanges(); })); @@ -774,14 +753,14 @@ describe('MatDatepicker', () => { let fixture: ComponentFixture; let testComponent: DatepickerWithMinAndMaxValidation; - beforeEach(async(() => { - fixture = TestBed.createComponent(DatepickerWithMinAndMaxValidation); + beforeEach(fakeAsync(() => { + fixture = createComponent(DatepickerWithMinAndMaxValidation, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; })); - afterEach(async(() => { + afterEach(fakeAsync(() => { testComponent.datepicker.close(); fixture.detectChanges(); })); @@ -791,64 +770,55 @@ describe('MatDatepicker', () => { expect(testComponent.datepicker._maxDate).toEqual(new Date(2020, JAN, 1)); }); - it('should mark invalid when value is before min', async(() => { + it('should mark invalid when value is before min', fakeAsync(() => { testComponent.date = new Date(2009, DEC, 31); fixture.detectChanges(); + flush(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - - expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) - .toContain('ng-invalid'); - }); + expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) + .toContain('ng-invalid'); })); - it('should mark invalid when value is after max', async(() => { + it('should mark invalid when value is after max', fakeAsync(() => { testComponent.date = new Date(2020, JAN, 2); fixture.detectChanges(); + flush(); - fixture.whenStable().then(() => { - fixture.detectChanges(); + fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) - .toContain('ng-invalid'); - }); + expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) + .toContain('ng-invalid'); })); - it('should not mark invalid when value equals min', async(() => { + it('should not mark invalid when value equals min', fakeAsync(() => { testComponent.date = testComponent.datepicker._minDate; fixture.detectChanges(); + flush(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - - expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) - .not.toContain('ng-invalid'); - }); + expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) + .not.toContain('ng-invalid'); })); - it('should not mark invalid when value equals max', async(() => { + it('should not mark invalid when value equals max', fakeAsync(() => { testComponent.date = testComponent.datepicker._maxDate; fixture.detectChanges(); + flush(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - - expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) - .not.toContain('ng-invalid'); - }); + expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) + .not.toContain('ng-invalid'); })); - it('should not mark invalid when value is between min and max', async(() => { + it('should not mark invalid when value is between min and max', fakeAsync(() => { testComponent.date = new Date(2010, JAN, 2); fixture.detectChanges(); + flush(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - - expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) - .not.toContain('ng-invalid'); - }); + expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) + .not.toContain('ng-invalid'); })); }); @@ -856,38 +826,35 @@ describe('MatDatepicker', () => { let fixture: ComponentFixture; let testComponent: DatepickerWithFilterAndValidation; - beforeEach(async(() => { - fixture = TestBed.createComponent(DatepickerWithFilterAndValidation); + beforeEach(fakeAsync(() => { + fixture = createComponent(DatepickerWithFilterAndValidation, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; })); - afterEach(async(() => { + afterEach(fakeAsync(() => { testComponent.datepicker.close(); fixture.detectChanges(); + flush(); })); - it('should mark input invalid', async(() => { + it('should mark input invalid', fakeAsync(() => { testComponent.date = new Date(2017, JAN, 1); fixture.detectChanges(); + flush(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - - expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) - .toContain('ng-invalid'); + expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) + .toContain('ng-invalid'); - testComponent.date = new Date(2017, JAN, 2); - fixture.detectChanges(); - - fixture.whenStable().then(() => { - fixture.detectChanges(); + testComponent.date = new Date(2017, JAN, 2); + fixture.detectChanges(); + flush(); + fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) - .not.toContain('ng-invalid'); - }); - }); + expect(fixture.debugElement.query(By.css('input')).nativeElement.classList) + .not.toContain('ng-invalid'); })); it('should disable filtered calendar cells', () => { @@ -909,8 +876,8 @@ describe('MatDatepicker', () => { let testComponent: DatepickerWithChangeAndInputEvents; let inputEl: HTMLInputElement; - beforeEach(async(() => { - fixture = TestBed.createComponent(DatepickerWithChangeAndInputEvents); + beforeEach(fakeAsync(() => { + fixture = createComponent(DatepickerWithChangeAndInputEvents, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; @@ -922,7 +889,7 @@ describe('MatDatepicker', () => { spyOn(testComponent, 'onDateInput'); })); - afterEach(async(() => { + afterEach(fakeAsync(() => { testComponent.datepicker.close(); fixture.detectChanges(); })); @@ -957,51 +924,53 @@ describe('MatDatepicker', () => { expect(testComponent.onDateInput).not.toHaveBeenCalled(); }); - it('should fire dateChange and dateInput events when user selects calendar date', () => { - expect(testComponent.onChange).not.toHaveBeenCalled(); - expect(testComponent.onDateChange).not.toHaveBeenCalled(); - expect(testComponent.onInput).not.toHaveBeenCalled(); - expect(testComponent.onDateInput).not.toHaveBeenCalled(); + it('should fire dateChange and dateInput events when user selects calendar date', + fakeAsync(() => { + expect(testComponent.onChange).not.toHaveBeenCalled(); + expect(testComponent.onDateChange).not.toHaveBeenCalled(); + expect(testComponent.onInput).not.toHaveBeenCalled(); + expect(testComponent.onDateInput).not.toHaveBeenCalled(); - testComponent.datepicker.open(); - fixture.detectChanges(); + testComponent.datepicker.open(); + fixture.detectChanges(); - expect(document.querySelector('mat-dialog-container')).not.toBeNull(); + expect(document.querySelector('mat-dialog-container')).not.toBeNull(); - let cells = document.querySelectorAll('.mat-calendar-body-cell'); - dispatchMouseEvent(cells[0], 'click'); - fixture.detectChanges(); + const cells = document.querySelectorAll('.mat-calendar-body-cell'); + dispatchMouseEvent(cells[0], 'click'); + fixture.detectChanges(); + flush(); - expect(testComponent.onChange).not.toHaveBeenCalled(); - expect(testComponent.onDateChange).toHaveBeenCalled(); - expect(testComponent.onInput).not.toHaveBeenCalled(); - expect(testComponent.onDateInput).toHaveBeenCalled(); - }); + expect(testComponent.onChange).not.toHaveBeenCalled(); + expect(testComponent.onDateChange).toHaveBeenCalled(); + expect(testComponent.onInput).not.toHaveBeenCalled(); + expect(testComponent.onDateInput).toHaveBeenCalled(); + })); }); describe('with ISO 8601 strings as input', () => { let fixture: ComponentFixture; let testComponent: DatepickerWithISOStrings; - beforeEach(async(() => { - fixture = TestBed.createComponent(DatepickerWithISOStrings); + beforeEach(fakeAsync(() => { + fixture = createComponent(DatepickerWithISOStrings, [MatNativeDateModule]); testComponent = fixture.componentInstance; })); - afterEach(async(() => { + afterEach(fakeAsync(() => { testComponent.datepicker.close(); fixture.detectChanges(); })); - it('should coerce ISO strings', async(() => { + it('should coerce ISO strings', fakeAsync(() => { expect(() => fixture.detectChanges()).not.toThrow(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(testComponent.datepicker.startAt).toEqual(new Date(2017, JUL, 1)); - expect(testComponent.datepickerInput.value).toEqual(new Date(2017, JUN, 1)); - expect(testComponent.datepickerInput.min).toEqual(new Date(2017, JAN, 1)); - expect(testComponent.datepickerInput.max).toEqual(new Date(2017, DEC, 31)); - }); + flush(); + fixture.detectChanges(); + + expect(testComponent.datepicker.startAt).toEqual(new Date(2017, JUL, 1)); + expect(testComponent.datepickerInput.value).toEqual(new Date(2017, JUN, 1)); + expect(testComponent.datepickerInput.min).toEqual(new Date(2017, JAN, 1)); + expect(testComponent.datepickerInput.max).toEqual(new Date(2017, DEC, 31)); })); }); @@ -1009,8 +978,8 @@ describe('MatDatepicker', () => { let fixture: ComponentFixture; let testComponent: DatepickerWithEvents; - beforeEach(async(() => { - fixture = TestBed.createComponent(DatepickerWithEvents); + beforeEach(fakeAsync(() => { + fixture = createComponent(DatepickerWithEvents, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; })); @@ -1041,7 +1010,7 @@ describe('MatDatepicker', () => { let input: HTMLInputElement; beforeEach(fakeAsync(() => { - fixture = TestBed.createComponent(DatepickerOpeningOnFocus); + fixture = createComponent(DatepickerOpeningOnFocus, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; input = fixture.debugElement.query(By.css('input')).nativeElement; @@ -1084,25 +1053,9 @@ describe('MatDatepicker', () => { }); describe('with missing DateAdapter and MAT_DATE_FORMATS', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - FormsModule, - MatDatepickerModule, - MatFormFieldModule, - MatInputModule, - NoopAnimationsModule, - ReactiveFormsModule, - ], - declarations: [StandardDatepicker], - }); - - TestBed.compileComponents(); - })); - it('should throw when created', () => { - expect(() => TestBed.createComponent(StandardDatepicker)) - .toThrowError(/MatDatepicker: No provider found for .*/); + expect(() => createComponent(StandardDatepicker)) + .toThrowError(/MatDatepicker: No provider found for .*/); }); }); @@ -1111,19 +1064,8 @@ describe('MatDatepicker', () => { let testComponent: StandardDatepicker; let input: HTMLElement; - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - MatDatepickerModule, - MatFormFieldModule, - MatInputModule, - MatNativeDateModule, - NoopAnimationsModule - ], - declarations: [StandardDatepicker], - }).compileComponents(); - - fixture = TestBed.createComponent(StandardDatepicker); + beforeEach(fakeAsync(() => { + fixture = createComponent(StandardDatepicker, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; input = fixture.debugElement.query(By.css('input')).nativeElement; @@ -1193,28 +1135,15 @@ describe('MatDatepicker', () => { let testComponent: DatepickerWithi18n; let input: HTMLInputElement; - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - MatDatepickerModule, - MatFormFieldModule, - MatInputModule, - MatNativeDateModule, - NoopAnimationsModule, - NativeDateModule, - FormsModule - ], - providers: [{provide: MAT_DATE_LOCALE, useValue: 'de-DE'}], - declarations: [DatepickerWithi18n], - }).compileComponents(); - - fixture = TestBed.createComponent(DatepickerWithi18n); + beforeEach(fakeAsync(() => { + fixture = createComponent(DatepickerWithi18n, [MatNativeDateModule, NativeDateModule], + [{provide: MAT_DATE_LOCALE, useValue: 'de-DE'}]); fixture.detectChanges(); testComponent = fixture.componentInstance; input = fixture.nativeElement.querySelector('input') as HTMLInputElement; })); - it('should have the correct input value even when inverted date format', async(() => { + it('should have the correct input value even when inverted date format', fakeAsync(() => { if (typeof Intl === 'undefined') { // Skip this test if the internationalization API is not supported in the current // browser. Browsers like Safari 9 do not support the "Intl" API. @@ -1224,16 +1153,13 @@ describe('MatDatepicker', () => { const selected = new Date(2017, SEP, 1); testComponent.date = selected; fixture.detectChanges(); + flush(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - - // Normally the proper date format would 01.09.2017, but some browsers seem format the - // date without the leading zero. (e.g. 1.9.2017). - expect(input.value).toMatch(/0?1\.0?9\.2017/); - - expect(testComponent.datepickerInput.value).toBe(selected); - }); + // Normally the proper date format would 01.09.2017, but some browsers seem format the + // date without the leading zero. (e.g. 1.9.2017). + expect(input.value).toMatch(/0?1\.0?9\.2017/); + expect(testComponent.datepickerInput.value).toBe(selected); })); }); });