Implemented flyout closure on navigation.

e2e/flyout.e2e-spec.ts

@@ -14,15 +14,19 @@ 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();
   });
 
   it('should match previous screenshot (screen: xs)', (done) => {
     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,39 +50,49 @@ 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();
   });
 
   it('should match previous screenshot when row iterators are enabled', (done) => {
     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();
   });
 
   it('should match previous screenshot when row iterators are enabled (screen: xs)', (done) => {
     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();
   });
 
   it('should match previous screenshot when row iterators are disabled', (done) => {
     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();
   });
 
   it('should match previous screenshot when row iterator are disabled (screen: xs)', (done) => {
     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();
   });
 });

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();
+  }));
 });

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);

src/app/visual/flyout/flyout-demo.component.html

@@ -33,4 +33,12 @@ <h1>
   >
     Open toast
   </button>
+
+  <button
+    class="sky-btn sky-btn-default"
+    type="button"
+    (click)="goToPage()"
+  >
+    Navigate to new page
+  </button>
 </p>

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(['/']);
+  }
+
 }