Question

我已经阅读了一些有关单元测试的指南，并且我了解在单元测试中，我只应该测试该组件中的逻辑。任何子组件均应单独测试。但是，我仍然对要测试的内容感到困惑。

例如情景我有一个概述组件，其中有两个子组件<app-refresh-button>和<canvas baseChart ...>，它们使用包装器库ng2-charts（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

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

但就我个人而言，我将测试这些子组件上的所有属性绑定和事件绑定，而无需测试，即实际的子组件对这些输入和输出执行正确的操作。

对此有用的设置是在TestBed设置中设置NO_ERRORS_SCHEMA。

具有此设置，对于事件绑定，您可以使用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(...)

使用这些构造，您可以测试刷新按钮的一个输出是否会更改画布中的输入，依此类推，但您无需测试组件对这些输入和输出的作用。

希望这会有所帮助。

Answer 2

由于是子组件，因此我不会在单元测试，对吗？

是的，您不应该在单元测试中对其进行测试。

如果是，则刷新按钮中的逻辑和图形的绘制为链接在一起，如果我不一起测试它们，我怎么知道它们正在一起工作？

我相信有两种选择：

浅/集成测试-在这些测试中，您提供了真实的组件和依赖项。然后您可以检查它们之间的相互作用因为后面有真正的实现。您应该切断的是诸如HttpClientModule，RouterModule之类的繁重的服务/模块，或者提供与它们等效的测试。
第二个选项-不提供真正的子组件，而是为那些组件创建非常简单的模拟，以允许您测试案例（事件，如果设置了数据等）。完成此操作后，您可以通过triggerEventHandler中的DebugElement方法触发事件。还可以选择完全不提供子组件（护理这样）-https://angular.io/guide/testing#no_errors_schema 然后使用dispatchEvent中的HTMLElement方法触发事件。

有关诸如“ pushingNewDataPoints（）”之类的功能的问题，将新数据放入lineChartData数组中概述组件，我要对其进行测试吗？

lineChartData似乎是公开的，因此您可以在app-refresh-button上触发更改lineChartData的事件，然后检查是否包含正确的值。

Angular Karma / Jasmine单元测试用例：测试范围

2 个答案: