QUnitでクリックイベントをテストする #JavaScript

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', 'クリックで文字が出ます');
});