Once I create an HTML file with a button, I trigger a poll to appear after an onClick event. Then, when the "submit" button is clicked on the dialog window, it closes and I intend to execute subsequent methods.
In my TypeScript file:
openDialogWindow() {
const dialogRef = this.dialogWindow.open(PollComponent, {
width: '400px',
height: '400px',
data: getData()
});
dialogRef.afterClosed().subscribe(result => {
if (result.status == 'VALID') {
answerForm = result;
this.callNextFunction();
}
});
}
Afterwards, I proceeded to create a unit test in the spec.ts file:
it('should call dialog window and invoke methods after submission', () => {
service.callNextFunction.and.returnValue(of({value: 0}));
const result = new FormGroup({}, )
result.setValidators(null);
spyOn(component.dialogWindow, 'open')
.and
.returnValue({
afterClosed: () => of(true)
} as MatDialogRef<typeof component>);
fixture.detectChanges();
expect(component.dialogWindow.afterAllClosed).toContain(result);
expect(service.callNextFunction).toHaveBeenCalled();
expect(component.otherForm.recommendedValue.control.value).toEqual('123');
});
However, during testing, I encountered an error:
Error: <spyOn> : open has already been spied upon
Usage: spyOn(<object>, <methodName>)
Could this be due to the creation of:
matDialogSpy = createSpyObj<MatDialog>('MatDialog', ['open']);
within the beforeEach block? I utilize matDialogSpy in another unit test to verify if the dialog window opens upon clicking the button:
it('should open dialog when button has been clicked', fakeAsync(() => {
clickOnSlsButtonByLabel('Open dialog', fixture);
expect(matDialogSpy.open).toHaveBeenCalledTimes(1);
expect(matDialogSpy.open).toHaveBeenCalledWith(
PollComponent,
{
width: '400px',
height: '400px',
data: data...
}
);
}));