角因果报应/茉莉花单元测试用例:测试范围

Question

我读过几本关于单元测试的指南，我理解在单元测试中，我只应该测试该组件中的逻辑。任何子组件都应该单独进行测试。然而，我仍然不知道该测试什么。

例如，我有一个概述组件，其中包含两个子组件，<app-refresh-button>和<canvas baseChart ...>，它们使用包装器库NG2-map (chartjs)。

<h1>Overview</h1>

<app-refresh-button 
  [isLoading]="isLoading"
  (onIntervalChange)="onSelectNewInterval($event)" 
  (onRefresh)="onRefreshManualClick($event)">
</app-refresh-button>

<canvas baseChart 
    [datasets]="lineChartData"
    ... ...
    (chartclick)="onChartClicked($event)"
</canvas>

单击“刷新”按钮后，数据点将插入到lineChartData数组中，并在图形上绘制。

现在，我感到困惑的是：

• 因为<app-refresh-button>是一个子组件，所以我没有在单元测试中测试它，对吗？
• 如果是的话，刷新按钮中的逻辑和图形的绘图是连接在一起的，如果我不一起测试它们，我如何知道它们一起工作？
• 像"pushingNewDataPoints()“这样的函数(它将新数据推送到lineChartData数组中，也在这个概述组件中)，我要测试它们吗？

Answer 1

既然是子组件，我不会在单元测试中测试它，对吗？

是的，你不应该在单元测试中测试它。

如果是的话，刷新按钮中的逻辑和图形的绘图是连接在一起的，如果我不一起测试它们，我如何知道它们一起工作？

我相信有两种选择：

1. 浅/集成测试-在这些测试中，您提供了真正的组件和依赖项。然后，您可以检查它们之间的交互，因为后面有真正的实现。您应该切断沉重的服务/模块，如HttpClientModule、RouterModule或提供它们的测试等价物。
2. 第二种选择--不要提供真正的子组件，而是为那些允许您测试用例的组件创建真正简单的模拟(事件，如果设置了数据，等等)。完成之后，您可以通过triggerEventHandler方法从DebugElement触发事件。还有一个选项是根本不提供子组件(注意这一点)- schema然后从HTMLElement用dispatchEvent方法触发事件。

像"pushingNewDataPoints()“这样的函数(它将新数据推送到lineChartData数组中，也在这个概述组件中)，我要测试它们吗？

看起来lineChartData是公共的，所以您可以在app-refresh-button上触发更改lineChartData的事件，然后检查是否包含正确的值。

Answer 2

这个问题很难回答，因为它是基于意见的。

但就我个人而言，我将测试那些子组件上的所有属性绑定和事件绑定，而不进行测试，即实际的子组件对那些输入和输出做正确的事情。

这方面的一个有用的设置是在NO_ERRORS_SCHEMA设置内设置TestBed。

有了这个设置，对于事件绑定，您可以使用triggerEventHandler。

const debugElem = fixture.debugElement.get(By.css('app-refresh-button'));
debugElem.triggerEventHandler('onIntervalChange', THE_EVENT_DATA_YOU_WANT_TO_USE_INSIDE_THE_TEST)

tick();

expect()...

对于属性绑定，也可以从debugElement访问这些属性：

const debugElem = fixture.debugElement.get(By.css('app-refresh-button'));
expect(debugElem.properties['isLoading']).toEqual(...)

使用这些构造，您可以测试来自刷新按钮的一个输出是否更改了画布中的输入，等等，但您不测试组件如何处理这些输入和输出。

希望这能有所帮助。