【徹底解説】AngularでTypeScriptとJasmineを用いたクリックイベントの単体テスト

2024-05-22

Angular で TypeScript と Jasmine を用いたクリックイベントの単体テスト

前提知識

本記事の内容を理解するには、以下の知識が必要です。

Angular の基礎知識
TypeScript の基礎知識
Jasmine の基礎知識

テスト対象コンポーネント

以下の例では、my-button という名前のボタンコンポーネントがあると仮定します。このボタンをクリックすると、onClick メソッドが呼び出され、コンソールにログが出力されます。

<button (click)="onClick()">ボタンをクリック</button>

// my-button.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-button',
  templateUrl: './my-button.component.html',
})
export class MyButtonComponent {
  @Output() clickEvent = new EventEmitter<void>();

  onClick() {
    console.log('ボタンがクリックされました');
    this.clickEvent.emit();
  }
}

テストの実装

以下のコードは、MyButtonComponent の onClick メソッドが正しく動作することをテストする Jasmine テストケースです。

// my-button.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyButtonComponent } from './my-button.component';

describe('MyButtonComponent', () => {
  let component: MyButtonComponent;
  let fixture: ComponentFixture<MyButtonComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyButtonComponent],
    });

    fixture = TestBed.createComponent(MyButtonComponent);
    component = fixture.componentInstance;
  });

  it('should emit click event when button is clicked', () => {
    const spyOnClick = spyOn(component, 'onClick');
    const button = fixture.nativeElement.querySelector('button');

    button.dispatchEvent(new Event('click'));

    expect(spyOnClick).toHaveBeenCalled();
  });
});

解説

TestBed.configureTestingModule: テスト対象コンポーネントと必要なモジュールを登録します。
fixture = TestBed.createComponent: テスト対象コンポーネントのインスタンスとテストフィクスチャを作成します。
beforeEach: 各テストケースの前に実行される処理を定義します。
spyOn: テスト対象メソッドをモック化します。
button.dispatchEvent: ボタン要素に対してクリックイベントをシミュレートします。
expect(spyOnClick).toHaveBeenCalled(): モック化されたメソッドが実際に呼び出されたことを検証します。

この例は、基本的なクリックイベントの単体テストを示しています。実際のテストでは、より複雑なロジックやイベントの検証が必要になる場合があります。

補足

テスト対象コンポーネントの入力値や出力値を検証するには、fixture.componentInstance.variableName や fixture.nativeElement.querySelector('selector') などのプロパティを使用できます。
非同期処理を含むテストの場合は、fakeAsync や tick などの Jasmine の非同期テストユーティリティを使用する必要があります。

サンプルコード：Angularで非同期処理を含むクリックイベントをテスト

<button (click)="onClick()">ボタンをクリック</button>

// my-button.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'my-button',
  templateUrl: './my-button.component.html',
})
export class MyButtonComponent {
  @Output() clickEvent = new EventEmitter<void>();
  data: string;

  constructor() {
    this.data = '';
  }

  onClick() {
    console.log('ボタンがクリックされました');
    this.fetchData().subscribe((data) => {
      this.data = data;
      this.clickEvent.emit();
    });
  }

  private fetchData(): Observable<string> {
    return of('非同期処理で取得したデータ').delay(1000);
  }
}

// my-button.component.spec.ts
import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { MyButtonComponent } from './my-button.component';

describe('MyButtonComponent', () => {
  let component: MyButtonComponent;
  let fixture: ComponentFixture<MyButtonComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyButtonComponent],
    });

    fixture = TestBed.createComponent(MyButtonComponent);
    component = fixture.componentInstance;
  });

  it('should emit click event and update data after asynchronous operation', fakeAsync(() => {
    const spyOnClick = spyOn(component, 'onClick');
    const button = fixture.nativeElement.querySelector('button');

    button.dispatchEvent(new Event('click'));

    // 非同期処理が完了するまで待つ
    tick(1000);
    fixture.detectChanges();

    expect(spyOnClick).toHaveBeenCalled();
    expect(component.data).toBe('非同期処理で取得したデータ');
  }));
});

fakeAsync と tick を使用して、非同期処理が完了するまでテストを待機しています。
detectChanges を使用して、コンポーネントの変更検出を明示的に実行しています。
モック化されたメソッド onClick が実際に呼び出されたことと、コンポーネントの data プロパティが期待通りに更新されたことを検証しています。

Angular でクリックイベントを単体テストするその他の方法

Karma と Chai を使用する

Karma は、ブラウザ内で JavaScript テストを実行するためのテストランナーです。Chai は、断言構文を提供する JavaScript のライブラリです。Karma と Chai を組み合わせることで、Jasmine と同様の機能を備えたテストスイートを作成できます。

長所

Jasmine よりも柔軟で強力な断言構文を提供します。
さまざまなブラウザでテストを実行できます。

短所

Jasmine よりも習得が難しい場合があります。
Karma の設定と構成に時間がかかる場合があります。

Angular TestBed の TestBed.createComponent を使用する

TestBed.createComponent メソッドは、テスト対象コンポーネントのインスタンスとテストフィクスチャを作成します。このメソッドには、コンポーネントの入力値や出力値を設定したり、モック化されたオブジェクトを注入したりするためのオプションが含まれています。

テスト対象コンポーネントを完全に制御できます。
モック化されたオブジェクトを使用して、コンポーネントの依存関係をシミュレートできます。

テストコードが冗長になる可能性があります。
テスト対象コンポーネントの内部実装の詳細を理解する必要があります。

Jest を使用する

Jest は、JavaScript テストを実行するためのもう 1 つの人気のテストランナーです。Jest は、断言、モック化、非同期テストなどの機能を備えています。

軽量で使いやすいです。
Jasmine と同様の機能を備えています。

Angular に特化した機能は多くありません。
Karma ほどコミュニティが大きくありません。

Cypress は、エンドツーエンドテストとコンポーネントテストを両方とも実行できるツールです。Cypress は、ブラウザ内でテストを実行し、DOM と JavaScript コードを直接操作できます。

実際のユーザーの視点からアプリケーションをテストできます。
テストコードが読みやすく、理解しやすいです。

単体テストを実行するには、Karma や Jest ほど適していません。

最適な方法の選択

使用する方法は、プロジェクトのニーズと好みによって異なります。小さなプロジェクトの場合は、Jasmine で基本的な単体テストを行うだけで十分な場合があります。より複雑なプロジェクトの場合は、Karma と Chai などのツールを使用して、より多くの機能と柔軟性を備えたテストスイートを作成することを検討してください。

angular typescript jasmine