测试 Angular 应用时出现 ng2-charts 错误

Question

当我运行使用包含图表的组件进行测试时，出现错误 TypeError: Cannot read property 'getBasePixel' of undefined。我不确定发生了什么，我尝试查找内容，但没有找到任何相关内容。我有测试导入图表模块，我真的想不出还有什么可能是错误的。我唯一的想法可能是在 async beforeEach 中导入的图表模块意味着它不能立即用于组件？或者也许因为它是在 "smaller" 浏览器中呈现的，所以它无法正常工作？想不通了。

我的测试是这样的：

import { HttpClientModule } from '@angular/common/http';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ChartsModule } from 'ng2-charts';
import { PlantsService } from '../plant/plants.service';
import { MockPlantsService } from '../plant/plants.service.mock';
import { DashboardComponent } from './dashboard.component';

describe('DashboardComponent', () => {
  let component: DashboardComponent;
  let fixture: ComponentFixture<DashboardComponent>;
  let plantsService: PlantsService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ChartsModule,
        HttpClientModule,
        RouterTestingModule,
      ],
      declarations: [
        DashboardComponent,
      ],
    }).compileComponents();
  }));

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        DashboardComponent,
        { provide: PlantsService, useClass: MockPlantsService },
      ],
    });
    fixture = TestBed.createComponent(DashboardComponent);
    component = fixture.componentInstance;
    plantsService = TestBed.inject(PlantsService);
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

和组件：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';
import { Subscription } from 'rxjs';
import { Plant } from '../plant/plant.model';
import { PlantsService } from '../plant/plants.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
})
export class DashboardComponent implements OnInit, OnDestroy {
  public isLoading = false;
  private plantSub: Subscription;
  private plantInfoSub: Subscription;
  public plantList: Plant[];
  public selectedPlant: Plant;

  // Chart configuration stuff goes here, Removed for brevity

  constructor(private plantsService: PlantsService) { }

  ngOnInit() {
    this.isLoading = true;
    this.plantsService.getPlants();
    this.plantSub = this.plantsService.getPlantsUpdateListener().subscribe((plantData: { plants: Plant[] }) => {
      this.isLoading = false;
      this.plantList = plantData.plants;
      if (this.plantList) {
        this.getPlantInfo(this.plantList[0]);
      }
    });
  }

  getPlantInfo(plant: Plant) {
    if (!plant) { return; }
    this.plantsService.getPlantInfo(plant.id);
    this.plantInfoSub = this.plantsService.getPlantInfoUpdateListener().subscribe((plantInfo: { plant: Plant }) => {
      plant = Object.assign(plant, plantInfo.plant);
      this.lineChartData = [Plant.getChartData(plant.humidityHistory, 'Humidity')];
      if (plant.soilMoistureHistory) {
        this.lineChartData.push(Plant.getChartData(plant.soilMoistureHistory, 'Soil Moisture'));
      }
      this.lineChartLabels = Plant.getPlantHistoryTimestamp(plant.humidityHistory);
    });
  }

  ngOnDestroy() {
    this.plantSub?.unsubscribe();
    this.plantInfoSub?.unsubscribe();
  }
}

编辑：

堆栈跟踪：

 at <Jasmine>
    at ChartElement.updateElement (http://localhost:9876/_karma_webpack_/node_modules/chart.js/dist/Chart.js:5931:1)
    at ChartElement.update (http://localhost:9876/_karma_webpack_/node_modules/chart.js/dist/Chart.js:5903:1)
    at ChartElement._update (http://localhost:9876/_karma_webpack_/node_modules/chart.js/dist/Chart.js:3831:1)
    at ChartElement.reset (http://localhost:9876/_karma_webpack_/node_modules/chart.js/dist/Chart.js:3733:1)
    at http://localhost:9876/_karma_webpack_/node_modules/chart.js/dist/Chart.js:9638:1
    at Object.each (http://localhost:9876/_karma_webpack_/node_modules/chart.js/dist/Chart.js:2227:1)
    at Chart.update (http://localhost:9876/_karma_webpack_/node_modules/chart.js/dist/Chart.js:9637:1)
    at Chart.construct (http://localhost:9876/_karma_webpack_/node_modules/chart.js/dist/Chart.js:9357:1)
    at new Chart (http://localhost:9876/_karma_webpack_/node_modules/chart.js/dist/Chart.js:9294:1)
    at BaseChartDirective.getChartBuilder (http://localhost:9876/_karma_webpack_/node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js:677:1)

Answer 1

我最终切换到 ngx-charts，因为 ng2-charts 不再被维护。测试期间没有问题了。

测试 Angular 应用时出现 ng2-charts 错误

ng2-charts error while testing Angular app

karma-jasmine

ng2-charts

angular