angular - 如何进行单元测试以检查小吃店是否营业

Question

我是 Angular 的新手，尤其是在单元测试方面。

最近我一直在做一个组件来使用角材料（https://material.angular.io/components/snack-bar/overview）中的 Mat-Snack-Bar 材料。

创建组件后，我正在对该组件进行单元测试，以检查是否调用了打开小吃店的类。

我已经尝试应用一些在堆栈溢出时发现的答案，但我无法进行单元测试，并且我在 Karma 应用程序上经常收到此错误消息：

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

我无法理解我的组件规范中有什么问题以及如何解决此错误。

我的 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 是否被调用！

感谢您花时间阅读我的问题，如果您有任何提示或教程来了解初学者的角度单元测试，我正在接受它们！

标签： angularunit-testingangular-material

Answer 1

您没有初始化组件。

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

而且你没有调用toHaveBeenCalled函数。

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