jQuery এর সাথে Jasmine ব্যবহার

jQuery হলো একটি জনপ্রিয় JavaScript লাইব্রেরি যা DOM ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং, অ্যাজাক্স এবং এনিমেশনসহ অন্যান্য কার্যকারিতা সহজ করে তোলে। JasmineJS দিয়ে jQuery এর সাথে টেস্টিং করতে হলে, আপনাকে DOM এর সাথে সম্পর্কিত কিছু কার্যাবলী সঠিকভাবে পরীক্ষা করতে হবে, যেমন ইভেন্ট হ্যান্ডলার, DOM ম্যানিপুলেশন, অ্যাজাক্স রিকোয়েস্ট ইত্যাদি।

JasmineJS এর সাথে jQuery ব্যবহারের ক্ষেত্রে কিছু কৌশল এবং টিপস রয়েছে যা আপনাকে jQuery এর ফাংশনালিটিকে টেস্ট করতে সাহায্য করবে।

jQuery টেস্টিংয়ে JasmineJS ব্যবহার

JasmineJS সাধারণত JavaScript ফাংশনালিটি টেস্ট করার জন্য ব্যবহৃত হলেও, jQuery কে টেস্ট করতে আপনাকে কিছু DOM সম্পর্কিত কার্যাবলী যেমন beforeEach(), afterEach(), spyOn() ইত্যাদি ব্যবহার করতে হবে।

1. jQuery এর DOM ম্যানিপুলেশন টেস্ট করা

jQuery এর মাধ্যমে আপনি DOM এ যে কোনো এলিমেন্টের কন্টেন্ট বা প্রপার্টি পরিবর্তন করতে পারেন। JasmineJS এর সাথে jQuery এর DOM ম্যানিপুলেশন টেস্ট করা যায়।

উদাহরণ:

describe("jQuery DOM manipulation", function() {
  let $element;

  beforeEach(function() {
    // DOM এ একটি নতুন element তৈরি করা
    $element = $("<div id='test'>Hello</div>");
    $("body").append($element);  // body তে element যুক্ত করা
  });

  afterEach(function() {
    $element.remove();  // টেস্ট শেষ হলে DOM থেকে element মুছে ফেলা
  });

  it("should change the text of an element", function() {
    $element.text("Goodbye");
    expect($element.text()).toBe("Goodbye");
  });
});

এখানে:

• beforeEach(): টেস্টের আগে একটি div ট্যাগ তৈরি এবং body তে অ্যাপেন্ড করা হয়েছে।
• afterEach(): টেস্ট শেষে DOM থেকে এলিমেন্টটি মুছে ফেলা হয়েছে।
• expect(): jQuery এর .text() ফাংশন ব্যবহার করে টেক্সট চেক করা হয়েছে।

2. jQuery ইভেন্ট হ্যান্ডলিং টেস্ট করা

jQuery ইভেন্ট হ্যান্ডলিং টেস্ট করা JasmineJS এর মাধ্যমে সহজ হতে পারে। আপনি trigger() ফাংশন ব্যবহার করে কোনো ইভেন্ট ট্রিগার করতে পারেন এবং তারপর সেই ইভেন্টের প্রতিক্রিয়া পরীক্ষা করতে পারেন।

উদাহরণ:

describe("jQuery Event Handling", function() {
  let $button;

  beforeEach(function() {
    $button = $("<button>Click Me</button>");
    $("body").append($button);
  });

  afterEach(function() {
    $button.remove();
  });

  it("should trigger a click event", function() {
    let clicked = false;
    
    $button.on("click", function() {
      clicked = true;
    });

    $button.trigger("click");  // click ইভেন্ট ট্রিগার করা

    expect(clicked).toBe(true);  // চেক করা হচ্ছে যে ক্লিক ইভেন্ট হয়েছে কিনা
  });
});

এখানে:

• $button.on("click", function()): একটি ক্লিক ইভেন্ট হ্যান্ডলার যোগ করা হয়েছে।
• $button.trigger("click"): ক্লিক ইভেন্ট ট্রিগার করা হয়েছে।
• expect(): টেস্ট করা হয়েছে যে, ইভেন্ট ট্রিগার করার পর clicked ভেরিয়েবলটি true হয়ে গেছে।

3. jQuery অ্যাজাক্স টেস্টিং

যখন আপনি jQuery দিয়ে অ্যাজাক্স রিকোয়েস্ট করেন, JasmineJS ব্যবহার করে আপনি সেই রিকোয়েস্টের ফলাফল পরীক্ষা করতে পারেন। spyOn() ফাংশনটি ব্যবহৃত হয় jQuery এর অ্যাজাক্স মেথডের ওপর স্পাই করতে।

উদাহরণ:

describe("jQuery AJAX", function() {
  it("should make an AJAX request", function(done) {
    spyOn($, "ajax").and.callFake(function(options) {
      options.success({ data: "test" });  // মক সাকসেস কলব্যাক
    });

    $.ajax({
      url: "https://api.example.com/data",
      success: function(response) {
        expect(response.data).toBe("test");
        done();  // done() কল করে Jasmine কে জানানো হয়েছে টেস্ট শেষ হয়েছে
      }
    });
  });
});

এখানে:

• spyOn($, "ajax"): jQuery এর ajax মেথডের ওপর স্পাই করা হয়েছে এবং মক (mock) করা হয়েছে।
• and.callFake(): এখানে callFake() দিয়ে একটি কৃত্রিম সাকসেস রেসপন্স তৈরি করা হয়েছে।
• done(): done() কল করা হয়েছে asynchronous টেস্ট শেষ করার জন্য।

4. jQuery টেস্টিংয়ে DOM পরিবর্তন সঠিকভাবে আপডেট হচ্ছে কিনা চেক করা

কখনও কখনও আপনি চান যে, jQuery এর মাধ্যমে DOM এ কোনো পরিবর্তন ঘটলে তা টেস্টিং এর মাধ্যমে সঠিকভাবে যাচাই করতে।

উদাহরণ:

describe("jQuery DOM updates", function() {
  let $div;

  beforeEach(function() {
    $div = $("<div id='container'></div>");
    $("body").append($div);
  });

  afterEach(function() {
    $div.remove();
  });

  it("should add a new element inside the container", function() {
    $div.append("<p>New Paragraph</p>");
    expect($div.find("p").length).toBe(1);
  });
});

এখানে:

• $div.append("<p>New Paragraph</p>"): একটি নতুন প্যারাগ্রাফ ট্যাগ যোগ করা হয়েছে।
• expect(): পরীক্ষা করা হয়েছে যে, .find("p") মাধ্যমে p ট্যাগটি DOM এ ঠিকভাবে যোগ হয়েছে।

5. jQuery এর সিলেক্টর টেস্ট করা

jQuery সিলেক্টর দিয়ে DOM এলিমেন্ট সিলেক্ট করার সময় JasmineJS ব্যবহার করে আপনি নিশ্চিত হতে পারেন যে সিলেক্টরটি সঠিকভাবে কাজ করছে কিনা।

উদাহরণ:

describe("jQuery Selector", function() {
  let $div;

  beforeEach(function() {
    $div = $("<div class='test'>Test</div>");
    $("body").append($div);
  });

  afterEach(function() {
    $div.remove();
  });

  it("should select the correct element by class", function() {
    const $selected = $(".test");
    expect($selected.length).toBe(1);
  });
});

এখানে:

• $(".test"): jQuery সিলেক্টর ব্যবহার করে .test ক্লাস বিশিষ্ট এলিমেন্ট সিলেক্ট করা হয়েছে।
• expect(): .test ক্লাস বিশিষ্ট একটি এলিমেন্ট সিলেক্ট হয়েছে কিনা তা পরীক্ষা করা হয়েছে।

সারাংশ

jQuery এর সাথে JasmineJS ব্যবহার করে আপনি সহজেই DOM ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং, অ্যাজাক্স রিকোয়েস্ট, এবং সিলেক্টর টেস্ট করতে পারেন। JasmineJS এর spyOn(), beforeEach(), afterEach(), এবং expect() ফাংশনগুলি jQuery কোডের কার্যকারিতা সঠিকভাবে পরীক্ষা করতে সাহায্য করে। এই কৌশলগুলির মাধ্যমে আপনি jQuery ভিত্তিক অ্যাপ্লিকেশনগুলির জন্য শক্তিশালী এবং নির্ভুল টেস্ট কেস তৈরি করতে পারবেন।