Question

目前我正在尝试测试一个接受主机组件输入的子组件，并在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.
}

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

我尝试使用Angular TestBed类创建ChildComponent，就像这样

componentFixture = testBed.createComponent(LoginFormComponent)

然而，ngOnInit已被调用到我调用

的程度

fixture.componentInstance.myValue = someValue;

我还尝试创建HostComponent的一个fixture，虽然它有效，但我仍然无法访问创建的ChildComponent实例，我需要在ChildComponent.transformedValue字段上执行断言。

非常感谢帮助！

非常感谢！

Answer 1

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

通过将TestHostcomponent（在.spec.ts文件中编写）更新为以下内容

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

它公开了它的子组件实例（及其变量），使得'transformValue＆＃39;的断言成为可能。可能，如下所示。

componentFixture = testBed.createComponent(TestHostComponent)
expect(componentFixture.componentInstance.childComponent.transformedValue).toEqual(...someValue);

Angular 2 - 使用ngOnInit生命周期钩子中使用的@input测试组件

1 个答案: