【发布时间】:2018-11-24 17:30:36
【问题描述】:
我最近观看了 AssertJS 会议上的一些演讲(我强烈推荐),其中包括 @kentcdodds "Write Tests, Not Too Many, Mostly Integration"。我从事 Angular 项目一年多,编写了一些单元测试,刚开始使用 Cypress,但我仍然对集成测试感到沮丧,以及在哪里画线。我真的很想和一些日复一日的职业选手交谈,但我不知道我在哪里工作。由于我厌倦了无法弄清楚这一点,我想我只是在这里问世界,因为你们都很棒。
所以在 Angular(或 React 或 Vue 等)中,你有组件代码,然后你有 HTML 模板,通常它们以某种方式交互。组件代码中有可以进行单元测试的功能,我可以接受。
我还没想明白的地方是,当您测试组件功能如何更改 UI 时,您是否将其称为集成测试?如果您正在测试这种东西,是否应该仅在 E2E 测试中进行?因为 Angular/Jasmine(或 Jest)允许你做这种事情,引用 UI:
const el = fixture.debugElement.queryAll(By.css('button'));
expect(el[0].nativeElement.textContent).toEqual('Submit')
但这是否意味着您应该这样做?如果你这样做了,那么你不会在你的 E2E 测试中涵盖这一点吗?
关于与服务之类的集成,您在集成方面走了多远?如果你模拟实际的 HTTP 调用,并且只是测试它会被正确的函数调用,那是集成测试,还是仍然是单元测试?
总而言之,我直觉地知道我需要测试什么才能确信事情正在按应有的方式工作,我只是不确定如何辨别什么时候需要所有三种测试。
我知道这会越来越长,但这是我的示例应用:
有一个名为hasNoProducts 的属性在选择产品并从服务器返回数据后设置(如果没有,则不返回)。如果hasNoProducts 为真,UI(通过 *ngIf)会显示“抱歉”消息。如果为 false,则其他选项可用。根据选择的产品,这些选项会发生变化。
所以我知道我可以编写一个单元测试并模拟 HTTP 请求,以便我可以测试 hasNoProducts 是否设置正确。但是,我想测试是否显示了消息,或者是否显示了其他选项。如果有数据,请测试切换产品是否会更改随后显示在屏幕上的其他列表中的数据。如果我使用 Angular/Jasmine 执行此操作,它是否是集成测试,因为我正在“集成”组件和模板?如果不是,那么什么是集成测试?
我可以继续提问,但我会停下来,希望有人读到这里并有一些见解。同样,我已经阅读了大量文章,观看了大量视频并完成了教程,但是每次我坐下来申请一个真正的项目时,我都会被这样的事情困住,我想克服这些!提前致谢。
【问题讨论】:
标签: javascript angular unit-testing integration-testing e2e-testing