Nightmare(v1) + mocha ベースに、coffee-scriptでE2Eテストを書く


## はじめに（2015/10/18追記）
本投稿は、Nightmare v1を前提とした内容になっています。
v2については、こちらの[投稿](http://qiita.com/imunew/items/06023f689c1a31aeddf9)を参照ください。

## セットアップ

### phantomjsのインストール

```bash
$ brew install phantomjs
$ phantomjs -v
2.0.0
```

### coffee-script, nightmare, mocha のインストール

```bash
$ npm install --save coffee-script nightmare mocha
```

## テストケースの作成

### Nightmareを継承して、TestRunnerクラスを作成
[@mizchi](http://qiita.com/mizchi)さんの[NightmareでE2Eテストしつつスクリーンショットとってgifに結合したら目視チェックが最高に楽になった](http://qiita.com/mizchi/items/04c53e17ed5c4ec7e8d7)をみて真似してみました。
はじめ、javascriptに変換して使っていましたが、[mochaをCoffeeScriptで使おう](http://qiita.com/dll7/items/599f51f1d79f7e73ccef)にもあるように、coffee-scriptのまま実行できるので、変換せずに使います。
exampleでは`rakuten.co.jp`にアクセスするので、`RakutenTestRunner`というクラス名にしています。

```coffee
Nightmare = require 'nightmare'

class RakutenTestRunner extends Nightmare

  constructor: (@config) ->
    super()

  login: () ->
    @
    .viewport(800,600)
    .goto(@config.app.login.url)
    .wait()
    .type('input#userid', @config.app.login.username)
    .type('input#passwd', @config.app.login.password)
    .click('input.loginButton')
    .wait()


module.exports = RakutenTestRunner
```

### テストケースの作成

```coffee
assert = require 'assert'
RakutenTestRunner = require './rakuten-test-runner'
config = require './config'

testRunner = new RakutenTestRunner(config)

describe 'login and logout at rakuten.co.jp', () ->

  this.timeout(config.mocha.timeout)

  describe 'login and logout', () ->

    it 'login and logout', (done) ->
      testRunner
      .login()
      .evaluate(
        () ->
          return {
              "location": location.origin + location.pathname
          }
      ,
        (result) ->
          assert.equal(result.location, 'http://www.rakuten.co.jp/')
      )
      .screenshot('./logs/screenshots/login.png')
      .click('a.mr-logout-btn')
      .wait()
      .evaluate(
        () ->
          return {
            "location": location.origin + location.pathname
          }
      ,
        (result) ->
          assert.equal(result.location, config.app.logout.url)
      )
      .screenshot('./logs/screenshots/logout.png')
      .run(done)
```

## テスト実行
`package.json`に下記のように実行コマンドを登録しておき、

```json
{
  "scripts": {
    "e2e-test:example": "mocha --compilers coffee:coffee-script/register tests/example.coffee"
  },
```

`npm run`にて実行します。

```bash
$ npm run e2e-test:example
```

## 実行結果（スクリーンショット）

### ログイン後
![rakuten_login.png](https://qiita-image-store.s3.amazonaws.com/0/26422/68163736-aba0-1f63-072e-52cf8116c4c2.png "rakuten_login.png")

### ログアウト後
![rakuten_logout.png](https://qiita-image-store.s3.amazonaws.com/0/26422/87d56e3b-c1ac-3674-390f-f486eb6f05ad.png "rakuten_logout.png")


## example（2015/10/18更新）
`rakuten.co.jp`にログインして、ログアウトする単純なテストケースですが、githubにexampleを作りましたので、参考までに使ってみてください。
https://github.com/imunew/nightmare-example/tree/nightmare_v1
（masterブランチは、v2ベースになっていますので、nightmare_v1をブランチを参照ください）


## 参考

- [NightmareでE2E](
http://qiita.com/mizchi/items/2c406b501a4f93ca9752)
- [NightmareでE2Eテストしつつスクリーンショットとってgifに結合したら目視チェックが最高に楽になった](http://qiita.com/mizchi/items/04c53e17ed5c4ec7e8d7)
- [mochaをCoffeeScriptで使おう](http://qiita.com/dll7/items/599f51f1d79f7e73ccef)
- [nightmarejs.org](http://www.nightmarejs.org/)
- [nightmare - github](https://github.com/segmentio/nightmare)
- [mochajs.org](https://mochajs.org/)