In an Angular developement I am trying to write a test for testing a dialog component. I am quite new with angular testing especially with Material harnessing but I found it very cool.
Here is this dialog component code:
export class ResultsComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<ResultsComponent>,
@Inject(MAT_DIALOG_DATA) public questionary: any,
) {}
public ngOnInit(): void {
...
}
}
So I started by reading documentation here :
https://material.angular.io/components/dialog/api#material-dialog-testing-directives
I am interested into using the MatTestDialogOpener directive because, if I understood well, it seems it can wrap my dialog component into a mocked component, so i can test my dialog outside of any parent component context.
My issue is I don't know how to use this directive. I mean, i don't want to add this directive into a template but when i try to init MatTestDialogOpener with TestBed i have an error at creation of ResultsComponent saying:
**Error: NG0202:** This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid.
This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.
Please check that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.
It means the dialogRef is not injected to my constructor but it is strange because MatTestDialogOpener has a property named dialogRef. I thinked it would do it automatically.
So my conclusion is, I think I misunderstand the purpose of this directive.
Can you please give me an usage example of this directive in a test context ?
Here is my test init using MatTestDialogOpener:
beforeEach(async () => {
DialogWrapperComponent = MatTestDialogOpener.withComponent(ResultsComponent, { data: questionary });
await TestBed.configureTestingModule({
declarations: [
DialogWrapperComponent,
ResultsComponent
],
imports: [
SharedModule //Contians MatDialogModule
]
}).compileComponents();
fixture = TestBed.createComponent(DialogWrapperComponent);
componentWrapper = fixture.componentInstance;
component = componentWrapper.dialogRef.componentInstance;
compiled = fixture.nativeElement;
fixture.detectChanges();
});
With this code my ResultsComponent wrapped into MatTestDialogOpener won't init.
I am not especially asking for a method to test my dialog because we already have a lot of answers about this. But I want to understand the purpose of the MatTestDialogOpener and how to use it.
Framework version:
Angular 15
Angular Material 15