ng2图表错误，同时测试Angular应用程序

Question

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

我的测试如下所示：

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图表，因为ng2图表不再被维护。测试期间不再有问题。