Jquery/js单元测试中实现Mock（js实现mock接口）
场景
在前后台共同进行一个项目的时候常会遇到一种情景, 后台定义好接口,前端按照接口进行开发, 当前端开发完成后台接口却还没有开发完成, 这个时候要进行接口测试, 只能等后台开发完成才能测试, 在这中间浪费了很多时间, 现在有个利器可以解决这个问题, 即使不用后台,只要提前制定好接口的报文,那么前端就可以自己模拟接口来进行接口测试了, 今天要讲的东西就是mockjax和mockJSON。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.mockjson.js"></script>
<!--https://github.com/mennovanslooten/mockJSON-->
<script src="//cdn.bootcss.com/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$.ajax({
url: 'http://localhost:8080/springmvc0006/WebApi/GetUserData.svc',
type: 'GET',
error: function (xhr) {
alert('無法取得資料!');
},
success: function (response) {
$("div#result").append(response);
}
});
});
var isAjaxMocked = true;
if (isAjaxMocked) {
$.mockjax({
url: 'http://localhost:8080/springmvc0006/WebApi/GetUserData.svc',
status: 200,
responseTime: 750,
responseText: { "user": [{ "id": "1", "name": "david", "birthday": "2001/01/26" }] }
});
}
</script>
<h1>User Data</h1>
<div id="result">
</div>
</body>
</html>参考：
http://www.suchso.com/UIweb/jquery-js-mockJSON-mockjax.html
说明： 当后端接口开发完成后，直接将
var isAjaxMocked = false即可。
mockJson
当需要mock的返回数据很多时（
光是拚好Json数据就会花费掉许多的时间），使用mockjson。
mockJSON, 它可以根据我们所制定的规则, 来产生JSON数据,
我们修改mockjax的responseText部分使用mockJSON来产生数据
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.mockjson.js"></script>
<!--https://github.com/mennovanslooten/mockJSON-->
<script src="//cdn.bootcss.com/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$.ajax({
url: 'http://localhost:8080/springmvc0006/WebApi/GetUserData.svc',
type: 'GET',
error: function (xhr) {
alert('無法取得資料!');
},
success: function (response) {
$("div#result").append(response);
}
});
});
var isAjaxMocked = true;
if (isAjaxMocked) {
$.mockjax({
url: 'http://localhost:8080/springmvc0006/WebApi/GetUserData.svc',
status: 200,
responseTime: 750,
responseText:$.mockJSON.data.LOREM
});
}
</script>
<h1>User Data</h1>
<div id="result">
</div>
</body>
</html>修改部分：
responseText:$.mockJSON.data.LOREM
responseText:$.mockJSON.data
responseText:$.mockJSON.data.EMAIL
responseText:$.mockJSON.data.NUMBER
更多参考：https://github.com/mennovanslooten/mockJSON/blob/master/js/jquery.mockjson.js