When my components are like this
export OldComponent {
@input myInput!: string;
}
I can prepare the unit tests like this:
fixture = TestBed.createComponent(OldComponent);
component = fixture.componentInstance;
component.myInput = 'test';
fixture.detectChanges();
Now that we have input signals (Angular 17)
export NewComponent {
myInput = input.required<string>();
}
How do we prepare the component for testing? This doesn't compille because an input signal is read-only:
fixture = TestBed.createComponent(NewComponent);
component = fixture.componentInstance;
component.myInput.set('test'); // Does not compile
fixture.detectChanges();
I tried not assigning it for the tests, but obviously it throws:
Error: NG0950: Input is required but no value is available yet. Find more at https://angular.io/errors/NG0950
I would not like to use the workaround of using a normal, not required input:
input<string>('default value')
To set inputs, you can use ComponentRef<T>.setInput
method, which also works with signals:
fixture = TestBed.createComponent(NewComponent);
component = fixture.componentInstance;
fixture.componentRef.setInput('signal-input-name', 'value');
// e.g. setInput('myInput', 'test');
fixture.detectChanges();
This method takes the input name as a first parameter and the value to set signal input to as second parameter.