如何编写并修复Angular Modal弹窗打开的Jasmine单元测试？

你的测试失败主要有两个核心原因：一是addScope()里的setTimeout属于异步操作，Jasmine默认同步执行断言导致时机不对；二是没有正确监听editorModal.show()方法的调用。下面是具体的修复步骤：

1. 先监听editorModal的show方法 #

首先要确保editorModal的show方法被Jasmine spy监听，同时保证@ViewChild能正确获取到Modal实例：

import { fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing';
import { ModalDirective } from 'ngx-bootstrap/modal'; // 根据你实际使用的Modal库调整路径
import { YourComponent } from './your-component.component'; // 替换成你的组件路径

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  let modalShowSpy: jasmine.Spy;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent, ModalDirective], // 声明Modal指令，确保@ViewChild能获取到
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); // 触发ngAfterViewInit，让@ViewChild完成实例获取
    
    // 监听editorModal的show方法
    modalShowSpy = spyOn(component.editorModal, 'show').and.callThrough();
  });

2. 用fakeAsync和tick()处理异步的setTimeout #

因为addScope()里的弹窗逻辑被包裹在setTimeout中，需要用Jasmine的fakeAsync模拟异步环境，再用tick()推进时间，确保异步代码执行完毕后再做断言：

it('should open popup when calling addScope', fakeAsync(() => {
    component.addScope();
    // 推进时间，执行setTimeout内的所有代码
    tick();
    // 此时断言show方法已被调用
    expect(modalShowSpy).toHaveBeenCalled();
  }));
});

额外注意事项 #

• 如果你的Modal是第三方库（比如ngx-bootstrap/modal），一定要在测试模块中正确声明或导入对应的指令，否则@ViewChild无法获取到实例。
• 必须在spy监听前调用fixture.detectChanges()，因为@ViewChild是在ngAfterViewInit生命周期钩子中完成初始化的，detectChanges()会触发这个钩子。
• 如果你的setTimeout设置了延迟时间（比如setTimeout(() => {}, 200)），那tick()需要传入对应时长，比如tick(200)；你的代码里没设延迟，直接用tick()即可。

这样调整后，测试就能正确断言Modal的show方法被调用了。

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