QUnitで検索するとこういうテストケースしか出てこない。
QUnit.test( "hello test", function( assert ) {
assert.ok( 1 == "1", "Passed!" );
});
普通に普段JavaScriptで何を書いているか？
クリックしたら、開くとか、変わるとか、読み込む、とかそういう処理がほとんど。
ということでクリックイベントのテストを書いてみる。
まずは以下のようなHTMLを用意して、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Click Run</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="click.js"></script>
<body>
<div id="ctrl_btn">Apple</div>
<div id="result"></div>
</body>
</html>
Appleの文字（というか id="ctrl_btn" の div ）をクリックしたら、その下に文字が出るというような click.js を作る。
こんな感じ。
$(function() {
$('#ctrl_btn').on("click", function() {
$('#result').text('Google');
});
});
で、テスト用の index.html は以下のような感じで。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Click Test</title>
<link rel="stylesheet" href="qunit.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="qunit.js"></script>
<script src="click.js"></script>
<script src="testclick.js"></script>
<body>
<!-- テスト結果表示領域 -->
<div id="qunit"></div>
<div id="qunit-fixture">
<div id="ctrl_btn">Apple</div>
<div id="result"></div>
</div>
</body>
</html>
qunit-fixture の部分にテストに必要な要素をあらかじめ配置しておく。
これはテスト終了とともに消滅する。
ではテストを書くべし。
QUnit.test("クリックして文字を出す", function( assert ) {
var event = $.Event( "click" );
$( "#ctrl_btn" ).trigger( event );
assert.equal( $( "#result" ).text(), 'Google', 'クリックで文字が出ます');
});