Skip to content

Instantly share code, notes, and snippets.

@s-hiroshi
Created Sep 25, 2012
Embed
What would you like to do?
JavaScript > QUnit 非同期のテスト
<!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>
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;
}());
});
<?php
$value = $_POST["sample"];
header("Content-Type: text/html; charset=UTF-8");
echo htmlspecialchars($value . '_ajax');
?>
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);
});
});
/*
* 名前空間を提供する。トップレベルオブジェクト
*
* <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];
};
}());
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