Test a disabled anchor does not change current location when clicked

Question

I have a component that is a simple disabled anchor with a router link

@Component({
    template: `<a [routerLink]="target" disabled>click me</a>`,
})
class DisabledLinkComponent {
    target = '/destination';
}

I want to test that the location does not change when clicking the anchor, using RouterTestingModule.

@Component({ template: '' })
class FakeComponent {}

describe('DisabledLinkComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [RouterTestingModule.withRoutes([{ path: 'destination', component: FakeComponent }])],
            declarations: [DisabledLinkComponent, FakeComponent],
        }).compileComponents();
    }));

    it('should not change location when clicked', () => {
        const fixture = TestBed.createComponent(DisabledLinkComponent);
        fixture.detectChanges();

        fixture.nativeElement.querySelector('a').click();

        expect(TestBed.get(Location).path()).not.toBe('/destination');
    });
});

But the expectation fails. What is wrong in the way I test?

The test is right, that doesn't work. [*"Using `disabled` with an anchor tag (an `` link) will have no effect."*](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled) — jonrsharpe, May 19 '19 at 10:30

score 1 · Answer 1 · answered May 19 '19 at 11:14

1

jonrsharpe is right, your disabled attribute doesn't work as expected.

Check out this reply as a correct way of disabling an anchor.

For proper Location.path() assessment though, you need to wrap it with whenStable:

fixture.whenStable().then(() => {
  expect(TestBed.get(Location).path()).not.toBe('/destination');
});

answered May 19 '19 at 11:14

Sergey Narozhny

1,145
7
14

Thanks for the `whenStable` advice. Still, I'd prefer to use it with `async`/`await` – Sergio Mazzoleni May 19 '19 at 13:45

score 0 · Accepted Answer · answered May 19 '19 at 13:39

So I guess the best option here is to set the routerLink to null if you want the anchor to have no effect when clicked.

import { Location } from '@angular/common';
import { Component } from '@angular/core';
import { async, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

@Component({
    template: `
        <a [routerLink]="disabled ? null : target">click me</a>
    `,
})
class LinkComponent {
    target = '/destination';
    disabled = true;
}

@Component({ template: '' })
class FakeComponent {}

describe('DisabledLinkComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [RouterTestingModule.withRoutes([{ path: 'destination', component: FakeComponent }])],
            declarations: [LinkComponent, FakeComponent],
        }).compileComponents();
    }));

    it('should not change location when disabled and clicked', async () => {
        const fixture = TestBed.createComponent(LinkComponent);
        fixture.componentInstance.disabled = true;
        fixture.detectChanges();

        fixture.nativeElement.querySelector('a').click();
        await fixture.whenStable();

        expect(TestBed.get(Location).path()).not.toBe('/destination');
    });

    it('should change location when not disabled and clicked', async () => {
        const fixture = TestBed.createComponent(LinkComponent);
        fixture.componentInstance.disabled = false;
        fixture.detectChanges();

        fixture.nativeElement.querySelector('a').click();
        await fixture.whenStable();

        expect(TestBed.get(Location).path()).toBe('/destination');
    });
});

Test a disabled anchor does not change current location when clicked

2 Answers2