模拟 Angular Material 对话框 afterClosed() 进行单元测试

然后，您可以将 returnValue 中的 of(true) 替换为您在 afterClosed() 的afterClosed() 中发送的数据主组件中的对话框.I am opening my mat-dialog with the following function:accept() { let dialogRef = this.dialog.open(AcceptDialogComponent, { data: { hasAccepted: false } }) dialogRef.afterClosed().subscribe(result => { console.log(result); if (result.hasAccepted === true) { this.leadService.acceptLead(this.holdingAccountId, this.lead.id) .pipe( takeUntil(this.onDestroy$) ) .subscribe(acceptLeadRes => { console.log(acceptLeadRes); this.leadService.updateLeadAction('accept'); }, (err: HttpErrorResponse) => { console.log(err); this.router.navigate(['/error']); }); } });}I am attempting to write a test for this function that simply fires the afterClosed() so that I can check if my service method that makes a backend call is called.component.spec.ts (beforeEach Testbed creation)beforeEach(async (() => { TestBed.configureTestingModule({ declarations: [LeadCardComponent, AcceptDialogComponent], imports: [ requiredTestModules, JwtModule.forRoot({ config: { tokenGetter: () => { return ''; } } }) ], providers: [ ApplicationInsightsService, JwtHelperService, // { provide: LeadsService, useValue: leadServiceSpy } ], }), TestBed.overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [AcceptDialogComponent] } }); TestBed.compileComponents();}));component.spec.ts (test)it('Return from AcceptLeadDialog with hasAccepted equals true should call acceptLead endpoint', () => { let matDiaglogref = dialog.open(AcceptDialogComponent, { data: { hasAccepted: false } }); spyOn(matDiaglogref, 'afterClosed').and.callThrough().and.returnValue({ hasAccepted: true }); spyOn(leadService, 'acceptLead').and.callThrough(); component.acceptLead(); fixture.detectChanges(); matDiaglogref.close(); fixture.detectChanges(); expect(leadService.acceptLead).toHaveBeenCalled();});The test currently fails with a "Expected spy acceptLead to have been called." I am failing on understanding how to test the function and execute some sort of mock MatDialogRef so that I can check if the conditions of my test pass.Any help/suggestions would be much appreciatedUpdate Working Test implemented from Accepted Answerit('Return from AcceptLeadDialog with hasAccepted equals true should call acceptLead endpoint', () => { spyOn(component.dialog, 'open') .and .returnValue({ afterClosed: () => of({ hasAccepted: true }) }); spyOn(leadService, 'acceptLead').and.callThrough(); component.acceptLead(); expect(component.dialog).toBeDefined(); expect(leadService.acceptLead).toHaveBeenCalled();}); 解决方案 You can test Angular Material Dialog's afterClosed method this way:import { of } from 'rxjs';spy on the dialog and return an observable for the afterClosed() methodspyOn(component.dialog, 'open') .and .returnValue({afterClosed: () => of(true)});Basically, the afterClosed() of the dialogRef is expecting an Observable. So we spy on the component's dialog open method and return an Observable for the afterClosed() method by using the of operator from rxjs.You can then replace the of(true) from the returnValue with your own data what you are sending in the afterClosed() of the dialog in the main component. 这篇关于模拟 Angular Material 对话框 afterClosed() 进行单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！