[Angular] MatSnackBarのテストをする

実践
1. テスト対象ソース
2. テストソース

実践

テスト対象ソース

以下の単純なスナックバーを表示しているコンポーネントに対してテストする。

[Angular] スナックバーをMatSnackBarで表示

テストソース

テストケースはit関数内で、スナックバーのメッセージが一致しているかでテストしています。

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { NoopAnimationsModule } from '@angular/platform-browser/animations'

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        MatSnackBarModule,
        NoopAnimationsModule
      ],
      declarations: [
        AppComponent
      ],
      providers: [
        MatSnackBar,
      ]
    }).compileComponents();
  });

  it('should display snack-bar message', async () => {
    const fixture = TestBed.createComponent(AppComponent);
    const component = fixture.componentInstance;
    await component.openSnack();
    const snackElement = document.querySelector("simple-snack-bar")
    expect(snackElement?.textContent).toEqual("ボタンクリックしましたOK");
  });

});