angular - (chartInit) 在 Karma/Jasmine 测试中无法正常工作

问题描述

我在使用echarts.

在我的 html 中，我有这个 div：

<div class="jmCanvas">
  <div id="usersLineChart" echarts [options]="optionUsersLineChart" (chartInit)="onChartInitUsersLine($event)" class="demo-chartUsers"></div>
</div>

而且，在组件中，我有这部分代码：

  onChartInitUsersLine(ec) {
    console.log("setLine");
    this.echartLine = ec;
  }

在 onInit 方法中：

console.log(this.echartLine.setOption);
this.echartLine.setOption(this.optionUsersLineChart);

作为this.optionUsersLineChart根据模型更改的选项文件。

这在正常运行应用程序时非常有效，完全没有问题。

但是，当运行 spec.ts 文件时，使用：

import { async, ComponentFixture, TestBed, getTestBed } from '@angular/core/testing';

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { UsersViewComponent } from './users-view.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MyDateRangePickerModule } from 'mydaterangepicker';
import { NgxEchartsModule, NgxEchartsService } from 'ngx-echarts';
import { Observable } from 'rxjs';
import { SessionService } from '../Services/session.service';
import { SortingService } from '../sorting.service';
import { testSet } from '../test/testSet';
import { Session } from '../models/Session';

class MockService {
  getSessions(user: string, pageTitle: string, deviceType: string, browser: string, beginDate: number, endDate: number, os: string, screenRes: string,company:string): Observable<any[]> {
    return Observable.of(testSet);
  }      
}

describe('UsersViewComponent', () => {
  let component: UsersViewComponent;
  let service;
  let fixture: ComponentFixture<UsersViewComponent>;

  function fireEvent(id, event) {
    const nativeElement = fixture.nativeElement;
    const elem = nativeElement.querySelector('#' + id);
    elem.dispatchEvent(new Event(event));
  }

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, ReactiveFormsModule, MyDateRangePickerModule, NgxEchartsModule, HttpClientTestingModule],
      declarations: [UsersViewComponent]
    }).overrideComponent(UsersViewComponent,{
      set: {
            providers: [
        NgxEchartsService,
        {provide:SessionService,useClass:MockService},
        SortingService
      ]
    }});
    fixture = TestBed.createComponent(UsersViewComponent);
    component = fixture.componentInstance;
    fireEvent("usersLineChart", "chartInit");
    fixture.detectChanges();
  });

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

它会引发以下错误：

TypeError: _this.echartLine.setOption is not a function

根据控制台日志，该事件被触发，但显然它没有在图表实例中找到 setOption 函数。

任何线索可能是什么？

我已经尝试了很多事情，现在我被这个错误困住了一段时间。

标签： angularkarma-runnerecharts

angular - (chartInit) 在 Karma/Jasmine 测试中无法正常工作

问题描述

解决方案

推荐阅读