如何单元测试MatDialog是否关闭及mat-dialog-close传参正确性

我来帮你搞定这两个单元测试的写法，核心是模拟MatDialog的依赖，不用真的启动弹窗，只验证你的组件是否正确触发了关闭行为和参数传递：

首先，在测试文件里我们需要通过TestBed配置组件，并且模拟MatDialogRef（这是弹窗的引用对象，组件通过它来关闭弹窗）。我们可以用Jasmine的spyObj来创建一个带close方法的模拟对象，这样就能追踪这个方法的调用情况。

示例代码：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatDialogRef } from '@angular/material/dialog';
import { By } from '@angular/platform-browser';
import { YourDialogComponent } from './your-dialog.component';

describe('YourDialogComponent', () => {
  let component: YourDialogComponent;
  let fixture: ComponentFixture<YourDialogComponent>;
  // 创建模拟的MatDialogRef，带有close方法的spy
  let dialogRefSpy: jasmine.SpyObj<MatDialogRef<YourDialogComponent>>;

  beforeEach(async () => {
    dialogRefSpy = jasmine.createSpyObj('MatDialogRef', ['close']);

    await TestBed.configureTestingModule({
      declarations: [YourDialogComponent],
      providers: [
        // 提供模拟的MatDialogRef，替代真实的依赖
        { provide: MatDialogRef, useValue: dialogRefSpy }
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourDialogComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
});

接下来，我们需要找到带有mat-dialog-close属性的按钮，模拟点击它，然后验证dialogRef.close方法是否被调用。

添加这个测试用例：

it('should close the dialog when the close button is clicked', () => {
  // 获取带有mat-dialog-close属性的按钮
  const closeButton = fixture.debugElement.query(By.css('button[mat-dialog-close]'));
  
  // 模拟点击按钮
  closeButton.triggerEventHandler('click', null);
  
  // 验证close方法被调用
  expect(dialogRefSpy.close).toHaveBeenCalled();
});

如果你的按钮是通过静态值传递参数（比如<button mat-dialog-close="success">确认</button>），或者动态绑定参数（比如<button [mat-dialog-close]="resultData">确认</button>），我们只需要验证close方法被调用时传入了正确的参数。

情况1：静态参数 #

it('should pass the correct static parameter when closing', () => {
  const closeButton = fixture.debugElement.query(By.css('button[mat-dialog-close]'));
  closeButton.triggerEventHandler('click', null);
  
  // 验证close被调用时传入了"success"
  expect(dialogRefSpy.close).toHaveBeenCalledWith('success');
});

情况2：动态绑定参数 #

假设你的组件里有一个属性resultData，比如：

// 组件类里的代码
resultData = { id: 123, status: 'approved' };

按钮是<button [mat-dialog-close]="resultData">确认</button>，那么测试用例可以这么写：

it('should pass the correct dynamic parameter when closing', () => {
  // 可以先修改组件的参数，验证不同场景
  component.resultData = { id: 456, status: 'rejected' };
  fixture.detectChanges(); // 更新视图

  const closeButton = fixture.debugElement.query(By.css('button[mat-dialog-close]'));
  closeButton.triggerEventHandler('click', null);
  
  // 验证close被调用时传入了我们设置的参数
  expect(dialogRefSpy.close).toHaveBeenCalledWith({ id: 456, status: 'rejected' });
});

这样写的好处是，我们完全聚焦在你的组件逻辑上：验证组件是否正确响应按钮点击，调用了关闭方法并传递了预期的参数，而不是去测试Angular Material的MatDialog本身的功能（那是Angular团队的工作）。

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