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

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

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。