diff --git a/e2e/flyout.e2e-spec.ts b/e2e/flyout.e2e-spec.ts index fc1ade1..aa6008f 100644 --- a/e2e/flyout.e2e-spec.ts +++ b/e2e/flyout.e2e-spec.ts @@ -14,7 +14,9 @@ describe('Flyout', () => { SkyHostBrowser.get('visual/flyout'); SkyHostBrowser.setWindowBreakpoint('lg'); element(by.css('.sky-btn-primary')).click(); - expect('body').toMatchBaselineScreenshot(done); + expect('body').toMatchBaselineScreenshot(done, { + screenshotName: 'flyout-lg' + }); element(by.css('.sky-flyout .sky-flyout-btn-close')).click(); }); @@ -22,7 +24,9 @@ describe('Flyout', () => { SkyHostBrowser.get('visual/flyout'); SkyHostBrowser.setWindowBreakpoint('xs'); element(by.css('.sky-btn-primary')).click(); - expect('body').toMatchBaselineScreenshot(done); + expect('body').toMatchBaselineScreenshot(done, { + screenshotName: 'flyout-xs' + }); element(by.css('.sky-flyout .sky-flyout-btn-close')).click(); }); @@ -33,7 +37,9 @@ describe('Flyout', () => { browser.sleep(250); element(by.css('.sky-flyout .sky-dropdown-button')).click(); SkyHostBrowser.moveCursorOffScreen(); - expect('body').toMatchBaselineScreenshot(done); + expect('body').toMatchBaselineScreenshot(done, { + screenshotName: 'flyout-absolute-lg' + }); element(by.css('.sky-flyout .sky-flyout-btn-close')).click(); }); @@ -44,7 +50,9 @@ describe('Flyout', () => { browser.sleep(250); element(by.css('.sky-flyout .sky-dropdown-button')).click(); SkyHostBrowser.moveCursorOffScreen(); - expect('body').toMatchBaselineScreenshot(done); + expect('body').toMatchBaselineScreenshot(done, { + screenshotName: 'flyout-absolute-xs' + }); element(by.css('.sky-flyout .sky-flyout-btn-close')).click(); }); @@ -52,7 +60,9 @@ describe('Flyout', () => { SkyHostBrowser.get('visual/flyout'); SkyHostBrowser.setWindowBreakpoint('lg'); element(by.css('#open-flyout-with-iterators')).click(); - expect('body').toMatchBaselineScreenshot(done); + expect('body').toMatchBaselineScreenshot(done, { + screenshotName: 'flyout-iterators-lg' + }); element(by.css('.sky-flyout .sky-flyout-btn-close')).click(); }); @@ -60,7 +70,9 @@ describe('Flyout', () => { SkyHostBrowser.get('visual/flyout'); SkyHostBrowser.setWindowBreakpoint('xs'); element(by.css('#open-flyout-with-iterators')).click(); - expect('body').toMatchBaselineScreenshot(done); + expect('body').toMatchBaselineScreenshot(done, { + screenshotName: 'flyout-iterators-xs' + }); element(by.css('.sky-flyout .sky-flyout-btn-close')).click(); }); @@ -68,7 +80,9 @@ describe('Flyout', () => { SkyHostBrowser.get('visual/flyout'); SkyHostBrowser.setWindowBreakpoint('lg'); element(by.css('#open-flyout-with-iterators-disabled')).click(); - expect('body').toMatchBaselineScreenshot(done); + expect('body').toMatchBaselineScreenshot(done, { + screenshotName: 'flyout-no-iterators-lg' + }); element(by.css('.sky-flyout .sky-flyout-btn-close')).click(); }); @@ -76,7 +90,9 @@ describe('Flyout', () => { SkyHostBrowser.get('visual/flyout'); SkyHostBrowser.setWindowBreakpoint('xs'); element(by.css('#open-flyout-with-iterators-disabled')).click(); - expect('body').toMatchBaselineScreenshot(done); + expect('body').toMatchBaselineScreenshot(done, { + screenshotName: 'flyout-no-iterators-xs' + }); element(by.css('.sky-flyout .sky-flyout-btn-close')).click(); }); }); diff --git a/screenshots-baseline/body0-chrome-1044x788-dpr-1.png b/screenshots-baseline/body0-chrome-1044x788-dpr-1.png deleted file mode 100644 index 92b1a39..0000000 Binary files a/screenshots-baseline/body0-chrome-1044x788-dpr-1.png and /dev/null differ diff --git a/screenshots-baseline/body1-chrome-480x788-dpr-1.png b/screenshots-baseline/body1-chrome-480x788-dpr-1.png deleted file mode 100644 index 14c5630..0000000 Binary files a/screenshots-baseline/body1-chrome-480x788-dpr-1.png and /dev/null differ diff --git a/screenshots-baseline/body1-chrome-481x788-dpr-1.png b/screenshots-baseline/body1-chrome-481x788-dpr-1.png deleted file mode 100644 index 745b66b..0000000 Binary files a/screenshots-baseline/body1-chrome-481x788-dpr-1.png and /dev/null differ diff --git a/screenshots-baseline/body2-chrome-1044x788-dpr-1.png b/screenshots-baseline/body2-chrome-1044x788-dpr-1.png deleted file mode 100644 index d9ab167..0000000 Binary files a/screenshots-baseline/body2-chrome-1044x788-dpr-1.png and /dev/null differ diff --git a/screenshots-baseline/body3-chrome-480x788-dpr-1.png b/screenshots-baseline/body3-chrome-480x788-dpr-1.png deleted file mode 100644 index 3306673..0000000 Binary files a/screenshots-baseline/body3-chrome-480x788-dpr-1.png and /dev/null differ diff --git a/screenshots-baseline/body3-chrome-481x788-dpr-1.png b/screenshots-baseline/body3-chrome-481x788-dpr-1.png deleted file mode 100644 index 52e52d6..0000000 Binary files a/screenshots-baseline/body3-chrome-481x788-dpr-1.png and /dev/null differ diff --git a/screenshots-baseline/body4-chrome-1044x788-dpr-1.png b/screenshots-baseline/body4-chrome-1044x788-dpr-1.png deleted file mode 100644 index 96414c9..0000000 Binary files a/screenshots-baseline/body4-chrome-1044x788-dpr-1.png and /dev/null differ diff --git a/screenshots-baseline/body5-chrome-481x788-dpr-1.png b/screenshots-baseline/body5-chrome-481x788-dpr-1.png deleted file mode 100644 index 305904e..0000000 Binary files a/screenshots-baseline/body5-chrome-481x788-dpr-1.png and /dev/null differ diff --git a/screenshots-baseline/body6-chrome-1044x788-dpr-1.png b/screenshots-baseline/body6-chrome-1044x788-dpr-1.png deleted file mode 100644 index 31693a8..0000000 Binary files a/screenshots-baseline/body6-chrome-1044x788-dpr-1.png and /dev/null differ diff --git a/screenshots-baseline/body7-chrome-481x788-dpr-1.png b/screenshots-baseline/body7-chrome-481x788-dpr-1.png deleted file mode 100644 index 26435e6..0000000 Binary files a/screenshots-baseline/body7-chrome-481x788-dpr-1.png and /dev/null differ diff --git a/src/app/public/modules/flyout/flyout.service.spec.ts b/src/app/public/modules/flyout/flyout.service.spec.ts index 45abf83..0d9f351 100644 --- a/src/app/public/modules/flyout/flyout.service.spec.ts +++ b/src/app/public/modules/flyout/flyout.service.spec.ts @@ -4,9 +4,15 @@ import { import { inject, - TestBed + TestBed, + fakeAsync, + tick } from '@angular/core/testing'; +import { + Router +} from '@angular/router'; + import { expect } from '@skyux-sdk/testing'; @@ -39,6 +45,7 @@ import { describe('Flyout service', () => { let service: SkyFlyoutService; let applicationRef: ApplicationRef; + let router: Router; beforeEach(() => { TestBed.configureTestingModule({ @@ -57,43 +64,46 @@ describe('Flyout service', () => { beforeEach( inject( [ - ApplicationRef + ApplicationRef, + Router ], ( - _applicationRef: ApplicationRef + _applicationRef: ApplicationRef, + _router: Router ) => { applicationRef = _applicationRef; + router = _router; } ) ); it('should only create a single host component', () => { - const spy = spyOn(service as any, 'createHostComponent').and.callThrough(); - service.open(SkyFlyoutHostsTestComponent); - service.open(SkyFlyoutHostsTestComponent); - expect(spy.calls.count()).toEqual(1); - } + const spy = spyOn(service as any, 'createHostComponent').and.callThrough(); + service.open(SkyFlyoutHostsTestComponent); + service.open(SkyFlyoutHostsTestComponent); + expect(spy.calls.count()).toEqual(1); + } ); it('should return an instance with a close method', () => { - const flyout = service.open(SkyFlyoutHostsTestComponent); - expect(typeof flyout.close).toEqual('function'); - } + const flyout = service.open(SkyFlyoutHostsTestComponent); + expect(typeof flyout.close).toEqual('function'); + } ); it('should expose a method to remove the flyout from the DOM', () => { - spyOn(window, 'setTimeout').and.callFake((fun: Function) => { - fun(); - }); - service.open(SkyFlyoutHostsTestComponent); - applicationRef.tick(); - const spy = spyOn(service['host'].instance.messageStream, 'next').and.callThrough(); - service.close(); - applicationRef.tick(); - expect(spy).toHaveBeenCalledWith({ - type: SkyFlyoutMessageType.Close - }); - } + spyOn(window, 'setTimeout').and.callFake((fun: Function) => { + fun(); + }); + service.open(SkyFlyoutHostsTestComponent); + applicationRef.tick(); + const spy = spyOn(service['host'].instance.messageStream, 'next').and.callThrough(); + service.close(); + applicationRef.tick(); + expect(spy).toHaveBeenCalledWith({ + type: SkyFlyoutMessageType.Close + }); + } ); it('should dispose of any open host if the service is destroyed', () => { @@ -109,6 +119,43 @@ describe('Flyout service', () => { service.ngOnDestroy(); applicationRef.tick(); expect(spy).toHaveBeenCalled(); - } -); + }); + + it('should close when the user navigates through history', fakeAsync(() => { + service.open(SkyFlyoutHostsTestComponent); + const closeSpy = spyOn(service, 'close').and.callThrough(); + + tick(); + applicationRef.tick(); + + router.navigate(['/']); + + tick(); + applicationRef.tick(); + + expect(closeSpy).toHaveBeenCalled(); + })); + + it('should not close on route change if it is already closed', fakeAsync(() => { + service.open(SkyFlyoutHostsTestComponent); + const closeSpy = spyOn(service, 'close').and.callThrough(); + + tick(); + applicationRef.tick(); + + service.close(); + + tick(); + applicationRef.tick(); + + expect(closeSpy).toHaveBeenCalled(); + closeSpy.calls.reset(); + + router.navigate(['/']); + tick(); + + expect(closeSpy).not.toHaveBeenCalled(); + + applicationRef.tick(); + })); }); diff --git a/src/app/public/modules/flyout/flyout.service.ts b/src/app/public/modules/flyout/flyout.service.ts index 37cad29..d71185d 100644 --- a/src/app/public/modules/flyout/flyout.service.ts +++ b/src/app/public/modules/flyout/flyout.service.ts @@ -1,10 +1,15 @@ import { ComponentRef, Injectable, - Type, - OnDestroy + OnDestroy, + Type } from '@angular/core'; +import { + NavigationStart, + Router +} from '@angular/router'; + import { Observable, Subject @@ -13,8 +18,8 @@ import { import 'rxjs/add/operator/take'; import { - SkyWindowRefService, - SkyDynamicComponentService + SkyDynamicComponentService, + SkyWindowRefService } from '@skyux/core'; import { @@ -45,7 +50,8 @@ export class SkyFlyoutService implements OnDestroy { constructor( private adapter: SkyFlyoutAdapterService, private windowRef: SkyWindowRefService, - private dynamicComponentService: SkyDynamicComponentService + private dynamicComponentService: SkyDynamicComponentService, + private router: Router ) { } public ngOnDestroy(): void { @@ -64,6 +70,14 @@ export class SkyFlyoutService implements OnDestroy { if (!this.host) { this.host = this.createHostComponent(); + + this.router.events + .takeWhile(() => this.host !== undefined) + .subscribe((event) => { + if (event instanceof NavigationStart) { + this.close(); + } + }); } const flyout = this.host.instance.attach(component, config); diff --git a/src/app/visual/flyout/flyout-demo.component.html b/src/app/visual/flyout/flyout-demo.component.html index 3f100e2..0c260e2 100644 --- a/src/app/visual/flyout/flyout-demo.component.html +++ b/src/app/visual/flyout/flyout-demo.component.html @@ -33,4 +33,12 @@

> Open toast + +

diff --git a/src/app/visual/flyout/flyout-demo.component.ts b/src/app/visual/flyout/flyout-demo.component.ts index 18518b5..625cbf3 100644 --- a/src/app/visual/flyout/flyout-demo.component.ts +++ b/src/app/visual/flyout/flyout-demo.component.ts @@ -2,6 +2,10 @@ import { Component } from '@angular/core'; +import { + Router +} from '@angular/router'; + import { SkyModalService } from '@skyux/modals'; @@ -33,7 +37,8 @@ export class FlyoutDemoComponent { constructor( public context: FlyoutDemoContext, private modalService: SkyModalService, - private toastService: SkyToastService + private toastService: SkyToastService, + private router: Router ) { } public openModal(): void { @@ -49,4 +54,8 @@ export class FlyoutDemoComponent { ); } + public goToPage(): void { + this.router.navigate(['/']); + } + }