MockComponent function set Signal Inputs as Decorator Inputs #8887

henriquecustodia · 2024-05-03T13:24:41Z

I've noticed that Signal Inputs are just treated as Decorator Input.

ng-mocks@14.12.2

I have the following component:

@Component({
  selector: 'app-list-item',
  standalone: true,
  templateUrl: './list-item.component.html',
  styleUrl: './list-item.component.scss',
})
export class ListItemComponent { 
  task = input.required<Task>();
}

I mock the component using MockComponent function:

 await TestBed.configureTestingModule({
      imports: [ListComponent],
      providers: [
        {
          provide: TasksService,
          useValue: tasksServiceStub,
        },
      ],
    })
      .overrideComponent(ListComponent, {
        remove: {
          imports: [ListItemComponent],
        },
        add: {
          imports: [MockComponent(ListItemComponent)], // I mock here
        },
      })
      .compileComponents();

And my test try to access the Singal Input from ListItemComponent to assert its value:

 expect((<ListItemComponent>item.componentInstance).task()).toEqual(completedTasksStub[index]);

But the test breaks because the task property (it's a Signal Input) is not a function.

The complete error:
TypeError: completedItemDebugEl.componentInstance.task is not a function

Logging the <ListItemComponent>item.componentInstance).task in the test, I see that it's a property

task: { id: '1', name: 'Buy milk', completed: true }

Working with Signal Inputs, we need to test it as a Signal and not as a property as it was with Decorator Inputs.

Any news about that @satanTime?

Thank for your amazing work btw

The text was updated successfully, but these errors were encountered:

gvlekke · 2024-08-06T10:53:42Z

any news if this will be picked up?

teowgh · 2024-10-22T09:40:11Z

Anyone working on it?

solovevserg · 2025-04-14T11:54:51Z

I created a mapped type as a temporary workaround to handle this issue:

export type WithSignalsUnwrapped<TComponent extends object> = {
    [P in keyof TComponent]: TComponent[P] extends Signal<infer T> ? T : TComponent[P];
};

It doesn't cast inputs to signals in a mocked component, but aligns types with the actual mock behaviour. In your case it can be used like this:

 expect(
    (<WithSignalsUnwrapped<ListItemComponent>>item.componentInstance).task()
).toEqual(completedTasksStub[index]);

P.S. I believe the issue's auhor initial request requires discussion.

Working with Signal Inputs, we need to test it as a Signal and not as a property as it was with Decorator Inputs.

input() vs @Input is a child component implementation detail. From the parent's perspective, the contract (component interface) hasn't changed. I believe the child's input type shouldn't affect parent component tests. Migration to signals should remain transparent to component consumers, including test code. Coupling a mock's behaviour to internal implementation details leads to unexpected test failures during migration to signals and is generally considered a bad practice.

henriquecustodia added the bug Something isn't working label May 3, 2024

henriquecustodia assigned satanTime May 3, 2024

henriquecustodia changed the title ~~Bug:~~ MockComponents set Signal Inputs as Decorator Inputs May 3, 2024

henriquecustodia changed the title ~~MockComponents set Signal Inputs as Decorator Inputs~~ MockComponent function set Signal Inputs as Decorator Inputs May 3, 2024

henriquecustodia mentioned this issue May 3, 2024

Bug: Angular 17.1.0 input.required() issues #7976

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MockComponent function set Signal Inputs as Decorator Inputs #8887

MockComponent function set Signal Inputs as Decorator Inputs #8887

MockComponent function set Signal Inputs as Decorator Inputs #8887

MockComponent function set Signal Inputs as Decorator Inputs #8887

Comments