单元测试 – Angular 2单元测试组件,模拟ContentChildren
发布时间:2020-12-17 18:01:24 所属栏目:安全 来源:网络整理
导读:我正在Angular 2 RC4中实现一个向导组件,现在我正在尝试编写som单元测试. Angular 2中的单元测试开始得到很好的记录,但我根本无法找到如何在组件中模拟内容查询的结果. 该应用程序有2个组件(除app组件外),WizardComponent和WizardStepComponent.应用程序组件
我正在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> 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>; .... } 问题是如何在单元测试中模拟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 = 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); }); }))); }); 我创建了一个plunker,实现了一个非常简单的向导来演示问题. wizard-component.spec.ts文件包含单元测试. 如果有人能指出我正确的方向,我将非常感激. 解决方法
感谢
drewmoore在
this问题中的答案,我已经能够实现这一目标.
关键是要创建一个用于测试的包装器组件,它指定向导和向导在其模板中的步骤.然后,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); }); }); 如果您有更好的/其他解决方案,我们非常欢迎您添加答案.我会把这个问题留一段时间. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |