【Angularのテスト】triggerEventHandlerメソッドでイベント発生をテストする方法

この記事では『Angularの単体テスト(ユニットテスト)』について

triggerEventHandlerメソッドでイベント発生をテストする方法

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

triggerEventHandlerメソッドでイベントの発生をテストする

まず、triggerEventHandlerメソッドでイベント発生をテストするために必要なファイルを用意します。ディレクトリ構成を以下に示します。

ディレクトリ構成

Counter-app                        
├─src                           
│   ├─app                       
│   │   ├─app.module.ts 
│   │   ├─app.component.ts★          
│   │   └─app.component.spec.ts★      
│   ├─main.ts
│   ├─index.html
│   └─styles.css
├─angular.json
├─package-lock.json
├─package.json
├─tsconfig.app.json
├─tsconfig.json
├─tsconfig.spec.json
└─node_modules

★マークで示したファイル以外はAngular CLIの「ng new」コマンドで自動生成されたものをそのまま使用しています。★マークで示したファイルを編集します。

「app.component.spec.ts」に「app.component.ts」の単体テストを実行するためのテストコードを記述します。

「app.component.ts」のプログラム例を以下に示します。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <h1>Count: {{count}}</h1>
  <button (click)="clickButton()">Increment</button>
  `,
})
export class AppComponent {
  count: number = 0;

  clickButton() {
    this.count++;
  }
}

「AppComponent(app.component.ts)」では、buttonがクリックされると、clickButtonメソッドが実行され、countプロパティの値がインクリメントされます。

countプロパティの値はAngularのインターポレーション(補間)を用いて、テンプレート内で表示しています。そのため、countプロパティはテンプレート内でコンポーネントのプロパティを二重中括弧{{…}}で囲まれています。

あわせて読みたい

『Angularのインターポレーション(補間)』については下記の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。

: 【Angular】インターポレーション(補間)とは？[データバインディング]
続きを見る

この「AppComponent(app.component.ts)」において、

clickイベントが発生したら、countプロパティの値が0から1になるか

をテストするための、「テストファイル(app.component.spec.ts)」を以下に示します。

app.component.spec.ts

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { AppComponent } from './app.component';
import { By } from '@angular/platform-browser';


// describe関数を使用して、テストしたいコンポーネント(AppComponent)に対するテストスイートを定義
describe('AppComponent', () => {

  // beforeEach関数は各単体テストが実行される前に実行される関数
  beforeEach(() => {
    // テストに必要なコンポーネントやサービスのみを含む「テストモジュール」を設定
    TestBed.configureTestingModule({
      declarations: [AppComponent],
      providers: [],
      imports: []
    });
  });

  // it関数を使用して各単体テストを定義
  it('clickイベントによりcountプロパティの値がインクリメントされるか', () => {

    // AppComponentをラップするComponentFixtureインスタンスを生成
    const fixture: ComponentFixture<AppComponent> = TestBed.createComponent(AppComponent);

    // ComponentFixtureインスタンス(fixture)がラップしているAppComponentインスタンスを参照
    const component: AppComponent = fixture.componentInstance;

    // ComponentFixtureインスタンス(fixture)がラップしているAppComponentインスタンスのホスト要素を取得
    const AppDe: DebugElement = fixture.debugElement;
    const buttonDe: DebugElement = AppDe.query(By.css('button'));

    // clickイベントが発生する前はcountプロパティの値が「0」かどうかを判定
    expect(component.count).toBe(0);

    // button要素のclickイベントを発生
    buttonDe.triggerEventHandler('click', null)

    // AppComponentインスタンスのcountプロパティの値が「1」かどうかを判定
    expect(component.count).toBe(1);
  });
});

DebugElementのtriggerEventHandlerメソッド

DebugElementのtriggerEventHandlerメソッドは、その要素で指定されたイベントを発生させるためのメソッドです。今回のプログラムの場合だと、button要素のclickイベントを発生させています。

triggerEventHandlerメソッドの第1引数には発生させるイベント名を記述します。

triggerEventHandlerメソッドの第2引数にはイベントハンドラー(今回のプログラムの場合だと、clickButtonメソッド)に渡す値を指定します。今回は何も値を渡さないので、nullと記述しています。

buttonDe.triggerEventHandler('click', null)により、clickイベントが発生すると、clickButtonメソッドが実行され、その結果、countプロパティの値がインクリメントされて、「0」から「1」になります。