リア充爆発日記

You don't even know what ria-ju really is.

backbone.jsについて調べたときのメモ

Javascript

RailsでJavascript/CoffeeScriptをテストするときの決定版（にしたい）！Konacha

Javascript Ruby on Rails

というわけでKonachaです。https://github.com/jfirebaugh/konacha
なにこれ、粉茶？

JavascriptのテスティングフレームワークとしてはJasmineやらMochaあたりがメジャーどころのようだけど、セットアップが難しかったりして「これだ！」というものがなかった。個人的には。
で、今回、よーし、お父さんCoffeeScript書いちゃうぞー！というタイミングにあたって、もう一回いろいろ探してみたところ、これが一番スジがいいっぽかった。

KonachaはRailsでMochaとchaiを使いやすくしたGemらしい。Mochaとchaiは使ったことなかったけど、公式を5秒ほどみたところ、nodeでうごくrspecライクなテスティングフレームワークということでJasmineとかとあんまかわらないんじゃないかと推測。chaiはマッチャーのライブラリのようなのてHamcrestみたいなもんかな。

インストール

group :test, :development do
  gem 'konacha'
end

bundle installでおわり。


使い方

テストを作る
# hello_konacha_spec.js.coffee
#= require application
describe "HelloKonacha#sayHello", ->
  it "says 'Hello World!'", ->
    konacha = new HelloKonacha()
    konacha.sayHello().should.eql("Hello World!")

# hello_konacha.js.coffee
$ ->
  class window.HelloKonacha
    sayHello: () ->
      "Hello World!"

このとおり、RSpecライクにテストが書ける。ちなみに15分くらいハマったポイントがあって、shouldとeqlは離しちゃだめだから。ドットでつながってるから。RSpecの先入観で離して書いてて、テスト通らなくて焦ったから。

テストを動かす
  • serverを起動する方法
    • 開発中はこの方法がオススメ
$ bundle exec rake konacha:serve
Your tests are here:
  http://localhost:3500/
[2013-01-22 13:22:49] INFO  WEBrick 1.3.1
[2013-01-22 13:22:49] INFO  ruby 1.9.3 (2012-11-10) [x86_64-darwin12.2.1]
[2013-01-22 13:22:49] INFO  WEBrick::HTTPServer#start: pid=30777 port=3500
    • ブラウザでhttp://localhost:3500/ にアクセスするとテストが動く。リロードすれば再実行。
    • http://localhost:3500/array_sum_spec　とか　http://localhost:3500/models　とかアクセスURLを変えると、部分的にテストを実行できる
    • テストはspecファイルごと（たぶん）にiframe内で動くので、タグ全体をテストに使うことができる。タグ要素はテストごとにリセットされる。
    • javascriptコンソールでコードを動かすときは、対象のiframeを選択するのを忘れないようにすること。 
$ bundle exec rake konacha:run
    • ぼくんとこの場合、Firefoxが実際に立ち上がって、そして自動的に終了していった。。
    • ブラウザがないサーバで実行したらどうなるんだろう？
      • その辺は今回は割愛。Jenkinsにのっけるときに調べるのでまた次回。
    • ci_reporterとかguard-konachaとかもあるらしいけど今んとこ興味ないので割愛。


他にもヘルパーとかあるけど、今回はコレで終わり。
確かにあっさり動いたので、まずはテストを書くことに慣れてみようと思う。

追記）いいスライド見つけた。
http://sssslide.com/www.slideshare.net/markykang/testing-javascriptcoffeescript-with-mocha-and-chai

PhantomJSとPoltergeistでHeadlessなJavascriptテスト環境を作る

Javascript unit test

RailsでJavascript/CoffeeScriptをテストするときの決定版（にしたい）！Konachaの続き。

最初はブラウザリロードすればいいんだから、わざわざやらなくていいか、と思ったけど、当該環境がファントムとかポルターガイストとか中二病の諸症状を悪化させる瘴気にまみれていたため、やらざるを得なくなりました。

ところでヘッドレスとは、ただ単にGUIじゃないよ、というだけで、かっこつけてんじゃねーよとか最初は思ったけど冷静になってみると、別にそんなかっこよくもねーか、ということでとにかくそういうことで。

Rails前提の話です。

PhantomJSのインストール

http://phantomjs.org/
PhantomJSが、そのヘッドレスブラウザの本体。
macだとhomebrewで入る。

brew install phantomjs

ウィンドウズのかたはゲイツとかにインストール方法を聞いてください。

poltergeistのインストール

poltergeistはPhantomJSと連携してくれるcapybaraのドライバ。
gemでインスコ。

group :development, :test do
~snip~
  gem 'konacha'
  gem "poltergeist"
end

設定ファイルを少々

poltergeistを使うようにconfig/initializersに設定ファイルを置く。

# config/initializers/konacha.rb
if defined?(Konacha)
  require 'capybara/poltergeist'
  Konacha.configure do |config|
    config.driver = :poltergeist
  end
end

ヘッドレスっぷりを感じる

以下のコマンドを実行して、ブラウザが立ち上がらずにテストが通ることを確認する。
※このへんはRailsでJavascript/CoffeeScriptをテストするときの決定版（にしたい）！Konachaを参照

bundle exec rake konacha:run

guard-konachaでテストを自動実行

https://github.com/alexgb/guard-konacha
ここまで来ると、コマンドを叩くのもめんどくさくなってくる。ゲイラの気持ちがよくわかります。

  • gemでインストール
group :development, :test do
~snip~
  gem 'konacha'
  gem "poltergeist"
  gem 'guard-konacha'
end
  • Guardfileに設定追加
~snip~
guard :konacha do
  watch(%r{^app/assets/javascripts/(.*)\.js(\.coffee)?$}) { |m| "#{m[1]}_spec.js" }
  watch(%r{^spec/javascripts/.+_spec(\.js|\.js\.coffee)$})
end

なお、Guard自体のインストールはGuard+Spork+GrowlでRspecを自動実行する設定あたりで。

  • Guard実行
bundle exec guard start

あたりまえだけど、Guardfileが一緒だからRspecのほうも動いちゃうんだよなぁ。ウォークスルーテストやるとけっこう時間がかかっちゃう。まあ、RSpecとkonachaのどちらかの設定をコメントアウトしつつ、かな。

これ、Jenkinsとかでも、PhantomJSだけ別の方法でインストールすればほぼ済むんじゃないかな。

ただねぇ、これ、スゲーおそいんだよね。guardがどうこうっていうよりkonacha:runが遅いのかな。自動的にテストが走ってくれるのはいいんだけど、細かく結果を確認するんだったらブラウザリロードのほうが現実的だね。

ともあれ、ファントムファントム！