为使用其他Web组件(子组件)的Web组件(父组件)编写测试时,父组件的测试是否应提供覆盖率以确保子组件的呈现/配置正确?
这里有一个例子,它可能是一个糟糕的例子,但让我们试试:假设我们有一个组件(WebComponent/React/Vue/Ember,这里的任何组件都可以):<Carousel @options=options>
,呈现各种子组件:例如<Video @options=options>
和<Image @option=options>
以及许多其它的。
Carousel组件从模型接收一组options
,如iconColor
和objectFit
,并以数据下的方式传递它,以便与子组件共享并由子组件使用。
我是否应该在<Image>
和<Carousel>
的测试中同时测试“用户可以配置图像的图标颜色”?
在<Carousel>
和<Image>
各自的测试中测试iconcolor
的成功配置对我来说似乎很尴尬,也不是很枯燥。如果<Carousel>
组件使用5个不同的组件,它的测试开始在大小上扩展,特别是如果我们添加更多的配置选项。
但同时,在两者中没有测试覆盖似乎非常脆弱。例如,如果我们依赖于<Image>
的测试覆盖来配置iconColor,<Image>
可以在任何时候被重构,开发人员可以更改用于设置iconColor的属性的名称,调整测试以匹配。开发人员将不会意识到<Carousel>
在配置iconColor时依赖于<Image>
的API。
1条答案
按热度按时间vbkedwbf1#
如果您的目标是尽可能实现最高的代码覆盖率,或者父组件和子组件的集成至关重要(即,如果不能以正确的方式将某些内容传递给子组件,那么事情可能会非常错误),那么您绝对应该测试父组件和子组件之间的多种可能的配置。
我明白你说它感觉不太干(在某些情况下,它真的不干)是什么意思,但你应该这样想:
在隔离子组件并测试各种配置的情况下,您的测试应该主要关注测试这些组件在DOM中对配置做了什么,或者测试与任何服务的边界,等等。
举个例子,如果我有一个
<Image>
组件,我将编写集成测试来Assert它的行为,当我给予它特定的属性或选项时。例如,如果我传入这些参数会发生什么?集成测试应该测试这些值对呈现的内容以及用户与图像的交互方式是否有影响。也许
width
和height
以百分比的形式设置<img>
标记的宽度和高度,并且单击图像应该调用提供给该组件的操作。另一方面,如果我已经有一个集成测试来测试
<Image />
组件所能做的一切,为什么还需要测试<Carousel />
组件是否可以呈现<Image />
组件呢?答案是测试这两个组件之间的集成,并确保父组件与子组件正确连接,换句话说,就是确保
<Carousel />
正确地将所有选项传递给其子组件。在某些情况下,这可能不是什么大问题,实际上,我认为这里的很多时间测试都可以忽略,但就像我前面所说的,如果集成是关键的,那么你必须测试父级是如何将选项传递给子级的。
为了说明这是如何提供覆盖率的,假设我将
<Carousel />
组件的模板连接起来,如下所示:传送带.hbs
通过这个例子,你可以清楚地看到发生了什么--我的意思是把这个动作连接成
@onClick
,而不是@onChange
。然而,我对<Image />
的所有集成测试都通过了,所以如果不测试<Carousel />
组件如何将属性传递给其子组件,我将缺少覆盖率,这个bug有更大的机会进入生产。使它不干的部分是查看父级的集成测试,并且必须编写非常相似的代码(即,确保当我单击图像时它调用正确的操作)。有时候没有真实的好的方法来实现这一点--我认为这类场景可能会忽略集成。其他时候,可以做一些事情来减少重复测试代码的数量。
在Ember中,有时传入的属性与子组件的特定类名绑定(以及其他功能)。与其重复一个检查“子组件的行为是否正确?"的测试,我们可以编写一个检查“子组件是否收到了正确的属性?”的集成测试。
例如,如果我们的父组件是这样连接的:
传送带.hbs
假设此
@someFlag
属性执行以下操作:当
@someFlag
为true时,<Image />
组件的集成测试将测试所有这些内容。但是,<Carousel />
组件的集成测试可以简单地检查:“<Image />
组件是否具有预期的类名?”这实际上是减少需要编写的重复测试代码量的一种非常常用的方法。当然,在有些情况下,你不需要测试集成。如果
<Carousel />
只是把它接收到的任何东西传递给它的孩子,那么你就有理由反对为这类事情编写集成测试。