[Feature Request] Add Angular's overrideComponent properties to moduleMetadata

[bertcardinaels]

Is your feature request related to a problem? Please describe.

The problem I'm having with Angular Standalone Components: Unable to use mocked components or modules in Storybook moduleMetadata decorator. This could be for third party modules, or even first party standalone components which have other dependencies you'd want to avoid in testing or Storybook environments.
Example standalone component with a module I'd like to mock

@Component({
  selector: 'app-cancel-button',
  standalone: true,
  template: `<button mat-button color="primary">Cancel</button>`,
  imports: [MatButtonModule] // I'd like to mock MatButtonModule in my Storybook for example
})
export class CancelButtonComponent {}

The mock module I'd like to use

@Component({
  selector: '[mat-button]',
  standalone: true,
  template: `<ng-content></ng-content>`,
})
class MatButtonMock {}

There is no way for me to use this mocked module in my Storybook configuration

// Unable

While in my test files I can use the Angular's testing tooling like so to replace the original module with the desired mock module:

await TestBed.configureTestingModule({
      imports: [CancelButtonComponent],
    })
      .overrideComponent(CancelButtonComponent, {
        remove: {
          imports: [MatButtonModule],
        },
        add: {
          imports: [MatButtonMock],
        },
      })
      .compileComponents();

    ...
  });

Describe the solution you'd like

Something along the lines of the following:

export default {
  component: CancelButtonComponent,
  title: 'CancelButton',
  decorators: [
    moduleMetadata({
      imports: [
        CancelButtonComponent,
      ],
      remove: {
        imports: [MatButtonModule],
      },
      add: {
        imports: [MatButtonMock],
      },
    }),
  ],
} as Meta;

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

no

Additional context

Examples taken from this Medium article

[Marklb]

This would be very nice to have and has been requested by others also. I don't think this would be simple to add, since we don't use the TestBed and that seems to be a feature of the TestBedCompiler, but by pulling parts of the compiler out I think it should be possible. If someone has an example of doing this, without the TestBedCompiler, that would be helpful to see.

As for your proposed change to moduleMetadata, I think this would probably warrant a new decorator. In your snippet, it isn't clear that you want to override the metadata of CancelButtonComponent. TestBedCompiler has methods overrideModule, overrideComponent, overrideDirective, overridePipe, overrideProvider, but I don't know if specifying each as a separate function is necessary or not. I would need to think about that.

My initial thought for what would be expected is the following, but there may be a better solution:

export default {
  component: CancelButtonComponent,
  title: 'CancelButton',
  decorators: [
    // This should more closely match the pattern users are familiar with, from the TestBed.
    overrideComponent(CancelButtonComponent, {
      remove: {
        imports: [MatButtonModule],
      },
      add: {
        imports: [MatButtonMock],
      },
    }),
  ],
} as Meta;

One complication that I can think of is lazy loaded modules/components/directives/pipes, since we support multiple Angular applications running in the same document. Maybe this would be more clear, once an initial implementation is attempted or maybe someone more familiar with how overrides works could answer this. If StoryA applies overrides to MyComponent then I would think we have to clear the overrides before rendering StoryB, so StoryA rendering MyComponent after StoryB has rendered would not have the overrides. Hopefully I am just over thinking this, but that is one of my concerns for complication.