Angular2 Unit Testing - Pipeのテスト

Angular2の実装の方法は記事をよく目にする機会が増えたので、テストについての自分が困らないように調べてみたシリーズ。

今回はPipeのテスト。

(注意)Angular 2.0.0-beta.9 をベースに話しています。
E2Eテストはprotractorがそのまま利用できると思うので、ここでのテストはユニットテストの話です。

Angular2 Unit Testing

  1. 準備
  2. 基本
  3. Mock, Spyの基本(TBD)
  4. DOMのテスト
  5. XHRのテスト
  6. Componentのテスト(TBD)
  7. Serviceのテスト(TBD)
  8. Pipeのテスト
  9. Directiveのテスト(TBD)
  10. カバレッジ

Pipeのテスト

Pipeのテストについて紹介します。

Angular2のPipeはAngular1のfilterに相当するものです。
Linuxコマンドの|(パイプ)と同義で、入力内容をPipe内で(transform, replaceなど)処理し、結果を出力する単純なものです。

Pipeのテストは至ってシンプル

文の区切りの最初の文字を大文字にするPipeをテストします。

1
2
3
例)
abc => Abc
abc def => Abc Def

Pipeのコードはこちらです。

init-caps.pipe.ts

1
2
3
4
5
6
7
8
9
10
import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({
name: 'initCaps'
})
export class InitCapsPipe implements PipeTransform {
transform(value: string): string {
return value.toLowerCase().replace(/(?:^|\s)[a-z]/g, (m) => m.toUpperCase());
}
}

Pipeは単純なclassであるため、テストクラス内でインスタンスを生成してテストします。
至ってシンプルです。

下の例では、beforeEachでテスト対象のPipeを読み込んでテストしています。

init-caps.pipe.spec.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import {
describe,
it,
expect,
inject,
injectAsync,
beforeEach,
beforeEachProviders,
TestComponentBuilder
} from 'angular2/testing';

import {InitCapsPipe} from './init-caps.pipe';

describe('Test: InitCapsPipe', () => {

let testee;

beforeEach(() => {
testee = new InitCapsPipe();
});

it('"abc"が”Abc”に変換されること', () => {
expect(testee.transform('abc')).toEqual('Abc');
});

it('"abc def"が”Abc Def”に変換されること', () => {
expect(testee.transform('abc def')).toEqual('Abc Def');
});

it('"Abc Def"は変換されないこと', () => {
expect(testee.transform('Abc Def')).toEqual('Abc Def');
});

});

ただし、Pipe内部でDIしているproviderがある場合は、beforeEachProvidersで読み込んだ後にinjectでDIする必要があるでしょう。

まとめ

Pipeのテストは以上です。

Pipeは構造がシンプルなためテストも簡単です。テストの最初にトライするものとしては最適だと思います。
サンプルコードはこちらを参照してください。

mitsuruog/_angular2_pipe

PR

こちらに初学者のためのMinimum starter kitを作成しましたので、ぜひ利用してください。
(もちろんテストもできます!!)

mitsuruog/angular2-minimum-starter: Minimum starter kit for angular2 https://github.com/mitsuruog/angular2-minimum-starter