MockComponent function set Signal Inputs as Decorator Inputs

[henriquecustodia]

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

[email protected]

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

[gvlekke]

any news if this will be picked up?

[teowgh]

Anyone working on it?