Override imports of routed standalone component

[Nosfistis]

I am having the case of a routed component that requires some resolved data. The component itself has some imports that require stubbing. In the pre-standalone era this was done easily via imports. With standalone it should be done via componentImports. However, componentImports does not override routed component imports, only the rendered component's imports.

await render(MyComponent, {
  componentImports: [FontAwesomeTestingModule],
  declarations: [StubSelectComponent],
  initialRoute: '',
  routes: [
    { path: '', component: MyComponent, resolve: { page: () => requestPageData() } },
  ],
});

Now, I know that this is flawed, but I am trying to achieve a truly routed component whose imports are stubbed.

[timdeschryver]

Hi, that's an interesting use case.
Could you share a working example (component + test) that isn't using the standalone API?

[Nosfistis]

Hi, I guess you are talking about the pre-standalone form of our test. It would be something like this:

Component:

@Component({
  templateUrl: './main.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MainComponent {
  readonly faClock = faClock;
  readonly faHistory = faHistory;
  readonly faFileDownload = faFileDownload;
}

Test:

const renderResult = await render(MainComponent, {
      imports: [
        FontAwesomeTestingModule,
        FormsModule,
        // more
      ],
      declarations: [RangePickerStubComponent],
      providers: [
        { provide: AlertService, useValue: alertService },
      ],
    });

[timdeschryver]

@Nosfistis Yea, I'm looking for a reproduction that can be used to investigate this.

[timdeschryver]

@Nosfistis I don't see a way to do this in a generic way that covers many cases.
Instead, I propose a callback in which you can configure the TestBed (for example to override providers, components, ...) to your own customized needs #403.
What do you think about it?

[Nosfistis]

I think it would work fine, and it would be easy to adopt, since it looks a lot like the angular way currently we can make standalone component mocks:

Testbed.configureTestingModule({
  imports: [MyComponent],
})
  .overrideComponent(MyComponent, {
    add: { imports: [FontAwesomeTestingModule] },
    remove: { imports: [FontAwesomeModule] }
  })