Angular 材质单元测试：模拟 MatSelectChange 事件答案

【问题标题】：Angular Material Unit Testing: Mocking a MatSelectChange eventAngular 材质单元测试：模拟 MatSelectChange 事件
【发布时间】：2020-12-17 14:59:58
【问题描述】：

说明：我正在为以下功能编写单元测试：

updateUserStatus(event: MatSelectChange | any, reportID: number) {
    const matOption = (event.source.selected as MatOption);
    const option = matOption.value;
    this.setUserActions(reportID, option.id);
}

测试规范

it('should test updateUserStatus', () => {
    spyOn(component, 'updateUserStatus').and.callThrough();
    spyOn(component, 'setUserActions').and.callFake(() => {});
    component.updateUserStatus({{MOCK_EVENT_HERE}}, 123456);
    expect(component.updateUserStatus).toHaveBeenCalledTimes(1);
    expect(component.setUserActions).toHaveBeenCalledTimes(1);
});

问题：我发现很难模拟作为“MatSelectChange”实例的“事件”参数。

到目前为止我尝试了什么？

1.从浏览器控制台复制“事件”值

这给了我一个：

未捕获的 TypeError：将循环结构转换为 JSON。

2。创建一个新的 MatSelectChange 实例

'MatSelect' 构造函数需要 12-13 个参数哦，天哪！。不知道如何实例化：

const selectChange = new MatSelectChange(new MatSelect(), 'Value');

如果缺少任何其他细节，请告诉我这是否有助于更好地理解它。

【问题讨论】：

您是否尝试过创建一个包含代码所需关键字段的 javascript 对象，并将其转换为 MatSelectChange，然后再将其发送到测试中的函数？
不要窥探你应该测试的东西，或者直接调用组件上的方法。 setUserActions 实际上做了什么？测试组件的行为。
@NileshKesar 还没有，会试一试。
@jonrsharpe 单元测试应该很小，如果 function_A 有代码调用另一个 function_B 你不应该在关于 function_A 的测试中测试 function_B 代码，因为你可以测试的是它被调用了。跨度>
@PradeepVig 如果您需要示例，请告诉我。

标签： angular unit-testing angular-material mocking jasmine

【解决方案1】：

如果你仍然坚持这一点，我会发送一个纯 JavaScript 对象。

试试：

it('should test updateUserStatus', () => {
    spyOn(component, 'updateUserStatus').and.callThrough();
    spyOn(component, 'setUserActions').and.callFake(() => {});
    event.source.selected
    const mockMatSelectChange = {
      event: {
        source: {
         selected: {
           value: {
             id: '123', // mock ID to whatever it should be
           }
         } 
       }
      }
    };
    component.updateUserStatus(mockMatSelectedChange, 123456);
    expect(component.updateUserStatus).toHaveBeenCalledTimes(1);
    expect(component.setUserActions).toHaveBeenCalledTimes(1);
});

【讨论】：

这有帮助。虽然我试图从 DOM 操作中触发此方法，但没有成功。