Angular CLIでAngularのユニットテストとE2Eテストを体験する

# 背景
Angular2 でテストするぞ

# 対象読者
- Angular2 でウェブアプリケーション書いてる
- テスト書きたいと思ってるけど書いてない
- ひとまず最短距離で体験したい

# 環境
- Angular 2.x.x

# とにかく試す
難しいことは一切考えずに、最短距離でテストを実行してみます。

```
# Angular CLIをインストールする
npm install -g angular-cli

# サンプルプロジェクトを作る
ng new sample-app

# テストを実行する
ng test
```

実行できました。

```
11 02 2017 18:45:43.190:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/
11 02 2017 18:45:43.190:INFO [launcher]: Launching browser Chrome with unlimited concurrency
11 02 2017 18:45:43.234:INFO [launcher]: Starting browser Chrome
11 02 2017 18:45:44.759:INFO [Chrome 56.0.2924 (Mac OS X 10.11.6)]: Connected on socket /#ltE8vCyepqLMUYIcAAAA with
id 70346204
Chrome 56.0.2924 (Mac OS X 10.11.6): Executed 3 of 3 SUCCESS (0.413 secs / 0.398 secs)
```

# ng new と ng test は何をしたのか

## ng new
推奨のファイル構成でプロジェクトの雛形を作ってくれます。以下のようなファイル群が出来上がっていました（node_modulesは多いので割愛）。

```
~/sample-app (master)$ tree ./ -I node_modules
./
|-- README.md
|-- angular-cli.json
|-- e2e
|   |-- app.e2e-spec.ts
|   |-- app.po.ts
|   `-- tsconfig.json
|-- karma.conf.js
|-- package.json
|-- protractor.conf.js
|-- src
|   |-- app
|   |   |-- app.component.css
|   |   |-- app.component.html
|   |   |-- app.component.spec.ts
|   |   |-- app.component.ts
|   |   `-- app.module.ts
|   |-- assets
|   |-- environments
|   |   |-- environment.prod.ts
|   |   `-- environment.ts
|   |-- favicon.ico
|   |-- index.html
|   |-- main.ts
|   |-- polyfills.ts
|   |-- styles.css
|   |-- test.ts
|   `-- tsconfig.json
`-- tslint.json

```

## ng test
Karmaを使ったユニットテストを実行します。この例だと `app.component.spec.ts` のことですね。

# E2Eテストする
e2e というコマンドがあるようなのでそれを打ち込みます。

```
ng e2e 
```

なんか失敗しました。

```
1) sample-app App should display message saying app works
  - Failed: Angular could not be found on the page http://localhost:4200/. If this is not an Angular application, yo
u may need to turn off waiting for Angular. Please see https://github.com/angular/protractor/blob/master/docs/timeou
ts.md#waiting-for-angular-on-page-load
```

> Angular could not be found on the page http://localhost:4200/

とか言われてるので、Angularアプリケーションを立ち上げてアクセスできるようにすれば良さそうです。これも `ng serve` で出来ます

```
ng serve
```

`localhost:4200`で立ち上がったのを確認したら（そういう感じのログが出ます）、再度 `e2e` を打ち込みます。

```
ng e2e
```

テストが通りました。うれしいですね :sushi: 

```
> sample-app@0.0.0 pree2e /Users/gaaamii/sample-app
> webdriver-manager update --standalone false --gecko false

[19:07:18] I/update - chromedriver: file exists /Users/gaaamii/sample-app/node_modules/protractor/node_modules/w
ebdriver-manager/selenium/chromedriver_2.26mac64.zip
[19:07:18] I/update - chromedriver: unzipping chromedriver_2.26mac64.zip
[19:07:18] I/update - chromedriver: setting permissions to 0755 for /Users/gaaamii/sample-app/node_modules/protr
actor/node_modules/webdriver-manager/selenium/chromedriver_2.26
[19:07:18] I/update - chromedriver: v2.26 up to date

> sample-app@0.0.0 e2e /Users/gaaamii/sample-app
> protractor "./protractor.conf.js"

[19:07:19] I/direct - Using ChromeDriver directly...
[19:07:19] I/launcher - Running 1 instances of WebDriver
Spec started

  sample-app App
    ✓ should display message saying app works

Executed 1 of 1 spec SUCCESS in 0.925 sec.
[19:07:21] I/launcher - 0 instance(s) of WebDriver still running
[19:07:21] I/launcher - chrome #01 passed

All end-to-end tests pass.
```

# 詳細
- [Angular CLI](https://cli.angular.io/)
- [Testing \- ts \- GUIDE](https://angular.io/docs/ts/latest/guide/testing.html)