Use reflectComponentType as a Fallback to Detect Signals

[Watercycle]

This PR attempts to at least partially address #9698.

I saw this comment and #8818, which leads me to believe this is the wrong solution; but, it does seem to fix the problem on a fresh Angular app (ng generate app my-app + ng generate library my-lib) and the larger Angular project that I care about - using NG 19, AOT, Webpack, and Karma.

---

For those interested, I built the package and published it here. You can use it by updating your package.json with the following:

"ng-mocks": "https://github.com/Watercycle/ng-mocks/releases/download/v14.14.0/ng-mocks-0.0.0.tgz"

and running npm upgrade ng-mocks. Alternative workarounds are noted here. (Edit: Use 0.0.1 to include the changes from #8771).

This has been tricky to validate between (seemingly) NG cache, NPM cache, and having to restart the test runner each time. That's mostly my inexperience with NPM packaging; but, it has led me down several false paths.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (683a00f) to head (754e4ff).
⚠️ Report is 68 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master    #11909   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          227       228    +1     
  Lines         4967      4988   +21     
  Branches      1154      1158    +4     
=========================================
+ Hits          4967      4988   +21     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[iamkinetic]

@Watercycle I've tried your version in my ngMocks bugs repro project (https://github.com/iamkinetic/NgMocksBugs) and all of the tests that were failing are now all passing!

I'll have to try it with a real project, but this seems very promising!

[iamkinetic]

@Watercycle I've tested your solution some more:

• input and output are working flawlesly used in internal and external components.
• model seems to be working as well.
• Using "query signals" like contentChild, contentChildren, viewChild and viewChildren in a component that is mocked with MockComponent is always causing an error. I'm getting the error Cannot read properties of undefined (reading 'Symbol(SIGNAL)') with all of them. I think MockComponent should ignore query signals, but i feel like that is another issue.

I've updated my repro project to demonstrate the issues with query signals. They cause all of the tests to fail.
https://github.com/iamkinetic/NgMocksBugs/

Edit: using any of the query signal is causing some issues even when they are private in a component.
Edit2: there is already a PR for the query signal issue: #8771

[iamkinetic]

@satanTime So is something still missing (beside time I guess lol)? Do you think you'll be able to review and merge this soon?

[sgbrown]

@satanTime can you please take another look at this PR to see if there are any additional concerns needing to be addressed?

[satanTime]

Hi @sgbrown, only to make it green, I see that coverage has dropped.

unfortunately, the page isn't loaded atm: https://coveralls.io/builds/74925913/source?filename=libs%2Fng-mocks%2Fsrc%2Flib%2Fresolve%2Fcollect-declarations.ts

but that's the only thing to fix.

[Watercycle]

coverage has dropped

Ah, yeah, I kind of put tests off as part of the uncertainty with the solution, in how coverage is reported across all the tests, and because truly testing this requires building a throwaway lib.

I'll try at least scoping a test to the newer Angular versions and/or mocking out reflectComponentType. Hopefully tomorrow night or it'll be a few weeks! (Edit: No-go, sorry! Will revisit this at the start of October!)

[iamkinetic]

coverage has dropped

Ah, yeah, I kind of put tests off as part of the uncertainty with the solution, in how coverage is reported across all the tests, and because truly testing this requires building a throwaway lib.

I'll try at least scoping a test to the newer Angular versions and/or mocking out reflectComponentType. Hopefully tomorrow night or it'll be a few weeks! (Edit: No-go, sorry! Will revisit this at the start of October!)

@Watercycle Have you had a chance to fix your coverage?

[Watercycle]

@satanTime It's green, now! Let me know if anything else needs to be done!

And sorry for the horrendous delay - got addicted to motorcycles. Fortunately for this branch it started snowing 🤣

[sgbrown]

@satanTime any chance of getting this PR merged and a new release published soon since it is now green?

[JusuVh]

Any chance for a new release with the fix ? Our internal libraries are migrating to A20 build and all imported components with container queries are failing. Using .replace(, ) to manually mock each component without the queries seems to work, but it's quite time consuming. 🙏

[sgbrown]

@satanTime could you please take another look at this PR to see if it needs anything else. The checks are all green and this update would be greatly appreciated.

I appreciate your time and effort. I hope you're doing well

[satanTime]

Hi @sgbrown, the fix is okay. But commits should be signed.
Once it's done, the PR can be merged and released.

[Watercycle]

@satanTime Did you mean to push those up as signed commits? I'm happy to if it's giving you issues!

[satanTime]

Hi @Watercycle, that's right. Please do.

[sgbrown]

@Watercycle do you think you'll be able to sign your commits soon so we can get this in?

[Watercycle]

@satanTime Sorry for the delay! Re-based on master with verified commits.

After this PR, would you be open to me making another PR cherry-picking the changes from #8771? 👀 Both will be needed for full signal support.

[sgbrown]

@satanTime Could you please approve and merge this PR when you get a chance? The commits are now signed which I believe to be the last thing you were waiting for.

@Watercycle Thank you for signing the commits

[satanTime]

v14.15.0 has been released and contains a fix for the issue. Feel free to reopen the issue or to submit a new one if you meet any problems.

[kausters]

@satanTime oddly, with @Watercycle's version I had everything working but with v14.15.0 I get Cannot read properties of undefined (reading 'Symbol(SIGNAL)') errors all over, probably because I also use viewChild query signals. We're on Angular 20. Should I create a new issue + reproduction?

[iamkinetic]

@satanTime oddly, with @Watercycle's version I had everything working but with v14.15.0 I get Cannot read properties of undefined (reading 'Symbol(SIGNAL)') errors all over, probably because I also use viewChild query signals. We're on Angular 20. Should I create a new issue + reproduction?

Yes, this merge request has already been merged and the related issue as well.

I also had one of my test giving me this error, but it was the only one out of a thousand.

[Watercycle]

@kausters My patch also contains changes from #8771 (issue #8634). That solution seemed to be working with no adverse affects, so maybe I'll just usurp that PR onto a fresh branch later today.

[kausters]

@Watercycle ah so that's what the deal is, I assumed that the released version contained everything from this PR so was wondering. Well ok that makes sense, basically known issue then. I hope you get a chance to solve this, thanks!

[Watercycle]

Sorry for the confusion! #12875 will add that next bit of compatibility. @satanTime Let me know if you have any concerns!