help-me-mom / ng-mocks

Angular testing library for mocking components, directives, pipes, services and facilitating TestBed setup
https://www.npmjs.com/package/ng-mocks
MIT License
1.04k stars 75 forks source link

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

Open iamkinetic opened 1 month ago

iamkinetic commented 1 month ago

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 commented 1 month ago

have the same problem

iamkinetic commented 1 month ago

@mishahrokhola Did you find any workaround?

mishahrokhola commented 1 month ago

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

iamkinetic commented 1 week ago

@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?

jjatczak commented 1 week ago

I ran into the same problem and to be honest I'm not sure if this library already officially supports signal inputs. The documentation doesn't mention anything about it, additionally you won't find any references to signal inputs in the library code.