diff --git a/src/lib/snack-bar/snack-bar.spec.ts b/src/lib/snack-bar/snack-bar.spec.ts index 81c27cd0161..c03f7cc34ed 100644 --- a/src/lib/snack-bar/snack-bar.spec.ts +++ b/src/lib/snack-bar/snack-bar.spec.ts @@ -1,10 +1,10 @@ import { inject, - async, ComponentFixture, TestBed, fakeAsync, tick, + flush, } from '@angular/core/testing'; import {NgModule, Component, Directive, ViewChild, ViewContainerRef, Inject} from '@angular/core'; import {CommonModule} from '@angular/common'; @@ -32,11 +32,10 @@ describe('MatSnackBar', () => { let simpleMessage = 'Burritos are here!'; let simpleActionLabel = 'pickup'; - beforeEach(async(() => { + beforeEach(fakeAsync(() => { TestBed.configureTestingModule({ imports: [MatSnackBarModule, SnackBarTestModule, NoopAnimationsModule], - }); - TestBed.compileComponents(); + }).compileComponents(); })); beforeEach(inject([MatSnackBar, LiveAnnouncer, OverlayContainer], @@ -67,21 +66,20 @@ describe('MatSnackBar', () => { .toBe('alert', 'Expected snack bar container to have role="alert"'); }); - it('should open and close a snackbar without a ViewContainerRef', async(() => { - let snackBarRef = snackBar.open('Snack time!', 'Chew'); - viewContainerFixture.detectChanges(); + it('should open and close a snackbar without a ViewContainerRef', fakeAsync(() => { + let snackBarRef = snackBar.open('Snack time!', 'Chew'); + viewContainerFixture.detectChanges(); - let messageElement = overlayContainerElement.querySelector('snack-bar-container')!; - expect(messageElement.textContent).toContain('Snack time!', + let messageElement = overlayContainerElement.querySelector('snack-bar-container')!; + expect(messageElement.textContent).toContain('Snack time!', 'Expected snack bar to show a message without a ViewContainerRef'); - snackBarRef.dismiss(); - viewContainerFixture.detectChanges(); + snackBarRef.dismiss(); + viewContainerFixture.detectChanges(); + flush(); - viewContainerFixture.whenStable().then(() => { - expect(overlayContainerElement.childNodes.length) + expect(overlayContainerElement.childNodes.length) .toBe(0, 'Expected snack bar to be dismissed without a ViewContainerRef'); - }); })); it('should open a simple message with a button', () => { @@ -126,7 +124,7 @@ describe('MatSnackBar', () => { .toBeNull('Expected the query selection for action label to be null'); }); - it('should dismiss the snack bar and remove itself from the view', async(() => { + it('should dismiss the snack bar and remove itself from the view', fakeAsync(() => { let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef}; let dismissCompleteSpy = jasmine.createSpy('dismiss complete spy'); @@ -139,39 +137,36 @@ describe('MatSnackBar', () => { snackBarRef.dismiss(); viewContainerFixture.detectChanges(); // Run through animations for dismissal + flush(); - viewContainerFixture.whenStable().then(() => { - expect(dismissCompleteSpy).toHaveBeenCalled(); - expect(overlayContainerElement.childElementCount) - .toBe(0, 'Expected the overlay container element to have no child elements'); - }); + expect(dismissCompleteSpy).toHaveBeenCalled(); + expect(overlayContainerElement.childElementCount) + .toBe(0, 'Expected the overlay container element to have no child elements'); })); - it('should be able to get dismissed through the service', async(() => { + it('should be able to get dismissed through the service', fakeAsync(() => { snackBar.open(simpleMessage); viewContainerFixture.detectChanges(); expect(overlayContainerElement.childElementCount).toBeGreaterThan(0); snackBar.dismiss(); viewContainerFixture.detectChanges(); + flush(); - viewContainerFixture.whenStable().then(() => { - expect(overlayContainerElement.childElementCount).toBe(0); - }); + expect(overlayContainerElement.childElementCount).toBe(0); })); - it('should clean itself up when the view container gets destroyed', async(() => { + it('should clean itself up when the view container gets destroyed', fakeAsync(() => { snackBar.open(simpleMessage, undefined, { viewContainerRef: testViewContainerRef }); viewContainerFixture.detectChanges(); expect(overlayContainerElement.childElementCount).toBeGreaterThan(0); viewContainerFixture.componentInstance.childComponentExists = false; viewContainerFixture.detectChanges(); + flush(); - viewContainerFixture.whenStable().then(() => { - expect(overlayContainerElement.childElementCount) - .toBe(0, 'Expected snack bar to be removed after the view container was destroyed'); - }); + expect(overlayContainerElement.childElementCount) + .toBe(0, 'Expected snack bar to be removed after the view container was destroyed'); })); it('should set the animation state to visible on entry', () => { @@ -199,7 +194,7 @@ describe('MatSnackBar', () => { }); it(`should set the old snack bar animation state to complete and the new snack bar animation - state to visible on entry of new snack bar`, async(() => { + state to visible on entry of new snack bar`, fakeAsync(() => { let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef}; let snackBarRef = snackBar.open(simpleMessage, undefined, config); let dismissCompleteSpy = jasmine.createSpy('dismiss complete spy'); @@ -213,17 +208,16 @@ describe('MatSnackBar', () => { viewContainerFixture.detectChanges(); snackBarRef.afterDismissed().subscribe(undefined, undefined, dismissCompleteSpy); + flush(); - viewContainerFixture.whenStable().then(() => { - expect(dismissCompleteSpy).toHaveBeenCalled(); - expect(snackBarRef.containerInstance._animationState) - .toBe('hidden-bottom', `Expected the animation state would be 'hidden-bottom'.`); - expect(snackBarRef2.containerInstance._animationState) - .toBe('visible-bottom', `Expected the animation state would be 'visible-bottom'.`); - }); + expect(dismissCompleteSpy).toHaveBeenCalled(); + expect(snackBarRef.containerInstance._animationState) + .toBe('hidden-bottom', `Expected the animation state would be 'hidden-bottom'.`); + expect(snackBarRef2.containerInstance._animationState) + .toBe('visible-bottom', `Expected the animation state would be 'visible-bottom'.`); })); - it('should open a new snackbar after dismissing a previous snackbar', async(() => { + it('should open a new snackbar after dismissing a previous snackbar', fakeAsync(() => { let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef}; let snackBarRef = snackBar.open(simpleMessage, 'Dismiss', config); @@ -233,33 +227,29 @@ describe('MatSnackBar', () => { viewContainerFixture.detectChanges(); // Wait for the snackbar dismiss animation to finish. - viewContainerFixture.whenStable().then(() => { - snackBarRef = snackBar.open('Second snackbar', 'Dismiss', config); - viewContainerFixture.detectChanges(); + flush(); + snackBarRef = snackBar.open('Second snackbar', 'Dismiss', config); + viewContainerFixture.detectChanges(); - // Wait for the snackbar open animation to finish. - viewContainerFixture.whenStable().then(() => { - expect(snackBarRef.containerInstance._animationState) - .toBe('visible-bottom', `Expected the animation state would be 'visible-bottom'.`); - }); - }); + // Wait for the snackbar open animation to finish. + flush(); + expect(snackBarRef.containerInstance._animationState) + .toBe('visible-bottom', `Expected the animation state would be 'visible-bottom'.`); })); - it('should remove past snackbars when opening new snackbars', async(() => { + it('should remove past snackbars when opening new snackbars', fakeAsync(() => { snackBar.open('First snackbar'); viewContainerFixture.detectChanges(); snackBar.open('Second snackbar'); viewContainerFixture.detectChanges(); + flush(); - viewContainerFixture.whenStable().then(() => { - snackBar.open('Third snackbar'); - viewContainerFixture.detectChanges(); + snackBar.open('Third snackbar'); + viewContainerFixture.detectChanges(); + flush(); - viewContainerFixture.whenStable().then(() => { - expect(overlayContainerElement.textContent!.trim()).toBe('Third snackbar'); - }); - }); + expect(overlayContainerElement.textContent!.trim()).toBe('Third snackbar'); })); it('should remove snackbar if another is shown while its still animating open', fakeAsync(() => { @@ -442,13 +432,11 @@ describe('MatSnackBar with parent MatSnackBar', () => { let fixture: ComponentFixture; let liveAnnouncer: LiveAnnouncer; - beforeEach(async(() => { + beforeEach(fakeAsync(() => { TestBed.configureTestingModule({ imports: [MatSnackBarModule, SnackBarTestModule, NoopAnimationsModule], declarations: [ComponentThatProvidesMatSnackBar], - }); - - TestBed.compileComponents(); + }).compileComponents(); })); beforeEach(inject([MatSnackBar, LiveAnnouncer, OverlayContainer], @@ -514,11 +502,10 @@ describe('MatSnackBar Positioning', () => { let simpleMessage = 'Burritos are here!'; let simpleActionLabel = 'pickup'; - beforeEach(async(() => { + beforeEach(fakeAsync(() => { TestBed.configureTestingModule({ imports: [MatSnackBarModule, SnackBarTestModule, NoopAnimationsModule], - }); - TestBed.compileComponents(); + }).compileComponents(); })); beforeEach(inject([MatSnackBar, LiveAnnouncer, OverlayContainer], @@ -540,145 +527,145 @@ describe('MatSnackBar Positioning', () => { testViewContainerRef = viewContainerFixture.componentInstance.childViewContainer; }); - it('should default to bottom center', async(() => { + it('should default to bottom center', fakeAsync(() => { snackBar.open(simpleMessage, simpleActionLabel); viewContainerFixture.detectChanges(); - viewContainerFixture.whenStable().then(() => { - const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; - const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + flush(); - expect(containerEl.classList.contains('mat-snack-bar-center')).toBeTruthy(); - expect(containerEl.classList.contains('mat-snack-bar-top')).toBeFalsy(); + const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; + const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; - expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"'); - expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""'); - expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); - expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); - }); + expect(containerEl.classList.contains('mat-snack-bar-center')).toBeTruthy(); + expect(containerEl.classList.contains('mat-snack-bar-top')).toBeFalsy(); + + expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"'); + expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""'); + expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); + expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); })); - it('should be in the bottom left corner', async(() => { + it('should be in the bottom left corner', fakeAsync(() => { snackBar.open(simpleMessage, simpleActionLabel, { verticalPosition: 'bottom', horizontalPosition: 'left' }); viewContainerFixture.detectChanges(); - viewContainerFixture.whenStable().then(() => { - const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; - const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + flush(); - expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); - expect(containerEl.classList.contains('mat-snack-bar-top')).toBeFalsy(); - expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"'); - expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""'); - expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); - expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left to be "0px"'); - }); + const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; + const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); + expect(containerEl.classList.contains('mat-snack-bar-top')).toBeFalsy(); + expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"'); + expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""'); + expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); + expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left to be "0px"'); })); - it('should be in the bottom right corner', async(() => { + it('should be in the bottom right corner', fakeAsync(() => { snackBar.open(simpleMessage, simpleActionLabel, { verticalPosition: 'bottom', horizontalPosition: 'right' }); viewContainerFixture.detectChanges(); - viewContainerFixture.whenStable().then(() => { - const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; - const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + flush(); - expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); - expect(containerEl.classList.contains('mat-snack-bar-top')).toBeFalsy(); - expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"'); - expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""'); - expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"'); - expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); - }); + const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; + const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); + expect(containerEl.classList.contains('mat-snack-bar-top')).toBeFalsy(); + expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"'); + expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""'); + expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"'); + expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); })); - it('should be in the bottom center', async(() => { + it('should be in the bottom center', fakeAsync(() => { snackBar.open(simpleMessage, simpleActionLabel, { verticalPosition: 'bottom', horizontalPosition: 'center' }); viewContainerFixture.detectChanges(); - viewContainerFixture.whenStable().then(() => { - const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; - const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + flush(); - expect(containerEl.classList.contains('mat-snack-bar-center')).toBeTruthy(); - expect(containerEl.classList.contains('mat-snack-bar-top')).toBeFalsy(); - expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"'); - expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""'); - expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); - expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); - }); + const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; + const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(containerEl.classList.contains('mat-snack-bar-center')).toBeTruthy(); + expect(containerEl.classList.contains('mat-snack-bar-top')).toBeFalsy(); + expect(overlayPaneEl.style.marginBottom).toBe('0px', 'Expected margin-bottom to be "0px"'); + expect(overlayPaneEl.style.marginTop).toBe('', 'Expected margin-top to be ""'); + expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); + expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); })); - it('should be in the top left corner', async(() => { + it('should be in the top left corner', fakeAsync(() => { snackBar.open(simpleMessage, simpleActionLabel, { verticalPosition: 'top', horizontalPosition: 'left' }); viewContainerFixture.detectChanges(); - viewContainerFixture.whenStable().then(() => { - const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; - const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + flush(); - expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); - expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); - expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); - expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); - expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); - expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left to be "0px"'); - }); + const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; + const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); + expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); + expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); + expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); + expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); + expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left to be "0px"'); })); - it('should be in the top right corner', async(() => { + it('should be in the top right corner', fakeAsync(() => { snackBar.open(simpleMessage, simpleActionLabel, { verticalPosition: 'top', horizontalPosition: 'right' }); viewContainerFixture.detectChanges(); - viewContainerFixture.whenStable().then(() => { - const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; - const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + flush(); - expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); - expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); - expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); - expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); - expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"'); - expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); - }); + const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; + const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); + expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); + expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); + expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); + expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"'); + expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); })); - it('should be in the top center', async(() => { + it('should be in the top center', fakeAsync(() => { snackBar.open(simpleMessage, simpleActionLabel, { verticalPosition: 'top', horizontalPosition: 'center' }); viewContainerFixture.detectChanges(); - viewContainerFixture.whenStable().then(() => { - const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; - const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + flush(); - expect(containerEl.classList.contains('mat-snack-bar-center')).toBeTruthy(); - expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); - expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); - expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); - expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); - expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); - }); + const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; + const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(containerEl.classList.contains('mat-snack-bar-center')).toBeTruthy(); + expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); + expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); + expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); + expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); + expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); })); - it('should handle start based on direction (rtl)', async(() => { + it('should handle start based on direction (rtl)', fakeAsync(() => { snackBar.open(simpleMessage, simpleActionLabel, { verticalPosition: 'top', horizontalPosition: 'start', @@ -686,20 +673,20 @@ describe('MatSnackBar Positioning', () => { }); viewContainerFixture.detectChanges(); - viewContainerFixture.whenStable().then(() => { - const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; - const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + flush(); - expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); - expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); - expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); - expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); - expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"'); - expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); - }); + const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; + const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); + expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); + expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); + expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); + expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"'); + expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); })); - it('should handle start based on direction (ltr)', async(() => { + it('should handle start based on direction (ltr)', fakeAsync(() => { snackBar.open(simpleMessage, simpleActionLabel, { verticalPosition: 'top', horizontalPosition: 'start', @@ -707,20 +694,20 @@ describe('MatSnackBar Positioning', () => { }); viewContainerFixture.detectChanges(); - viewContainerFixture.whenStable().then(() => { - const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; - const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + flush(); - expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); - expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); - expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); - expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); - expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); - expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left to be "0px"'); - }); + const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; + const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); + expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); + expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); + expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); + expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); + expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left to be "0px"'); })); - it('should handle end based on direction (rtl)', async(() => { + it('should handle end based on direction (rtl)', fakeAsync(() => { snackBar.open(simpleMessage, simpleActionLabel, { verticalPosition: 'top', horizontalPosition: 'end', @@ -728,20 +715,20 @@ describe('MatSnackBar Positioning', () => { }); viewContainerFixture.detectChanges(); - viewContainerFixture.whenStable().then(() => { - const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; - const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + flush(); - expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); - expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); - expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); - expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); - expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); - expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left to be "0px"'); - }); + const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; + const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); + expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); + expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); + expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); + expect(overlayPaneEl.style.marginRight).toBe('', 'Expected margin-right to be ""'); + expect(overlayPaneEl.style.marginLeft).toBe('0px', 'Expected margin-left to be "0px"'); })); - it('should handle end based on direction (ltr)', async(() => { + it('should handle end based on direction (ltr)', fakeAsync(() => { snackBar.open(simpleMessage, simpleActionLabel, { verticalPosition: 'top', horizontalPosition: 'end', @@ -749,17 +736,17 @@ describe('MatSnackBar Positioning', () => { }); viewContainerFixture.detectChanges(); - viewContainerFixture.whenStable().then(() => { - const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; - const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + flush(); - expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); - expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); - expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); - expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); - expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"'); - expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); - }); + const containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; + const overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(containerEl.classList.contains('mat-snack-bar-center')).toBeFalsy(); + expect(containerEl.classList.contains('mat-snack-bar-top')).toBeTruthy(); + expect(overlayPaneEl.style.marginBottom).toBe('', 'Expected margin-bottom to be ""'); + expect(overlayPaneEl.style.marginTop).toBe('0px', 'Expected margin-top to be "0px"'); + expect(overlayPaneEl.style.marginRight).toBe('0px', 'Expected margin-right to be "0px"'); + expect(overlayPaneEl.style.marginLeft).toBe('', 'Expected margin-left to be ""'); })); });