mat 小吃店单元测试消息为空答案

【问题标题】：mat snackbar unit test message is nullmat 小吃店单元测试消息为空
【发布时间】：2019-10-14 18:05:10
【问题描述】：

我有一个自定义服务使用matSnackbar 来显示警报，还有一个自定义matSnackbar 组件用作snackBar 的模板。我为它编写了一个单元测试，并想测试在其中显示我的消息：

fit('should show my alert message',  () => {
    service.openSnackBarFromComponent('lia lia');
    expect(element.querySelector('.message-container span').innerText).toBe('lia lia');
  });

我在浏览器中看到它显示了我的消息"lia lia"，但在上面的测试中.message-container span 的内容为空。我的问题是为什么它显示 null 和/或任何其他方式来测试我的消息？

【问题讨论】：

尝试使用fixture.detectChanges()。但是您不应该测试消息是否显示，因为它不是您自己的代码：您应该简单地测试方法 openSnackBarFromComponent 是否被调用。如果你不这样做，明天你改变你的 UI 库，你的测试就不会通过了。
@Maryannah 非常感谢，fixture.detectChanges() 解决了我的问题。我是单元测试的新手，我会这样做，谢谢。
那么让我来回答一下我的评论。
@Maryannah 当然是的。

标签： angular unit-testing angular-material

【解决方案1】：

根据我的评论，fixture.detectChanges 应该可以解决您的问题。

至于单元测试：您一定已经猜到了，单元测试意味着测试一个单元。

一个单元就是一段代码

你自己写的
在给定范围（函数、类）中定义的
具有依赖关系（注入、参数...）

当你测试那个单元时，你需要遵守几个步骤

模拟依赖项
隔离单元
测试副作用

单元测试的目的是防止修改的副作用。

例如，如果 HTTP 答案为 200，则您有一个简单地将按钮着色为绿色的组件。

单元测试的目的是确保如果答案是 200，颜色变为绿色。

这意味着如果您没有收到 200，颜色不应该改变，如果您收到 200，颜色应该只是绿色。

应用于您的案例，您的测试目的是确保使用您的自定义组件调用snacker。

测试小吃店的工作不是你的目的。小吃吧本身就是一个单元，你没有编码：小吃吧的单元测试是由 Angular Material 单元测试测试的，而不是你。

没关系，您的测试没有错：它只是另一个测试的副本，因此从已经过测试的意义上说它是“无用的”。

如果您继续这样进行测试，您将花费 3 到 4 倍的时间进行测试，这最终不会产生成效。

【讨论】：