QUnit導入をする際に、既存のJavascriptをどのように直してテストを書くのかについてまとめました。

QUnitの導入によってUnitTestを行う準備は整いました。

しかし、今までJavascriptでテストなんでしたことない筆者には、いきなりテストコードを書けといわれても難しいものが有りました。

どうしようかと思っていたところ、QUnitの公式ページにJavascript単体テストまでの具体的な方法が記載されていることを発見しました。

今後のテストに役立つよう、内容を噛み砕いて以下にまとめます。(元：http://qunitjs.com/intro/)

0. DOM操作とロジックの分離

Javascriptのうち、DOM(HTMLの要素)を操作する部分とそれ以外の部分(ロジック部分)について分離します。

これによってロジック部分はある値をインプットとして渡せば、常にそれに対応する特定の値を返すようになるため、単体テストが書きやすい状態となります。

1. ロジック部分のテスト

0. さえできればこれは簡単にできます。引数を渡し、その戻り値が想定のものかを検証します。

大抵、ひとつのロジックに対して様々な値を渡すようにテストを書くことになりますが、検証用のコードには重複する部分が出てくると思うので出来る限り共通化します。

2. DOM操作のテスト

テストに必要な最低限のHTMLをテストドライバのHTMLに記載し、テストを行う。

注意したいのは、従来のHTMLを使ったテストと異なり、目視ではなくロジックによって検証を行うこと。

例えば、div内のHTML要素の値を検証するなら、getElementsByTagName(“div”)[0].innerHTMLの値を用いて検証する。

 

以上で単体テストの導入が完了します。

新規で開発する際は、テストしやすいような設計とするように心がけることで0.のステップを跳ばすことができます。

既存のコードに対してこれらを行う際は、従来の目視によるテストを行いながらリファクタリングを行い、DOM操作とロジック部分の分離を行うようにしましょう。