fix(router-lite): cancelling navigation with redirection from canLoad hook from child route (#2131)

* chore: adding failing test

* fix(router-lite): initial fix for canceling navigation from child routes

* chore: cleanup

* test: router-lite

* chore: clean up and more assertions

Author: Sayan751

packages/__tests__/src/router-lite/lifecycle-hooks.spec.ts

@@ -22,7 +22,7 @@ import {
   Registration,
   resolve,
 } from '@aurelia/kernel';
-import { IRouter, IRouteViewModel, IViewportInstruction, NavigationInstruction, Params, route, RouteNode, RouterConfiguration } from '@aurelia/router-lite';
+import { IRouter, IRouterEvents, IRouteViewModel, IViewportInstruction, NavigationInstruction, Params, route, RouteNode, RouterConfiguration } from '@aurelia/router-lite';
 import { Aurelia, CustomElement, customElement, IHydratedController, ILifecycleHooks, lifecycleHooks } from '@aurelia/runtime-html';
 import { assert, TestContext } from '@aurelia/testing';
 import { TestRouterConfiguration } from './_shared/configuration.js';
@@ -6393,4 +6393,109 @@ describe('router-lite/lifecycle-hooks.spec.ts', function () {
 
     await au.stop(true);
   });
+
+  it('redirecting from canLoad from a child route should work without error', async function () {
+    @customElement({ name: 'c-1', template: `c1` })
+    class C1 implements IRouteViewModel {
+      canLoad(_params: Params, _next: RouteNode, _current: RouteNode | null): NavigationInstruction {
+        return 'p-1/c-2';
+      }
+    }
+
+    @customElement({ name: 'c-2', template: `c2` })
+    class C2 { }
+
+    @customElement({ name: 'c-3', template: `c3` })
+    class C3 { }
+
+    @route({ routes: [C1, C2, C3] })
+    @customElement({ name: 'p-1', template: '<au-viewport></au-viewport>' })
+    class P1 { }
+
+    @route({ routes: [P1] })
+    @customElement({ name: 'ro-ot', template: '<au-viewport></au-viewport>' })
+    class Root { }
+
+    const { au, host, container } = await createFixture(Root, [C1, C2, C3, P1, Registration.instance(IKnownScopes, [/* Root.name, P1.name, C1.name, C2.name */])]);
+    const router = container.get(IRouter);
+    let errorCount = 0;
+    let cancelCount = 0;
+    const routerEvents = container.get(IRouterEvents);
+    routerEvents.subscribe('au:router:navigation-error', () => errorCount++);
+    routerEvents.subscribe('au:router:navigation-cancel', () => cancelCount++);
+
+    // round#1 - load c1 and redirect to c2 should take place
+    await router.load('p-1/c-1');
+    assert.html.textContent(host, 'c2');
+    assert.strictEqual(errorCount, 0, 'errorCount');
+    assert.strictEqual(cancelCount, 1, 'cancelCount');
+
+    // round#2 - load c3 and it should work a as expected
+    errorCount = 0;
+    cancelCount = 0;
+    await router.load('p-1/c-3');
+    assert.html.textContent(host, 'c3');
+    assert.strictEqual(errorCount, 0, 'errorCount');
+    assert.strictEqual(cancelCount, 0, 'cancelCount');
+
+    // round#3 - load c2 normally, and an it should be loaded
+    await router.load('p-1/c-2');
+    assert.html.textContent(host, 'c2');
+    assert.strictEqual(errorCount, 0, 'errorCount');
+    assert.strictEqual(cancelCount, 0, 'cancelCount');
+
+    // round#4 - cleanse before testing the c-1 -_ c-2 redirect scenario once again
+    await router.load('p-1/c-3');
+    assert.html.textContent(host, 'c3');
+    assert.strictEqual(errorCount, 0, 'errorCount');
+    assert.strictEqual(cancelCount, 0, 'cancelCount');
+
+    // round#5 - load c1 and redirect to c2 should take place
+    await router.load('p-1/c-1');
+    assert.html.textContent(host, 'c2');
+    assert.strictEqual(errorCount, 0, 'errorCount');
+    assert.strictEqual(cancelCount, 1, 'cancelCount');
+
+    await au.stop(true);
+  });
+
+  it('cancelling from canUnload from a child route should work without error', async function () {
+    @customElement({ name: 'c-1', template: `c1` })
+    class C1 implements IRouteViewModel {
+      canUnload(_next: RouteNode | null, _current: RouteNode): boolean | Promise<boolean> {
+        return false;
+      }
+    }
+
+    @customElement({ name: 'c-2', template: `c2` })
+    class C2 { }
+
+    @route({ routes: [C1, C2] })
+    @customElement({ name: 'p-1', template: '<au-viewport></au-viewport>' })
+    class P1 { }
+
+    @route({ routes: [P1] })
+    @customElement({ name: 'ro-ot', template: '<au-viewport></au-viewport>' })
+    class Root { }
+
+    const { au, host, container } = await createFixture(Root, [C1, C2, P1, Registration.instance(IKnownScopes, [/* Root.name, P1.name, C1.name, C2.name */])]);
+    const router = container.get(IRouter);
+    let errorCount = 0;
+    let cancelCount = 0;
+    const routerEvents = container.get(IRouterEvents);
+    routerEvents.subscribe('au:router:navigation-error', () => errorCount++);
+    routerEvents.subscribe('au:router:navigation-cancel', () => cancelCount++);
+
+    await router.load('p-1/c-1');
+    assert.html.textContent(host, 'c1');
+    assert.strictEqual(errorCount, 0, 'errorCount');
+    assert.strictEqual(cancelCount, 0, 'cancelCount');
+
+    await router.load('p-1/c-2');
+    assert.html.textContent(host, 'c1');
+    assert.strictEqual(errorCount, 0, 'errorCount');
+    assert.strictEqual(cancelCount, 1, 'cancelCount');
+
+    await au.stop(true);
+  });
 });

packages/router-lite/src/events.ts

@@ -158,6 +158,7 @@ export const enum Events {
   vpaUnexpectedDeactivation = 3351,
   vpaUnexpectedState = 3352,
   vpaUnexpectedGuardsResult = 3353,
+  vpaCanLoadGuardsResult = 3354,
   // #endregion
   // #region instruction
   instrInvalid = 3400,
@@ -331,6 +332,7 @@ const eventMessageMap: Record<Events, string> = {
   [Events.vpaUnexpectedDeactivation]: 'Unexpected viewport deactivation outside of a transition context at %s',
   [Events.vpaUnexpectedState]: 'Unexpected state at %s of %s',
   [Events.vpaUnexpectedGuardsResult]: 'Unexpected guardsResult %s at %s',
+  [Events.vpaCanLoadGuardsResult]: 'canLoad returned redirect result %s by the component agent %s',
   // #endregion
 
   // #region instruction

packages/router-lite/src/router.ts

@@ -646,6 +646,12 @@ export class Router {
         for (const node of all) {
           node.context.vpa._swap(tr, b);
         }
+      })._continueWith(b => {
+        // it is possible that some of the child routes are cancelling the navigation
+        if (tr.guardsResult !== true) {
+          b._push();
+          this._cancelNavigation(tr);
+        }
       })._continueWith(() => {
         if (__DEV__) trace(logger, Events.rtrRunFinalizing);
         // order doesn't matter for this operation

packages/router-lite/src/viewport-agent.ts

@@ -279,6 +279,10 @@ export class ViewportAgent {
           this._unexpectedState('canLoad');
       }
     })._continueWith(b1 => {
+      if (tr.guardsResult !== true) {
+        if (__DEV__) trace(logger, Events.vpaCanLoadGuardsResult, tr.guardsResult, this._nextCA);
+        return;
+      }
       const next = this._nextNode!;
       switch (this._$plan) {
         case 'none':
@@ -649,6 +653,7 @@ export class ViewportAgent {
           });
         }
       })._continueWith(b1 => {
+        if (tr.guardsResult !== true) return;
         for (const node of newChildren) {
           tr._run(() => {
             b1._push();
@@ -658,6 +663,7 @@ export class ViewportAgent {
           });
         }
       })._continueWith(b1 => {
+        if (tr.guardsResult !== true) return;
         for (const node of newChildren) {
           tr._run(() => {
             b1._push();