3/31 に酒を飲みながら Angular について話す素敵な催し<a href="http://connpass.com/event/27707/">ng-sake</a>が開催されたので、Angular2 のユニットテストについて話て来ました。
当日のレポートは主催の<a href="https://twitter.com/laco0416">らこ</a>さんが書いたものを参照ください。
<ul>
<li><a href="http://ng2-info.github.io/2016/03/31/ng-sake-1-report/">ng-sake を開催しました | Angular2 Info</a></li>
</ul>
<h2 id="当日の模様">当日の模様</h2>
Angular を使い込んでいる人が多かったので、濃い内容の話ばかりでした。
<blockquote>
<a href="https://twitter.com/mitsuruog/status/715153394558705664">やばい、参加者がニッチすぎて面白い</a>
</blockquote>
<blockquote>
<a href="https://twitter.com/mitsuruog/status/715160894632828930">わいわい、がやがや。こういう形式もありだよね。angular に関わる人の熱意を感じる </a>
</blockquote>
<blockquote>
<a href="https://twitter.com/mitsuruog/status/715149679609192448">ディレクトリ構成が盛り上がってて楽しいｗ</a>
</blockquote>
<h2 id="発表内容">発表内容</h2>
私の資料はこちらです。
<a href="https://www.slideshare.net/mitsuruogawa33/angular-2-unit-testing-overview">Angular 2 unit testing overview</a>
Angular2 は別物になっているので、テスト周りの状況も心配していたのですが、結論としては Angular1 とあまり大差なかったです。
こちらに比較表作ってみました。
<a href="https://gist.github.com/mitsuruog/9e3e5c2c5d17a15a4c2a">Angular 1 to 2 Quick Reference In unit testing</a>
当日紹介したテストのサンプルコードはこちらです。
<a href="https://github.com/mitsuruog/_angular2-unit-test-sample">https://github.com/mitsuruog/_angular2-unit-test-sample</a>
<a href="http://blog.mitsuruog.info/2016/03/how-to-test-angular2-application-coverage.html">Angular2 Unit Testing - カバレッジ編 | I am mitsuruog</a>で紹介したカバレッジが出る仕組みが入っています。
カバレッジフェチの方は動かして楽しめると思います。
<img src="https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2016/ng-sake-coverage.png" alt="">
<h2 id="まとめ">まとめ</h2>
Angular2 のテストについては公式のドキュメントが足りていない、かつアップデートが激しいです。
最新の情報をチェックしたい場合、生のコードを読みつつ、本家のリポジトリのテストコードを見るのが一番確実です。
最後に、主催の<a href="https://twitter.com/laco0416">らこ</a>さん、<a href="https://twitter.com/armorik83">83</a>さん、本当にありがとうございました。
今後も続くといいなー。

ng-sake #1 でAngular2のテストについて話てきた

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

今回は XHR が関連するテスト。



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

## Angular2 Unit Testing

1. [準備](/2016/03/how-to-test-angular2-application-1.html)
1. [基本](/2016/03/how-to-test-angular2-application-basic.html)
1. Mock, Spy の基本(TBD)
1. [DOM のテスト](/2016/03/how-to-test-angular2-application-dom.html)
1. [XHR のテスト](/2016/03/how-to-test-angular2-application-xhr.html)
1. Component のテスト(TBD)
1. Service のテスト(TBD)
1. [Pipe のテスト](/2016/03/how-to-test-angular2-application-pipe.html)
1. Directive のテスト(TBD)
1. [カバレッジ](/2016/03/how-to-test-angular2-application-coverage.html)

## XHR のテスト

XHR 通信が関連するテストについて紹介します。

Angular1 には XHR 通信を行う`$http`サービスがありました。
XHR 通信をテストする場合は、`$http`を Mock する[$httpBackend](https://docs.angularjs.org/api/ngMock/service/$httpBackend)を利用し、実際の XHR 通信を`$httpBackend`でダミーのレスポンスに置き換えてテストを行っていました。

Angular2 にも`MockBackend`という`$httpBackend`と同様の役割のものがありますので、利用方法について紹介します。

- [MockBackend - ts](https://angular.io/docs/ts/latest/api/http/testing/MockBackend-class.html)

## 標準 HTTP の Mock を準備する(beforeEachProviders)

`MockBackend`は`@Injectable`指定されているため、他の Provider と同様に`beforeEachProviders`で呼び出した後に、`inject`でテストコード中に DI して利用する必要があります。

**hero.service.spec.ts**

```ts
describe("HTTPのテスト", () => {
 beforeEachProviders(() => [
 BaseRequestOptions,
 MockBackend,
 provide(Http, {
 useFactory: function (backend, defaultOptions) {
 return new Http(backend, defaultOptions);
 },
 deps: [MockBackend, BaseRequestOptions],
 }),
 HeroService,
 ]);

 // ...省略
});
```

上のコードでは、`Provider`API を利用して、テスト専用の`HTTP`を生成しています。
`Provider`は、Angular2 の中で`@Injecter()`によって DI がされる際にインスタンスの生成方法を指定する API です。

- [Provider - ts](https://angular.io/docs/ts/latest/api/core/Provider-class.html)

ここでは、`dependencies`で`HTTP`が利用している Provider を DI し、`useFactory`内部で新しい`HTTP`インスタンスを作成しています。
インスタンスを作成する際の`backend`に、`dependencies`で指定した`MockBackend`が設定されます。

`dependencies`に設定している各 Provider は、後にダミーのレスポンスを返却する設定を DI するための楔(くさび)だと考えてください。

## ダミーのレスポンスを設定する(inject)

続いてダミーのレスポンスを設定します。

先に生成した`HTTP`がテスト対象の Service に DI されるタイミングで、`inject`を利用して`MockBackend`のレスポンスをダミーで書き換えます。

**hero.service.spec.ts**

```ts
describe("HTTPのテスト", () => {
 // ...省略

 beforeEach(inject([MockBackend], (backend: MockBackend) => {
 const response = new Response(
 new ResponseOptions({
 body: {
 data: [
 { id: "1", name: "mitsuru" },
 { id: "2", name: "ogawa" },
 ],
 },
 })
 );
 backend.connections.subscribe((conn: MockConnection) =>
 conn.mockRespond(response)
 );
 }));

 // ...省略
});
```

ダミーのレスポンスを返却する部分は少しややこしいですが、まずは形から入りましょう。

大事な部分は`ResponseOptions`にダミーのレスポンスを設定する部分です。
上の例では、body の`data`プロパティにダミーのオブジェクトを設定しています。他にも設定できるプロパティが存在するので、詳しくは API を参照してください。

- [ResponseOptions - ts](https://angular.io/docs/ts/latest/api/http/ResponseOptions-class.html)

実際のレスポンスは`MockConnection`を利用して行います。他にも`mockDownload`, `mockError`など使えそうな API があります。

- [MockConnection - ts](https://angular.io/docs/ts/latest/api/http/testing/MockConnection-class.html)

`ResponseOptions`の部分はダミーレスポンス専用のクラスにしておき、テストコードの先頭で import して利用するともっとスッキリすると思います。

## テストを検証する(it)

では XHR 通信が正しく Mock されているか検証します。

その前に、テスト対象の HeroService についてです。
HeroService は、`Hero`のリストを XHR 通信で取得した後に、Observable でラップして返却する(Angular2 的には)シンプルなデータアクセスクラスだとします。

**hero.service.ts**

```ts
@Injectable()
export class HeroService {
 getHeroes(): Observable<Hero[]> {
 return this.http.get(this.URL)
 .map(res => <Hero[]>res.json().data);
 }
}
```

先ほどの設定してダミーレスポンスを実際に検証してみます。

**hero.service.spec.ts**

```ts
describe("HTTPのテスト", () => {
 // ...省略

 it("2件取得できること", inject([HeroService], (testee: HeroService) => {
 testee.getHeroes().subscribe((res: Hero[]) => {
 expect(res.length).toEqual(2);
 expect(res[0].name).toEqual("mitsuru");
 });
 }));
});
```

無事、2 件取得できることが確認できました。
めでたし。めでたし。

## まとめ

HTTP のテストについてでした。

テストの全体像についてはこちらを参考にしてください。

<https://github.com/mitsuruog/_angular2_http>

Unit テスト全般に言えることですが、テストを行うための Mock などの下準備が非常に面倒くさいです。
下準備は定型文的なものが多いため、再利用できるようスニペットなどにしておくことが大事です。

今回は、Service クラスを題材にしたため、テストコードの中で HTTP を置き換えています。
Component など HTTP から遠いレイアーでは、今回のように HTTP を置き換えるのではなく、Service クラスごと Mock 化して`beforeEachProviders`で Service クラスを置き換え方がテストしやすいと思います。

### PR

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

[mitsuruog/angular2-minimum-starter: Minimum starter kit for angular2](https://github.com/mitsuruog/angular2-minimum-starter)

Angular2 Unit Testing - XHRのテスト

4 月から Web サービス会社にフロントエンドエンジニアとして Join しました。
新卒で就職して以降、多くの時間(※)を SI として過ごしてきたので、今回は大きなチャレンジとなりそうです。

ちなみに、この文書は 5 年後の自分に当てたポエムです。



(※)途中、料理人と家具職人を 4 年ほどやっていました。

## 5 年後のなりたい自分になるために転職を決意した

御年 39 歳。

昨年の 5 月に転職したばかりなのですが、振り返ると「 **人は何のために働くのか？** 」ということで悩み続けた 1 年でした。

悩んだ末の結論は、年齢や立場で左右されることなく、純粋に「やりたいことをやり続ける」というものでした。

前回の反省から学んだことは、やりたいことをやり続けている方が幸せで、幸せを感じていないと周囲にいい影響を与える続けることはできないということでした。
私は、周囲を幸せにするため、あえて自分のエゴを通し自分を幸せにする道を選びました。

やりたい事とはもちろんフロントエンドの仕事です。

## これから何をするのか？

これからはフロントエンドエンジニアとして、サービスのフロントエンドの開発を取り仕切る立場となります。

それ以外で目標としていることを、未来の自分のために書きます。

### エンジニアの成長をサポートする

自身の持っているスキルを必要とする人がいて、それを教えることで、人の人生を豊かにできる可能性がある。

私は、フロントエンドの技術を習得する過程で多くの喜びや達成感を味わい、かけがえのない仲間と知り合うことができました。
これからもハンズオンなどを通じて、人の成長をサポートしていきたいと考えています。

エンジニアの成長を支援するサービスを作成している会社なので、自身のやりたいことの延長を仕事にすることができそうです。

### グローバルに活躍する

言うまでもなく、これからは英語が必須ですね。

とにかく英語のアウトプットの機会に飢えていました。
今いるところは海外のエンジニア多く、普段のやりとりはすべて英語となります。そういった環境に飛び込んで、英語を徹底的に鍛えたいと思いました。

人生一度しかないので、1 回くらい家族を連れて海外で仕事をしてみたいです。まだまだ人生チャレンジしないと損ですね。

### これまでの「べき論」を捨て、新しい自分になる

35 歳でフロントエンドエンジニアを志して、4 年でここまで来ることができました。

振り返ると様々な困難や不安、焦りに対してたくさんの「 **べき** 」を積み重ね、自分を奮い立たせて来たように思います。
その過程で、自分の思考に偏りができてきたように感じており、過去に遡ると正しい判断ができてなかったなと思うことが多くなってきました。

おそらくこの転職を決意できた背景にも、いろいろな **べき** を捨てたからこそできたと思います。

私は今回の転職を機に自分の中のたくさんの **べき** をリセットし、今後は不用意な **べき** を利用することを避け、不用意な **べき** で自分を縛り不幸にしないようしたいと思います。

## 最後に

今回無事に転職ができたのは、自分のことを心配し見守って、手を差し伸べてくれる素晴らしい知人に恵まれていたからです。

今後は自分が関わる人への感謝を忘れず、自身が幸せであることを保ち、お互いが支え合える関係を維持していけるよう努力し続けたいと思います。

5 年後はどうなっているかな。
頑張れ自分。