Angular 单元测试的模拟角度材质对话框afterClosed（）

我正在使用以下功能打开我的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（每次创建试验台之前）

组件规范ts（测试）

测试当前失败，因为“预期spy acceptLead已被调用”。我无法理解如何测试函数并执行某种模拟MatDialogRef，以便检查测试的条件是否通过

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

根据接受的答案更新工作测试

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

---

我认为您错过了组件单元测试的全部要点。据我了解：

您有一个函数

accept（）

，该函数创建对该对话框的关闭事件的订阅

您应该编写单元测试来验证创建订阅和调用服务的逻辑

将

dialogRef

设置为组件的全局

而不是将其私有化为
accept（）
。这将帮助您更好地测试代码<在单元测试期间，无法访问代码>专用

变量 因此：

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

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

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

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

---

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

从'rxjs'导入{of}

监视对话框并返回

afterClosed（）

方法的可观察值

基本上，dialogRef的

afterClosed（）

期望一个可观察的。因此，我们监视组件的dialog open方法，并使用

rxjs

中的

of

操作符返回

afterClosed（）

方法的可观察值

---

然后，您可以用您自己的数据替换

返回值中的
（true）
，这些数据是您在主组件对话框的
afterClosed（）
中发送的。
作为@Adithya Sreyaj的第一篇文章，我解决了这个问题，但添加了下一个更改：

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

spyOn（component.dialog，'open'）
.及
.returnValue(
{afterClosed:（）=>of（true）}作为MatDialogRef
);
是否有人使用了该对话框，传递了回调函数，但回调不是在afterClosed中，而是在onOk方法中

前

希望使用jest测试回调函数
是否尝试模拟
MatDialog
open
方法？这样做应该允许您返回一个您控制的模拟
MatDialogRef
，并且您可以手动触发
afterClosed
observable以发出一个新值。我是否可以手动触发afterClosed并仍然测试它的响应逻辑作为执行附加代码的条件？您解决了问题吗？这是一个完整的解决方案，因为我还希望测试一个popup@dna虽然已经有一段时间了，但我的测试中接受的答案是有效的。很抱歉，我的测试延迟了。我无法使您的解决方案起作用。我可以将dialogRef设置为组件的全局，但我正在从该组件打开几个不同的对话框，这是否与能够这样做冲突？@BrianStanley:如果您要打开几个
dialogRef
，则必须为所有这些组件全局设置单独的
ref
。如果将变量保持为私有，则无法使用
jasmine
对其进行测试，因为它会抛出错误。你能帮我吗。类型为“{afterClosed:（）=>Observable；}”的参数不能分配给类型为“MatDialogRef”的参数。类型“{afterClosed:（）=>Observable；}”缺少类型“MatDialogRef”中的以下属性：_overlayRef、_containerInstance、id、componentInstance等18个。t这应该是排名第一的答案。
spyOn(component.dialog, 'open')
     .and
     .returnValue(
      {afterClosed: () => of(true)} as MatDialogRef<typeof component>
     );

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