Jquery/jsユニットテストでMockを実装(js実装mockインタフェース)

4258 ワード
シーン
前のバックグラウンドで共同で1つのプロジェクトを行う时よく1种の情景に出会って、バックグラウンドはインタフェースを定义して、フロントエンドはインタフェースによって开発して、今のエンドはバックグラウンドのインタフェースを开発してまだ开発して完成していませんバックグラウンドを使わなくても、インタフェースのメッセージを事前に作成すれば、フロントエンドは自分でインタフェースをシミュレートしてインタフェーステストを行うことができます.今日お話しすることは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
linux tailコマンドの使い方
textareaラベルの改行とスペースの取得