Setting input signals with Angular component tests not supported

[FrankVerbeek]

Current behavior

With Angular versions 17.1 and 17.2, signal and model inputs were added, respectively. As we transition to using signals more frequently in our components, we have encountered several problems while setting up our component tests. It appears that setting input signals in Cypress component tests is not supported, despite the documentation stating that Cypress version 13.5.0 and onwards supports Angular 17.

When attempting to set up a component test by mounting the Component directly, it fails to set the signal/model inputs through the componentProperties and gives incorrect type assertions on componentProperties. Additionally, the outputSpy does not capture the change event from the model input either.

However, mounting the component with input signals through a template does work. I view this as a workaround, though.

Example code can be found here:
https://github.com/FrankVerbeek/angular-signal-component-test/blob/main/angular-signal-component-test/src/app/test-component/test-component.component.cy.ts

type assertion error:

not working example (mounting component):

working example (template):

Desired behavior

We want to be able to set input signals and model inputs directly through the componentProperties when mounting an Angular component using these kind of inputs.

Test code to reproduce

I have created a repo with an example. In the test-component.component.cy.ts file I created two tests, one which mounts the Component directly. This one doesn't work with setting the signal inputs. The second test uses a template and does work, kind of a workaround for now.

https://github.com/FrankVerbeek/angular-signal-component-test

The first test will throw the exception: "TypeError: ctx.title is not a function"

Cypress Version

13.7.2

Node version

20.11.1

Operating System

Windows 11

Debug Logs

No response

Other

No response

[cacieprins]

When mounting a template, it looks like the componentProperty type is assumed to be correct and inferred, rather than sourced from the mounted component.

When you mount TestComponentComponent directly, however, componentProperties is typed as Partial<{ [P in keyof T]: T[P] }>, where T is being inferred as TestComponentComponent.

According to your test component, its properties are:

• title is an InputSignal<string>
• count is a ModelSignal<number>

When mounting this component, you are passing a string instead of an InputSignal<string>, and a WritableSignal<number> instead of a ModelSignal<number>.

[FrankVerbeek]

Hi @cacieprins,

Thank you for the response. I would like to point out, however, that passing the types InputSignal<string> and ModelSignal<number> is only possible within an Angular Injectable context. Additionally, supplying a string as an input to a signal of type input.required<string> is a valid operation. For more information regarding signal inputs: Angular documentation on signal inputs.

Furthermore, the solution provided does not address the issue with outputSpy. Given Angular's increasing emphasis on the use of signals, it's probable that more people will have similar challenges shortly.

[Turom]

I have the exact same issue with input signals using mount, configuring the component with non-signal data throws the ctx error and using signal inputs as component property throws the Inject context error.

Relying to the inline template method is currently the only way to make it work with latest version, it’s not ideal.

[Waterstraal]

@cacieprins I am not sure why you closed this issue so soon, because this is very much a big issue for Angular component testing. I think you misunderstood the issue.

This is very important: In Angular, signal inputs are of type InputSignal<T> internally in the Component, but the external api is T.

• In @FrankVerbeek's example, the Component, internally the title property is of type InputSignal<string>.
• When this component is used in another component (html, component), a primitive string is passed in.

This is how input signals work in Angular, and this is currently not supported in Cypress.

@jennifer-shehane can this issue be reopened?

[denisyilmaz]

Dmytro Mezhenskyi from Decoded Frontend suggested a solution with a TestHost Component that sets the inputs, which works with Cypress:

https://youtu.be/U8YXaWwyd9k?si=fR4Pd5LErMGztCZ4&t=720

[Waterstraal]

@denisyilmaz IMHO it's very poor DevX to have to create a wrapper component just to be able to test components with signal inputs. This should be natively supported by Cypress.

[denisyilmaz]

@Waterstraal absolutely! I mentioned this as a workaround for the time being until this is natively supported by Cypress.

[cacieprins]

I am sorry for closing this prematurely. Angular is not my area of expertise, and I did not fully understand the issue at hand.

[grosch-intl]

Having to wrap every input and output in a test component is pretty painful.

@cacieprins, when do you think you'll be able to provide an ETA on a fix for this? I converted my entire project to using input/output/model/viewChild signals about a month ago. We just got somebody who is going to focus on our tests, which haven't been touched in ages, but now he can't do anything cleanly.

[Waterstraal]

@jennifer-shehane could I kindly ask for an update on this issue?

I think this issue is very important to fix because Angular apps are swiftly migrating to using signals, and this issue is making it hard to test those components and apps.

Note that a Playwright release that supports Angular Component testing with signal inputs is close to being released.

Thank you!