Angular Jasmine，分配全局变量时单元测试用例失败

Question

我有一个为两种方法编写的基本单元测试用例。

 it('should populateChartDatasets call getColorCodes', () => {
    component.chartConfig = mockChartConfig;
    spyOn(component, 'getColorCodes');
    component.populateChartDatasets(filteredTreatments, filteredYears);
    expect(component.getColorCodes).toHaveBeenCalled();
  });

方法 populateChartDatasets 首先应该从方法 getColorCodes 中选择 colorCode 然后将准备好的数据集推送到 chartConfig.data.datasets.

命令后一切正常ng serve

但是这个测试用例失败并抛出下面的错误

should populateChartDatasets call getColorCodes FAILED
        TypeError: Cannot read properties of undefined (reading '0')

在方法 populateChartDatasets 中，这一行 this.chartConfig.data.datasets.push({}) 失败了，因为 component.chartConfig = mockChartConfig 下的方法似乎没有等待对 chartConfig 对象的赋值，这就是 data.datasets 抛出的原因未定义。

我给了 setTimeout 500ms 解决了问题（至少成功但控制台抛出另一个错误）

  it('should populateChartDatasets call getColorCodes', () => {
    component.chartConfig = mockChartConfig;
    setTimeout(() => {
      spyOn(component, 'getColorCodes');
      component.populateChartDatasets(filteredTreatments, filteredYears);
      expect(component.getColorCodes).toHaveBeenCalled();
    }, 500);
  });

Spies must be created in a before function or a spec

我怎样才能通过这个测试？

Stackblitz 示例：https://stackblitz.com/edit/unit-test-template-337ysq?file=src/app/app.component.spec.ts

Answer 1

这里只有一个问题，因此当您在内部调用“populateChartDatasets”方法时，它依赖于“getColorCodes”方法来 return 一个字符串。没有这个过程，“populateChartDatasets”方法永远不会完成。要解决这个问题，您可以这样做 -

it('should populateChartDatasets call getColorCodes', () => {
    spyOn(component, 'getColorCodes').and.callFake(d => {
      return "#ffffff"
    });
    component.populateChartDatasets(filteredTreatments, filteredYears);
    expect(component.getColorCodes).toHaveBeenCalled();
});

Angular Jasmine，分配全局变量时单元测试用例失败

Angular Jasmine, unit test case fails when global variable assigned

unit-testing

jasmine

karma-runner

angular