Angular 15中MatTestDialogOpener的用途及正确使用方法咨询

错误原因说明 #

你遇到的NG0202依赖注入错误，是因为直接初始化ResultsComponent时，没有正确提供MatDialogRef和MAT_DIALOG_DATA这两个必需依赖。而MatTestDialogOpener的作用就是帮你在测试环境中自动模拟对话框的运行上下文，无需手动配置这些依赖，但需要按正确方式搭建测试模块。

完整测试示例代码 #

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ResultsComponent } from './results.component';
import { MatTestDialogOpener } from '@angular/material/dialog/testing';
import { MatDialogModule } from '@angular/material/dialog';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

describe('ResultsComponent', () => {
  let opener: MatTestDialogOpener<ResultsComponent>;
  let fixture: ComponentFixture<MatTestDialogOpener<ResultsComponent>>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        MatDialogModule,
        BrowserAnimationsModule // Material组件测试必需的动画模块
      ],
      declarations: [ResultsComponent]
      // 无需手动提供MatDialogRef和MAT_DIALOG_DATA，MatTestDialogOpener会自动处理
    }).compileComponents();

    // 创建MatTestDialogOpener的实例，而非直接创建ResultsComponent
    fixture = TestBed.createComponent(MatTestDialogOpener<ResultsComponent>);
    opener = fixture.componentInstance;
  });

  it('应正确打开对话框并传入测试数据', () => {
    const testData = { results: ['测试项1', '测试项2'] };
    // 调用open方法传入组件和数据，自动注入依赖
    opener.open(ResultsComponent, { data: testData });
    fixture.detectChanges();

    // 验证对话框实例和传入数据的正确性
    expect(opener.dialogRef).toBeTruthy();
    expect(opener.componentInstance.data).toEqual(testData);
  });

  it('应能关闭对话框并返回指定结果', () => {
    opener.open(ResultsComponent);
    fixture.detectChanges();

    const mockCloseResult = { status: 'completed' };
    // 通过组件实例的dialogRef模拟关闭操作
    opener.componentInstance.dialogRef.close(mockCloseResult);

    // 验证关闭结果的正确性
    opener.dialogRef.afterClosed().subscribe(result => {
      expect(result).toEqual(mockCloseResult);
    });
  });
});

MatTestDialogOpener 核心用途 #

• 脱离父组件上下文测试：专门用于在测试中直接启动Material对话框组件，无需依赖触发对话框的父组件，简化独立组件测试场景。
• 自动处理依赖注入：内部自动为对话框组件提供MatDialogRef和MAT_DIALOG_DATA的实例，避免手动配置依赖时出现的注入错误。
• 便捷的实例访问：通过opener.componentInstance直接访问对话框组件实例，opener.dialogRef访问对话框引用，方便测试组件逻辑与交互。
• 兼容Material Harness：可结合Angular Material的Harness API，稳定测试对话框的UI交互（如按钮点击、内容渲染等）。

注意事项 #

• 测试模块必须导入MatDialogModule和BrowserAnimationsModule（若组件使用动画）。
• 无需在TestBed中声明MatTestDialogOpener，它是MatDialogModule测试包提供的内置指令。
• 若对话框组件存在其他额外依赖，需在TestBed的providers中手动添加。

内容的提问来源于stack exchange，提问作者Théophile Dodemont