如何使用Jasmine编写Bootstrap弹窗打开功能的单元测试用例？

我来帮你梳理下原测试代码里的问题，再给出符合Angular + Jasmine规范的正确写法～

原测试的几个问题 #

• document.getElementById("#adduser") 这里多了#，getElementById的参数只需要id字符串，不需要选择器前缀；而且你要验证的是弹窗是否打开，不该去检查按钮的innerHTML
• 没有处理Angular的变更检测：点击按钮后，组件的状态变更需要触发变更检测才能更新视图
• 没考虑Bootstrap弹窗渲染/显示的异步性，直接断言会导致测试失败

正确的测试用例写法 #

假设你的Bootstrap弹窗在模板里是这样的（初始隐藏，点击按钮后显示）：

<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <!-- 弹窗内容 -->
  </div>
</div>

对应的测试代码应该是这样：

// 记得导入需要的模块
import { By } from '@angular/platform-browser';

it('should open Bootstrap modal when "add user" button is clicked', async(() => {
  // 获取按钮元素
  const addUserButton = fixture.debugElement.nativeElement.querySelector('#adduser');
  
  // 模拟用户点击按钮
  addUserButton.click();
  
  // 触发Angular变更检测，让视图更新
  fixture.detectChanges();
  
  // 等待所有异步操作完成（比如弹窗的动画、组件内部的异步逻辑）
  fixture.whenStable().then(() => {
    // 方式1：用fixture查询弹窗元素（更符合组件测试的隔离性）
    const modalDebugElement = fixture.debugElement.query(By.css('#addUserModal'));
    expect(modalDebugElement).toBeTruthy();
    
    const modalElement = modalDebugElement.nativeElement;
    // 断言弹窗处于显示状态（Bootstrap会给显示的弹窗添加.show类）
    expect(modalElement.classList.contains('show')).toBe(true);
    
    // 验证弹窗内部的modal-dialog存在
    const modalDialog = modalElement.querySelector('.modal-dialog');
    expect(modalDialog).toBeTruthy();

    // 方式2：如果弹窗是全局渲染的，也可以用document查询
    // const modalElement = document.getElementById('addUserModal');
    // expect(modalElement).toBeTruthy();
  });
}));

额外注意事项 #

• 如果你的弹窗是用*ngIf控制是否渲染的（而不是通过CSS类隐藏），那只需要断言弹窗元素存在即可，不需要检查show类
• 确保你的addUser()方法里正确触发了弹窗的显示逻辑（比如调用Bootstrap的modal('show')方法，或者控制弹窗的显示状态变量）
• 测试前可以先确保弹窗初始是隐藏/未渲染的，让测试更严谨：

it('should open Bootstrap modal when "add user" button is clicked', async(() => {
  // 初始状态断言：弹窗未显示
  const initialModal = fixture.debugElement.query(By.css('#addUserModal'));
  expect(initialModal.nativeElement.classList.contains('show')).toBe(false);
  
  // 点击按钮...后续逻辑同上
}));

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