Yukaary Craft: Frontend Testing on Javascript

ここ最近のWeb APIフロントエンド部のテスト方法について調べてみる.

Test Runner

Jasmine
RSpecよりのテスター.

QUnit.
XUnit, JUnitとかCPPUnitの系列.

Mocha
node.js, ブラウザで動作するJavascript用テストフレームワーク. 昨日のYeomanは、Scaffolding時にこれをインストールしていた.

Cucumber
自然言語というと言い過ぎだけどテストコードをテスト手順っぽく書ける便利なテスタ.

Cucumber lets software development teams describe how software should behave in plain text. The text is written in a business-readable domain-specific language and serves as documentation, automated tests and development-aid - all rolled into one format.

Cucumber works with Ruby, Java, .NET, Flex or web applications written in any language. It has been translated to over 40 spoken languages.
---
Cucumberは普通のテキストでソフトウェアを振る舞いを記述できます. テキストはビジネスよりのドメイン記述言語として記述されています. このフォーマットだけで開発文書、自動テスト、development aidを提供します.

CucumberはRuby, Java, Net, Flex, などあらゆる言語で書かれたWebアプリケーションに適用可能です. 40以上の言語に翻訳されています.

アサーションライブラリ

Chai
他のテストフレームワークと組み合わせて使うBDD/TDDアサーションライブラリ. MochaとChaiだからデフォルトの組み合わせを意識しているんだろうな…

TDD/BDD

JavascriptだとBDDを前提にするテストフレームワークが多い印象.
上に挙げたものを分類してみるとJasmine, Mocha,CucumberはBDD,QUnitがTDDを指向しており、使用率はJasmineとMochaで5割超えているとか.

TDD : Test Driven Development
BDD : Behavior Driven Development

(なんか最近略称が増えてきてこんがらがってくるorz)

ドライバとかスタブみたいなやつ

Sinon.js

ブラウザのエミュレータ？

Phantom.js

Phantom.js](http://phantomjs.org/ “Phantom.js”)
ブラウザ無しでテストを実行するエミュレータさん. これ自身はテスト機能を持っておらず上で挙げたJasmineとQUnitと組み合わせて使うのかな.
公式ページには「PhantomJS is a headless WebKit scriptable with a JavaScript API」と載っている.

Capybara

Capybara.
Rails用のテストフレームワークみたいだけど別にRailsアプリケーションでなくても使えるみたいだから挙げてみる.
公式サイトから転載

Capybara is a library written in the Ruby programming language which makes it easy to simulate how a user interacts with your application.
----
CapybaraはRubyで書かれたライブラリです. アプリケーションに対するユーザのインタラクティブな操作をシミュレートします.

試用開始

いっぱいあるなぁ…いいと思う.やめたくなったけど、せっかくだから試していく.

Capybara x Cucumber

準備

どちらもgemでインストールできる. 下記サイトを見ながらやってみた. あっても別に困らないからrspecもインストール. 昨日RedmineがらみでRailsも入ってるし.

http://www.atmarkit.co.jp/ait/articles/1302/20/news032.html

yukaary$ gem install capybara capybara-webkit headless cucumber rspec --no-ri --no-rdoc
...
13 gems installed

全部入ったと思ったらcapybara-webkitが入ってない. 調べてところqt無いと駄目と言われたのでbrew経由で入れる.

yukaary$ brew update
error: Your local changes to the following files would be overwritten by merge:
    Library/Formula/readline.rb
Please, commit your changes or stash them before you can merge.
Aborting
Error: Failure while executing: git pull -q origin refs/heads/master:refs/remotes/origin/master

はい失敗. 更に調べてbrewは/usr/localをgitリポジトリにしてるらしいからこれを手動でリモートに同期させろとかなんとか.

yukaary$ cd $(brew --prefix)
yukaary$ git fetch origin
yukaary$ git reset --hard origin/master
yukaary$ brew update
Already up-to-date.

なんとかなってそう.

yukaary$ brew install qt
Building native extensions.  This could take a while...
Successfully installed capybara-webkit-1.1.1
Parsing documentation for capybara-webkit-1.1.1
Installing ri documentation for capybara-webkit-1.1.1
Done installing documentation for capybara-webkit after 2 seconds
1 gem installed

やったぜ.
入ったライブラリのバージョン.

capybara 2.3.0, 2.2.0.rc1
capybara-webkit 1.1.1
headless 1.0.2
cucumber 1.3.15
rspec 3.0.0

ここでcapybaraが2.3.0と2.2.0.rc1の2バージョン入っているのはcapybara-webkit 1.1.1が2.2.0.rc1に依存しているからみたい.この後にcapybaraを動かしたときに「capybaraが競合しているぞ」とか言われて失敗したので2.3.0のほうはアンインストールした.

yukaary$ gem uninstall capybara

Select gem to uninstall:
 1. capybara-2.2.0.rc1
 2. capybara-2.3.0
 3. All versions
> 2
Successfully uninstalled capybara-2.3.0

更にheadlessというgemがバックエンドにしているXvfbが無いと言われて怒られる. /usr/X11/bin/xvfb にあるらしいんだけど、確かにない. ubuntuだったらapt-getで手に入るみたいだけどOSXについては直接の情報が無かった.
調べた結果、XQuartzに同梱されているみたいなので、これをダウンロード(dmgパッケージ)、インストールした.

お試し開始

ここまでやってようやっとお試しできるorz.
昨日作った、backboneを用いたアプリのスクリーンショットを撮るテストスペックを書いてみる.
ほぼこちらのサンプルを参考に作った.

yukaary$ rake features
# language:ja
機能: 指定したURLのスクリーンショットを撮る

  シナリオ: 表示してスクリーンショット.               # features/sample.feature:3
    前提"http://localhost:9000/"を表示    # features/step_definitions/steps.rb:10
    ならばスクリーンショットを取得し"yukaary.png"に保存 # features/step_definitions/steps.rb:13

1 scenario (1 passed)
2 steps (2 passed)
0m3.012s

やったぜ. テストを実行したディレクトリの直下にyukaary.pngが生成された. 中身を確認してみるとdiv要素”main-contents”の中身が空っぽ（本来ならテキストがあってBackbone.Viewで描画させている）. でも一応スクリーンショットを取れた.
これからテストらしいテストを書いてみる.

Capybara x Cucumberの感想

これ、テスト手順（plain test）をCapybaraに認識させるために、ペアになるDSLの定義を書かないといけないのかな.
sample.feature

# language:ja
機能: 指定したURLのスクリーンショットを撮る
  シナリオ: 表示してスクリーンショット.
    前提 "http://localhost:9000/"を表示
    ならば スクリーンショットを取得し"yukaary.png"に保存

steps.rb

...
include Capybara::DSL
前提 /\"(.+)\"を表示/ do |url|
  visit(url)
end
ならば /スクリーンショットを取得し\"(.+)\"に保存/ do |filename|
  page.save_screenshot "./#{filename}"
end

steps.rbには、このまま他の手順（ならば）を追記していけそうだけど、DSLの管理がどうしても必要になりそう. 誰かデフォルトでそういうのを提供していそうだから、探してみようかな.
機械的に実行できるテストを日本語でそれっぽく記述できるのはとてもいいと.

Cucumberの日本語定義一覧.

yukaary$ cucumber --i18n ja
      | feature          | "フィーチャ", "機能"                                  |
      | background       | "背景"                                           |
      | scenario         | "シナリオ"                                         |
      | scenario_outline | "シナリオアウトライン", "シナリオテンプレート", "テンプレ", "シナリオテンプレ" |
      | examples         | "例", "サンプル"                                    |
      | given            | "* ", "前提"                                     |
      | when             | "* ", "もし"                                     |
      | then             | "* ", "ならば"                                    |
      | and              | "* ", "かつ"                                     |
      | but              | "* ", "しかし", "但し", "ただし"                       |
      | given (code)     | "前提"                                           |
      | when (code)      | "もし"                                           |
      | then (code)      | "ならば"                                          |
      | and (code)       | "かつ"                                           |
      | but (code)       | "しかし", "但し", "ただし"                             |

Yukaary Craft

Sunday, June 29, 2014

Frontend Testing on Javascript