Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: input.required signals cannot be set in TestBed #2370

Closed
vbraun opened this issue Apr 5, 2024 · 5 comments · Fixed by #2418
Closed

[Bug]: input.required signals cannot be set in TestBed #2370

vbraun opened this issue Apr 5, 2024 · 5 comments · Fixed by #2418
Labels
🐛 Bug Confirmed Bug is confirmed

Comments

@vbraun
Copy link

vbraun commented Apr 5, 2024

Version

14.0.3

Steps to reproduce

In your component, declare a required input signal:

@Component({ ... })
export class MyComponent {
    readonly data = input.required<MyData>();
}

and try to set it in the accompanying component.spec.ts:

    const myData: MyData = { ... }; 

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        fixture.componentRef.setInput('data', myData);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

Tests then fail with Can't set value of the 'data' input on the 'MyComponent' component.

If I change the input signal to not be required (i.e. just data = input<MyData>();) then the tests succeed.

Expected behavior

Tests should work ;)

Actual behavior

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

    > 70 |         fixture.componentRef.setInput('data', myData);

Additional context

Support for input signals was added in #2246

Using non-required signal input works, only the input.required signal fails.

Environment

$ npx envinfo --preset jest

  System:
    OS: Linux 6.7 Fedora Linux 39 (Workstation Edition)
    CPU: (24) x64 AMD Ryzen 9 7900X 12-Core Processor
  Binaries:
    Node: 20.12.0 - /usr/bin/node
    npm: 10.5.0 - /usr/bin/npm
  npmPackages:
    jest: ^29.5.0 => 29.5.0
@tunibjork
Copy link

Found this workaround in stack overflow:

    const myData: MyData = { ... }; 

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        TestBed.runInInjectionContext(() => {
            component.data = input(myData);
        });
        fixture.detectChanges();
    });

@markusahrweileramcon
Copy link

Does not work for me in 14.1.0

@ahnpnl
Copy link
Collaborator

ahnpnl commented May 29, 2024

@markusahrweileramcon we added example at

which runs on our CI. You can take a look

Oh I might miss the context, look like it's not the issue of this repo but rather than the issue of TestBed itself.

@ahnpnl
Copy link
Collaborator

ahnpnl commented May 29, 2024

Actually it works in the test via this line

@markusahrweileramcon
Copy link

oh, my ... the issue was, that I've set the input in the tests itself and called detectChanges in the beforeEach
So the default test setup created by angular is not designed to work with inputs, which are not set initially in the beforeEach

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 Bug Confirmed Bug is confirmed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants