QUnitを使ったイベントハンドラのテスト : JavaScript

Tweet

Pocket

QUnitを使ったイベントハンドラのテスト。

href属性の値に文字列(空文字以外)が設定されているときはその文字列を返しそれ以外はfalseを返すクリックイベントのテスト。

• handler.html
• qunit
  • qunit.css
  • qunit.js
• jquery-1.8.2.min.js
• common.html
• handler.js
  テスト対象。
• handler_test.js
  テストコード。

QUnit読込

handler.htmlのheadでQUnit関連のファイルを読み込む。

<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" media="all">
<script src="http://code.jquery.com/qunit/git/qunit.js"></script>

jQuery読込

QUnitはjQueryに依存しない。テストでjQueryを利用しない場合は必要ない。本サンプルは利用する。

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

名前管理スクリプト(common.js)読込

<script src="common.js"></script>

テスト対象(handler.js)読込

テストするイベントハンドラはhref属性の値に文字列(空文字以外)が設定されているときはその文字列を返す。
それ以外はfalseを返す。

<script src="handler.js"></script>

テストコード(handler_test.js)読込

<script src="handler_test.js"></script>

handler.htmlのヘッダ

<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" media="all">
<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="common.js"></script>
<script src="handler.js"></script>
<script src="handler_test.js"></script>

ソースコード

handler.html

common.js

handler.js

handler_test.js

» Gist