fix: enhance active route comparison to allow if/else restrictions (#87)

Author: meeroslav

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

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

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>

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