Skip to content

🧪 Testing Guide

📋 Overview

MetricValue
Test FrameworkVitest
Environmenthappy-dom
Total Tests155
Test Files9
Coverage91%

🚀 Quick Start

bash
# Run tests in watch mode
npm run test

# Run tests once
npm run test:run

# Run with coverage
npm run test:coverage

📁 Test Structure

__tests__/
├── helpers/
│   └── setup.ts                    # Mock factories and utilities
├── navigationRegistry.test.ts      # Registry CRUD (12 tests)
├── navigationOutposts.test.ts      # Patrol logic (19 tests)
├── navigationCitadel.test.ts       # Public API (29 tests)
├── timeout.test.ts                 # Timeout handling (7 tests)
├── lazy.test.ts                    # Lazy loading (12 tests)
├── integration.test.ts             # Full navigation flows (13 tests)
├── devtools-settings.test.ts       # DevTools settings (19 tests)
├── devtools-inspector.test.ts      # DevTools inspector (19 tests)
└── debugHandler.test.ts            # Debug handler (12 tests)

🔧 Test Helpers

Located in __tests__/helpers/setup.ts:

HelperDescription
createMockRouter(routes?)Creates vue-router with memory history
createMockLogger()Logger that captures calls for assertions
createAllowHandler()Returns 'allow' verdict
createBlockHandler()Returns 'block' verdict
createRedirectHandler(to)Returns redirect location
createDelayedHandler(ms, outcome)Async handler with delay (for timeout tests)
createErrorHandler(message)Throws error with message
createRegisteredOutpost(options)Creates RegisteredNavigationOutpost for tests — accepts name, handler, priority, hooks, timeout, lazy, onError, onTimeout

Example Usage

typescript
import { createMockRouter, createMockLogger, createAllowHandler } from './helpers/setup';

const router = createMockRouter();
const logger = createMockLogger();

// After test, check logger calls
expect(logger.calls.some((c) => c.level === 'warn')).toBe(true);

✍️ Writing New Tests

Choose the Right File

If testing...Add to...
Registry functionsnavigationRegistry.test.ts
Outcome/patrol logicnavigationOutposts.test.ts
Public APInavigationCitadel.test.ts
Timeout behaviortimeout.test.ts
Lazy loadinglazy.test.ts
Full navigation flowsintegration.test.ts
DevTools settingsdevtools-settings.test.ts
DevTools inspectordevtools-inspector.test.ts
Debug handler/loggerdebugHandler.test.ts

Use Existing Helpers

typescript
import { describe, it, expect, beforeEach } from 'vitest';
import { createMockRouter, createMockLogger } from './helpers/setup';

describe('myFeature', () => {
  let router: ReturnType<typeof createMockRouter>;
  let logger: ReturnType<typeof createMockLogger>;

  beforeEach(async () => {
    router = createMockRouter();
    logger = createMockLogger();
    await router.push('/');
    await router.isReady();
  });

  it('does something', () => {
    // test code
  });
});

Test Patterns

Testing navigation blocks:

typescript
await router.push('/dashboard').catch(() => {});
expect(router.currentRoute.value.name).toBe('home'); // stayed on home

Testing redirects (avoid infinite loops):

typescript
handler: ({ to }) => {
  if (to.name !== 'login') return { name: 'login' };
  return 'allow';
};

Testing logger calls:

typescript
expect(logger.calls.some((c) => c.level === 'warn' && c.args[0].includes('timed out'))).toBe(true);

📝 Test Cases

See the complete Test Cases Reference for a full list of all 155 tests across 9 test files.


📊 Coverage

Run coverage report:

bash
npm run test:coverage

Coverage includes all files in src/ except index.ts (re-exports only).

Released under the MIT License.