Question

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

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<component>
     );

Answer 2

我认为您缺少对组件进行单元测试的全部要点。据我了解：

您有一个函数accept()，用于创建对this.dialog结束事件的订阅
您应该编写单元测试以验证正在创建订阅和调用服务的逻辑。
将dialogRef全局设置为component，而不是将其私有化为accept()。这将帮助您更好地测试代码。单元测试期间无法访问private变量。

所以：

component.ts

accept() {
 this.dialogRef = this.dialog.open(AcceptDialogComponent, {
  data: {
    hasAccepted: false
      }
    })
 this.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']);
    });
   }
 });
}

spec.ts

it('should create subscription to Modal closing event and call "acceptLead()" of "leadService" ', () => {
    spyOn(component.dialogRef, 'afterClosed').and.returnValue(
        of({
            hasAccepted: false
        })
    );
    spyOn(component.leadService, 'acceptLead').and.callThrough();
    component.accept();
    expect(component.dialogRef).toBeDefined();
    expect(component.dialogRef.afterClosed).toHaveBeenCalled();
    expect(component.leadService.acceptLead).toHaveBeenCalled();
});

Answer 3

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

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

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

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

然后，您可以使用自己的数据替换of(true)中的returnValue中的afterClosed()，该数据是您在主要组件对话框的Auth::routes(['verify' => true]);中发送的。

Answer 4

有没有人使用过这个对话框，传递了一个回调函数，但是在 onOk 方法中，而不是 afterClosed 中的回调？

例如

 let modalOptions = {
  uContent: 'are you sure you want to delete',
  uTitle: 'modal title',
  uOnOk: () => {
   callback function here
  }
};
this.modalService.create(modalOptions);

希望使用 jest 测试回调函数

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

4 个答案: