Router TestBed

Custom test bed for testing router.

Quick example

const APP_ROUTES: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'doc', component: DocComponent },
  {
    path: 'admin',
    canActivate: [() => inject(AuthService).isAdmin],
    component: AdminComponent,
  },
];

describe('App Routes', () => {
  const tb = routerTestBed(APP_ROUTES, { initialUrl: 'home' })
    .provide(AuthService)
    .inject('auth', AuthService);

  it('should navigate to doc page', tb(async ({ $url, navigateByUrl }) => {
    expect($url()).toEqual('/home'); // expect equal to initialUrl

    await navigateByUrl('doc');

    expect($url()).toEqual('/doc');
  }));

  it('should not navigate to admin page', tb(async ({ $url, navigateByUrl }) => {
    await navigateByUrl('admin');

    expect($url()).toEqual('/home'); // expect guard to reject, so navigation end to current url
  }));

  it('should navigate to admin page', tb(async ({ $url, navigateByUrl, injected: { auth } }) => {
    auth.isAdmin = true;

    await navigateByUrl('admin');

    expect($url()).toEqual('/admin'); // expect guard to pass
  }));
});

routerTestBed(..)

Creates a specific test bed for router.

It returns a function to be used to wrap it's callback and from which you access tools (check RouterTools).

describe('App Routes', () => {
  const tb = routerTestBed(APP_ROUTES);

  it('should ', tb((tools) => { // 👈 tb function used here
    // ... expectations
  }));
});

tb function supports the jasmine DoneFn and async/await notation.

describe('App Routes', () => {
  const tb = routerTestBed(APP_ROUTES);

  it('should ', tb(async (tools) => {
    // ... async expectations
  }));

  it('should ', tb((tools, done) => {
    // ... expectations
    done();
  }));
});

TestBed Options

describe('App Routes', () => {
  const tb = routerTestBed(APP_ROUTES, {} /* 👈 here */);

  it('should ', tb(() => {
    // ... expectations
  }));
});

initialUrl

Default : ''

Initialize the described router url.

Example :

const tb = routerTestBed(APP_ROUTES, { initialUrl: 'home' });

it('should navigation init to /home', tb(async ({ $url, navigateByUrl }) => {
  expect($url()).toEqual('/home'); // expect equal to initialUrl
}));

startDetectChanges

Default : true

Runs router harness fixture.detectChanges() before each assertion.

imports

Default : []

Imports dependencies for the described router.

Example :

const tb = routerTestBed(APP_ROUTES, {
  imports: [AppModule, SharedModule],
});

providers

Default : []

List of providers to be available during tests for the described router.

Example :

const tb = routerTestBed(APP_ROUTES, {
  providers: [AppService, { provide: StoreService, useClass: MockStoreService }],
});

autoCompile

Default : true

Automatically compiles the custom test bed for each test.

checkCreate

Default : true

Automatically invokes the "should create" Angular test.

It checks if the provided described instance is truthy.

Assertion tools

The tb function provides RouterTools.

describe('App Routes', () => {
  const tb = routerTestBed(APP_ROUTES);

  it('should ', tb((tools /* 👈 here */) => {
    // ... expectations
  }));
});

👉 RouterTools extends BaseTools.

routes

The described router routes.

Example :

it('should ', tb(({ routes }) => {
  expect(routes.length).toEqual(2);
}));

$url

The current router url as a Signal.

Example :

it('should ', tb(({ $url }) => {
  expect($url()).toEqual('/home');
}));

harness

Angular RouterTestingHarness.

Example :

it('should ', tb(({ harness }) => {
  // ... expectations
}));

navigateByUrl

Proxy of RouterTestingHarness.navigateByUrl

Example :

it('should ', tb(async ({ navigateByUrl }) => {
  await navigateByUrl('admin');
  // ... expectations
}));

Assertion options

For specific test, you enable/disable options that override the test bed options.

describe('App Routes', () => {
  const tb = routerTestBed(APP_ROUTES);

  it('should ', tb((tools) => {
    // ... expectations
  }, {} /* 👈 here */));
});

startDetectChanges

Same as options startDetectChanges but only for the current assertion.

RouterTestBed

import(..)

Same as options imports but with chaining methods.

Example :

describe('App Routes', () => {
  const tb = routerTestBed(APP_ROUTES)
    .import(AppModule)
    .import([SharedModule, ThirdPartyModule]);
});

provide(..)

Same as options providers but with chaining methods.

Example :

describe('App Routes', () => {
  const tb = routerTestBed(APP_ROUTES)
    .provide(AppService)
    .provide([StoreService, { provide: MY_TOKEN, useValue: mockValue }]);
});

inject(..)

Links an injected instance to a key and retrieve it into the enhanced tools by autocompletion.

describe('App Routes', () => {
  const tb = routerTestBed(APP_ROUTES)
    .inject('auth', AuthService);

  it('should ', tb(({ injected: { auth } }) => {
    // ... expectations
  }));
});

setup(..)

Setups extra action using the enhanced tools.

Works only for beforeEach and afterEach.

describe('App Routes', () => {
  const tb = routerTestBed(APP_ROUTES);

  beforeEach(tb.setup(async ({ navigateByUrl }) => {
    await navigateByUrl('doc');
  }));
});

compile()

To be used when you need to do third party setups before compiling the custom test bed.

warning

It has to be used into beforeEach(..) and autoCompile must be set to false.

describe('App Routes', () => {
  const tb = routerTestBed(APP_ROUTES, { autoCompile: false });

  beforeEach(async () => {
    // ... third party setup
    await tb.compile();
  });
});