如何测试Angular 5项目中的Material2 SnackBar组件？

别担心，我来一步步教你搞定这个ComponentWithSnackBar的测试代码，覆盖方法调用验证和DOM渲染检查两个核心点。

首先先把你的测试环境配置完善，确保TestBed能正确注入MatSnackBar和Overlay相关依赖：

describe('ComponentWithSnackBar', () => {
  let component: ComponentWithSnackBar;
  let fixture: ComponentFixture<ComponentWithSnackBar>;
  let snackBar: MatSnackBar;
  let overlayContainer: OverlayContainer;
  let overlayContainerElement: HTMLElement;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ComponentWithSnackBar],
      // 必须导入Material相关模块才能测试SnackBar
      imports: [MatSnackBarModule, OverlayModule],
      // 如果组件有其他依赖（比如自定义服务），记得在这里提供mock实例或真实服务
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ComponentWithSnackBar);
    component = fixture.componentInstance;
    // 注入所需服务实例
    snackBar = TestBed.inject(MatSnackBar);
    overlayContainer = TestBed.inject(OverlayContainer);
    overlayContainerElement = overlayContainer.getContainerElement();
    fixture.detectChanges();
  });

  // 测试后清理Overlay容器，避免残留元素污染其他测试
  afterEach(() => {
    overlayContainer.clear();
  });

  // 第一个测试：验证showSnackBar方法是否正确调用MatSnackBar.open
  it('triggers MatSnackBar.open with expected parameters when showSnackBar is called', () => {
    // 给snackBar.open方法打间谍，跟踪调用情况
    const snackBarOpenSpy = spyOn(snackBar, 'open').and.callThrough();

    // 调用组件的目标方法
    component.showSnackBar();

    // 验证间谍是否被正确调用，参数完全匹配预期
    expect(snackBarOpenSpy).toHaveBeenCalledWith(
      'Message text',
      'Close',
      { duration: 5000, verticalPosition: 'top' }
    );
  });

  // 第二个测试：验证SnackBar是否正确渲染到DOM中
  it('renders the snack bar with correct message and action button', () => {
    // 触发SnackBar显示
    component.showSnackBar();
    // 触发变更检测，确保视图更新完成
    fixture.detectChanges();

    // 检查Overlay容器中是否存在SnackBar的容器元素
    const snackBarContainer = overlayContainerElement.querySelector('.mat-snack-bar-container');
    expect(snackBarContainer).toBeTruthy('SnackBar容器未成功渲染');

    // 验证消息文本是否正确
    const messageText = snackBarContainer.querySelector('.mat-simple-snackbar span')?.textContent;
    expect(messageText).toContain('Message text');

    // 验证关闭按钮的文本是否正确
    const actionButtonText = snackBarContainer.querySelector('.mat-simple-snackbar-action button')?.textContent;
    expect(actionButtonText).toContain('Close');
  });
});

几个关键注意点： #

• 必须导入MatSnackBarModule和OverlayModule：SnackBar依赖Overlay服务来将弹窗渲染到全局容器中，测试时需要这些模块提供的依赖支持。
• 用spyOn跟踪方法调用：确保你的组件确实触发了snackBar.open，并且传递的参数和业务逻辑完全一致。
• 检查DOM元素：通过OverlayContainer获取SnackBar的实际渲染元素，验证UI内容是否正确，这能确保不仅方法调用了，用户能看到的内容也符合预期。
• 清理Overlay容器：每个测试结束后调用overlayContainer.clear()，避免前一个测试的SnackBar残留影响后续测试结果。

这样写出来的测试就能完整覆盖你的showSnackBar功能啦，既验证了逻辑调用，又验证了UI渲染效果~

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