相关疑难解决方法(0)

Angular 2单元测试组件,模拟ContentChildren

我正在Angular 2 RC4中实现一个向导组件,现在我正在尝试编写som单元测试.Angular 2中的单元测试开始得到很好的记录,但我根本无法找到如何在组件中模拟内容查询的结果.

该应用程序有2个组件(除app组件外),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>
Run Code Online (Sandbox Code Playgroud)

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>;
....
}
Run Code Online (Sandbox Code Playgroud)

问题是如何在单元测试中模拟steps变量:

describe('Wizard component', () => {
  it('should set first step active on init', async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb
    .createAsync(WizardComponent)
    .then( (fixture) =>{
        let nativeElement = …
Run Code Online (Sandbox Code Playgroud)

unit-testing typescript angular

6
推荐指数
2
解决办法
7332
查看次数

标签 统计

angular ×1

typescript ×1

unit-testing ×1