How to use the @aurelia/router.HookTypes.BeforeNavigation function in @aurelia/router

it('uses a BeforeNavigation hook returning viewport instructions', async function () {
    const { router, tearDown, navigationInstruction } = await createFixture();

    const sut = new HookManager();
    sut.addHook(
      (viewportInstructions: ViewportInstruction[], navigationInstruction: INavigatorInstruction) =>
        Promise.resolve([router.createViewportInstruction(`hooked-${viewportInstructions[0].componentName}`)]),
      { type: HookTypes.BeforeNavigation });

    const hooked = await sut.invokeBeforeNavigation(
      [router.createViewportInstruction('testing')], navigationInstruction) as ViewportInstruction[];
    assert.strictEqual(hooked[0].componentName, 'hooked-testing', `hooked`);

    await tearDown();
  });

it('can redirect navigation', async function () {
    const { router, tearDown, scheduler, host } = await createFixture(undefined, undefined, ['one', 'two', 'three']);

    await $goto('one', router, scheduler);
    assert.strictEqual(host.textContent, `!one!`, `one`);

    await $goto('two', router, scheduler);
    assert.strictEqual(host.textContent, `!two!`, `two`);

    router.addHook(
      (instructions: ViewportInstruction[], navigation: INavigatorInstruction) =>
        Promise.resolve([router.createViewportInstruction('three', instructions[0].viewport)]),
      { type: HookTypes.BeforeNavigation, include: ['two'] });

    await $goto('one', router, scheduler);
    assert.strictEqual(host.textContent, `!one!`, `one`);

    await $goto('two', router, scheduler);
    assert.strictEqual(host.textContent, `!three!`, `three`);

    await tearDown();
  });