Created
September 25, 2012 02:49
-
-
Save s-hiroshi/3779703 to your computer and use it in GitHub Desktop.
JavaScript > QUnit 非同期のテスト
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="ja"> | |
<head> | |
<meta charset="utf-8"> | |
<title>event test sample</title> | |
<meta name="description" content=""> | |
<meta name="keywords" content=""> | |
<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="utility.js"></script> | |
<script src="async.js"></script> | |
<script src="async_test.js"></script> | |
</head> | |
<body> | |
<h1 id="qunit-header">event test sample</h1> | |
<h2 id="qunit-banner"></h2> | |
<div id="qunit-testrunner-toolbar"></div> | |
<h2 id="qunit-userAgent"></h2> | |
<ol id="qunit-tests"></ol> | |
<div id="qunit-fixture">test markup, will be hidden</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(function($) { | |
/** | |
* jQuery.ajaxを使った非同期通信を行う。イベントをテストする。 | |
*/ | |
var async = Common.namespace('async'); | |
(function() { | |
// サーバーからのレスポンス | |
var response; | |
/** | |
* サーバーのレスポンスを設定する。 | |
* @param {String} res | |
*/ | |
function setResponse(res) { | |
response = res; | |
} | |
/** | |
* response変数を返す。responseはサーバーのレスポンスを格納する。 | |
* | |
* @return {String} response | |
*/ | |
function getResponse() { | |
return response; | |
} | |
// Ajaxを使った通信 | |
function send(e) { | |
var data = { | |
'sample': arguments[1] | |
}; | |
var url = './ajax.php'; | |
var encodedata = Utility.getEncodedUri(data); | |
$.ajax({ | |
type: 'POST', | |
url: url, | |
data: encodedata, | |
success: function(data) { | |
setResponse(data); | |
return true; | |
} | |
}); | |
} | |
/** | |
* イベントハンドラを設定する。 | |
* | |
* @param {Element} elem | |
*/ | |
function setSend(elem) { | |
$(elem).bind('click', send); | |
} | |
// パブリックメソッド | |
async.setSend = setSend; | |
async.setResponse = setResponse; | |
async.getResponse = getResponse; | |
}()); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
$value = $_POST["sample"]; | |
header("Content-Type: text/html; charset=UTF-8"); | |
echo htmlspecialchars($value . '_ajax'); | |
?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(function($){ | |
// Qunit test | |
asyncTest("非同期なイベントハンドラのテスト", function(){ | |
var async = Common.namespace('async'); | |
var form = $('<form>').attr('action', 'POST'); | |
var input = $('<input type="text" name="sample" value="sample">'); | |
var submit = $('<input id="send" type="submit" value="送信">'); | |
async.setSend(submit.get(0)); | |
submit.triggerHandler('click', [input.val()]); | |
setTimeout(function(){ | |
start(); | |
equal(async.getResponse(), 'sample_ajax', "submitボタンのclickイベントでAjax通信を行う。レスポンスはクエリーの末尾に_ajaxを追加した文字。"); | |
},1000); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 名前空間を提供する。トップレベルオブジェクト | |
* | |
* <p>Christian Johansen(著),長尾高弘(翻訳)『テスト駆動JavaScript』ASCII | |
* 下記サイトで配布されているスクリプトを変更。</p> | |
* <p>http://tddjs.com/</p> | |
*/ | |
function Common() {} | |
/** | |
* 名前空間を設定・管理する。 | |
* | |
* <p>引数に対応する既存のオブジェクトが存在するときは | |
* そのオブジェクトを返す。存在しないときは空のオブジェクト作成・登録してして返す。 | |
* </p> | |
* | |
* @param {String} name オブジェクト名 | |
* @return {Object} 引数の文字列とマッチするオブジェクト | |
*/ | |
Common.namespace = (function() { | |
var objectList = {}; | |
return function(name) { | |
if (typeof objectList[name] == "undefined") { | |
objectList[name] = {}; | |
} | |
return objectList[name]; | |
}; | |
}()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function Utility() {} | |
/** | |
* 引数パーセントエンコードして文字列として返す。 | |
* <pre> | |
* 引数のオブジェクト | |
* { | |
* key1: value1, | |
* key2: value2 | |
* } | |
* 戻り値の文字列 | |
* encodedKey1=encodedValue1&encodedkey2=encodedValue12 | |
* encodedKeyはkeyをパーセントエンコードした文字列 | |
* | |
* @param {Object} obj ポストデータのクエリ | |
* @return {String} ポストデータをパーセントエンコードした文字列 | |
*/ | |
Utility.getEncodedUri = function(obj) { | |
var params = [], | |
key, | |
value, | |
param; | |
for (key in obj) { | |
value = obj[key]; | |
// パーセントエンコーディングの半角スペース%20を+へ置換 | |
param = encodeURIComponent(key).replace(/%20/g, '+') + '=' + encodeURIComponent(value).replace(/%20/g, '+'); | |
params.push(param); | |
} | |
return params.join('&'); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment