Angular コンポーネントのテスト（sample6 / 入出力を伴うコンポーネントのテスト）

目次：Angular コンポーネントのテスト

---

この章では @Input @Output デコレータを利用したコンポーネントのテストについて説明します。

コンポーネントの作成

まずテストを書くためのコンポーネントを作成します。

このコンポーネントは string型の name を受け取ります。
テンプレートにはボタンがひとつあり、クリックすると greet イベントを発生させます。

$ ng generate component sample6

// sample6.component.ts

import {
  Component,
+  EventEmitter,
+  Input,
  OnInit,
+  Output
} from '@angular/core';

@Component({
  selector: 'app-sample6',
  templateUrl: './sample6.component.html',
  styleUrls: ['./sample6.component.css']
})
export class Sample6Component implements OnInit {
+  @Input() name: string;
+  @Output() greet = new EventEmitter<string>();

+  click() {
+    this.greet.emit(`Hello ${this.name}!`);
+  }
  ...
}

// sample6.component.html

- <p>
-   sample6 works!
- </p>

+ <span name="name">{{name}}</span>
+ <button type="button" (click)="click()">greet</button>

@Input の検証

// sample6.component.spec.ts

+ import { By } from '@angular/platform-browser';

+  it('@Input の検証', () => {
+    component.name = 'foo';
+    fixture.detectChanges();
+
+    const element = fixture.debugElement.query(By.css('[name=name]')).nativeElement as HTMLSpanElement;
+    expect(element.textContent).toBe('foo');
+  });

@Output の検証

EventEmitter は emit（イベントの発生）と subscribe（イベントの受け取り）の2つのメソッドを持っています。
subscribe にコールバック関数を渡す事でイベントの発生を検証する事ができます。

Angular v5.2.8 event_emitter.ts
https://github.com/angular/angular/blob/5.2.8/packages/core/src/event_emitter.ts

// sample6.component.spec.ts

+  it('@Output の検証', () => {
+    component.name = 'bar';
+    let message: string;
+
+    component.greet.subscribe(data => message = data);
+
+    const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
+    button.click();
+
+    expect(message).toBe('Hello bar!');
+  });

公式ドキュメント Component with inputs and outputs
https://angular.io/guide/testing#component-with-inputs-and-outputs

---

目次に戻る