测试消耗额外组件的组件的关注点分离是什么
What are the separations of concerns for testing a component that consumes additional components
在为使用其他 Web 组件（子）的 Web 组件（父）编写测试时，父的测试是否应该提供覆盖以确保子 rendering/configured 正确？
这是一个例子，它可能是一个糟糕的例子，但让我们试试：假设我们有一个组件（WebComponent/React/Vue/Ember，任何组件都可以在这里做）：<Carousel @options=options> 它呈现各种子组件：例如 <Video @options=options> 和 <Image @option=options> 以及许多其他人。
Carousel 组件从模型接收一组 options，例如 iconColor 和 objectFit，并以 datadown 方式传递，以与子组件。
我是否应该在 <Image> 和 <Carousel> 的测试中测试“用户可以为图像配置 iconcolor”？
在 <Carousel> 和 <Image> 的各自测试中测试 iconcolor 的成功配置对我来说似乎很尴尬而且不是很干。如果 <Carousel> 组件使用 5 个不同的组件，它的测试会开始扩展，尤其是当我们添加更多配置选项时。
但与此同时，两者都没有测试覆盖率似乎很脆弱。例如，如果我们依赖 <Image> 的测试覆盖率来配置 iconColor，那么 <Image> 可以随时重构，开发人员可以更改 属性 的名称来设置 iconColor，调整测试匹配。开发人员不会意识到 <Carousel> 依赖于 <Image> 的 API 来配置 iconColor。
如果您的目标是获得尽可能高的代码覆盖率，或者 parent 组件和 child 组件的集成是最重要的（即，如果它不提供任何东西以正确的方式关闭 child 组件然后事情可能会变得 非常 错误）那么你绝对应该测试 parent 和 [=93] 之间的多种可能配置=] 组件。
我理解你说它感觉不太干（在某些形式或情况下它确实不干）的意思，但你应该这样想：
在您隔离 child 组件并测试各种配置的情况下，您的测试应该主要关注测试 什么 这些组件在以下情况下对配置进行的操作它涉及 DOM 或测试任何服务的边界等
使用你的例子，如果我有一个 <Image> 组件，我将编写我的集成测试来断言当我给它特定的道具或选项时它的行为。例如，如果我传入这些参数会发生什么情况？
<Image @width=100 @height=100 @onClick={{action "doSomething"}} />
集成测试应测试这些值是否对其呈现的内容以及用户与图像的交互方式有一定影响。也许 width 和 height 以百分比设置 <img> 标签的宽度和高度，点击图像应该调用提供给该组件的操作。
另一方面，如果我已经有一个集成测试来测试 <Image />组件可以做什么？
答案是测试这两个组件之间的集成，并确保 parent 组件与 children 正确连接。换句话说，这是为了确保 <Carousel /> 将任何和所有选项正确地 传递给其 child 组件。
在某些情况下，这可能不是什么大问题，实际上我认为这里的很多时间测试都可以忽略，但正如我之前所说，如果集成很关键，那么你必须测试如何parent 正在将选项传递给 children.
为了说明这如何提供覆盖，假设我像这样连接 <Carousel /> 组件的模板：
carousel.hbs
<Image @width=50 @height=50 @onChange={{action "doSomething"}} />
看到这里，您可以清楚地看到发生了什么 -- 我的意思是将该操作连接为 @onClick，而不是 @onChange。然而，我对 <Image /> 的所有集成测试都通过了，所以如果不测试 <Carousel /> 组件如何将属性传递给它的 children，我将缺乏覆盖范围，并且这个错误更有可能发生投入生产。
让它不干的部分是查看 parent 的集成测试并且必须编写非常相似的代码（即确保当我单击图像时它调用正确的操作）。有时没有很好的方法来解决这个问题——我认为在这些场景中可能会忽略集成。其他时候可以做一些事情来减少重复测试代码的数量。
在 Ember 中，有时传入 属性 会绑定到 child 组件的特定 class 名称（除其他功能外）。我们可以编写一个检查 "did the child component receive the correct property?"
的集成测试，而不是复制检查 "is the child's component behavior correct?" 的测试
例如，如果我们的 parent 组件是这样连接的：
carousel.hbs
<Image @someFlag=true />
假设此 @someFlag 属性 执行以下操作：
- 向图像添加 class
- 使图像在鼠标悬停时变大
- 单击图像时发出网络请求以报告一些用户指标
<Image /> 组件的集成测试将在 @someFlag 为真时测试所有这些内容。然而，我们的 <Carousel /> 组件的集成测试可以简单地检查，而不是重复那个确切的测试： "does the <Image /> component have the expected class name?" 这实际上是减少您需要编写的重复测试代码量的一种非常常见的方法。
当然在某些情况下您 不需要 测试集成。如果 <Carousel /> 只是将它收到的任何东西传递给它的 children 那么你就有理由反对为这种事情编写集成测试。
在为使用其他 Web 组件（子）的 Web 组件（父）编写测试时，父的测试是否应该提供覆盖以确保子 rendering/configured 正确？
这是一个例子，它可能是一个糟糕的例子，但让我们试试：假设我们有一个组件（WebComponent/React/Vue/Ember，任何组件都可以在这里做）：<Carousel @options=options> 它呈现各种子组件：例如 <Video @options=options> 和 <Image @option=options> 以及许多其他人。
Carousel 组件从模型接收一组 options，例如 iconColor 和 objectFit，并以 datadown 方式传递，以与子组件。
我是否应该在 <Image> 和 <Carousel> 的测试中测试“用户可以为图像配置 iconcolor”？
在 <Carousel> 和 <Image> 的各自测试中测试 iconcolor 的成功配置对我来说似乎很尴尬而且不是很干。如果 <Carousel> 组件使用 5 个不同的组件，它的测试会开始扩展，尤其是当我们添加更多配置选项时。
但与此同时，两者都没有测试覆盖率似乎很脆弱。例如，如果我们依赖 <Image> 的测试覆盖率来配置 iconColor，那么 <Image> 可以随时重构，开发人员可以更改 属性 的名称来设置 iconColor，调整测试匹配。开发人员不会意识到 <Carousel> 依赖于 <Image> 的 API 来配置 iconColor。
如果您的目标是获得尽可能高的代码覆盖率，或者 parent 组件和 child 组件的集成是最重要的（即，如果它不提供任何东西以正确的方式关闭 child 组件然后事情可能会变得 非常 错误）那么你绝对应该测试 parent 和 [=93] 之间的多种可能配置=] 组件。
我理解你说它感觉不太干（在某些形式或情况下它确实不干）的意思，但你应该这样想：
在您隔离 child 组件并测试各种配置的情况下，您的测试应该主要关注测试 什么 这些组件在以下情况下对配置进行的操作它涉及 DOM 或测试任何服务的边界等
使用你的例子，如果我有一个 <Image> 组件，我将编写我的集成测试来断言当我给它特定的道具或选项时它的行为。例如，如果我传入这些参数会发生什么情况？
<Image @width=100 @height=100 @onClick={{action "doSomething"}} />
集成测试应测试这些值是否对其呈现的内容以及用户与图像的交互方式有一定影响。也许 width 和 height 以百分比设置 <img> 标签的宽度和高度，点击图像应该调用提供给该组件的操作。
另一方面，如果我已经有一个集成测试来测试 <Image />组件可以做什么？
答案是测试这两个组件之间的集成，并确保 parent 组件与 children 正确连接。换句话说，这是为了确保 <Carousel /> 将任何和所有选项正确地 传递给其 child 组件。
在某些情况下，这可能不是什么大问题，实际上我认为这里的很多时间测试都可以忽略，但正如我之前所说，如果集成很关键，那么你必须测试如何parent 正在将选项传递给 children.
为了说明这如何提供覆盖，假设我像这样连接 <Carousel /> 组件的模板：
carousel.hbs
<Image @width=50 @height=50 @onChange={{action "doSomething"}} />
看到这里，您可以清楚地看到发生了什么 -- 我的意思是将该操作连接为 @onClick，而不是 @onChange。然而，我对 <Image /> 的所有集成测试都通过了，所以如果不测试 <Carousel /> 组件如何将属性传递给它的 children，我将缺乏覆盖范围，并且这个错误更有可能发生投入生产。
让它不干的部分是查看 parent 的集成测试并且必须编写非常相似的代码（即确保当我单击图像时它调用正确的操作）。有时没有很好的方法来解决这个问题——我认为在这些场景中可能会忽略集成。其他时候可以做一些事情来减少重复测试代码的数量。
在 Ember 中，有时传入 属性 会绑定到 child 组件的特定 class 名称（除其他功能外）。我们可以编写一个检查 "did the child component receive the correct property?"
的集成测试，而不是复制检查 "is the child's component behavior correct?" 的测试例如，如果我们的 parent 组件是这样连接的：
carousel.hbs
<Image @someFlag=true />
假设此 @someFlag 属性 执行以下操作：
- 向图像添加 class
- 使图像在鼠标悬停时变大
- 单击图像时发出网络请求以报告一些用户指标
<Image /> 组件的集成测试将在 @someFlag 为真时测试所有这些内容。然而，我们的 <Carousel /> 组件的集成测试可以简单地检查，而不是重复那个确切的测试： "does the <Image /> component have the expected class name?" 这实际上是减少您需要编写的重复测试代码量的一种非常常见的方法。
当然在某些情况下您 不需要 测试集成。如果 <Carousel /> 只是将它收到的任何东西传递给它的 children 那么你就有理由反对为这种事情编写集成测试。