Angular测试用例失败：需确定setSlug调用时机以通过测试

看起来你遇到的核心问题是：测试点击按钮后，getSlug()返回的结果不符合预期，因为setSlug()根本没在点击动作或者组件生命周期中被执行过。咱们一步步来解决：

1. 先修正组件与模板的逻辑绑定 #

首先要确保setSlug()能在合适的时机被执行，要么是按钮点击触发，要么是组件初始化时自动赋值。

方案A：按钮点击触发setSlug #

修改你的table.component.html，给目标按钮绑定点击事件，直接调用setSlug并传入对应的参数：

<button id="pqr-lmn" (click)="setSlug('pqr-lmn')">触发Slug设置</button>

方案B：组件初始化时自动设置 #

如果这个slug是组件加载就需要的，在组件的ngOnInit生命周期钩子中调用setSlug：

import { OnInit } from '@angular/core';

export class TableComponent implements OnInit {
  private slug: string = '';

  ngOnInit(): void {
    this.setSlug('pqr-lmn');
  }

  setSlug(value: string): void {
    this.slug = value;
  }

  getSlug(): string {
    return this.slug;
  }
}

2. 调整测试用例逻辑 #

原测试里的fixture.whenStable()其实是针对异步操作（比如HTTP请求、Promise）的，你的场景如果没有异步逻辑，完全可以简化：

it('should return slug on button click', () => {
  fixture = TestBed.createComponent(TableComponent);
  const tableIns = fixture.componentInstance;
  fixture.detectChanges(); // 触发组件初始化，执行ngOnInit（如果用了方案B）

  // 点击按钮（如果用了方案A）
  const button = fixture.debugElement.query(By.css('#pqr-lmn')).nativeElement;
  button.click();
  fixture.detectChanges(); // 强制触发Angular变更检测，执行按钮绑定的click方法

  expect(tableIns.getSlug()).toEqual('pqr-lmn');
});

为什么原测试会失败？ #

• 模板里的按钮没有绑定任何触发setSlug的逻辑，点击按钮后什么都没发生，内部的slug变量还是初始值
• 即使绑定了事件，原测试没调用fixture.detectChanges()，Angular不会自动检测到点击事件后的变更，也就不会执行绑定的方法

内容的提问来源于stack exchange，提问作者Madasu K