diff --git a/src/cdk/overlay/overlay-directives.spec.ts b/src/cdk/overlay/overlay-directives.spec.ts index 2e0830acb922..89404d4d210b 100644 --- a/src/cdk/overlay/overlay-directives.spec.ts +++ b/src/cdk/overlay/overlay-directives.spec.ts @@ -1,6 +1,6 @@ import {Component, ViewChild} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {ComponentFixture, TestBed, async} from '@angular/core/testing'; +import {ComponentFixture, TestBed, async, inject} from '@angular/core/testing'; import {Directionality} from '@angular/cdk/bidi'; import {dispatchKeyboardEvent} from '@angular/cdk/testing'; import {ESCAPE} from '@angular/cdk/keycodes'; @@ -11,6 +11,7 @@ import {ConnectedOverlayPositionChange} from './position/connected-position'; describe('Overlay directives', () => { + let overlayContainer: OverlayContainer; let overlayContainerElement: HTMLElement; let fixture: ComponentFixture; let dir: {value: string}; @@ -20,12 +21,8 @@ describe('Overlay directives', () => { imports: [OverlayModule], declarations: [ConnectedOverlayDirectiveTest, ConnectedOverlayPropertyInitOrder], providers: [ - {provide: OverlayContainer, useFactory: () => { - overlayContainerElement = document.createElement('div'); - return {getContainerElement: () => overlayContainerElement}; - }}, {provide: Directionality, useFactory: () => { - return dir = { value: 'ltr' }; + return dir = {value: 'ltr'}; }} ], }); @@ -36,6 +33,15 @@ describe('Overlay directives', () => { fixture.detectChanges(); }); + beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => { + overlayContainer = oc; + overlayContainerElement = oc.getContainerElement(); + })); + + afterEach(() => { + overlayContainer.ngOnDestroy(); + }); + /** Returns the current open overlay pane element. */ function getPaneElement() { return overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; diff --git a/src/cdk/overlay/position/global-position-strategy.spec.ts b/src/cdk/overlay/position/global-position-strategy.spec.ts index 104757e17838..6a3fe36dc886 100644 --- a/src/cdk/overlay/position/global-position-strategy.spec.ts +++ b/src/cdk/overlay/position/global-position-strategy.spec.ts @@ -1,4 +1,3 @@ -import {fakeAsync, flushMicrotasks, inject} from '@angular/core/testing'; import {GlobalPositionStrategy} from './global-position-strategy'; import {OverlayRef} from '../overlay-ref'; @@ -19,11 +18,9 @@ describe('GlobalPositonStrategy', () => { strategy.dispose(); }); - it('should position the element to the (top, left) with an offset', fakeAsyncTest(() => { + it('should position the element to the (top, left) with an offset', () => { strategy.top('10px').left('40px').apply(); - flushMicrotasks(); - let elementStyle = element.style; let parentStyle = (element.parentNode as HTMLElement).style; @@ -34,13 +31,11 @@ describe('GlobalPositonStrategy', () => { expect(parentStyle.justifyContent).toBe('flex-start'); expect(parentStyle.alignItems).toBe('flex-start'); - })); + }); - it('should position the element to the (bottom, right) with an offset', fakeAsyncTest(() => { + it('should position the element to the (bottom, right) with an offset', () => { strategy.bottom('70px').right('15em').apply(); - flushMicrotasks(); - let elementStyle = element.style; let parentStyle = (element.parentNode as HTMLElement).style; @@ -51,14 +46,11 @@ describe('GlobalPositonStrategy', () => { expect(parentStyle.justifyContent).toBe('flex-end'); expect(parentStyle.alignItems).toBe('flex-end'); - })); + }); - it('should overwrite previously applied positioning', fakeAsyncTest(() => { + it('should overwrite previously applied positioning', () => { strategy.centerHorizontally().centerVertically().apply(); - flushMicrotasks(); - strategy.top('10px').left('40%').apply(); - flushMicrotasks(); let elementStyle = element.style; let parentStyle = (element.parentNode as HTMLElement).style; @@ -73,8 +65,6 @@ describe('GlobalPositonStrategy', () => { strategy.bottom('70px').right('15em').apply(); - flushMicrotasks(); - expect(element.style.marginTop).toBe(''); expect(element.style.marginLeft).toBe(''); expect(element.style.marginBottom).toBe('70px'); @@ -82,24 +72,20 @@ describe('GlobalPositonStrategy', () => { expect(parentStyle.justifyContent).toBe('flex-end'); expect(parentStyle.alignItems).toBe('flex-end'); - })); + }); - it('should center the element', fakeAsyncTest(() => { + it('should center the element', () => { strategy.centerHorizontally().centerVertically().apply(); - flushMicrotasks(); - let parentStyle = (element.parentNode as HTMLElement).style; expect(parentStyle.justifyContent).toBe('center'); expect(parentStyle.alignItems).toBe('center'); - })); + }); - it('should center the element with an offset', fakeAsyncTest(() => { + it('should center the element with an offset', () => { strategy.centerHorizontally('10px').centerVertically('15px').apply(); - flushMicrotasks(); - let elementStyle = element.style; let parentStyle = (element.parentNode as HTMLElement).style; @@ -108,74 +94,56 @@ describe('GlobalPositonStrategy', () => { expect(parentStyle.justifyContent).toBe('center'); expect(parentStyle.alignItems).toBe('center'); - })); + }); - it('should make the element position: static', fakeAsyncTest(() => { + it('should make the element position: static', () => { strategy.apply(); - flushMicrotasks(); - expect(element.style.position).toBe('static'); - })); + }); - it('should wrap the element in a `cdk-global-overlay-wrapper`', fakeAsyncTest(() => { + it('should wrap the element in a `cdk-global-overlay-wrapper`', () => { strategy.apply(); - flushMicrotasks(); - let parent = element.parentNode as HTMLElement; expect(parent.classList.contains('cdk-global-overlay-wrapper')).toBe(true); - })); + }); - it('should remove the parent wrapper from the DOM', fakeAsync(() => { + it('should remove the parent wrapper from the DOM', () => { strategy.apply(); - flushMicrotasks(); - expect(document.body.contains(element.parentNode!)).toBe(true); strategy.dispose(); expect(document.body.contains(element.parentNode!)).toBe(false); - })); + }); - it('should set the element width', fakeAsync(() => { + it('should set the element width', () => { strategy.width('100px').apply(); - flushMicrotasks(); - expect(element.style.width).toBe('100px'); - })); + }); - it('should set the element height', fakeAsync(() => { + it('should set the element height', () => { strategy.height('100px').apply(); - flushMicrotasks(); - expect(element.style.height).toBe('100px'); - })); + }); - it('should reset the horizontal position and offset when the width is 100%', fakeAsync(() => { + it('should reset the horizontal position and offset when the width is 100%', () => { strategy.centerHorizontally().width('100%').apply(); - flushMicrotasks(); - expect(element.style.marginLeft).toBe('0px'); expect((element.parentNode as HTMLElement).style.justifyContent).toBe('flex-start'); - })); + }); - it('should reset the vertical position and offset when the height is 100%', fakeAsync(() => { + it('should reset the vertical position and offset when the height is 100%', () => { strategy.centerVertically().height('100%').apply(); - flushMicrotasks(); - expect(element.style.marginTop).toBe('0px'); expect((element.parentNode as HTMLElement).style.alignItems).toBe('flex-start'); - })); + }); }); - -function fakeAsyncTest(fn: () => void) { - return inject([], fakeAsync(fn)); -} diff --git a/src/lib/snack-bar/snack-bar.spec.ts b/src/lib/snack-bar/snack-bar.spec.ts index 2fe92877e571..6041b9c28ea5 100644 --- a/src/lib/snack-bar/snack-bar.spec.ts +++ b/src/lib/snack-bar/snack-bar.spec.ts @@ -4,8 +4,7 @@ import { ComponentFixture, TestBed, fakeAsync, - flushMicrotasks, - tick + tick, } from '@angular/core/testing'; import {NgModule, Component, Directive, ViewChild, ViewContainerRef, Inject} from '@angular/core'; import {CommonModule} from '@angular/common'; @@ -21,10 +20,10 @@ import { MAT_SNACK_BAR_DATA, } from './index'; - describe('MatSnackBar', () => { let snackBar: MatSnackBar; let liveAnnouncer: LiveAnnouncer; + let overlayContainer: OverlayContainer; let overlayContainerElement: HTMLElement; let testViewContainerRef: ViewContainerRef; @@ -36,23 +35,20 @@ describe('MatSnackBar', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [MatSnackBarModule, SnackBarTestModule, NoopAnimationsModule], - providers: [ - {provide: OverlayContainer, useFactory: () => { - overlayContainerElement = document.createElement('div'); - return {getContainerElement: () => overlayContainerElement}; - }} - ], }); TestBed.compileComponents(); })); - beforeEach(inject([MatSnackBar, LiveAnnouncer], (sb: MatSnackBar, la: LiveAnnouncer) => { + beforeEach(inject([MatSnackBar, LiveAnnouncer, OverlayContainer], + (sb: MatSnackBar, la: LiveAnnouncer, oc: OverlayContainer) => { snackBar = sb; liveAnnouncer = la; + overlayContainer = oc; + overlayContainerElement = oc.getContainerElement(); })); afterEach(() => { - overlayContainerElement.innerHTML = ''; + overlayContainer.ngOnDestroy(); liveAnnouncer.ngOnDestroy(); }); @@ -64,8 +60,7 @@ describe('MatSnackBar', () => { }); it('should have the role of alert', () => { - let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef}; - snackBar.open(simpleMessage, simpleActionLabel, config); + snackBar.open(simpleMessage, simpleActionLabel); let containerElement = overlayContainerElement.querySelector('snack-bar-container')!; expect(containerElement.getAttribute('role')) @@ -278,8 +273,7 @@ describe('MatSnackBar', () => { snackBar.open('Second snackbar'); viewContainerFixture.detectChanges(); - // Flush microtasks to make observables run, but don't tick such that any animations would run. - flushMicrotasks(); + tick(); expect(overlayContainerElement.textContent!.trim()).toBe('Second snackbar'); // Let remaining animations run. @@ -304,7 +298,7 @@ describe('MatSnackBar', () => { overlayContainerElement.querySelector('.mat-simple-snackbar-action') as HTMLButtonElement; actionButton.click(); viewContainerFixture.detectChanges(); - flushMicrotasks(); + tick(); expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed'); expect(actionObservableCompleted).toBeTruthy('Expected the snack bar to notify of action'); @@ -327,7 +321,7 @@ describe('MatSnackBar', () => { snackBarRef.closeWithAction(); viewContainerFixture.detectChanges(); - flushMicrotasks(); + tick(); expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed'); expect(actionObservableCompleted).toBeTruthy('Expected the snack bar to notify of action'); @@ -345,12 +339,12 @@ describe('MatSnackBar', () => { }); viewContainerFixture.detectChanges(); - flushMicrotasks(); + tick(); expect(dismissObservableCompleted).toBeFalsy('Expected the snack bar not to be dismissed'); tick(1000); viewContainerFixture.detectChanges(); - flushMicrotasks(); + tick(); expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed'); })); @@ -363,7 +357,7 @@ describe('MatSnackBar', () => { tick(600); viewContainerFixture.detectChanges(); - flushMicrotasks(); + tick(); expect(viewContainerFixture.isStable()).toBe(true); })); @@ -431,7 +425,7 @@ describe('MatSnackBar', () => { snackBarRef.closeWithAction(); viewContainerFixture.detectChanges(); - flushMicrotasks(); + tick(); expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed'); expect(actionObservableCompleted).toBeTruthy('Expected the snack bar to notify of action'); @@ -446,6 +440,7 @@ describe('MatSnackBar', () => { describe('MatSnackBar with parent MatSnackBar', () => { let parentSnackBar: MatSnackBar; let childSnackBar: MatSnackBar; + let overlayContainer: OverlayContainer; let overlayContainerElement: HTMLElement; let fixture: ComponentFixture; let liveAnnouncer: LiveAnnouncer; @@ -454,20 +449,17 @@ describe('MatSnackBar with parent MatSnackBar', () => { TestBed.configureTestingModule({ imports: [MatSnackBarModule, SnackBarTestModule, NoopAnimationsModule], declarations: [ComponentThatProvidesMatSnackBar], - providers: [ - {provide: OverlayContainer, useFactory: () => { - overlayContainerElement = document.createElement('div'); - return {getContainerElement: () => overlayContainerElement}; - }} - ], }); TestBed.compileComponents(); })); - beforeEach(inject([MatSnackBar, LiveAnnouncer], (sb: MatSnackBar, la: LiveAnnouncer) => { + beforeEach(inject([MatSnackBar, LiveAnnouncer, OverlayContainer], + (sb: MatSnackBar, la: LiveAnnouncer, oc: OverlayContainer) => { parentSnackBar = sb; liveAnnouncer = la; + overlayContainer = oc; + overlayContainerElement = oc.getContainerElement(); fixture = TestBed.createComponent(ComponentThatProvidesMatSnackBar); childSnackBar = fixture.componentInstance.snackBar; @@ -475,7 +467,7 @@ describe('MatSnackBar with parent MatSnackBar', () => { })); afterEach(() => { - overlayContainerElement.innerHTML = ''; + overlayContainer.ngOnDestroy(); liveAnnouncer.ngOnDestroy(); }); @@ -516,6 +508,7 @@ describe('MatSnackBar with parent MatSnackBar', () => { describe('MatSnackBar Positioning', () => { let snackBar: MatSnackBar; let liveAnnouncer: LiveAnnouncer; + let overlayContainer: OverlayContainer; let overlayContainerEl: HTMLElement; let testViewContainerRef: ViewContainerRef; @@ -527,23 +520,20 @@ describe('MatSnackBar Positioning', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [MatSnackBarModule, SnackBarTestModule, NoopAnimationsModule], - providers: [ - {provide: OverlayContainer, useFactory: () => { - overlayContainerEl = document.createElement('div'); - return {getContainerElement: () => overlayContainerEl}; - }} - ], }); TestBed.compileComponents(); })); - beforeEach(inject([MatSnackBar, LiveAnnouncer], (sb: MatSnackBar, la: LiveAnnouncer) => { + beforeEach(inject([MatSnackBar, LiveAnnouncer, OverlayContainer], + (sb: MatSnackBar, la: LiveAnnouncer, oc: OverlayContainer) => { snackBar = sb; liveAnnouncer = la; + overlayContainer = oc; + overlayContainerEl = oc.getContainerElement(); })); afterEach(() => { - overlayContainerEl.innerHTML = ''; + overlayContainer.ngOnDestroy(); liveAnnouncer.ngOnDestroy(); });