Description of the bug
When mocking a component with signal inputs, the input field are exposed as non signal fields, which resuilts with accessing the field without braces when mocked and with braces when used with keep
According to docummentation (https://ng-mocks.sudo.eu/api/MockComponent),
The class of a mock component has: the same @Inputs and @Outputs with alias support
It is indeed mentioning only old syntax with @input. The new input() syntax do not apply to this rule.
When accessing a signal input of mocked component with braces, eg. name(), it results with an error:
TypeError: de.componentInstance.name is not a function
An example of the bug
import { Component, input } from '@angular/core';
import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
@Component({
selector: 'app-name1',
template: `{{ name() }}`,
})
export class Name1Component {
readonly name = input('');
}
@Component({
selector: 'app-name2',
template: `{{ name() }}`,
})
export class Name2Component {
readonly name = input('');
}
@Component({
template: `
<app-name1 [name]="'hello1'"></app-name1>
<app-name2 [name]="'hello2'"></app-name2>
`,
imports: [Name1Component, Name2Component],
})
class WrapperComponent {}
describe('Given WrapperComponent', () => {
beforeEach(
() => MockBuilder(WrapperComponent)
.keep(Name1Component)
.mock(Name2Component), // reduntant, mocked by MockBuilder anyways, added for clarity
);
it('should set proper names', () => {
MockRender(WrapperComponent);
const instance1: Name1Component = ngMocks.find(Name1Component).componentInstance;
const instance2: Name2Component = ngMocks.find(Name2Component).componentInstance;
expect(instance1.name()).toBe('hello1'); // used with keep, works
expect(instance2.name()).toBe('hello2'); // used with mock, throws instance2.name is not a function
expect(instance2.name).toBe('hello2'); // works
});
});
Description of the bug
When mocking a component with signal inputs, the input field are exposed as non signal fields, which resuilts with accessing the field without braces when mocked and with braces when used with
keepAccording to docummentation (https://ng-mocks.sudo.eu/api/MockComponent),
The class of a mock component has: the same @Inputs and @Outputs with alias supportIt is indeed mentioning only old syntax with @input. The new input() syntax do not apply to this rule.
When accessing a signal input of mocked component with braces, eg. name(), it results with an error:
TypeError: de.componentInstance.name is not a functionAn example of the bug