Testing Angular 2 components with @Input

Question

I am trying to test my Angular 2 components by instantiating with new MyComponent() . However, for components that accept @Input s, how can I pass them? Then, if the instance, say, I would like to change the input. Is this just a matter of reassigning the variable that I went through?

Answer 1

If you create an instance with new , you cannot do anything to assign this field. You can use TestComponentBuilder to get change detection and binding.

Below is an example of dart code that checks the BwuArraySelector component. I assume that you can understand how to do this in 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; 

The detectChanges() call initializes the inputs of the BwuArraySelector with the values ​​from the template bindings of the SingleConfigured components.