测试禁用RouterLink锚点点击不改变路由：测试用例为何失败？

你的测试失败核心原因有两个：

• 原生HTML的<a>标签不支持disabled属性，这个属性加在<a>上不会有任何原生行为上的限制，点击事件依然会触发。
• Angular的RouterLink指令默认也不会识别disabled属性来阻止路由导航，所以哪怕你给<a>加了disabled，点击后RouterLink还是会正常执行跳转逻辑。

第一步：修复你的禁用锚点组件 #

要实现真正禁用的RouterLink，你需要换一种方式，这里提供两种常用方案：

方案1：条件绑定RouterLink+禁用样式+事件拦截 #

@Component({ 
  template: `
    <a 
      [routerLink]="isDisabled ? null : target" 
      [class.disabled]="isDisabled"
      (click)="isDisabled && $event.preventDefault()"
    >click me</a>
  `,
  styles: [`
    .disabled { 
      opacity: 0.5; 
      pointer-events: none; 
      cursor: not-allowed; 
      text-decoration: none;
    }
  `]
})
class DisabledLinkComponent { 
  target = '/destination';
  isDisabled = true; // 通过这个变量控制禁用状态
}

这里的关键细节：

• 禁用时把routerLink绑定为null，让RouterLink指令直接失效
• 额外绑定click事件阻止默认行为，防止意外触发跳转
• 用CSS类让元素看起来是禁用状态，pointer-events: none还能直接阻止点击事件传递

方案2：用Router服务手动控制导航 #

如果需要更灵活的逻辑控制，可以直接依赖Router服务手动处理导航：

import { Router } from '@angular/router';

@Component({ 
  template: `<a (click)="handleClick()" [class.disabled]="isDisabled">click me</a>`,
  styles: [`
    .disabled { 
      opacity: 0.5; 
      pointer-events: none; 
      cursor: not-allowed; 
      text-decoration: none;
    }
  `]
})
class DisabledLinkComponent { 
  target = '/destination';
  isDisabled = true;

  constructor(private router: Router) {}

  handleClick() {
    if (!this.isDisabled) {
      this.router.navigate([this.target]);
    }
  }
}

第二步：修正你的测试代码 #

修复组件后，测试可以正常验证，但还有一个细节需要优化：测试初始路径为空字符串，建议先获取初始路径再做断言，同时注意Angular v9+推荐用TestBed.inject()替代已废弃的TestBed.get()：

it('should not change location when clicked', () => {
  const fixture = TestBed.createComponent(DisabledLinkComponent);
  const location = TestBed.inject(Location);
  const initialPath = location.path(); // 先缓存初始路径
  fixture.detectChanges();
  
  fixture.nativeElement.querySelector('a').click();
  
  expect(location.path()).toBe(initialPath); // 断言路径未发生变化
});

为什么原测试会失败？ #

你原来的组件中，disabled属性对<a>标签和RouterLink指令都没有任何限制作用，点击后路由依然会跳转到/destination，所以断言not.toBe('/destination')自然会失败。

内容的提问来源于stack exchange，提问作者Sergio Mazzoleni