Is there a way to provide a mock for entryComponents in an Angular test?

91 Views Asked by At

I want to test an Angular component (MyTableComponent) which uses MatDialog to display another component (DefaultDialogComponent)

my-table.component.ts

import { MatDialog } from "@angular/material/dialog";
export class MyTableComponent {
  constructor(private _dialog: MatDialog) {}

  openDefaultDialog(data): void {
    this._dialog.open(DefaultDialogComponent, {
      restoreFocus: false,
      autoFocus: false,
      data: data,
      width: "600px",
    });
  }
}

To test this I override BrowserAnimationsModule to inject the dialog component in entryComponents

my-table.component.spec.ts

...
TestBed.configureTestingModule({
    declarations: [
        MyTableComponent,
        DefaultDialogComponent,
    ],
    imports: [
        BrowserAnimationsModule
        // Material
        MatTableModule,
        MatDialogModule
    ],
})
    .overrideModule(BrowserAnimationsModule, {
        set: {
            entryComponents: [DefaultDialogComponent],
        },
    })
    .compileComponents();
...

The problem with this test implementation is that I have to include in MyTableComponent every dependency from DefaultDialogComponent in order for the test to compile.

What I want is to be able to inject a Mock component instead of DefaultDialogComponent, but when I do so the test does not compile:

No component factory found for RegionDialogWithMapComponent. Did you add it to @NgModule.entryComponents?

This is the mock component of DefaultDialogComponent I am using:

@Component({
  selector: 'default-dialog', // same as original component
  template: '',
})
class RegionDialogWithMapComponentMock {
  constructor(@Inject(MAT_DIALOG_DATA) public data) {}
}
0

There are 0 best solutions below