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

[Feature]: Support viewChild query from 17.2 #2315

Closed
eiswind opened this issue Feb 15, 2024 · 4 comments · Fixed by #2317
Closed

[Feature]: Support viewChild query from 17.2 #2315

eiswind opened this issue Feb 15, 2024 · 4 comments · Fixed by #2317

Comments

@eiswind
Copy link

eiswind commented Feb 15, 2024

🚀 Feature Proposal

17.2 has added signal queries like

newMessageRef = viewChild.required<ElementRef<HTMLInputElement>>('newmessage');

currently this fails when we try to read the signal in a test with

 NG0951: Child query result is required but no value is available. Find more at https://angular.io/errors/NG0951

      48 |     this.messageService.saveMessage({ text: message, likes: 0});
      49 |     this.updateMessages();
    > 50 |     this.newMessageRef().nativeElement.value = '';

The same test is fine when run with karma.
I had hoped this would have worked already.

Motivation

It would be great if this was working ootb.

Example

No response

@ahnpnl
Copy link
Collaborator

ahnpnl commented Feb 15, 2024

I thought #2303 would already support queries like viewChild? With v14.0.2 it doesn't work with viewChild?

@eiswind
Copy link
Author

eiswind commented Feb 15, 2024

I thought the same, but it doesnt.

https://stackblitz.com/~/github.com/eiswind/mre-viewchild-query-jest

ng test runs karma -> works
jest -> fails

stackblitz seems to have problems running this, but the tests are fine. otherwise please check out the repository at
https://github.com/eiswind/mre-viewchild-query-jest

@eiswind
Copy link
Author

eiswind commented Feb 16, 2024

@ahnpnl thanks a lot for looking into this. I can see this new test working, but now I am completely lost. I checked out the v17 example from your source, and I cannot get it working there either:

@Component({
  template: `
    <h2 highlight="skyblue">About</h2>
    <h3 #el>Quote of the day:</h3>
    <twain-quote></twain-quote>
  `,
  standalone: true,
  imports: [HighlightDirective, TwainComponent],
})
export class AboutComponent {
  input = viewChild.required<ElementRef>('el');
}

added a test like:

it('should read the viewChild',()=>{
    expect(fixture.componentInstance.input()).toBeDefined();
  })

so it must be something with the project setup I guess. I already tried a couple if things I don't competeley understand.
I would really appreciate if you could take another look into this.

If it helps I could publish the example test in a fork.

@eiswind
Copy link
Author

eiswind commented Feb 16, 2024

OK sorry twice, after updating to 14.03. its working.
Thanks again for looking into this.

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

Successfully merging a pull request may close this issue.

2 participants