Bug: InputSignal not working when using NgMocks on a component imported from an external library

[iamkinetic]

Description of the bug

MockComponent on component imported from an external library does not work with InputSignal.

An example of the bug

This is the simplified imported component definition:

export declare class SomeComponent {
    isDisabled: InputSignal<boolean>;
    isInProgress: boolean;
}

Used like this:

 <some-component [isDisabled]="true" [isInProgress]="true" />

The isInProgress is using the @Input() decorator and is correctly working/rendering. The isDisabled is a signal input and doesn't seem to be correctly rendered/working.

 Error: NG0303: Can't bind to 'isDisabled' since it isn't a known property of 'some-component' (used in the 'TestComponent' component template).
        1. If 'some-component' is an Angular component and it has the 'isDisabled' input, then verify that it is included in the '@Component.imports' of this component.
        2. If 'some-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.
        3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.
        error properties: Object({ code: 303 })
            at reportUnknownPropertyError (node_modules/@angular/core/fesm2022/core.mjs:10087:15)
            at handleUnknownPropertyError (node_modules/@angular/core/fesm2022/core.mjs:10083:5)
            at elementPropertyInternal (node_modules/@angular/core/fesm2022/core.mjs:12061:17)
            at ɵɵproperty (node_modules/@angular/core/fesm2022/core.mjs:22458:9)
            at templateFn (ng:///CitizenPortalSelectionComponent.js:25:9)
            at executeTemplate (node_modules/@angular/core/fesm2022/core.mjs:11620:9)
            at refreshView (node_modules/@angular/core/fesm2022/core.mjs:13238:13)
            at detectChangesInView (node_modules/@angular/core/fesm2022/core.mjs:13454:9)
            at detectChangesInViewIfAttached (node_modules/@angular/core/fesm2022/core.mjs:13414:5)

If I remove the [IsDisabled]="true" from the html, the page renders correctly and the unit test are ok.

If I copy the component from the library directly in my angular project, the InputSignal is correctly working with MockComponent. Is something missing from the external library or is MockComponent not able to read the InputSignal from an exported component?

My unit test are using karma/jasmine (still using TestBed). The project itself is correctly running and the binding on the InputSignal is working outside of the unit tests.

The components library and my project are both using Angular 18 and i'm using ngMocks latest version.

[mishahrokhola]

have the same problem

[iamkinetic]

@mishahrokhola Did you find any workaround?

[mishahrokhola]

@iamkinetic no. The only 1 thing is not to mock the component

[iamkinetic]

@satanTime Do you think it's something we could try to fix (and create a PR if we find a fix)?

Do you have any pointer at where in the code we would have to look?

[rainscha]

Same Problem

[b-ferrari]

We are unfortunately seeing the same thing with an internal library using input signals and mocking its components in our consuming projects unit tests

[thiboot]

Same here

[okamiconcept]

I think there is the same kind of problem when using ngMocks.output('component-selector-from-external-library', 'selected');

The error here : Cannot find selected output via ngMocks.output

(The same output mock with the same component but internal in the application will work)