Angular 9单元测试：如何模拟测试组件的导入？

如何解决Angular 9单元测试：如何模拟测试组件的导入？

因此，我目前正在为Angular 9组件编写Jasmine / Karma单元测试。

我的应用程序如何工作的简短摘要： 我用D3编写了一点Funnel，可以在类似漏斗的图中显示给定的数据。然后，我编写了一个FunnelComponent，其中包含此Funnel，并在实际图表旁边显示了一些元信息。

这是我要测试的组件：

funnel.component.ts

import { Component } from '@angular/core';
import { Funnel } from './d3charts/funnel.ts';
import { FunnelData } from './funnel.data';

@Component({
  selector: 'v7-funnel-component',templateUrl: './funnel.html'
})
export class FunnelComponent {

  private funnel: Funnel = null;

  constructor() {}

  public createFunnel(funnelData: FunnelData): void {
      this.funnel = new Funnel();
      this.funnel.setData(funnelData);
      this.funnel.draw();
  }
}

这是我对该组件的业力茉莉花单元测试：

funnel.component.spec.ts

import { TestBed,ComponentFixture } from '@angular/core/testing';
import { } from 'jasmine';
import { FunnelComponent } from './funnel.component';
import { Component } from '@angular/core';
import { FunnelData } from './funnel.data';
import { Funnel } from './d3charts/funnel.ts';

@Component({selector: 'funnel',template: ''})
class FunnelStub {
  private data: FunnelData = null;

  public setData(data: FunnelData): void
  {this.data = data;}
  {}
  public draw(): void
  {}
  public update(funnelData: FunnelData): void
  {}
}

/**
 * Testing class for FunnelComponent.
 */
describe('Component: Funnel',() => {

  let component: FunnelComponent;
  let fixture: ComponentFixture<FunnelComponent>;

  beforeEach(async(() => {
    TestBed
    .configureTestingModule({
      declarations: [
        FunnelComponent,FunnelStub
      ],providers: [
        { provide: Funnel,useValue: FunnelStub}
      ]
    })
    .compileComponents()
    .then(() => {
      fixture = TestBed.createComponent(FunnelComponent);
      component = fixture.componentInstance;
    });
  }));

it('#createFunnel should set data of funnel. Filled data should set filled funnel.',() => {
    expect(component["funnel"]).toBeNull();

    let exampleFunnelData = new FunnelData("testcaption","testdescription",8);
    component.createFunnel(exampleFunnelData);

    expect(component["funnel"]).toBeDefined();
    expect(component["funnel"]["data"]).toBeDefined();
    expect(component.data.caption).toEqual("testcaption");
    expect(component.data.description).toEqual("testsubtext");
    expect(component.data.value).toEqual(8);
  });
});

我想在这里测试createFunnel方法。 但是我不希望我的createFunnel方法将真实的Funnel分配给this.funnel，而是使用FunnelStub。 知道怎么做吗？

将{ provide: Funnel,useValue: FunnelStub}添加到我的provider数组没有帮助：（

最好的问候， 塞巴斯蒂安

解决方法

这不起作用，因为Funnel不是提供者：

providers: [
  { provide: Funnel,useValue: FunnelStub}
]

最能帮助您进行测试的是为渠道创建创建服务。

export abstract class FunnelProvider {
  abstract createFunnel(): Funnel;
}

此服务可以有2种实现，一种在您的应用中使用，另一种在测试中使用。

@Injectable()
export class DefaultFunnelProvider {
  createFunnel() {
    return new Funnel(); // Return real funnel object.
  }
}

@Injectable()
export class MockFunnelProvider {
  createFunnel() {
     // Return stub funnel. Assuming that they share the same interface.
    return new FunnelStub() as Funnel;
  }
}

现在，您必须在FunnelModule（声明FunnelComponent的模块）中定义DefaultFunnelProvider：

@NgModule({
  ... // other stuff
  providers: [{provide: FunnelProvider,useClass: DefaultFunnelProvider}]
})
export class FunnelModule {}

然后将FunnelProvider注入FunnelComponent并使用它创建漏斗：

export class FunnelComponent {

  private funnel: Funnel = null;

  constructor(private funnelProvider: FunnelProvider) {}

  public createFunnel(funnelData: FunnelData): void {
      this.funnel = this.funnelProvider.createFunnel();
      this.funnel.setData(funnelData);
      this.funnel.draw();
  }
}

大量的工作，但是现在很酷的事情是，您可以在TestBed中注入FunnelProvider的Mock实现：

TestBed
    .configureTestingModule({
      declarations: [
        FunnelComponent,FunnelStub
      ],providers: [
        { provide: FunnelProvider,useValue: MockFunnelProvider }
      ]
    })

现在，当调用funnelProvider.createFunnel时，它不会返回真正的漏斗，而是您的漏斗存根。

如果必须在测试期间进行，则可以将组件漏斗字段强制转换为FunnelStub（例如，如果它具有某些特殊方法）：

const funnelStub = component.funnel as FunnelStub;