Setting Input Signals for Testing in Angular Components

When working with Angular components, setting input signals for testing is crucial. In this guide, we’ll delve into strategies for configuring input signals in Angular components.

The @Input decorator approach

For older components utilizing the @Input decorator, the unit test setup looks like this:

fixture = TestBed.createComponent(SignallessComponent);
component = fixture.componentInstance;
component.myInput= 'test'; // Here we set the value for the input
fixture.detectChanges();

The signal input approach

Starting from Angular 17, input signals can be declared using the input function. However, configuring input signals for testing in newer components demands a distinct approach. Here’s how you achieve it:

fixture = TestBed.createComponent(SignalComponent);
component = fixture.componentInstance;
fixture.componentRef.setInput('myInput', 'test');  // Here we set the value for the input
fixture.detectChanges();

Configuring input signals for testing in Angular components is facilitated through the ComponentRef<T>.setInput method. This approach allows you to define input signals, including required ones.

Solution for Error: NG0950

If you encounter Error: NG0950 – “Input is required but no value is available yet,” ensure that you have properly set up input signals using the methods described above.