angular - 使用@Input测试Angular 2组件

我正在尝试使用new MyComponent()实例化我的Angular 2组件。但是，对于采用@Input的组件，我该如何传递它们呢？然后，如果实例化了，说我想更改输入。这仅仅是重新分配我传入的变量的问题吗？

最佳答案

如果您使用new创建实例，则无法对分配给该字段做任何其他事情。您可以使用TestComponentBuilder进行更改检测和绑定(bind)。

在Dart代码示例下面，该示例测试BwuArraySelector组件。
我想您可以在TS中弄清楚该如何做。

/// Component only for testing BwuArraySelector
@Component(
    selector: 'test-cmp-singleconfigured',
    directives: const [BwuArraySelector],
    template: '''
<bwu-array-selector #singleConfigured
  [items]='[{"name": "one"},{"name": "two"},{"name": "three"}]'>
</bwu-array-selector>
''')
class SingleConfigured {
  @ViewChild('singleConfigured') BwuArraySelector arraySelector;
}

...

// inject the TextComponentBuilder and create a component instance
ngTest('single selection', (TestComponentBuilder tcb) async {
  ComponentFixture tc = await tcb.createAsync(SingleConfigured);
  tc..detectChanges();
  BwuArraySelector el =
      (tc.componentInstance as SingleConfigured).arraySelector;

调用detectChanges()会使用BwuArraySelector测试组件模板绑定(bind)中的值来初始化SingleConfigured的输入。