I am mitsuruog | Angular2 Unit Testing

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

今回は Pipe のテスト。

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

Angular2 Unit Testing

準備
基本
Mock, Spy の基本(TBD)
DOM のテスト
XHR のテスト
Component のテスト(TBD)
Service のテスト(TBD)
Pipe のテスト
Directive のテスト(TBD)
カバレッジ

Pipe のテスト

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

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

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

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

例）
abc     => Abc
abc def => Abc Def

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

init-caps.pipe.ts

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

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

Angular2 Unit Testing - Pipeのテスト

Angular2 Unit Testing

Pipe のテスト

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

まとめ

PR