背景

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

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

> 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でAngularのユニットテストとE2Eテストを体験する

背景