java scriptによるテスト駆動開発

2013/10/23 中村

1.テスト駆動開発とは

2. テスト駆動開発の目的

3. テスト駆動開発の流れ

4.テストフレームワークによるテスト

テスト駆動開発（TDD）とは

テスト用プログラムを書く

テストを行う

リファクタリングによるコードの改善

これを繰り返して開発を進める開発手法

プログラムを外部から見た動作を変えずにソースコードの内部構造を整理すること

コードを追加・変更を繰り返していくうちに重複箇所や煩雑になった場合などの対応すること

他の言語と比べてデバッグしにくい事が挙げられる

エラーが発生しても画面から得られる情報が少ない

テストコードを書き、少しづつ開発を進めていくこの手法が向いていると思われる

１．開発が早くなる

２．クロスブラウザテストが簡単に行える

繰り返し自動でテストが行われることで、正常だったプログラムを修正してバグが発生してしまった場合にもすぐに検知できる。

難易度が高い開発の場合、テストコードを短い間隔で記述して実行していくことにより、整理されていく。その結果、早い開発が可能となる。

テスト駆動開発では常にテストが付きまとう。そのテストが思った通りに動作することに気を付けながら開発を進めていく

その結果・・・

着実に進められるため、結果的にバグによる戻り作業の少ない開発が行える

ツールによって引数にブラウザを設定し、そのブラウザを起動してテストを行える

テストコードを書く、ということは初期投資が必要となる。初期投資が回収出来ないような開発では適用すべきではない

テスト駆動開発は以下の作業サイクルを細かく繰り返してプログラミングを進めていく

テストを書く

不合格確認

合格確認

重複削除のためのリファクタリング

実装する機能を選び、そのための単体テストを書く。短く、単一の振る舞いを対象にするべき

テストコードがバグを含んでいる可能性もある

そういった可能性も考慮して、敢えて不合格テストを実施する。不合格テストを実施することでコードの現在の状態を把握する。

テストを成功させる

重複削除などコードをリファクタリングしてきれいにする。

JavaScriptのテストフレームワークはたくさん存在する

参考として以下に例を紹介する

テストを絶えず実行し作業フローにテストを組み込むことが煩わしい

JsUnit 更新が遅く、新しいプロジェクトに適用するには不向き。Prototype.jsライブラリ

のために作られていたこともあり、依存しがち。

YUI Yahooが作成したブラウザ内テストフレームワーク

QUnit jQueryチームが開発。伝統的なxUnitの設計に厳格に従っていない。

コマンドライン上でテストを実行できるが、本番コードが実行されない環境でのテストとなる

Crosscheck 更新されておらず、現在のブラウザでは対応できない

Rhinoとenv.js JQueryを作った方が開発したライブラリ

以下のツールによる開発を紹介する

JsTestDriver 実際のブラウザ、モバイルでもテスト可能

EclipseやIntelliJ IDEAへのプラグインもある

Junitと互換性のあるXMLレポートの出力も可能。Jenkinsとの連携も簡単に対応できる

しかし古いブラウザに対応していない部分もある。

（XMLHttpRequestオブジェクトを必要とするVar.7

以前のIEには対応できない）

4.1サーバーの起動

4.2ブラウザにアクセス

4.3テスト実行

sudo java -jar

$JSTESTDRIVER_HOME/JsTestDri

ver-1.3.5.jar --port 4224

ブラウザで以下のアドレスにアクセス

http://localhost:4224

cd $JSTESTDRIVER_HOME/files/test-

driven-javascript-development-

code/00-main/case01/

sudo java -jar

$JSTESTDRIVER_HOME/JsTestDriver-

1.3.5.jar --tests all

テストリスト：

①4で割り切れる年はうるう年と判定する

②ただし、100で割り切れる年はうるう年でないと判定する

③ただし、400で割り切れる年はうるう年と判定する

①2004年は4で割り切れるため閏年

②2100年は100で割り切れるため閏年でない

③2000年は100で割り切れるが400で割り切れるため閏年

まずは失敗するパターンで実行する

入力データ：７

// main.js

function isLeapYear(year){

jstestdriver.console.log(year

);

if ((year % 4) == 0) {

return true;

}

return false;

}

// isLeapYear.js

TestCase("isLeapYearTest", {

'test isLeapYear':

function(){

var setYears = 7;

assertEquals(true,isLeapYear

(setYears));

}

}

) 入力データ7のケースを追加

Total 1 tests (Passed: 0; Fails: 1; Errors: 0)

(1.00 ms)

Firefox 17.0 Linux: Run 1 tests (Passed: 1;

Fails: 0; Errors 0) (1.00 ms)

isLeapYearTest.test isLeapYear passed

(1.00 ms)

[LOG] 7

次に成功パターンで実行する

入力データ：８

// main.js


jstestdriver.console.log(year

);

if ((year % 4) == 0) {

return true;

}

return false;

}

// isLeapYear.js


'test isLeapYear':

function(){

var setYears = 8;

assertEquals(true,isLeapYear

(setYears));

}

}

)

入力データ8のケースを追加


(1.00 ms)



isLeapYearTest.test isLeapYear passed

(1.00 ms)

[LOG] 8

まずは失敗するパターンで実行する

// main.js


jstestdriver.console.log(ye

ar);

if ((year % 4) == 0) {

if (year % 100 == 0) {

return false;

}

return true;

}

return false;

}

// isLeapYear.js


'test isLeapYear4': function(){

var setYears = 4;

assertEquals(true,isLeapYear(setYears));

},


var setYears = 40;


},

}


両方成功してしまうケース


(0.00 ms)



isLeapYearTest.test isLeapYear4 passed

(0.00 ms)

[LOG] 4

isLeapYearTest.test isLeapYear100 passed

(0.00 ms)

[LOG] 40

あ // main.js



ar);

if ((year % 4) == 0) {

if (year % 100 == 0) {

return false;

}

return true;

}

return false;

}

// isLeapYear.js



var setYears = 4;


},


var setYears = 100;


},

}

)

入力データ100のケースを追加

こちらは閏年ではないので

Failsで返ってくるはず

Total 2 tests (Passed: 1; Fails: 1; Errors: 0) (1.00 ms)

Firefox 17.0 Linux: Run 2 tests (Passed: 1; Fails: 1; Errors 0) (1.00 ms)

isLeapYearTest.test isLeapYear4 passed (0.00 ms)

[LOG] 4

isLeapYearTest.test isLeapYear100 failed (1.00 ms): AssertError: expected true but was false

.test isLeapYear100@http://localhost:4224/test/test/isLeapYear.js:9

[LOG] 100



[LOG] 4


[LOG] 40

// main.js


jstestdriver.console.log(year);

if ((year % 4 == 0) || (year % 100 != 0)) {

return true;

}

return false;

}

// isLeapYear.js



var setYears = 4;

assertEquals(true,isLeapYear(setYea

rs));

},


var setYears = 100;

assertEquals(true,isLeapYear(setYea

rs));

},

}

)

// main.js


jstestdriver.console.log(yea

r);

if ((year % 4 == 0) ||

(year % 100 != 0)) {

return true;

}

return false;

}




[LOG] 4


[LOG] 100

入力データ４は成功（閏年）

入力データ100は失敗（閏年ではない）

となるはず・・・

おかしい

// main.js

function

isLeapYear(year){

jstestdriver.console.log

(year);

if ((year % 4 == 0) &&

(year % 100 != 0)) {

return true;

}

return false;

}

// isLeapYear.js



var setYears = 4;

assertEquals(true,isLeapYear(setYears)

);

},


var setYears = 100;

assertEquals(true,isLeapYear(setYears)

);

},

}

)




[LOG] 4



[LOG] 100

成功！

// main.js



ar);

if(year % 400){

return true;

} else if ((year % 4 == 0)

&& (year % 100 != 0)) {

return true;

}

return false;

}

// isLeapYear.js



var setYears = 4;


},


var setYears = 100;


},


var setYears = 200;


},

}


こちらは閏年




[LOG] 4


[LOG] 100


[LOG] 200

再度テストを行い、成功を確認する

// main.js



ar);

if (year % 400 == 0 ||

(year % 4 == 0 && year %

100 != 0)) {

return true;

}

return false;

}

// isLeapYear.js



var setYears = 4;


},


var setYears = 100;


},


var setYears = 400;


},

}

)




[LOG] 4


[LOG] 100



[LOG] 400

テストを書

く

不合格確認

合格確認

リファクタリング

java scriptによるテスト駆動開発

Education