আমি কীভাবে জেসমিনের সাথে jQuery AJAX ইভেন্টগুলি যাচাই করব?

Question

আমি জেসমিনকে বেসিক jQuery AJAX অনুরোধের জন্য কিছু বিডিডি স্পেস লিখতে ব্যবহার করার চেষ্টা করছি। আমি বর্তমানে জেসমিনকে স্ট্যান্ডেলোন মোডে (অর্থাত্‍ SpecRunner.html) মাধ্যমে ব্যবহার করছি । আমি jquery এবং অন্যান্য .js ফাইলগুলি লোড করার জন্য স্পেকআরনারকে কনফিগার করেছি। কোনও ধারণা কেন নিম্নলিখিত কাজ করে না? 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);
  }); 

});

আমি কীভাবে কল করব যে কলব্যাক বলা হয়েছে? জেসমিনের সাথে অ্যাসিঙ্ক জিকুয়েরি পরীক্ষা করার সাথে সম্পর্কিত ব্লগ / উপাদানের কোনও পয়েন্টারকে প্রশংসা করা হবে।

Answer 1

আমি অনুমান করি যে দুটি ধরণের পরীক্ষা আপনি করতে পারেন:

1. ইউনিট পরীক্ষা করে যে এজেএক্স অনুরোধটিকে নকল করে (জেসমিনের গুপ্তচর ব্যবহার করে), আপনাকে এজেএক্স অনুরোধের ঠিক আগে চলবে এমন সমস্ত কোড এবং যা তার ঠিক পরে পরীক্ষা করতে সক্ষম করে । এমনকি আপনি জেসমিনটি সার্ভার থেকে প্রতিক্রিয়া জাল করতে ব্যবহার করতে পারেন। এই পরীক্ষাগুলি দ্রুততর হবে - এবং এগুলি অ্যাসিক্রোনাস আচরণ পরিচালনা করার প্রয়োজন হবে না - যেহেতু সত্যিকারের কোন এজেএক্স চলছে না।
2. সংহতকরণের পরীক্ষাগুলি যা আসল এজেএক্স অনুরোধগুলি সম্পাদন করে। এগুলি অ্যাসিক্রোনাস হওয়া দরকার।

জুঁই আপনাকে উভয় ধরণের পরীক্ষা করতে সহায়তা করতে পারে।

আপনি কীভাবে এজেএক্স অনুরোধটিকে নকল করতে পারেন তার একটি নমুনা এখানে দেওয়া হয়েছে এবং তারপরে একটি ইউনিট পরীক্ষা লিখুন যা নিশ্চিত করে নিন যে জাল AJAX অনুরোধটি সঠিক URL- এ চলেছে:

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.0 পরিবর্তে ব্যবহার:

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

হিসাবে এই উত্তরে উল্লিখিত

এখানে একটি অনুরূপ ইউনিট পরীক্ষা যা যাচাই করে যে আপনার কলব্যাক কার্যকর করা হয়েছিল, একটি এজেএক্স অনুরোধ সফলভাবে শেষ করার পরে:

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

জন্য জুঁই 2.0 পরিবর্তে ব্যবহার:

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

হিসাবে এই উত্তরে উল্লিখিত

শেষ পর্যন্ত, আপনি অন্য কোথাও ইঙ্গিত করেছেন যে আপনি সংহতকরণের পরীক্ষাগুলি লিখতে চাইতে পারেন যা সত্যিকারের AJAX অনুরোধ করে - সংহতকরণের উদ্দেশ্যে for এটি জেসমিনের অ্যাসিক্রোনাস বৈশিষ্ট্যগুলি ব্যবহার করে করা যেতে পারে: ওয়েটস (), ওয়েটসফোর () এবং রান ():

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

Comments

+1 অ্যালেক্স দুর্দান্ত উত্তর। আসলে আমি অনুরূপ সমস্যার মুখোমুখি হয়েছি যার জন্য আমি ডিফার্ড অবজেক্টটি ব্যবহার করে একটি পরীক্ষা টেস্ট অ্যাজাক্স অনুরোধ খুললাম । আপনি কি একবার দেখে নিতে পারেন? ধন্যবাদ।

— লোরেন বার্নার্ড

আমি সত্যিই আপনার উত্তরটি জেসমিনের অফিসিয়াল ডকুমেন্টেশনের অংশ হতে চাই। কিছু দিনের জন্য আমাকে হত্যা করে এমন সমস্যার খুব সুস্পষ্ট উত্তর answer

— ড্যারেন নিউটন

এই উত্তরটিকে এই প্রশ্নের সরকারী উত্তর হিসাবে চিহ্নিত করা উচিত।

— টমাস আমার

সর্বাধিক সাম্প্রতিক কল তথ্য পাওয়ার বর্তমান উপায় হ'ল aj .ajax.calls.mostRecent ()

— ক্যামব্ল্যাঞ্চ

আপনি কীভাবে প্লেইন জেএস আজাক্সের জন্য এটি বাস্তবায়ন করবেন?

— ওয়াচ মেকার

Answer 2

জুঁই-আজাক্স প্রকল্পটি দেখুন: http://github.com/pivotal/jasmine-ajax ।

এটি একটি ড্রপ-ইন সহায়ক যা (jQuery বা প্রোটোটাইপ.জেএস উভয়ের জন্য) এক্সএইচআর স্তরটিতে স্টাবগুলি যাতে অনুরোধগুলি কখনই বাইরে না যায়। তারপরে আপনি অনুরোধটি সম্পর্কে যা চান তা আশা করতে পারেন।

তারপরে এটি আপনাকে আপনার সমস্ত ক্ষেত্রে দৃ fi় প্রতিক্রিয়া সরবরাহ করতে দেয় এবং তারপরে আপনার প্রতিটি প্রতিক্রিয়ার জন্য পরীক্ষা লিখতে দেয়: সাফল্য, ব্যর্থতা, অননুমোদিত ইত্যাদি etc.

এটি অ্যাসিনক্রোনাস পরীক্ষার ক্ষেত্রের বাইরে আজাক্স কলগুলি গ্রহণ করে এবং আপনার প্রকৃত প্রতিক্রিয়া হ্যান্ডলারের কীভাবে কাজ করা উচিত তা পরীক্ষা করার জন্য আপনাকে প্রচুর নমনীয়তা সরবরাহ করে।

Comments

ধন্যবাদ @ জেসমিনবিডিডি, জুঁই-আজাক্স প্রকল্পটি আমার জেএস কোডটি পরীক্ষার জন্য যাওয়ার মতো দেখাচ্ছে। তবে যদি আমি সার্ভারের প্রকৃত অনুরোধগুলি যেমন সংযোগ / ইন্টিগ্রেশন পরীক্ষার জন্য পরীক্ষা করতে চাইতাম?

— mnacos

@mnacos জুঁই-অজ্যাক্স ইউনিট পরীক্ষার জন্য বেশিরভাগ ক্ষেত্রে কার্যকর যার ক্ষেত্রে আপনি বিশেষত সার্ভারে কল এড়াতে চান। আপনি যদি ইন্টিগ্রেশন পরীক্ষা করে থাকেন তবে এটি সম্ভবত আপনি চান না এবং এটি একটি পৃথক পরীক্ষার কৌশল হিসাবে নকশা করা উচিত।

— সেবাস্তিয়ান মার্টিন

Answer 3

এই জাতীয় অ্যাপ্লিকেশনগুলির জন্য সাধারণ পরীক্ষার স্যুট এখানে

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

একটি নমুনা পরীক্ষার স্যুট, যা ইউআরএল রেজেক্সের উপর ভিত্তি করে কলব্যাক করবে

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

Comments

ধন্যবাদ দোস্ত. এই উদাহরণটি আমাকে অনেক সাহায্য করেছিল! কেবলমাত্র নোট করুন যে আপনি যদি জেসমিন> ২.০ ব্যবহার করছেন এবং কলফেকের জন্য সিনট্যাক্সটি স্পাইঅন (jQuery, "এজ্যাক্স") .c এবং কলফেক (/ * আপনার ফাংশন * /);

— জোও পাওলো মোটা

নিশ্চিত হতে পারছি না এই একটি সংস্করণ ইস্যু কিন্তু আমি একটি ত্রুটি পেয়েছিলাম .andCallFakeব্যবহৃত, .and.callFakeপরিবর্তে। ধন্যবাদ।

— ওও

Answer 4

আমি যখন জেসমিনের সাথে এজ্যাক্স কোডটি নির্দিষ্ট করি, তখন নির্ভর করে অন ফাংশনটি রিমোট কল (যেমন, বলুন, $ .get বা $ আজাক্স) শুরু করে তার উপর গুপ্তচরবৃত্তি করে সমস্যার সমাধান করি। তারপরে আমি এতে সেট করা কলব্যাকগুলি পুনরুদ্ধার করি এবং সেগুলি স্বতন্ত্রভাবে পরীক্ষা করি।

সাম্প্রতিককালে আমি যে উদাহরণটি দেখেছি তা এখানে:

https://gist.github.com/946704

Answer 5

Jqueryspy.com ব্যবহার করে দেখুন এটি আপনার পরীক্ষাগুলির বর্ণনা দেওয়ার জন্য সিনট্যাক্সের মতো মার্জিত জ্যাকোয়ারি সরবরাহ করে এবং এজ্যাক্স সম্পূর্ণ হওয়ার পরে কলব্যাকগুলি পরীক্ষার অনুমতি দেয়। এটি ইন্টিগ্রেশন পরীক্ষার জন্য দুর্দান্ত এবং আপনি সেকেন্ডে বা মিলিসেকেন্ডে সর্বাধিক এজ্যাক্স ওয়েটের সময়টি কনফিগার করতে পারেন।

Answer 6

আমার মনে হয়েছে যে জেসমিন এখন ২.৪ সংস্করণে রয়েছে এবং কয়েকটি ফাংশন ২.০ সংস্করণ থেকে পরিবর্তিত হয়েছে বলে আমার আরও আপ-টু-ডেট উত্তর সরবরাহ করা দরকার।

সুতরাং, আপনার এজেএক্স অনুরোধের মধ্যে একটি কলব্যাক ফাংশন কল করা হয়েছে তা যাচাই করার জন্য আপনাকে একটি স্পাই তৈরি করতে হবে, এটিতে একটি কলফেক ফাংশন যুক্ত করতে হবে এবং তারপরে গুপ্তচরটিকে আপনার কলব্যাক ফাংশন হিসাবে ব্যবহার করতে হবে। এটি কিভাবে যায় তা এখানে:

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

আমি সাফল্য ফাংশনটির পাশাপাশি ত্রুটি ফাংশনটির জন্য কৌশলটি করেছি যাতে জাসমিন যত তাড়াতাড়ি সম্ভব চশমাগুলি চালাবে তা নিশ্চিত করার জন্য এমনকি আপনার এজেএক্স ত্রুটি ফিরিয়ে দেয়।

যদি আপনি কোনও ত্রুটি ফাংশন নির্দিষ্ট না করে থাকেন এবং আপনার এজেএক্স কোনও ত্রুটি ফিরিয়ে দেয় তবে জেসমিন ত্রুটি না ছোঁড়া পর্যন্ত আপনাকে 5 সেকেন্ড (ডিফল্ট সময়সীমা বিরতি) অপেক্ষা করতে হবে Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.। আপনি নিজের টাইমআউটটিও এর মতো নির্দিষ্ট করতে পারেন:

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