How to test the existence of a route in Angular using Jasmine?

Question

I'm trying to write a test that checks for the existence of a route using Jasmine for Angular application:

import { routes } from './app-routing.module';
import { UsersComponent } from './users/users.component';

describe('routes', () => {
    it('should contain route for /users', () => {
        const expectedRoute = { path: 'users', component: UsersComponent };
        expect(routes).toContain(expectedRoute);
    });
});

but the test fails (probably because of object equality in Javascript How object equality checks work in Javascript?)

How to modify the test to make it work?

I wouldn't test this in unit tests. If that whole page goes missing, you should find out pretty quickly from E2E tests. — jonrsharpe
Unit tests are fast, and they would point out when there is a mis-spelling in the route name or if the route is pointing to a component that isn't intended. I get that maintaining such test will be harder due to the probability of it changing but in my case it is worth it. — Mohamed Talaat Harb
They would, but that's just change detection. Maybe you want to change the route or the component, and now you have to change the unit test every time. It doesn't really matter what the route is, what matters is whether other components are navigating to the right place, which this unit test can't tell you. That's why I think it's better tested at other levels. — jonrsharpe
I think I like the idea of having both, the change detection fast unit test and e2e test that detects wrong configuration of routes. — Mohamed Talaat Harb

Javier Javier · Accepted Answer · 2020-01-02T13:15:16

I have tried it, and it works fine with your code.

There's no problem with equality in the method toContain.

Have you changed const routes to export const routes in your app-routing.module.ts, and import { routes } from './app-routing.module' in your test?

It's the only thing that I had to change in order to test the app.

I have done the following steps:

ng new test-routing (saying yes to routing so the app-routing.module.ts is created.
Modified app.component.spec.ts with the following code:

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

import { routes } from './app-routing.module';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should contain route for /principal', () => {
        const expectedRoute = { path: 'principal', component: AppComponent };
        expect(routes).toContain(expectedRoute);
  });
});

Modified the app-routing.module.ts to add this routes:

export const routes: Routes = [
  { path: '', redirectTo: '/principal', pathMatch: 'full' },
  { path: 'principal', component: AppComponent }
];

Run ng test

The test is fine.

If I change the 'principal' path to other, the test fails. If I revert to the good one, the test goes ok.

How to test the existence of a route in Angular using Jasmine?

1 Answers