使用 ECharts 服务进行 Karma 测试

Question

在我的组件中，我将其作为构造函数：

constructor(private es: NgxEchartsService, private sessionService: SessionService, private sorting: SortingService) { }

而且，我 onInit() 上的第一行是： this.es.registerMap('world', worldJson); 对于世界地图图表。它工作得很好，但是用这个 .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 '../../../node_modules/@angular/forms';
import { MyDateRangePickerModule } from '../../../node_modules/mydaterangepicker';
import { NgxEchartsModule, NgxEchartsService } from '../../../node_modules/ngx-echarts';
import { Observable } from '../../../node_modules/rxjs';
import { SessionService } from '../Services/session.service';
import { SortingService } from '../sorting.service';

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



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

  beforeEach(() => {

    // Create a fake TwainService object with a `getQuote()` spy
    const sessionService = jasmine.createSpyObj('sessionService', ['getSessions']);
    // Make the spy return a synchronous Observable with the test data
    var getSessionSpy = sessionService.getSessions.and.returnValue(Observable.of({}));;


    TestBed.configureTestingModule({
      imports: [FormsModule, ReactiveFormsModule, MyDateRangePickerModule, NgxEchartsModule, HttpClientTestingModule],
      declarations: [UsersViewComponent],
      providers: [
        { provide: NgxEchartsService},
        { provide: SessionService, useValue: sessionService },
        { provide: SortingService }
      ]
    })
      .compileComponents();

    fixture = TestBed.createComponent(UsersViewComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    fireEvent("worldMapChart","chartInit");

    fixture.whenStable().then(() => {
      expect(component).toBeTruthy();
    });
  });
});

它给我：无法读取未定义的属性 'registerMap'，这意味着服务没有正确传递给组件。有什么线索吗？

Answer 1

如果您不模拟任何 service (providers)，那么您可以简单地在 providers 数组的根部指定它们。

providers: [
        NgxEchartsService,
        { provide: SessionService, useValue: sessionService },
        SortingService
      ]

使用 ECharts 服务进行 Karma 测试

Using ECharts Service with Karma Testing

angular

karma-jasmine

echarts