因此,我目前正在为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数组没有帮助:(
最好的问候, 塞巴斯蒂安
答案 0 :(得分:2)
这不起作用,因为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;