Angular unit testing relative RouterLinks

Question

In my Angular app I need to be able to unit test that routerLink create the correct href attribute. Sometimes they are links relative to the current route, and sometimes they are absolute links from the root.

I am only able to successfully test the absolute links. When I attempt to test the relative links it just shows the href value as '/'

In my component template I do this

@for (item of dataService.list; track item.id){
  @if (item.documents.length === 1) {
    <a [routerLink]="['/', 'documents', item.documents[0].id]">{{ item.id }} (Single)</a>
  } @else {
    <a [routerLink]="item.id">{{ item.id }} (Multiple)</a>
  }
}

And in my *.spec.ts file I have

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let mockDataService: DataService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
      providers: [provideRouter([]), { provide: ActivatedRoute, useValue: {} }],
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    mockDataService = TestBed.inject(DataService);
  });

  //This test FAILS with "Expected '/' to equal 'One'."
  it('should use a relative link when there are multiple documents', () => {
    spyOnProperty(mockDataService, 'list', 'get').and.returnValue([
      { id: 'One', documents: [{ id: '1' }, { id: '2' }] },
    ]);
    fixture.detectChanges();

    const linkEl = fixture.debugElement.query(By.css('a')).nativeElement;

    expect(linkEl.getAttribute('href')).toEqual('One');
  });

  //This test PASSES
  it('should use an absolute link when there is only one document', () => {
    spyOnProperty(mockDataService, 'list').and.returnValue([
      { id: 'Two', documents: [{ id: '3' }] },
    ]);
    fixture.detectChanges();

    const linkEl = fixture.debugElement.query(By.css('a')).nativeElement;

    expect(linkEl.getAttribute('href')).toEqual('/documents/3');
  });
});

StackBlitz Demo

Weird, I had to mock it at one point becasue it was complaining about it not being a provider. I actually DO need to mock it in some situations, so I guess I'll need to figure out what I have to pass through my mock as real data — Chris Barr
– Chris Barr, Commented May 13 at 17:53

Naren Murali · Accepted Answer · 2025-05-13 16:32:14Z

Directly testing the attribute:

The provided mock ActivatedRoute was messing up the routerLink created href, remove it and the relative paths work great.

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [AppComponent],
    providers: [
      provideRouter([]), 
      // { provide: ActivatedRoute, useValue: {} } // <- changed here!
    ],
  }).compileComponents();

  fixture = TestBed.createComponent(AppComponent);
  mockDataService = TestBed.inject(DataService);
});

Full Code:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DataService } from './data.service';
import { AppComponent } from './app.component';
import { ActivatedRoute, provideRouter } from '@angular/router';
import { By } from '@angular/platform-browser';

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let mockDataService: DataService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
      providers: [
        provideRouter([]),
        // { provide: ActivatedRoute, useValue: {} } // <- changed here!
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    mockDataService = TestBed.inject(DataService);
  });

  it('should use a relative link when there are multiple documents', () => {
    spyOnProperty(mockDataService, 'list', 'get').and.returnValue([
      { id: 'One', documents: [{ id: '1' }, { id: '2' }] },
    ]);
    fixture.detectChanges();
    const linkEl = fixture.debugElement.query(By.css('a')).nativeElement;
    console.log(linkEl);
    expect(linkEl.getAttribute('href')).toEqual('/One');
  });

  it('should use an absolute link when there is only one document', () => {
    spyOnProperty(mockDataService, 'list').and.returnValue([
      { id: 'Two', documents: [{ id: '3' }] },
    ]);
    fixture.detectChanges();

    const linkEl = fixture.debugElement.query(By.css('a')).nativeElement;

    console.log('absolute link', linkEl.getAttribute('href'));

    expect(linkEl.getAttribute('href')).toEqual('/documents/3');
  });
});

Stackblitz Demo

Testing using `provideRouter`:

We can first add RouterOutlet and the router-outlet selector.

Then create dummy routes with dummy components to provide the fake routes. Then we need to get rid of the activated route mock, since it is messing up the routing.

@Component({ selector: 'dummy' })
export class DummyComponent {}

@Component({ selector: 'dummy2' })
export class DummyComponent2 {}

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let mockDataService: DataService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
      providers: [
        provideRouter([
          { path: 'documents/:id', component: DummyComponent },
          { path: ':id', component: DummyComponent2 },
        ]),
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    mockDataService = TestBed.inject(DataService);
  });

Now we simply click the a tag and check the route.

it('should use a relative link when there are multiple documents', async () => {
  spyOnProperty(mockDataService, 'list', 'get').and.returnValue([
    { id: 'One', documents: [{ id: '1' }, { id: '2' }] },
  ]);
  fixture.detectChanges();
  const linkEl = fixture.debugElement.query(By.css('a')).nativeElement;
  linkEl.click();
  await fixture.whenStable();
  expect(TestBed.inject(Router).url).toEqual('/One');
});

Full Code:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DataService } from './data.service';
import { AppComponent } from './app.component';
import { ActivatedRoute, provideRouter, Router } from '@angular/router';
import { By } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({ selector: 'dummy' })
export class DummyComponent {}

@Component({ selector: 'dummy2' })
export class DummyComponent2 {}

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let mockDataService: DataService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
      providers: [
        provideRouter([
          { path: 'documents/:id', component: DummyComponent },
          { path: ':id', component: DummyComponent2 },
        ]),
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    mockDataService = TestBed.inject(DataService);
  });

  it('should use a relative link when there are multiple documents', async () => {
    spyOnProperty(mockDataService, 'list', 'get').and.returnValue([
      { id: 'One', documents: [{ id: '1' }, { id: '2' }] },
    ]);
    fixture.detectChanges();
    const linkEl = fixture.debugElement.query(By.css('a')).nativeElement;
    linkEl.click();
    await fixture.whenStable();
    expect(TestBed.inject(Router).url).toEqual('/One');
  });

  it('should use an absolute link when there is only one document', async () => {
    spyOnProperty(mockDataService, 'list').and.returnValue([
      { id: 'Two', documents: [{ id: '3' }] },
    ]);
    fixture.detectChanges();
    const linkEl = fixture.debugElement.query(By.css('a')).nativeElement;
    linkEl.click();
    await fixture.whenStable();
    expect(TestBed.inject(Router).url).toEqual('/documents/3');
  });
});

Collectives™ on Stack Overflow

Angular unit testing relative RouterLinks

1 Answer 1

Directly testing the attribute:

Full Code:

Stackblitz Demo

Testing using `provideRouter`:

Full Code:

Stackblitz Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Directly testing the attribute:

Full Code:

Testing using provideRouter:

Full Code:

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Testing using `provideRouter`: