在Closed()之后模拟角材料对话框以进行单元测试 [英] Mocking Angular Material Dialog afterClosed() for unit test

问题描述

我要打开具有以下功能的垫对话框:

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

我正在尝试为此功能编写一个测试，该测试仅触发afterClosed()，以便可以检查是否调用了我的进行后端调用的服务方法.

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(在创建每个测试平台之前)

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(测试)

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

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

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 appreciated

推荐答案

您可以通过以下方式测试Angular Material Dialog的afterClosed方法:

You can test Angular Material Dialog's afterClosed method this way:

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

1. import { of } from 'rxjs';
2. spy on the dialog and return an observable for the afterClosed() method

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

基本上，dialogRef的afterClosed()期望可观察到的.因此，我们监视组件的对话框打开方法，并使用rxjs中的of运算符为afterClosed()方法返回一个Observable.

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.

然后您可以用自己的数据替换returnValue中的of(true)，该数据是您在主要组件对话框的afterClosed()中发送的.

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.

这篇关于在Closed()之后模拟角材料对话框以进行单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！