testing-library/angular-testing-library

signalInputs

Closed this issue · 13 comments

timdeschryver commented

Add test cases for signal inputs.
Do we need to do something to cover these, or does this just work? 👀

FabienDehopre commented

it seems that something needs to be adapted because when I run some tests on components with signal inputs, I get the following type of error:
NG0303: Can't set value of the 'tags' input on the 'TagListComponent' component. Make sure that the 'tags' property is annotated with @Input() or a mapped @Input('tags') exists.
The "tags" input is declared as follow:
readonly tags = input.required<SearchTag[]>();

FabienDehopre commented

could it be related to this issue? angular/angular#54013

timdeschryver commented

@FabienDehopre thanks for the information.
It does seem like the referenced issue is related, internally ATL also uses fixture.setInput().

tutkli commented

I'm facing the same issue. Seems like it's fixed in thymikee/jest-preset-angular#2246

timdeschryver commented

@tutkli the referenced PR allows us to set signal inputs via other components, but not directly using fixture.componentRef.setInput().

johnwalshuk commented

How do we handle model changes? We can have two-way binding now but need a way to test any changes.

Example:

@Component({
	selector: 'app-search',
	standalone: true,
	template: `<input [(ngModel)]="keywords()" />`,
})
export class SearchComponent {
	public keywords = model('');
}

Anyone who consumes this component can split the i/o like

<app-search [keywords]="keywords" (keywordsChange)="handleKeywordsChange($event)" />

I'd like to write a test like so but it doesnt appear to be handled currently:

test('it outputs form values per vale change.', async () => {
	const keywordsChange = jest.fn();
	const { getByLabelText } = await renderComponent({
		componentOutputs: {
			keywordsChange,
		}
	});

	await userEvent.type(getByLabelText('Search'), 'a');
	expect(keywordsChange).toHaveBeenCalledWith('a');

	await userEvent.type(getByLabelText('Search'), 'b');
	expect(keywordsChange).toHaveBeenLastCalledWith('ab');

	await userEvent.type(getByLabelText('Search'), 'c');
	expect(keywordsChange).toHaveBeenLastCalledWith('abc');

	await userEvent.type(getByLabelText('Search'), '{backspace}');
	expect(keywordsChange).toHaveBeenLastCalledWith('ab');

	await userEvent.type(getByLabelText('Search'), '{backspace}');
	expect(keywordsChange).toHaveBeenLastCalledWith('a');

	await userEvent.type(getByLabelText('Search'), '{backspace}');
	expect(keywordsChange).toHaveBeenLastCalledWith('');
});
timdeschryver commented

We haven't looked into supporting model for now.
since it's "just" a writable signal, have you tried creating a signal instead of a jest mock?

mnkyjs commented

Update: after also updating Jest this does work

For an example see https://github.com/testing-library/angular-testing-library/blob/main/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts

This is not working for me 😞. I updated jest-preset, Testing Library and jest, but I get still the error

Similar to this

NG0303: Can't set value of the 'tags' input on the 'TagListComponent' component. Make sure that the 'tags' property is annotated with @Input() or a mapped @Input('tags') exists.

  • 👍1
timdeschryver commented

Do you got a reproduction @mnkyjs ?

tutkli commented

Update: after also updating Jest this does work

For an example see https://github.com/testing-library/angular-testing-library/blob/main/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts

This is not working for me 😞. I updated jest-preset, Testing Library and jest, but I get still the error

Similar to this

NG0303: Can't set value of the 'tags' input on the 'TagListComponent' component. Make sure that the 'tags' property is annotated with @Input() or a mapped @Input('tags') exists.

I've seen this too. Some input names do not work. For me it was 'visible'. Changing the input name fixed it.

timdeschryver commented

@johnwalshuk see #443 to test output/models

mnkyjs commented

Do you got a reproduction @mnkyjs ?

It was my bad 🤦 , after I removed my node_modules folder and rerun npm install everything worked again 👍

  • 👍1