Ajax Requests টেস্ট করার জন্য Spies ব্যবহার করা

JasmineJS-এ Ajax requests পরীক্ষা করার জন্য spies ব্যবহার করা খুবই কার্যকরী পদ্ধতি। সাধারণত, Ajax request সাধারণত বাহ্যিক সার্ভিসে ডেটা পাঠায় বা ডেটা গ্রহণ করে, এবং এই ধরনের টেস্টকে সঠিকভাবে পরিচালনা করার জন্য ফাংশনের আচরণ নিরীক্ষণ করা (স্পাই করা) প্রয়োজন। JasmineJS-এর spyOn() ফাংশনটি এই কাজের জন্য খুবই উপযুক্ত, যা Ajax request কে mock বা spy করতে সহায়তা করে।

Ajax request টেস্ট করার জন্য, আপনি XMLHttpRequest বা fetch API কে স্পাই করতে পারেন, এবং স্পাই করার মাধ্যমে আমরা নিশ্চিত করতে পারি যে নির্দিষ্ট ফাংশনটি ঠিকভাবে কল হচ্ছে এবং প্রত্যাশিত আউটপুট বা কার্যকারিতা দিচ্ছে।

Ajax Request টেস্ট করার জন্য Spies ব্যবহার করা

JasmineJS-এ Ajax request পরীক্ষা করার জন্য, আপনি সাধারণত যেভাবে স্পাই ব্যবহার করবেন তা হলো:

1. spyOn() দিয়ে Ajax কলের ফাংশন স্পাই করা।
2. and.callFake() ব্যবহার করে Ajax কলের আচরণ মক (mock) বা পরিবর্তন করা।
3. done() ব্যবহার করে asynchronous কোডের জন্য টেস্ট শেষ হওয়ার সিগন্যাল দেওয়া।

উদাহরণ: XMLHttpRequest স্পাই করে Ajax Request টেস্ট করা

ধরা যাক, আমাদের একটি ফাংশন রয়েছে, যেটি একটি Ajax request পাঠায় এবং কিছু ডেটা গ্রহণ করে।

Ajax Request পাঠানোর ফাংশন

function fetchUserData(userId, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", `/api/user/${userId}`, true);
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(JSON.parse(xhr.responseText));
    }
  };
  
  xhr.send();
}

এই fetchUserData ফাংশনটি একটি GET Ajax request পাঠায় /api/user/{userId} URL-এ এবং সার্ভার থেকে প্রাপ্ত ডেটা কলব্যাক ফাংশনে পাঠায়।

Ajax Request স্পাই করা JasmineJS-এ

JasmineJS-এ spyOn() ব্যবহার করে XMLHttpRequest এর open() এবং send() মেথডকে স্পাই করতে পারি। এতে করে আমরা Ajax request-এর আচরণ পরীক্ষা করতে পারব।

describe("fetchUserData function", function() {
  let xhr;

  beforeEach(function() {
    // XMLHttpRequest স্পাই করা
    xhr = jasmine.createSpyObj("XMLHttpRequest", ["open", "send", "setRequestHeader"]);
    
    // XMLHttpRequest এর ইনস্ট্যান্স মক করা
    window.XMLHttpRequest = jasmine.createSpy().and.returnValue(xhr);
  });

  it("should send a GET request to the correct URL", function(done) {
    // টেস্টের জন্য কলব্যাক ফাংশন ব্যবহার করা
    const userId = 1;
    const mockCallback = jasmine.createSpy("callback");

    fetchUserData(userId, mockCallback);

    // স্পাই করা open() মেথডটি ঠিকভাবে কল হয়েছে কিনা চেক করা
    expect(xhr.open).toHaveBeenCalledWith("GET", `/api/user/${userId}`, true);
    expect(xhr.send).toHaveBeenCalled(); // send() মেথড কল হয়েছে কিনা চেক করা

    // Ajax এর মধ্যে callback ফাংশনটিকে কল করার জন্য ফেক রেসপন্স দেওয়া
    xhr.onreadystatechange();
    xhr.status = 200;
    xhr.responseText = JSON.stringify({ id: 1, name: "John Doe" });
    xhr.onreadystatechange();

    // Callback ফাংশনটি সঠিকভাবে কল হয়েছে কিনা চেক করা
    expect(mockCallback).toHaveBeenCalledWith({ id: 1, name: "John Doe" });

    done(); // asynchronous টেস্টের জন্য done() কল করা
  });
});

এখানে:

1. jasmine.createSpyObj() দিয়ে একটি মক XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে।
2. open() এবং send() মেথডগুলোকে স্পাই করা হয়েছে।
3. window.XMLHttpRequest কে মক করে, ফেক XMLHttpRequest ব্যবহার করা হয়েছে।
4. xhr.onreadystatechange() কল করে, আমরা AJAX রেসপন্সের মতো আচরণ তৈরি করেছি এবং টেস্টে চেক করেছি যে কলব্যাক ফাংশনটি সঠিকভাবে কল হয়েছে কিনা।

উদাহরণ: fetch() স্পাই করে Ajax Request টেস্ট করা

যদি আপনি fetch API ব্যবহার করেন, তাহলে তার জন্যও একইভাবে স্পাই করতে পারবেন।

Ajax Request পাঠানোর ফাংশন (fetch ব্যবহার করে)

function fetchUserData(userId) {
  return fetch(`/api/user/${userId}`)
    .then(response => response.json())
    .then(data => data);
}

JasmineJS-এ fetch স্পাই করা

describe("fetchUserData function", function() {

  beforeEach(function() {
    // Jasmine এর স্পাই ব্যবহার করে fetch() ফাংশন স্পাই করা
    spyOn(window, "fetch").and.returnValue(Promise.resolve({
      json: () => Promise.resolve({ id: 1, name: "John Doe" })
    }));
  });

  it("should fetch user data correctly", function(done) {
    const userId = 1;

    fetchUserData(userId).then(data => {
      expect(data).toEqual({ id: 1, name: "John Doe" });
      expect(fetch).toHaveBeenCalledWith(`/api/user/${userId}`);
      done();
    });
  });
});

এখানে:

1. spyOn(window, "fetch") দিয়ে fetch() ফাংশনকে স্পাই করা হয়েছে এবং আমরা একটি মক রেসপন্স প্রদান করেছি যা Promise ফেরত দেয়।
2. fetchUserData() কল করার পর, টেস্টে চেক করা হয়েছে যে fetch() সঠিক URL-এ কল হয়েছে এবং ফাংশনটি সঠিক ডেটা ফেরত দিয়েছে।

সারাংশ

• JasmineJS-এ Ajax request টেস্ট করার জন্য spyOn() ব্যবহার করা হয়, যাতে আপনি HTTP রিকুয়েস্টের আচরণ স্পাই করতে পারেন।
• XMLHttpRequest বা fetch API-এর মতো বাহ্যিক সার্ভিসের কলগুলো মক বা স্পাই করা যায়, যাতে আপনি বাহ্যিক সার্ভিসের উপর নির্ভর না করে টেস্টগুলো নির্বিঘ্নে চালাতে পারেন।
• and.callFake() বা and.returnValue() ব্যবহার করে আপনি স্পাই করা ফাংশনের আচরণ পরিবর্তন করতে পারেন এবং মক রেসপন্স তৈরি করতে পারেন।
• done() ব্যবহার করে asynchronous টেস্টে ফলাফল পাওয়ার পর টেস্ট শেষ হওয়া নিশ্চিত করা হয়।

এই পদ্ধতিগুলো আপনাকে Ajax রিকুয়েস্টের জন্য JasmineJS-এ কার্যকরী এবং নির্ভরযোগ্য টেস্ট তৈরি করতে সাহায্য করবে।