7

このjsFiddleに見られるように、ボタンをクリックすると進行状況ダイアログが開き、Ajax 呼び出しを発行するようにボタンを構成する関数「init」があります。この JavaScript コードを ( QUnitを使用して) 単体テストし、次のケースを確認します。

  1. Ajax 呼び出しが成功する
  2. Ajax 呼び出しが失敗する

window.open単体テストの実装に応じて、少なくとも Ajax 呼び出しと への呼び出し、およびその他の呼び出しを模擬する必要があります。

これら 2 つのシナリオをテストするコードの QUnit 単体テストを作成するにはどうすればよいですか?

編集:テストする必要があるコード:

var statusmod = (function() {
    var spinner = $("#spinner");

    var init = function(id) {
        var progressDialog = $("#progressdialog-content").dialog({
            autoOpen: false,
            title: "Launching Status Page"
        });
        var errorDialog = $("#errordialog-content").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                "OK": function() {
                    $(this).dialog("close");
                }
            }
        });

        var btn = $("#button-status");
        btn.button().click(function() {
            spinner.show();

            progressDialog.dialog("open");

            var url = $.validator.format("/api/binid/?id={0}", id);
            // Call Web service to get binary ID
            $.ajax({
                url: url,
                dataType: "json"
            }).done(function(data) {
                window.open($.validator.format("http://status/?Page=Status&Id={0}", data.Id), target = "_newtab");
            }).fail(function(jqXHR, msg, errorThrown) {
                errorDialog.dialog("open");
            }).always(function() {
                progressDialog.dialog("close");
            });

            return false;
        });
    };

    return {
        init: init,
        _spinner: spinner
    };
}());
4

2 に答える 2

1

この jsFiddleからわかるように、成功した場合と失敗した場合の QUnit テストを正常に作成しました。私はMockjaxを使用して Ajax レスポンスを偽造し、成功/失敗条件をシミュレートしました。特に、非同期 Ajax コールバックが起動した後にテストを実行する方法を理解するのに苦労したため、同期テストを記述できるように、Ajax 呼び出しを同期するように構成しました。

また、 Sinon.JSライブラリを使用して、依存関係を偽装し、ダイアログなどが正しく起動されることを確認します。

動作するテスト コードは以下に含まれています。テスト中の関数に関する私の質問を参照してください ( statusmod.init)。私が忘れたと思うものがあれば教えてください。

var dialogSpy = null;
var windowSpy = null;
var id = "srcId";
var binId = "binId";
var url = $.validator.format("/api/binid/?id={0}", id);
var btnId = "#button-status";

module("Open status page", {
    setup: function() {
        // Allow us to run tests synchronously
        $.ajaxSetup({
            async: false
        });
        windowSpy = sinon.spy(window, "open");
        dialogSpy = sinon.spy();
        sinon.stub($.fn, "dialog", function() {
            return {
                "dialog": dialogSpy
            };
        });

        statusmod.init(id);
    },
    teardown: function() {
        windowSpy.restore();
        $.fn.dialog.restore();
        $.mockjaxClear();
        // Remove click event handler for each test
        $(btnId).unbind();
    }
});

test("Successfully open status page", function() {
    expect(4);

    $.mockjax({
        url: url,
        contentType: "text/json",
        responseText: {
            Id: binId
        }
    });

    var spinner = statusmod._spinner;
    var spinnerSpy = sinon.spy(spinner, "show");

    $(btnId).click();

    ok(spinnerSpy.calledOnce, "Spinner shown");
    ok(dialogSpy.withArgs("open").calledOnce, "Dialog opened");
    ok(dialogSpy.withArgs("close").calledOnce, "Dialog closed");
    equal(windowSpy.lastCall.args[0], $.validator.format("http://status/?Page=Status&Id={0}", binId), "Window opened");
});

test("Binary ID not found on server", function() {
    expect(3);

    $.mockjax({
        url: url,
        contentType: "text/json",
        status: 404
    });

    $(btnId).click();

    ok(dialogSpy.withArgs("open").calledTwice, "Dialogs opened");
    ok(dialogSpy.withArgs("close").calledOnce, "Progress dialog closed");
    ok(!windowSpy.called, "Window not launched");
});
于 2012-08-27T07:50:23.240 に答える
0

まず、Mockjaxをダウンロードしてインクルードします。

次に、ajax 呼び出しをモックします。

module("Mock Ajax", {
  setup: function () {
    /** this mocks the ajax call **/
    $.mockjax({
      url: 'yourUrl.php',
      data: {'action': 'your',
        'data': {
          'that': 'you',
          'send': 'here'
        }
      },
      responseText:'{"your": ["returned":"json"],"string"}'
    });
  });
});

そして、テストケースで ajax 呼び出しを行うことができます:

test( "Your testcase", function() {
  $.ajax('yourUrl.php',
    data: {'action': 'your',
       'data': {
      'that': 'you',
      'send': 'here'
    }
  }, function(data) {
      ok("do something with your data");
  });
});

ほら、何かのテストに成功しました！mockjax 呼び出しに追加のパラメーターを追加できます (isTImeout、isError など)。ドキュメントはここにあります。

これらは基本的なものであり、かなり完全なドキュメントを使用してニーズに合わせて編集できます。

于 2012-08-23T17:08:00.670 に答える