मैं इस जावास्क्रिप्ट फ़ंक्शन का परीक्षण कैसे करूं, जिसमें अजाक्स कॉल का मज़ाक उड़ाया जा सकता है?

Question

जैसा कि इस jsFiddle में देखा गया है, मेरे पास एक फ़ंक्शन 'init' है जो एक बटन को कॉन्फ़िगर करता है ताकि जब क्लिक किया जाए तो यह प्रगति संवाद खुलता है और अजाक्स कॉल जारी करता है। मैं इकाई परीक्षण करने के लिए इस जावास्क्रिप्ट कोड (QUnit उपयोग करते हुए) चाहते हैं, और निम्नलिखित मामलों की जांच:

1. अजाक्स कॉल सफल होता है
2. अजाक्स कॉल के विफल होने

मैं कम से कम अजाक्स कॉल बाहर नकली करने की जरूरत है और यूनिट परीक्षण कार्यान्वयन के आधार पर window.open पर कॉल, और अन्य कॉल मुझे यकीन है।

मैं अपने कोड के लिए क्विनिट यूनिट परीक्षण कैसे लिख सकता हूं जो इन दो परिदृश्यों का परीक्षण करता है?

संपादित करें: कोड परीक्षण किया जाना चाहिए कि:

सब, डाउनलोड की

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 
    }; 
}()); 

Answer 1

मैंने सफलता के मामले में सफलतापूर्वक एक प्रश्नोत्तरी परीक्षा और विफलता मामले के लिए एक और लिखा है, जैसा कि आप this jsFiddle से देख सकते हैं। मैंने नकली अजाक्स प्रतिक्रियाओं के लिए Mockjax को नियोजित किया और सफलता/विफलता स्थितियों का अनुकरण किया। विशेष रूप से, मैंने अजाक्स कॉल को सिंक्रोनस करने के लिए कॉन्फ़िगर किया है, ताकि मैं सिंक्रोनस टेस्ट लिख सकूं, क्योंकि मुझे यह पता लगाने में परेशानी थी कि एसिंक्रोनस अजाक्स कॉलबैक को निकालकर मेरे परीक्षण कैसे चलाएं।

मैं नकली निर्भरताओं के लिए 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"); 
}); 

Answer 2

पहला और 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"}' 
    }); 
    }); 
}); 

और फिर आप एक testcase में अपने ajax कॉल कर सकते हैं:

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

एट देखा, आप सफलतापूर्वक कुछ परीक्षण किया है! आप अपने मॉकजैक्स कॉल (isTImeout, isError, आदि) में अतिरिक्त पैरामीटर जोड़ सकते हैं। दस्तावेज़ीकरण here पाया जा सकता है।

ये मूलभूत बातें हैं, आप दस्तावेज़ीकरण का उपयोग करके अपनी आवश्यकताओं के अनुरूप इसे संपादित कर सकते हैं, जो कि बहुत पूर्ण है।