くりにっき

ドリコムのプリキュアの人です

Chrome Extensionでユニットテストしてみる #TddAdventJp

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

23日目

@ さんの レガシースタイル: 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
    • デザイン崩れや使いやすいかは(ry
  • Controller
    • APIを叩けるかどうか

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

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

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

Jasmine

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

Phantomjs

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されるw
  • $GH_TOKEN
    • .travis.yml の env/global/secure に書かれたtoken
    • githubで発行したtokenをTravis CIのgemで暗号化してるものなので外部に公開しても安全らしい(Travis CI以外でtokenを復号化できないため)
  • git push -f
    • ぷっしゅはいふんえふ たのしー!
    • --quiet をつけないとTravis CIのログに復号化されたtokenが出るので必須

参考になったサイト

参考書籍

テスタブルJavaScript

テスタブルJavaScript

最近出たオライリーから書籍ですが、ユニットテストだけでなくウェブインスペクタやJenkins周りなど広い意味でのJavaScriptのテストについて触れられているのでおすすめ

テスト駆動JavaScript

テスト駆動JavaScript

JavaScriptでTDDの基礎を学ぶための1冊。JsTestDriverはIDEとの親和性は高いんだけど、JsTestDriver自体にハマるのであまりおすすめしたくない。。。

25日目

大トリは id:t-wada‎ さんの 不具合にテストを書いて立ち向かう - t-wadaのブログ です!!!!