Question

您好，我正在做单元测试，并试图获得我的订阅的覆盖范围。但是，它始终失败，并显示错误 dialogRef.afterClosed不是函数

我不确定在afterClosed（）函数中可以监视什么或如何监视，但这就是我似乎无法涵盖的唯一部分。 ...

import { MatDialog } from '@angular/material/dialog';
....
constructor( private dialog: MatDialog) { }

showLogin(): void {

  const dialogRef = this.dialog.open(LoginDialogComponent, {
    width: '400px',
    height: 'auto',
    data: this.loginContext
  });

  dialogRef.afterClosed().subscribe(result => {
    if (this.loginContext.loggedIn) {
      this.showApply();
    }
  });
}

这是 LoginDialogComponent

 ....

 @Component({
   selector: 'app-login-dialog',
   templateUrl: './login-dialog.component.html',
   styleUrls: ['./login-dialog.component.scss']
 })
 export class LoginDialogComponent implements OnInit {

   constructor(
     private authService: AuthService,
     private alertService: AlertService,
     public dialogRef: MatDialogRef<LoginState>,
     @Inject(MAT_DIALOG_DATA) public data: LoginState) { }

   ngOnInit() {
     this.data.loggedIn = false;
   }

   login(loginEvent: LoginEvent): void {


     this.authService.login(loginData).then(
       resp => {
         this.data.loggedIn = true; // feedback
         this.dialogRef.close();
       },
       err => {
         this.alertService.showAlert(err);
       }
     );
   }

 }

Answer 1

您可以将Dialog及其返回值DialogRef存根。

我这样做：

  const dialogRefStub = {
    afterClosed() {
      return of('result'); // this can be whatever, esp handy if you actually care about the value returned
    }
  };

  const dialogStub = { open: () => dialogRefStub };

然后我添加到提供者：

  {
    provide: MatDialog,
    useValue: dialogStub
  }

Answer 2

我到处寻找一种简洁的方法来模拟MatDialog并摆脱我得到的错误 dialogRef.afterClosed不是函数。（请参阅我在底部尝试过的一些链接）。直到我尝试了Tsai Tsai对这个问题的答案之前，我没有找到合适的解决方案。这是一个简单的解决方案，它消除了我的所有错误，并使我能够正确测试我的应用程序。请标记山姆·蔡的答案作为解决方案，因为我还没有投票的权利。我希望在花很多时间在所有其他链接上之前找到这个。

这是失败的单元测试；它在（'button'）。click事件上失败，因为它打开MatDialog并仅在对话框返回true时才执行删除操作。我不知道如何正确模拟MatDialog，这样删除就会发生：

-Os

我通过添加此内容进行了修复（感谢Sam Tsai的解决方案）

it("should call 'create' once when Submit button pressed", async(() => {
    component.apis = [new Api({name: 'abc'})];
    component.displayPermissions = [new Permission({name: 'abc'})];
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    compiled.querySelector('button').click();
    expect(permissionService.delete.calls.count()).toBe(1, 'one call');
}));

我尝试过的一些链接：

dialogRef.afterClosed不是函数

2 个答案: