मैं जैस्मीन के साथ jQuery AJAX घटनाओं को कैसे सत्यापित करूं?

Question

मैं मूल jQuery AJAX अनुरोधों के लिए कुछ बीडीडी चश्मा लिखने के लिए जैस्मीन का उपयोग करने की कोशिश कर रहा हूं। मैं वर्तमान में स्टैंडअलोन मोड में जैस्मीन का उपयोग कर रहा हूं (यानी SpecRunner.html के माध्यम से)। मैंने jquery और अन्य .js फ़ाइलों को लोड करने के लिए SpecRunner को कॉन्फ़िगर किया है। कोई विचार क्यों निम्नलिखित काम नहीं करता है? has_returned सच नहीं बनता है, यहां तक ​​कि "yuppi!" सोचा अलर्ट ठीक दिखाता है।

describe("A jQuery ajax request should be able to fetch...", function() { 

    it("an XML file from the filesystem", function() { 
    $.ajax_get_xml_request = { has_returned : false }; 
    // initiating the AJAX request 
    $.ajax({ type: "GET", url: "addressbook_files/addressbookxml.xml", dataType: "xml", 
      success: function(xml) { alert("yuppi!"); $.ajax_get_xml_request.has_returned = true; } }); 
    // waiting for has_returned to become true (timeout: 3s) 
    waitsFor(function() { $.ajax_get_xml_request.has_returned; }, "the JQuery AJAX GET to return", 3000); 
    // TODO: other tests might check size of XML file, whether it is valid XML 
    expect($.ajax_get_xml_request.has_returned).toEqual(true); 
    }); 

}); 

मैं कैसे जांच करूं कि कॉलबैक को कॉल किया गया है? जैस्मीन के साथ एसिंक jQuery परीक्षण से संबंधित ब्लॉग/सामग्री के लिए कोई संकेतक बहुत सराहना की जाएगी।

Answer 1

जैस्मीन-अजैक्स प्रोजेक्ट को देखें: http://github.com/pivotal/jasmine-ajax।

यह एक ड्रॉप-इन सहायक है जो (या तो jQuery या प्रोटोटाइप.जेएस के लिए) एक्सएचआर परत पर स्टब्स करता है ताकि अनुरोध कभी बाहर न जाए। फिर आप अनुरोध के बारे में सभी की अपेक्षा कर सकते हैं।

तो यह है कि आप अपने सभी मामलों के लिए दृढ़ प्रतिक्रियाओं प्रदान करते हैं और उसके बाद प्रत्येक प्रतिक्रिया के लिए परीक्षण है कि आप चाहते हैं लिखने की सुविधा देता है: आदि सफलता, असफलता, अनधिकृत,

यह अजाक्स अतुल्यकालिक परीक्षण के दायरे से बाहर कॉल लेता है और आपके वास्तविक प्रतिक्रिया हैंडलर को कैसे काम करना चाहिए, यह जांचने के लिए आपको बहुत लचीलापन प्रदान करता है।

Answer 2

जब मैं जैस्मीन के साथ AJAX कोड निर्दिष्ट करता हूं, तो मैं रिमोट कॉल (जैसे, कहें, $ .get या $ AJAX) शुरू करने पर जो भी निर्भर करता है, उस पर जासूसी करके समस्या को हल करता हूं। फिर मैं उस पर सेट कॉलबैक पुनर्प्राप्त करता हूं और उन्हें विचलित रूप से परीक्षण करता हूं।

https://gist.github.com/946704

Answer 3

मुझे लगता है कि वहाँ परीक्षण के दो प्रकार आप कर सकते हैं:

यहाँ एक उदाहरण हाल ही में मैंने gisted है

1. ईकाई परीक्षण है कि नकली AJAX अनुरोध (चमेली के जासूसों का उपयोग) , आपको अपने सभी कोड का परीक्षण करने में सक्षम बनाता है जो AJAX अनुरोध से पहले, और बस बाद में चलाता है। आप सर्वर से प्रतिक्रिया को नकली करने के लिए जैस्मीन का भी उपयोग कर सकते हैं। ये परीक्षण तेजी से होंगे - और उन्हें असीमित व्यवहार को संभालने की आवश्यकता नहीं होगी - क्योंकि कोई असली AJAX नहीं चल रहा है।
2. एकीकरण परीक्षण जो वास्तविक AJAX अनुरोध करते हैं। इन्हें अतुल्यकालिक होना चाहिए।

जैस्मीन आपको दोनों प्रकार के परीक्षण करने में मदद कर सकता है।

it("should make an AJAX request to the correct URL", function() { 
    spyOn($, "ajax"); 
    getProduct(123); 
    expect($.ajax.mostRecentCall.args[0]["url"]).toEqual("/products/123"); 
}); 

function getProduct(id) { 
    $.ajax({ 
     type: "GET", 
     url: "/products/" + id, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json" 
    }); 
} 

लिए जैस्मीन 2:

तरीका यहां बताया गया नकली AJAX अनुरोध, और फिर एक इकाई परीक्षण की पुष्टि है कि नाटक किया AJAX अनुरोध सही URL लिए जा रहा था लिख ​​सकते हैं का एक नमूना है।बजाय 0 उपयोग:

it("should execute the callback function on success", function() { 
    spyOn($, "ajax").andCallFake(function(options) { 
     options.success(); 
    }); 
    var callback = jasmine.createSpy(); 
    getProduct(123, callback); 
    expect(callback).toHaveBeenCalled(); 
}); 

function getProduct(id, callback) { 
    $.ajax({ 
     type: "GET", 
     url: "/products/" + id, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: callback 
    }); 
} 

लिए जैस्मीन:

expect($.ajax.calls.mostRecent().args[0]["url"]).toEqual("/products/123"); 

this answer

यहाँ में नोट के रूप में एक समान इकाई परीक्षण है कि अपने कॉलबैक सत्यापित करता मार डाला गया था एक AJAX अनुरोध सफलतापूर्वक पूरा करने पर, है 2.0 इसके बजाए उपयोग करें:

spyOn($, "ajax").and.callFake(function(options) { 

जैसा कि this answer

अंत में, आपने कहीं और संकेत दिया है कि आप एकीकरण उद्देश्यों के लिए वास्तविक AJAX अनुरोधों को एकीकरण परीक्षण लिखना चाहेंगे। waitsFor() और रन() प्रतीक्षा करता है(),:: यह चमेली के asyncronous सुविधाओं का उपयोग किया जा सकता है

it("should make a real AJAX request", function() { 
    var callback = jasmine.createSpy(); 
    getProduct(123, callback); 
    waitsFor(function() { 
     return callback.callCount > 0; 
    }); 
    runs(function() { 
     expect(callback).toHaveBeenCalled(); 
    }); 
}); 

function getProduct(id, callback) { 
    $.ajax({ 
     type: "GET", 
     url: "data.json", 
     contentType: "application/json; charset=utf-8" 
     dataType: "json", 
     success: callback 
    }); 
} 

Answer 4

jqueryspy.com प्रयास करें यह अपने परीक्षण का वर्णन करने के वाक्य रचना की तरह एक सुंदर jQuery प्रदान करता है और अनुमति देता है के बाद परीक्षण करने के लिए कॉलबैक AJAX पूरा हो गया है। एकीकरण परीक्षण के लिए यह बहुत अच्छा है और आप सेकेंड या मिलीसेकंड में अधिकतम AJAX प्रतीक्षा समय कॉन्फ़िगर कर सकते हैं।

Answer 5

यहाँ इस

var app = { 
       fire: function(url, sfn, efn) { 
        $.ajax({ 
         url:url, 
         success:sfn, 
         error:efn 
        }); 
       } 
     }; 

एक नमूना टेस्ट स्वीट जैसे ऐप्लिकेशन js, जो कॉलबैक फोन करेगा यूआरएल regexp के आधार पर

describe("ajax calls returns", function() { 
var successFn, errorFn; 
beforeEach(function() { 
    successFn = jasmine.createSpy("successFn"); 
    errorFn = jasmine.createSpy("errorFn"); 
    jQuery.ajax = spyOn(jQuery, "ajax").andCallFake(
     function (options) { 
      if(/.*success.*/.test(options.url)) { 
       options.success(); 
      } else { 
       options.error(); 
      } 
     } 
    ); 
}); 

it("success", function() { 
    app.fire("success/url", successFn, errorFn); 
    expect(successFn).toHaveBeenCalled(); 
}); 

it("error response", function() { 
    app.fire("error/url", successFn, errorFn); 
    expect(errorFn).toHaveBeenCalled(); 
}); 
}); 

Answer 6

मैं जैसे मैं जरूरत महसूस के लिए एक सरल उदाहरण टेस्ट स्वीट है जैस्मीन अब संस्करण 2.4 पर है और संस्करण 2.0 से कुछ फ़ंक्शन बदल गए हैं, इसलिए एक अधिक अद्यतित उत्तर प्रदान करने के लिए।

तो, यह सत्यापित करने के लिए कि आपके AJAX अनुरोध में कॉलबैक फ़ंक्शन को कॉल किया गया है, आपको एक जासूसी बनाने की आवश्यकता है, इसमें कॉलकैक फ़ंक्शन जोड़ें और फिर अपने कॉलबैक फ़ंक्शन के रूप में जासूस का उपयोग करें। यहाँ यह कैसे जाता है:

describe("when you make a jQuery AJAX request", function() 
{ 
    it("should get the content of an XML file", function(done) 
    { 
     var success = jasmine.createSpy('success'); 
     var error = jasmine.createSpy('error'); 

     success.and.callFake(function(xml_content) 
     { 
      expect(success).toHaveBeenCalled(); 

      // you can even do more tests with xml_content which is 
      // the data returned by the success function of your AJAX call 

      done(); // we're done, Jasmine can run the specs now 
     }); 

     error.and.callFake(function() 
     { 
      // this will fail since success has not been called 
      expect(success).toHaveBeenCalled(); 

      // If you are happy about the fact that error has been called, 
      // don't make it fail by using expect(error).toHaveBeenCalled(); 

      done(); // we're done 
     }); 

     jQuery.ajax({ 
      type : "GET", 
      url : "addressbook_files/addressbookxml.xml", 
      dataType : "xml", 
      success : success, 
      error : error 
     }); 
    }); 
}); 

मैं सफलता समारोह के लिए चाल के साथ ही यह सुनिश्चित करें कि जैस्मीन जितनी जल्दी हो सके, भले ही आपके AJAX एक त्रुटि देता है चश्मा चलेंगे बनाने के लिए त्रुटि फ़ंक्शन किया है।

यदि आप कोई त्रुटि फ़ंक्शन निर्दिष्ट नहीं करते हैं और आपका AJAX कोई त्रुटि देता है, तो आपको जैस्मीन त्रुटि Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL. तक फेंकने तक 5 सेकंड (डिफ़ॉल्ट टाइमआउट अंतराल) का इंतजार करना होगा। आप इस तरह अपना अपना टाइमआउट भी निर्दिष्ट कर सकते हैं:

it("should get the content of an XML file", function(done) 
{ 
    // your code 
}, 
10000); // 10 seconds