Add Support For Mocking New viewChild Function (Fix (reading 'Symbol(SIGNAL)') error)

libs/ng-mocks/src/lib/common/decorate.queries.ts

@@ -26,10 +26,15 @@ const generateFinalQueries = (queries: {
   const scanKeys: string[] = [];
 
   for (const key of Object.keys(queries)) {
-    const query: Query & { ngMetadataName?: string } = queries[key];
-    final.push([key, query]);
+    const query: Query & { ngMetadataName?: string; isSignal?: boolean } = queries[key];
 
-    if (!query.isViewQuery && !isInternalKey(key)) {
+    // istanbul ignore else @see tests-e2e/src/issue-8634
+    if (!query.isSignal) {
+      final.push([key, query]);
+    }
+
+    // istanbul ignore next @see tests-e2e/src/issue-8634
+    if (!query.isViewQuery && !query.isSignal && !isInternalKey(key)) {
       scanKeys.push(key);
       final.push([`__ngMocksVcr_${key}`, cloneVcrQuery(query)]);
     }

libs/ng-mocks/src/lib/mock-component/render/generate-template.ts

@@ -31,13 +31,17 @@ export default (queries?: Record<keyof any, any>): string => {
   }
 
   for (const key of Object.keys(queries)) {
-    const query: Query = queries[key];
+    const query: Query & { isSignal?: boolean } = queries[key];
     if (key.indexOf('__mock') === 0) {
       continue;
     }
     if (!isTemplateRefQuery(query)) {
       continue;
     }
+    // istanbul ignore if @see tests-e2e/src/issue-8634
+    if (query.isSignal) {
+      continue;
+    }
     if (typeof query.selector === 'string') {
       const selector = query.selector.replace(new RegExp('\\W', 'mg'), '_');
       queries[`__vcrIf_key_${selector}`] = new ViewChild(`ngIf_key_${selector}`, vcrArgs);

tests-e2e/src/issue-8634/test.spec.ts

@@ -0,0 +1,100 @@
+import {
+  Component,
+  ElementRef,
+  Input,
+  contentChild,
+  contentChildren,
+  input,
+  viewChild,
+  viewChildren,
+} from '@angular/core';
+import { MockBuilder, MockRender } from 'ng-mocks';
+
+@Component({
+  selector: 'app-nested',
+  standalone: true,
+  template: `
+    <div #meow>Nested content</div>
+
+    <h3>Queries:</h3>
+    <ul>
+      <li>meowViewChild: {{ !!meowViewChild() }}</li>
+      <li>meowViewChildren: {{ !!meowViewChildren() }}</li>
+      <li>meowContentChild: {{ !!meowContentChild() }}</li>
+      <li>meowContentChildren: {{ !!meowContentChildren() }}</li>
+    </ul>
+  `,
+})
+class NestedComponent {
+  readonly meowViewChild = viewChild<ElementRef>('meow');
+  readonly meowViewChildren = viewChildren<ElementRef>('meow');
+  readonly meowContentChild = contentChild<ElementRef>('meow');
+  readonly meowContentChildren = contentChildren<ElementRef>('meow');
+
+  readonly name = input.required<string>();
+}
+
+@Component({
+  selector: 'app-target',
+  standalone: true,
+  imports: [NestedComponent],
+  template: `
+    <app-nested></app-nested>
+    <div>name: {{ name }}</div>
+  `,
+})
+class TargetComponent {
+  @Input() public readonly name: string = '';
+}
+
+@Component({
+  selector: 'app-separate',
+  standalone: true,
+  template: `
+    <div>Is odd: {{ count() % 2 === 1 }}</div>
+
+    <h3>Queries:</h3>
+    <ul>
+      <li>meowViewChild: {{ !!meowViewChild() }}</li>
+      <li>meowViewChildren: {{ !!meowViewChildren() }}</li>
+      <li>meowContentChild: {{ !!meowContentChild() }}</li>
+      <li>meowContentChildren: {{ !!meowContentChildren() }}</li>
+    </ul>
+  `,
+})
+class SeparateComponent {
+  readonly count = input.required();
+
+  readonly meowViewChild = viewChild<ElementRef>('meow');
+  readonly meowViewChildren = viewChildren<ElementRef>('meow');
+  readonly meowContentChild = contentChild<ElementRef>('meow');
+  readonly meowContentChildren = contentChildren<ElementRef>('meow');
+}
+
+describe('issue-8634', () => {
+  describe('child component', () => {
+    beforeEach(() => MockBuilder(TargetComponent));
+
+    it('should not fail because of the usage of viewChild/contendChild', () => {
+      const fixture = MockRender(TargetComponent, {
+        name: 'sandbox',
+      });
+      expect(fixture.nativeElement.innerHTML).toContain(
+        'name: sandbox',
+      );
+    });
+  });
+
+  describe('referenced component', () => {
+    beforeEach(() => MockBuilder(SeparateComponent));
+
+    it('should not fail because of the usage of viewChild/contendChild', () => {
+      const fixture = MockRender(SeparateComponent, {
+        count: 3,
+      });
+      expect(fixture.nativeElement.innerHTML).toContain(
+        'Is odd: true',
+      );
+    });
+  });
+});