在 Angular 中测试剑道网格答案

【问题标题】：Testing Kendo Grid in Angular在 Angular 中测试剑道网格
【发布时间】：2018-04-06 04:21:46
【问题描述】：

我正在尝试让我的 Karma 测试在一个全新的 Angular 项目中与剑道网格一起工作。这个组件的规格看起来像

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RateTableProviderService } from "../_services/rate-table-provider.service";
import { RateTableComponent } from './rate-table.component';
import { Observable } from 'rxjs/Rx';
import { Response, ResponseOptions } from "@angular/http";
import { IRateTableListViewModel } from "./models/IRateTableListViewModel";
import { GridModule } from '@progress/kendo-angular-grid';


describe('RateTableComponent', () => {
  let component: RateTableComponent;
  let fixture: ComponentFixture<RateTableComponent>;
  let observableSource = [
        {
          id: "3482cd2f-16f8-4d62-8d5d-d761de35e737",
          name: "Rate table 1",
          enabled: false,
          effectiveDate: new Date(),
          creditTierSetName: "",
          loanProducts: ""
        },
        {
          id: "3482cd2f-16f8-4d62-8d5d-d761de35e739",
          name: "Another rate table",
          enabled: false,
          effectiveDate: new Date(),
          creditTierSetName: "",
          loanProducts: ""
        }
      ];

  class MockRateTableProviderService extends RateTableProviderService {
    constructor() {
      super(null);
    }
    getRateTableData(): Observable<Array<IRateTableListViewModel>> {
      return Observable.from([observableSource]);
    }
  }
  beforeEach(async(() => {
    let mockRateTableProviderService = new MockRateTableProviderService();
    TestBed.configureTestingModule({
      declarations: [RateTableComponent],
      providers: [
        { provide: RateTableProviderService, useValue: mockRateTableProviderService }
      ],
      imports: [GridModule]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(RateTableComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

测试在 chrome 上运行良好，但在 PhantomJS 中测试挂起。

PhantomJS 2.1.1 (Windows 8 0.0.0) RateTableComponent should be created FAILED
        Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

在 Chrome 上运行测试时一切正常。我怀疑在正确设置测试台时我没有管理异步导入。如果我完全拔出剑道，那么测试就完成了。我尝试将done 调用作为beforeEach 的一部分传递，但这也没有用

beforeEach(async((done) => {
    let mockRateTableProviderService = new MockRateTableProviderService();
    TestBed.configureTestingModule({
      declarations: [RateTableComponent],
      providers: [
        { provide: RateTableProviderService, useValue: mockRateTableProviderService }
      ],
      imports: [GridModule]
    })
      .compileComponents().then(done);
  }));

【问题讨论】：

我遇到了同样的错误！
同样的错误，找到解决方法了吗？

标签： javascript angular kendo-grid

【解决方案1】：

您是否尝试过在 .compileComponents() 的解析中定义您的夹具和组件，因为这将在您的测试台设置中异步执行？

`.compileComponents.()
.then(() => {
    fixture = TestBed.createComponent(RateTableComponent);
    component = fixture.componentInstance;
});`

【讨论】：

【解决方案2】：

尝试在每个之前添加一秒，如下所示：

beforeEach(async(() => {
    let mockRateTableProviderService = new MockRateTableProviderService();
    TestBed.configureTestingModule({
      declarations: [RateTableComponent],
      providers: [
        { provide: RateTableProviderService, useValue: mockRateTableProviderService }
      ],
      imports: [GridModule]
    })
      .compileComponents().then(done);
 }));


beforeEach(() => {
  done();
}));

不像我上面的主要人物西蒙斯回答那么优雅，但应该可以解决问题

【讨论】：