10

目前我正在尝试测试一个子组件，它接受来自主机组件的输入，并在 ngOnInit 生命周期钩子中使用，如下面的代码。

@Component({
   selector: 'my-child-component',
   template: '<div></div>'
})
class ChildComponent implements OnInit {
    @Input() myValue: MyObject;
    transformedValue: SomeOtherObject;

    ngOnInit():void {
        // Do some data transform requiring myValue
        transformedValue = ...;
    }
}

@Component({
    template:`<my-child-component [myValue]="someValue"></my-child-component>`
})
class HostComponent {
    someValue: MyObject = new MyObject(); // how it is initialized it is not important.
}

在这种情况下，应该如何测试 ChildComponent，其中 myValue 需要在创建时出现，同时能够访问 ChildComponent.transformedValue 进行断言。

我尝试使用这样的 Angular TestBed 类创建 ChildComponent

componentFixture = testBed.createComponent(LoginFormComponent)

但是 ngOnInit 已经被调用到我调用的位置

fixture.componentInstance.myValue = someValue;

我还尝试创建 HostComponent 的固定装置，虽然它有效，但我无法访问已创建的 ChildComponent 实例，我需要在 ChildComponent.transformedValue 字段上执行断言。

非常感谢您的帮助！

非常感谢！

4

1 回答 1

3

Angular 提供了使用 @ViewChild() 装饰器将子组件注入其父组件的能力。请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child

通过将 TestHost 组件（写入 .spec.ts 文件中）更新为以下内容

@Component({
    template:`<my-child-component [myValue]="someValue"></my-child-component>`
})
class TestHostComponent {
    @ViewChild(MyChildComponent)
    childComponent: MyChildComponent;
}

它公开了它的子组件实例（及其变量），使“transformedValue”的断言成为可能，如下所示。

componentFixture = testBed.createComponent(TestHostComponent)
expect(componentFixture.componentInstance.childComponent.transformedValue).toEqual(...someValue);
于 2016-11-25T09:32:21.870 回答