使用包含图表的组件运行测试时,出现错误TypeError: Cannot read property 'getBasePixel' of undefined
。我不确定发生了什么,我尝试查找内容,但是没有找到任何相关内容。我已经测试导入了图表模块,但我真的想不出其他任何可能出错的方法。我唯一的想法可能是在异步beforeEach中导入了图表模块,这意味着该组件无法立即使用吗?还是因为它是在“较小”的浏览器中呈现的,所以无法正常工作?我不知道。
我的测试如下:
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)
答案 0 :(得分:0)
由于不再维护ng2-charts,我最终切换到ngx-charts。在测试过程中没有问题了。