From af8b7b705298a2a1178507320f53c4fa47164f2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20Jona=C5=A1?= <meeroslav@users.noreply.github.com>
Date: Thu, 11 Feb 2021 03:49:02 +0100
Subject: [PATCH] fix: enhance active route comparison to allow if/else
 restrictions (#87)

---
 .../src/integration/app.spec.ts               | 52 +++++++++++++++++--
 .../src/support/app.po.ts                     |  3 ++
 .../src/app/app.component.html                |  7 ++-
 libs/router/src/lib/router.component.ts       | 14 +++--
 4 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/apps/route-restrictions-e2e/src/integration/app.spec.ts b/apps/route-restrictions-e2e/src/integration/app.spec.ts
index 7b674c5..0cc2f5d 100644
--- a/apps/route-restrictions-e2e/src/integration/app.spec.ts
+++ b/apps/route-restrictions-e2e/src/integration/app.spec.ts
@@ -1,10 +1,56 @@
-import { getToolbar, getText } from '../support/app.po';
+import {
+  getToolbar,
+  getText,
+  getNavigationLinks,
+  getToggleButton,
+  getRestrictionLabel,
+} from '../support/app.po';
 
 describe('route-restrictions', () => {
-  beforeEach(() => cy.visit('/'));
-
   it('should display home page text', () => {
+    cy.visit('/');
     getToolbar().contains('Route restrictions');
     getText().contains('This route is OPEN');
+    getToggleButton().should('be.visible');
+  });
+
+  it('should display toggle button and restriction', () => {
+    cy.visit('/');
+    getToggleButton().should('be.visible');
+    getRestrictionLabel().should('contain.text', 'OFF');
+  });
+
+  it('should toggle restriction on toggle click', () => {
+    cy.visit('/');
+    getRestrictionLabel().should('contain.text', 'OFF');
+    getToggleButton().click();
+    getRestrictionLabel().should('contain.text', 'ON');
+  });
+
+  it('should display restrictions page text', () => {
+    cy.visit('/restricted');
+    getText().contains('This route is restricted');
+  });
+
+  it('should switch to restrictions on nav click', () => {
+    cy.visit('/');
+    getNavigationLinks().eq(1).click();
+    cy.url().should('eq', 'http://localhost:4200/restricted');
+    getText().contains('This route is restricted');
+  });
+
+  it('should redirect to home page when restriction is set', () => {
+    cy.visit('/restricted');
+    getToggleButton().click();
+    cy.url().should('eq', 'http://localhost:4200/');
+    getText().contains('This route is OPEN');
+  });
+
+  it('should redirect to home page when restriction is set on nav click', () => {
+    cy.visit('/');
+    getToggleButton().click();
+    getNavigationLinks().eq(1).click();
+    cy.url().should('eq', 'http://localhost:4200/');
+    getText().contains('This route is OPEN');
   });
 });
diff --git a/apps/route-restrictions-e2e/src/support/app.po.ts b/apps/route-restrictions-e2e/src/support/app.po.ts
index 2c46d1c..c49be37 100644
--- a/apps/route-restrictions-e2e/src/support/app.po.ts
+++ b/apps/route-restrictions-e2e/src/support/app.po.ts
@@ -1,2 +1,5 @@
 export const getToolbar = () => cy.get('mat-toolbar');
 export const getText = () => cy.get('p');
+export const getNavigationLinks = () => cy.get('a.mat-button');
+export const getToggleButton = () => cy.get('button:contains("Toggle")');
+export const getRestrictionLabel = () => cy.get('label');
diff --git a/apps/route-restrictions/src/app/app.component.html b/apps/route-restrictions/src/app/app.component.html
index f8cd9c7..0652169 100644
--- a/apps/route-restrictions/src/app/app.component.html
+++ b/apps/route-restrictions/src/app/app.component.html
@@ -11,12 +11,15 @@
   <button mat-raised-button type="button" (click)="toggle()">
     Toggle restriction
   </button>
-  {{ restricted ? 'ON' : 'OFF' }}
+  <label>{{ restricted ? 'ON' : 'OFF' }}</label>
 
   <router>
-    <route path="/restricted" *ngIf="!restricted">
+    <route path="/restricted" *ngIf="!restricted; else restrictedRoute">
       <rr-restricted *routeComponent></rr-restricted>
     </route>
+    <ng-template #restrictedRoute>
+      <route path="/restricted" redirectTo="/"></route>
+    </ng-template>
     <route path="" [exact]="false">
       <rr-unknown *routeComponent></rr-unknown>
     </route>
diff --git a/libs/router/src/lib/router.component.ts b/libs/router/src/lib/router.component.ts
index 547f578..6e08628 100644
--- a/libs/router/src/lib/router.component.ts
+++ b/libs/router/src/lib/router.component.ts
@@ -24,8 +24,6 @@ interface State {
   routes: Route[];
 }
 
-type UnregisterableRoute = Route & { unregister?: boolean };
-
 @Component({
   // tslint:disable-next-line:component-selector
   selector: 'router',
@@ -110,7 +108,7 @@ export class RouterComponent implements OnInit, OnDestroy {
   }
 
   unregisterRoute(route: Route) {
-    this.updateRoutes({ ...route, unregister: true });
+    this.updateRoutes(route);
   }
 
   normalizePath(path: string) {
@@ -138,8 +136,7 @@ export class RouterComponent implements OnInit, OnDestroy {
     return (
       previous.path === current.path &&
       compareParams(previous.params, current.params) &&
-      previous.route.path === current.route.path &&
-      previous.route.options.exact === current.route.options.exact
+      previous.route === current.route
     );
   }
 
@@ -160,11 +157,12 @@ export class RouterComponent implements OnInit, OnDestroy {
     this.state$.next({ ...this.state$.value, ...newState });
   }
 
-  private updateRoutes(route: UnregisterableRoute) {
+  private updateRoutes(route: Route) {
     const routes = this.state$.value.routes;
-    if (route.unregister) {
+    const index = routes.indexOf(route);
+    if (index > -1) {
       this.updateState({
-        routes: routes.filter((r) => r.matcher !== route.matcher),
+        routes: [...routes.slice(0, index), ...routes.slice(index + 1)],
       });
     } else {
       this.updateState({ routes: routes.concat(route).sort(compareRoutes) });