Easier way to provide mocked components

[Martinspire]

Description

With angular standalone its a lot more work to override components for our tests and I think Spectator would be better off if it would provide a simpler syntax to do so.

Right now to override something, you need to add:

const createComponent = createComponentFactory({
  component: SomeComponent,
  imports: [],
  overrideComponents: [
    [
      SomeComponent,
      {
        remove: {
          imports: [ChildComponent]
        },
        add: {
          imports: [MockChildComponent]
        },
      },
    ],
  ],
});

Granted, you can use NgMocks and go from there but that is not often needed and right now it has the issue of crashing with child components that contain signal inputs.

Proposed solution

We already have the mocks: [] array and perhaps we can reuse that.

    const createComponent = createComponentFactory({
      component: SomeComponent,
      imports: [MockChildComponent],
      mocks: [ChildComponent]
    });

So in this instance we add our mocked component to the imports array as regular and provide the childcomponent in the mocks array to indicate we want to override this.

Right now the mocks array is set so that it automatically mocks things for providers, but perhaps it makes sense to do that for components too. With each of the items in the array, it will try to match it with one component already in the imports of the source component we want to test

Alternatively, we redesign the mocking behavior into a new setup where its more standardized and available for various types of content (components, pipes, providers, etc). I'm not entirely sure what would be best (and still easy to implement), but the whole overridecomponents thing where it needs the main component, the child component we override and the one we override it with, is just a bit bloated. I've also thought about having a similar setup as providers already have with Angular where we have a syntax like this:

      {
        provide: ChildComponent,
        useValue: MockChildComponent,
      },

Which is something that Angular developers would recognize.

For a bit of context. Before Angular Standalone I would just have my regular component use:

declarations: [SomeComponent, MockChildComponent]

And I'm kinda looking for something similar. But I understand that it needs to know what needs to override, but in the end all the components and directives and pipes have selectors that we can use to find out what item we need to override and I think Spectator could be awesome and figuring that out for me. I've spent too much time with Standalone migration figuring out why my components weren't being overriden and its something that I expect other people will run into when they migrate to newer Angular versions. Because creating a component in my test, putting it in imports array doesn't actually override it.

Alternatives considered

Writing the long form is still tedious and can often bloat tests really fast.

Do you want to create a pull request?

No