これは TDD Advent Calendar 2013 の24日目です。

23日目

@quicy さんのレガシースタイル: JnarioでJavaのTDD でした

24日目 : Chrome Extensionでユニットテストしてみる

Chrome Gitlab Notifier でユニットテストをしてみたので共有です

何をテストするのか？

人によって粒度は違うと思いますが、自分の場合普段のウェブアプリの開発だと

Model : 割と書く
- 不安なところは全部テストを書く
View : 書かない
- デザイン崩れや使いやすいかどうかは目で見ないと分からないため自動化できない
- 社内ツールを作ることが多いので、画面は適当でいい
- 分単位で変わる仕様に対してユニットテストを書くのは無駄
Controller : 多少書く
- GETやPOST叩いた時にエラーが起きないこと（最低限のハッピーパスの担保）
- 中のModelも呼ばれるので結合テストも兼ねている

くらいの粒度でユニットテスト書いています。

Chrome Extensionの場合

Model : 存在しない
- Chrome Extensionでそんなに複雑な処理はやらないはず
- APIを叩くケースだとModelが完全に外部にあるためテストは不要
  - もちろん自分でAPIを作ってる場合だとAPI側でのテストは必要です
View
- デザイン崩れや使いやすいかは（ｒｙ
Controller
- APIを叩けるかどうか

のようになるため、個人的にユニットテストは無くてもいいと思います（笑）

無理矢理ユニットテストをしてみた

Jasmine + Phantomjs + Travis CI という構成でユニットテストをしています

Jasmine

普段からRSpec書いているので慣れている
SpecRunner.html を表示すればブラウザでテストが出来るのでお手軽

Phantomjs

phantomjsにSpecRunner.htmlを読ませることでコマンド内でユニットテストが出来る
WebKitエンジンが内包されているため、Chrome Extensionのユニットテストにも適している
ただしChromeの独自APIまではサポートされていないため、ユニットテストではスタブにする必要があります
- 参考 Chrome拡張開発のユニットテスト事情 - laiso

PhantomJSでJasmineのテストを動かすためのサンプルコマンド

phantomjs spec/lib/run-jasmine.js spec/SpecRunner.html

run-jasmine.js はphantomjsのリポジトリでDL出来ます https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js

Travis CI

phantomjsはTravis CIにデフォルトで入ってるので特に .travis.yml 内でのインストール手順も不要です（基本的には先述のコマンドを書くだけでOK）

おまけ : Travis CIでテストに成功したらmasterをgh-pagesにpushする

個人的にgh-pagesをmaster扱いするのは違和感があったし、かといって手動でgh-pagesを更新するのも面倒臭かったので自動化しました。

https://github.com/sue445/chrome-gitlab-notifier/blob/master/.travis.yml

after_success:
  - git checkout -b gh-pages
  - '[ "$TRAVIS_BRANCH" == "master" ] && [ "$TRAVIS_PULL_REQUEST" == "false" ] && [ $GH_TOKEN ] && git push -f --quiet https://$GH_TOKEN@github.com/sue445/chrome-gitlab-notifier.git gh-pages'
env:
  global:
    - secure: "SOME_TOKEN"

解説

git checkout -b gh-pages

Travis CIでcheckoutした時はテスト対象のbranchしか存在しないため checkout -b でbranchを作成する

'[ "$TRAVIS_BRANCH" == "master" ] && [ "$TRAVIS_PULL_REQUEST" == "false" ] && [ $GH_TOKEN ] && git push -f --quiet https://$GH_TOKEN@github.com/sue445/chrome-gitlab-notifier.git gh-pages

[ "$TRAVIS_BRANCH" == "master" ]
- masterブランチのみを対象
[ "$TRAVIS_PULL_REQUEST" == "false" ]
- Travis CIはPull RequestされたBranchにもテストするため、これをつけないとPull RequestされたBranchがgh-pagesにpushされるｗ
$GH_TOKEN
- .travis.yml の env/global/secure に書かれたtoken
- githubで発行したtokenをTravis CIのgemで暗号化してるものなので外部に公開しても安全らしい（Travis CI以外でtokenを復号化できないため）
git push -f
- ぷっしゅはいふんえふ　たのしー！
- --quiet をつけないとTravis CIのログに復号化されたtokenが出るので必須