新人SEの学習記録

14年度入社SEの学習記録用に始めたブログです。もう新人じゃないかも…

学習記録:Webフロントエンド

[学習記録] JavaScript開発におけるテスト

内容:10章 JavaScript開発におけるテスト

テストとは?
  • テストの定義
    • プログラムを実行し、正しく動作するか確認する作業
    • バグをできる限り多く発見することを目標として行われる
    • デバッグはすでに判明しているバグについて調査・修正する作業
    • テストは正しい動作をしているかどうか確認する作業
  • テストの種類
    • 単体テスト
      • ソースコードの個々の単位(ユニット)での機能のテスト
      • 個々のユニットのテストが他のユニットのテストに影響されないことが理想的
      • テストダブルという手法を使うことがある
    • 総合テスト
      • ユニットテストの後に行う
      • ユニット単位でテストをパスした部品を組み合わせた状態で上手く機能するかを確認する
    • そのほかのテスト
      • リグレッションテスト:再帰テスト。バグの修正によってエンバグしていないか確認する
      • ビジュアルテスト:総合テストのうち、特にブラウザの見た目について確認する
  • テストのメリット
    • 安心して開発ができる
    • =既存の機能が正しく動いていることを保証しながら、コードを書き換えることができる
    • テストコードが残ることによって、再現性が担保される
    • ドキュメントを書くことと似たような効果も得られる
  • テストのデメリット
    • 工数が余分にかかる>感覚値で1.5〜2倍
    • 中・長期のスパンでは、テストを書く工数よりもテストを書かずに機能追加する際の手戻りなどの修正の方が大きい
フロントエンドのテスト
  • 個々数年で急速にテストフレームワークが整備
    • フロントエンド開発の複雑化
      • jQueryなどのライブラリが主流だったが、Backbone.jsやAngularJSなどのMVCフレームワークが台頭
      • JavaScriptのコードをモジュールしやすくするためのライブラリRequireJS
      • 以前よりもコード単位でテストがしやすくなってきた
    • Node.jsの隆盛
      • サーバサイドのJSとしてNode.jsが普及
      • フレームワークやテストランナーの整備が進み、より簡単にテストができるように
    • そのほかのフロントエンドのツールの進化
  • テスト駆動開発
    • 最初にテストを書き、そのテストをお明日する最低限の実装を行う
    • その後コードのリファクタリングとテストを繰り返し、品質を上げていく
    • サイクル
      • 1) 仕様にそってテストを書く
      • 2) コードがないので、1のテストは失敗する
      • 3) 1のテストが通るように、最低限のコードを書く
      • 4) 3のコードのうち、重複や冗長な実装をテストがパスするように修正(リファクタリング
    • 利点
      • きれいで動くコードを書けるようになる
      • テストをまず書くために設計などでの不備が判断しやすい
ユニットテスト
  • ユニットテストフレームワーク
    • QUnit
      • jQueryのテストのために開発
      • 09年にはjQueryがなくても動作するように
      • DOMに関するEventのテストやAjaxのテストなどもできるAPIが用意
    • Jasmin
      • ビヘイビア駆動開発によりテストを記述
      • テストの内容をその機能の振る舞いや要求仕様として自然言語(英語)に近い形で記述
      • テストコードの可読性を上げていく
    • Mocha
      • Node.jsもブラウザもどちらでも使用できるよう、テストコードを読み込むHTMLが無くてもコマンドラインでテスト可能
      • アサーションライブラリ:アサーション部分を別のライブラリを使うことにより自由に選択可能(Chaiなど)
テストダブル
  • これまでのテストフレームワークでは実際のテストで困るケースも
    • setTimeout()を使って5時間ごとに発火するメソッドのテスト
    • 特定のメソッドが何回呼ばれているかテストしたい
    • サーバ側での実装はまだだが、Ajaxのテストをしたい
  • テストダブル
    • テスト用に元のメソッドをそっくり入れ替える
    • JS用にはSinon.JSが使われることが多い
      • Spy:指定したメソッドが呼ばれたかどうかテスト
      • Stub:指定メソッドの動作を変更してテスト
      • Mocks:指定メソッドが何回呼ばれたかをテスト
      • Fake XMLHttpRequestXMLHttpRequestのテストをサーバなしでテスト
      • Fake server:擬似的にサーバと通信する状態を作り、レスポンスなどを使ってテスト
      • Faking time:setTimeout()やsetInterval()などの時間を自由に指定してテスト
テストランナー
  • ここまでのテストライブラリ
    • ブラウザで特定のページを開いてボタンを押したりして結果を見る
    • 開発でコードを書く>ブラウザをリロード>ボタンを押す…
    • 効率が悪く時間もかかる
    • そこで、テストやコードが保存されたら自動でテストを事項し、結果の表示をさせるのがテストランナー
  • テストランナー
    • 仕組み
      • ターミナルでコマンドを打っておく
      • 設定ファイルであらかじめ指定されているファイルの変更を監視
      • 変更があればブラウザを立ち上げてテストコードを実行
    • 現在使われているテストランナー
      • Karma
      • Testem
      • js-test-driver