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) {}
}