Skip to content

Bug: signal inputs of mocked component exposed as non signal fields #13671

@Tukkan

Description

@Tukkan

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
  });
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions