fix: support signal model mock bindings #10942

libs/ng-mocks/src/lib/common/func.directive-io-parse.spec.ts

@@ -0,0 +1,40 @@
+import funcDirectiveIoParse from './func.directive-io-parse';
+
+describe('funcDirectiveIoParse', () => {
+  it('keeps regular aliases', () => {
+    expect(funcDirectiveIoParse('prop:alias')).toEqual({
+      alias: 'alias',
+      name: 'prop',
+    });
+  });
+
+  it('normalizes signal model outputs from strings', () => {
+    expect(funcDirectiveIoParse('value:valueChange')).toEqual({
+      name: 'valueChange',
+    });
+  });
+
+  it('normalizes signal model outputs from objects', () => {
+    expect(
+      funcDirectiveIoParse({
+        alias: 'valueChange',
+        name: 'value',
+      }),
+    ).toEqual({
+      name: 'valueChange',
+    });
+  });
+
+  it('keeps required metadata for signal model outputs', () => {
+    expect(
+      funcDirectiveIoParse({
+        alias: 'valueChange',
+        name: 'value',
+        required: true,
+      }),
+    ).toEqual({
+      name: 'valueChange',
+      required: true,
+    });
+  });
+});

libs/ng-mocks/src/lib/common/func.directive-io-parse.ts

@@ -1,15 +1,22 @@
 import { DirectiveIo, DirectiveIoParsed } from './core.types';
 
+const normalize = ({ name, alias, required }: DirectiveIoParsed): DirectiveIoParsed => {
+  if (name === alias || !alias) {
+    return required === undefined ? { name } : { name, required };
+  }
+
+  if (name + 'Change' === alias) {
+    return required === undefined ? { name: alias } : { name: alias, required };
+  }
+
+  return required === undefined ? { name, alias } : { name, alias, required };
+};
+
 export default function (param: DirectiveIo): DirectiveIoParsed {
   if (typeof param === 'string') {
     const [name, alias] = param.split(':').map(v => v.trim());
-
-    if (name === alias || !alias) {
-      return { name };
-    }
-
-    return { name, alias };
+    return normalize({ name, alias });
   }
 
-  return param;
+  return normalize(param);
 }

libs/ng-mocks/src/lib/resolve/collect-declarations.spec.ts

@@ -1,5 +1,7 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 
+import funcGetGlobal from '../common/func.get-global';
+
 import collectDeclarations from './collect-declarations';
 
 describe('collect-declarations', () => {
@@ -324,4 +326,60 @@ describe('collect-declarations', () => {
     const actual = collectDeclarations(TargetComponent);
     expect(actual.outputs).toEqual(['output']);
   });
+
+  it('reads signal model bindings from ng defs', () => {
+    const global = funcGetGlobal();
+    global.__ngMocksReflectComponentType = false;
+    const actual = collectDeclarations({
+      ɵcmp: {
+        declaredInputs: {
+          value: 'value',
+        },
+        inputs: {
+          value: ['value', 1, null],
+        },
+        outputs: {
+          valueChange: 'value',
+        },
+        standalone: true,
+      },
+    });
+
+    expect(actual.inputs).toEqual(['value']);
+    expect(actual.outputs).toEqual(['valueChange']);
+    expect(actual.standalone).toBe(true);
+    delete global.__ngMocksReflectComponentType;
+  });
+
+  it('reads string-form ng def inputs without declaredInputs', () => {
+    const global = funcGetGlobal();
+    global.__ngMocksReflectComponentType = false;
+    const actual = collectDeclarations({
+      ɵcmp: {
+        inputs: {
+          alias: 'prop',
+        },
+      },
+    });
+
+    expect(actual.inputs).toEqual(['prop:alias']);
+    expect(actual.outputs).toEqual([]);
+    delete global.__ngMocksReflectComponentType;
+  });
+
+  it('reads ng def outputs without inputs', () => {
+    const global = funcGetGlobal();
+    global.__ngMocksReflectComponentType = false;
+    const actual = collectDeclarations({
+      ɵcmp: {
+        outputs: {
+          valueChange: 'value',
+        },
+      },
+    });
+
+    expect(actual.inputs).toEqual([]);
+    expect(actual.outputs).toEqual(['valueChange']);
+    delete global.__ngMocksReflectComponentType;
+  });
 });

libs/ng-mocks/src/lib/resolve/collect-declarations.ts

@@ -313,15 +313,48 @@ const parseNgDef = (
   },
   declaration: Declaration,
 ): void => {
-  if (declaration.standalone === undefined && def.ɵcmp?.standalone !== undefined) {
-    declaration.standalone = def.ɵcmp.standalone;
-  }
-  if (declaration.standalone === undefined && def.ɵdir?.standalone !== undefined) {
-    declaration.standalone = def.ɵdir.standalone;
+  const ngDef = def.ɵcmp ?? def.ɵdir;
+
+  if (declaration.standalone === undefined && ngDef?.standalone !== undefined) {
+    declaration.standalone = ngDef.standalone;
   }
   if (declaration.standalone === undefined && def.ɵpipe?.standalone !== undefined) {
     declaration.standalone = def.ɵpipe.standalone;
   }
+
+  if (!ngDef) {
+    return;
+  }
+
+  for (const alias of Object.keys(ngDef.inputs || {})) {
+    const input = ngDef.inputs[alias];
+    const minifiedName = Array.isArray(input) ? input[0] : input;
+    const {
+      name,
+      alias: normalizedAlias,
+      required,
+    } = funcDirectiveIoParse({
+      name: ngDef.declaredInputs?.[alias] ?? minifiedName,
+      alias,
+      required: undefined,
+    });
+
+    addUniqueDirectiveIo(declaration, 'inputs', name, normalizedAlias, required);
+  }
+
+  for (const alias of Object.keys(ngDef.outputs || {})) {
+    const {
+      name,
+      alias: normalizedAlias,
+      required,
+    } = funcDirectiveIoParse({
+      name: ngDef.outputs[alias],
+      alias,
+      required: undefined,
+    });
+
+    addUniqueDirectiveIo(declaration, 'outputs', name, normalizedAlias, required);
+  }
 };
 
 /**

tests/issue-10942/test.spec.ts

@@ -0,0 +1,92 @@
+import { Component, VERSION } from '@angular/core';
+import * as ngCore from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+import { MockBuilder, MockComponent, ngMocks } from 'ng-mocks';
+
+// @see https://github.com/help-me-mom/ng-mocks/issues/10942
+describe('issue-10942', () => {
+  if (
+    Number.parseInt(VERSION.major, 10) < 17 ||
+    typeof (ngCore as any).model !== 'function'
+  ) {
+    it('needs signal model support', () => {
+      expect(true).toBeTruthy();
+    });
+
+    return;
+  }
+
+  const model = (ngCore as any).model as (value: string) => any;
+  const signal = (ngCore as any).signal as (value: string) => any;
+
+  @Component({
+    selector: 'target-10942-signal',
+    template: '',
+    ['standalone' as never /* TODO: remove after upgrade to a14 */]: true,
+  })
+  class SignalComponent {
+    public value = model('');
+  }
+
+  @Component({
+    imports: [SignalComponent],
+    selector: 'target-10942',
+    template: `
+      <h1>{{ title() }}</h1>
+      <target-10942-signal [(value)]="title"></target-10942-signal>
+    `,
+    ['standalone' as never /* TODO: remove after upgrade to a14 */]: true,
+  } as never)
+  class TargetComponent {
+    public title = signal('test-default');
+  }
+
+  const hasCompiledModelMetadata = () => {
+    const mirror = (ngCore as any).reflectComponentType?.(
+      SignalComponent,
+    );
+
+    return (
+      Object.keys((SignalComponent as any).ɵcmp?.inputs || {})
+        .length > 0 ||
+      Object.keys((SignalComponent as any).ɵcmp?.outputs || {})
+        .length > 0 ||
+      (mirror?.inputs?.length || 0) > 0 ||
+      (mirror?.outputs?.length || 0) > 0
+    );
+  };
+
+  if (!hasCompiledModelMetadata()) {
+    it('needs compiled signal model metadata', () => {
+      expect(true).toBeTruthy();
+    });
+
+    return;
+  }
+
+  beforeEach(() => MockBuilder(TargetComponent));
+
+  it('creates a mock with signal model bindings', () => {
+    const mockComponent = MockComponent(SignalComponent) as any;
+
+    expect(mockComponent.ɵcmp?.inputs?.value).toBeDefined();
+    expect(mockComponent.ɵcmp?.outputs?.valueChange).toBeDefined();
+  });
+
+  it('provides the signal model change emitter after change detection', () => {
+    const fixture = TestBed.createComponent(TargetComponent);
+
+    fixture.detectChanges();
+    expect(() =>
+      ngMocks
+        .output('target-10942-signal', 'valueChange')
+        .emit('test-new'),
+    ).not.toThrow();
+    fixture.detectChanges();
+
+    expect(ngMocks.find('h1').nativeElement.innerHTML).toEqual(
+      'test-new',
+    );
+  });
+});