Question

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

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的内容为空。我的qusetion是为什么它显示null或其他方式来测试我的消息？

Answer 1

在我发表评论后，fixture.detectChanges应该可以解决您的问题。

关于单元测试：正如您已经猜到的那样， unit 测试意味着测试一个单元。

单位是一段代码

你写了自己
具有依赖性（注入，参数...）

测试该单元时，您需要遵循几个步骤

模拟依赖项
隔离部队
测试副作用

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

例如，您有一个组件，如果HTTP答案为200，该组件只会将按钮变成绿色。

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

这意味着，如果您没有收到200，则颜色不会更改；如果您收到200，则颜色应该仅为绿色。

根据您的情况，测试的目的是确保使用您的自定义组件调用零食。

测试快餐店的作品不是您的目的。快餐栏本身就是一个单元，您没有编写代码：快餐栏的单元测试是由Angular Material单元测试而不是您进行的。

好的，您的测试没错：它只是另一个测试的重复，因此就已经经过测试而言是“无用的”。

如果继续进行这样的测试，您将花费3到4倍的测试时间，最终收效甚微。

垫快餐栏单元测试消息为空

1 个答案: