angular - 如何检查MatSnackBar是否打开？

Question

只要出现错误，就应该打开 snackbar ，否则就会被解雇。我想测试一下，

 handleErrors(error: ErrorMessage): void {
this.snackBar.open(error.message, '', {
  duration: 15000
})
}

routeToTallyConfig() {
 this.router.navigateByUrl(ROUTE_TALLY_CONFIG)
}

onStateChange(state) {
if (Util.isNotNull(state)) {
  // check errors
  if (Util.isNotNull(state.error)) {
    this.loader.display(false)
    this.handleErrors(state.error)
  } else {
    // no errors
    this.loader.display(false)
    if (Util.isNotNull(state.user) && Util.isNotNull(state.user.id)) {
      this.routeToTallyConfig()
    }
  }
}
}

在我的测试中，我将通过传递不同的状态值来调用 onStateChange() 函数。在传递错误时，应显示 snackbar ，如果没有错误，应将其关闭。如何在 Angular 4 中测试此行为？

Answer 1

(我假设您设置了测试床并模拟了所有依赖项)

您实际上并不测试零食是否打开，而是测试零食打开函数是否已被调用。测试依赖项是否有效不是您的工作，而是依赖项的工作。

这意味着如果您想测试零食是否被调用，您必须执行以下操作:

it('handleErrors should open the snacker', () => {
  spyOn(component.snackBar, 'open');
  component.handleErrors({message: 'error'} as any);
  expect(component.snackBar.open).toHaveBeenCalledWith('error', '', {duration: 1500});
});

相反，您还可以使用

来测试零食是否未被调用

  spyOn(component.snackBar, 'open');
  // Tests ...
  expect(component.snackBar.open).not.toHaveBeenCalled();