我正在Angular 2 RC4中实现一个向导组件,现在我正在尝试编写som单元测试。Angular 2中的单元测试开始有据可查,但是我根本无法找出如何在组件中模拟内容查询的结果。
该应用程序具有2个组件(除了应用程序组件之外),即WizardComponent和WizardStepComponent。应用程序组件(app.ts)定义了向导及其模板中的步骤:
<div>
<fa-wizard>
<fa-wizard-step stepTitle="First step">step 1 content</fa-wizard-step>
<fa-wizard-step stepTitle="Second step">step 2 content</fa-wizard-step>
<fa-wizard-step stepTitle="Third step">step 3 content</fa-wizard-step>
</fa-wizard>
</div>
WizardComponent(wizard-component.ts)通过使用ContentChildren查询获得对步骤的引用。
@Component({
selector: 'fa-wizard',
template: `<div *ngFor="let step of steps">
<ng-content></ng-content>
</div>
<div><button (click)="cycleSteps()">Cycle steps</button></div>`
})
export class WizardComponent implements AfterContentInit {
@ContentChildren(WizardStepComponent) steps: QueryList<WizardStepComponent>;
....
}
问题是如何在单元测试中模拟步骤变量:
describe('Wizard component', () => {
it('should set first step active on init', async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(WizardComponent)
.then( (fixture) =>{
let nativeElement = fixture.nativeElement;
let testComponent: WizardComponent = fixture.componentInstance;
//how to initialize testComponent.steps with mock data?
fixture.detectChanges();
expect(fixture.componentInstance.steps[0].active).toBe(true);
});
})));
});
我创建了一个插件,实现了一个非常简单的向导来演示该问题。Wizard-component.spec.ts文件包含单元测试。
如果有人能指出正确的方向,我将不胜感激。
多亏了drewmoore在这个问题上的回答,我才能够开始工作。
关键是创建一个用于测试的包装器组件,该组件在其模板中指定向导和向导步骤。然后,Angular将为您执行内容查询并填充变量。
编辑:实现是针对Angular 6.0.0-beta.3
我的完整测试实现如下所示:
//We need to wrap the WizardComponent in this component when testing, to have the wizard steps initialized
@Component({
selector: 'test-cmp',
template: `<fa-wizard>
<fa-wizard-step stepTitle="step1"></fa-wizard-step>
<fa-wizard-step stepTitle="step2"></fa-wizard-step>
</fa-wizard>`,
})
class TestWrapperComponent { }
describe('Wizard component', () => {
let component: WizardComponent;
let fixture: ComponentFixture<TestWrapperComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
schemas: [ NO_ERRORS_SCHEMA ],
declarations: [
TestWrapperComponent,
WizardComponent,
WizardStepComponent
],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestWrapperComponent);
component = fixture.debugElement.children[0].componentInstance;
});
it('should set first step active on init', () => {
expect(component.steps[0].active).toBe(true);
expect(component.steps.length).toBe(3);
});
});
如果您有更好的/其他解决方案,也非常欢迎您添加答案。我将这个问题待一段时间。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句