ng-mocks icon indicating copy to clipboard operation
ng-mocks copied to clipboard

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

Open iamkinetic opened this issue 6 months ago • 6 comments

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.

iamkinetic avatar Aug 13 '24 01:08 iamkinetic