在Closed（）之后模拟角材料对话框以进行单元测试

Question

我正在使用以下功能打开Mat对话框：

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']);
    });
   }
 });
}

我试图为此功能编写一个测试，该测试仅触发afterClosed（），以便可以检查是否调用了我的进行后端调用的服务方法。

component.spec.ts（在创建每个测试平台之前）

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（测试）

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();
});

该测试当前失败，并显示“已调用预期的间谍acceptLead”。我无法理解如何测试功能并执行某种模拟MatDialogRef，以便可以检查测试条件是否通过。

任何帮助/建议将不胜感激

Answer 1

我在@Adithya Sreyaj 的第一篇文章中解决了这个问题，但添加了下一个更改：

spyOn(component.dialog, 'open')
    .and
    .returnValue({
        afterClosed: () => of(true)
    } as MatDialogRef<typeof component>);

Answer 2

您可以通过以下方式测试“角度材质对话框”的afterClosed方法：

1. import { of } from 'rxjs';
2. 监视对话框并返回该afterClosed()方法的可观察值

spyOn(component.dialog, 'open')
     .and
     .returnValue({afterClosed: () => of(true)});

基本上，afterClosed()dialogRef的期望值是Observable。因此，我们监视了组件的对话框打开方法，并afterClosed()使用的of运算符返回了该方法的Observable rxjs。

然后，您可以使用自己的数据of(true)从中替换主组件中对话框中returnValue发送的afterClosed()。