Angular 如何进行单元测试以检查快餐店是否打开

我不熟悉角度测试，尤其是单元测试

最近，我一直在做一个组件来使用angular material（）中的Mat零食吧材质

在创建我的组件之后，我正在对这个组件进行单元测试，以检查是否调用了打开快餐店的类

我已经尝试应用我在stack overflow上找到的一些答案，但我无法将工作作为单元测试，我经常在Karma应用程序上出现以下错误消息：

'TypeError:无法读取未定义的'openSnackBar'属性'

我无法理解我的组件规范中出现了什么问题，以及如何修复此错误

My component.ts：

import { Component, OnInit } from '@angular/core';
import { MatSnackBar ,MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition, } from "@angular/material";

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

  ngOnInit() {
  }

  constructor(public snackBar: MatSnackBar) {}
  // Position of the snackbar
  horizontalPosition: MatSnackBarHorizontalPosition = 'right';
  verticalPosition: MatSnackBarVerticalPosition = 'top';

/**
 * To use a snackbar add the function openSnackBar('','','')
 * @param message Message that will be shown when the SnackBar is called
 * @param action The message that will be shown on the action button
 * @param state Permit to change the style of the SnackBar depending on the state
 */

  openSnackBar(message: string, action: string, state: string) {
    if ( state == 'suc') {
      var styleOfSnack = 'sucessSnackbar';
    } else if ( state == 'err') {
      var styleOfSnack = 'errorSnackbar';
    } else if ( state == 'inf') {
      var styleOfSnack = 'infoSnackbar';
    } else if ( state == 'war') {
      var styleOfSnack = 'warningSnackbar';
    }
    // code linked to the snackbar
    this.snackBar.open(message, action, {
      duration: 8000,
      panelClass: [styleOfSnack],
      horizontalPosition: this.horizontalPosition,
      verticalPosition: this.verticalPosition,
    });
  }
}

'''

这是验证代码的component.spec.ts：

  describe('SnackBar should be open', () => {
  let component: SnackBarComponent;
  let a = "";
  let b = "";
  let c = "";

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ SnackBarComponent],
      providers: [ MatSnackBar, Overlay ]
    })
    .compileComponents();
    a = "Test";
    b = "X";
    c = "suc";
  });

  afterEach(() => {
    a = "";
    b = "";
    c = "";
  });

  it('opens', () => {
    expect(component.openSnackBar(a,b,c)).toHaveBeenCalled;
  });
})

我希望单元测试能够检查函数openSnackBar是否被调用

---

感谢您花时间阅读我的文章，如果您有任何提示或教程可以帮助初学者理解angular上的单元测试，我正在学习

您没有初始化组件

beforeach（（）=>{
TestBed.configureTestingModule({
声明：[SnackBarComponent]，
提供者：[Matsnakbar，覆盖]
})
.compileComponents（）；
a=“测试”；
b=“X”；
c=“suc”；
component=TestBed.get（SnackBarComponent）；
});

您没有调用

来调用
函数

it（'打开'，（）=>{
expect（component.openSnackBar（a，b，c））.toHaveBeenCalled（）；
});
在实际组件中，您在哪里调用openSnackBar函数？我应该在我的HTML代码中使用它的属性（单击）：
您好，谢谢您的帮助，但我在进行单元测试时仍有一些问题，您是否提供了任何工作示例或教程，以便我完成单元测试？谢谢你在官方网站上的测试文件会很有帮助。