DOM Manipulation এবং Events এর জন্য টেস্ট তৈরি করা

JasmineJS এ DOM manipulation এবং events টেস্টিং করার জন্য কিছু বিশেষ কৌশল রয়েছে। আপনি যখন ওয়েব পেজে DOM উপাদানগুলো পরিবর্তন করেন বা ইভেন্ট হ্যান্ডলার দিয়ে কোনো ইন্টারঅ্যাকশন পরিচালনা করেন, তখন সেই কার্যাবলীকে সঠিকভাবে টেস্ট করা প্রয়োজন। JasmineJS এ এই ধরনের টেস্ট তৈরি করতে হলে আপনাকে DOM এবং events এর সাথে যোগাযোগ করার জন্য কিছু স্পেসিফিক টেকনিক ব্যবহার করতে হবে। নিচে এই বিষয়গুলো নিয়ে বিস্তারিত আলোচনা করা হল।

DOM Manipulation এর জন্য টেস্ট তৈরি করা

DOM (Document Object Model) এর মাধ্যমে পেজের কন্টেন্ট পরিবর্তন বা নিয়ন্ত্রণ করা হয়। JasmineJS এ DOM manipulation টেস্ট করার জন্য document.createElement(), innerHTML, এবং querySelector() এর মতো DOM ম্যানিপুলেশন পদ্ধতি ব্যবহার করা যেতে পারে।

উদাহরণ: DOM Manipulation টেস্ট

ধরা যাক, আমাদের একটি ফাংশন আছে যা একটি নতুন প্যারাগ্রাফ তৈরি করে এবং সেটা ওয়েব পেজে যুক্ত করে।

function addParagraph() {
  const newParagraph = document.createElement('p');
  newParagraph.textContent = "This is a new paragraph.";
  document.body.appendChild(newParagraph);
}

এখন, আমরা এই ফাংশনের জন্য JasmineJS এ টেস্ট তৈরি করব।

describe("DOM Manipulation", function() {
  it("should add a new paragraph to the body", function() {
    // টেস্টের আগে DOM সাফ করা
    document.body.innerHTML = '';

    // ফাংশন কল
    addParagraph();

    // প্যারাগ্রাফ যোগ হয়েছে কিনা চেক করা
    const paragraph = document.querySelector('p');
    expect(paragraph).not.toBeNull();
    expect(paragraph.textContent).toBe("This is a new paragraph.");
  });
});

এখানে:

• document.createElement(): একটি নতুন HTML উপাদান তৈরি করা হয়।
• document.body.appendChild(): নতুন উপাদানটি body তে যোগ করা হয়।
• document.querySelector(): পেজে প্যারাগ্রাফটি রয়েছে কিনা তা যাচাই করা হয়।

এই টেস্টটি নিশ্চিত করবে যে addParagraph() ফাংশনটি সঠিকভাবে একটি নতুন প্যারাগ্রাফ যোগ করেছে।

Events এর জন্য টেস্ট তৈরি করা

JasmineJS এ events টেস্ট করার জন্য আপনাকে ডোম ইভেন্টের সাথে ইন্টারঅ্যাক্ট করতে হবে, যেমন click(), keydown(), change() ইত্যাদি। JasmineJS সরাসরি ইভেন্ট ফায়ার করতে বা ইভেন্ট হ্যান্ডলারগুলোর কার্যকারিতা যাচাই করতে dispatchEvent() বা Event() এর মতো মেথড ব্যবহার করতে পারে।

উদাহরণ: Event Handling টেস্ট

ধরা যাক, আমাদের একটি বাটন আছে, যার সাথে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত রয়েছে যা ক্লিক করার পর একটি প্যারাগ্রাফ তৈরি করে।

<button id="addButton">Add Paragraph</button>

এবং জাভাস্ক্রিপ্ট কোড:

document.getElementById('addButton').addEventListener('click', function() {
  const newParagraph = document.createElement('p');
  newParagraph.textContent = "This is a new paragraph added by button click.";
  document.body.appendChild(newParagraph);
});

এখন, আমরা একটি Jasmine টেস্ট তৈরি করব, যা এই ক্লিক ইভেন্টটি সিমুলেট করবে এবং যাচাই করবে যে প্যারাগ্রাফটি সঠিকভাবে তৈরি হয়েছে কিনা।

describe("Event Handling", function() {
  it("should add a new paragraph when the button is clicked", function() {
    // টেস্টের আগে DOM সাফ করা
    document.body.innerHTML = '<button id="addButton">Add Paragraph</button>';

    // বাটনে ক্লিক করার জন্য ইভেন্ট ডিপ্যাচ করা
    const button = document.getElementById('addButton');
    button.click();

    // প্যারাগ্রাফটি DOM এ যোগ হয়েছে কিনা তা যাচাই করা
    const paragraph = document.querySelector('p');
    expect(paragraph).not.toBeNull();
    expect(paragraph.textContent).toBe("This is a new paragraph added by button click.");
  });
});

এখানে:

• button.click(): এটি ক্লিক ইভেন্টকে সিমুলেট করে, যা পেজে ইভেন্ট হ্যান্ডলারকে ট্রিগার করবে।
• document.querySelector(): এটি DOM এ প্যারাগ্রাফটি সঠিকভাবে যোগ হয়েছে কিনা তা যাচাই করে।

এই টেস্টটি নিশ্চিত করবে যে, বাটনে ক্লিক করার পর প্যারাগ্রাফ সঠিকভাবে তৈরি হয়।

Complex Event Handling এর টেস্টিং

কখনো কখনো ইভেন্টগুলি বেশ জটিল হতে পারে, যেখানে একাধিক ইভেন্ট হ্যান্ডলার বা কাস্টম ইভেন্ট ট্রিগার করা হয়। এই ধরনের পরিস্থিতিতে spyOn() এবং Event() ব্যবহার করা যেতে পারে।

উদাহরণ: Complex Event Handling

ধরা যাক, আমাদের একটি টেক্সট বক্স আছে এবং আমরা চাই, যখন ব্যবহারকারী কোনো ভ্যালিড ইনপুট দেয় তখন একটি আলাদা ক্লাস যুক্ত হবে এবং এটি একটি কাস্টম ইভেন্ট ট্রিগার করবে।

<input id="inputBox" type="text">

এবং জাভাস্ক্রিপ্ট কোড:

const inputBox = document.getElementById('inputBox');

inputBox.addEventListener('input', function() {
  if (inputBox.value.length > 5) {
    inputBox.classList.add('valid');
    const event = new CustomEvent('validInput', { detail: inputBox.value });
    inputBox.dispatchEvent(event);
  }
});

এখন, এই কাস্টম ইভেন্ট এবং DOM পরিবর্তন টেস্ট করা যাবে।

describe("Complex Event Handling", function() {
  it("should add a 'valid' class and dispatch a 'validInput' event", function() {
    document.body.innerHTML = '<input id="inputBox" type="text">';

    const inputBox = document.getElementById('inputBox');

    // spyOn ব্যবহার করে ইভেন্ট হ্যান্ডলার ট্র্যাক করা
    spyOn(inputBox, 'dispatchEvent');

    // ইনপুট প্রদান করা
    inputBox.value = "Hello World";
    inputBox.dispatchEvent(new Event('input'));

    // ক্লাস যুক্ত হয়েছে কিনা চেক করা
    expect(inputBox.classList.contains('valid')).toBeTrue();

    // কাস্টম ইভেন্ট dispatch হয়েছে কিনা চেক করা
    expect(inputBox.dispatchEvent).toHaveBeenCalled();
    expect(inputBox.dispatchEvent).toHaveBeenCalledWith(jasmine.objectContaining({
      type: 'validInput',
      detail: 'Hello World'
    }));
  });
});

এখানে:

• spyOn(): এটি একটি স্পাই তৈরি করে, যা ইভেন্ট হ্যান্ডলারের কল বা dispatching মনিটর করে।
• CustomEvent(): এটি একটি কাস্টম ইভেন্ট তৈরি করে যা বিশেষ তথ্য (detail) বহন করে।
• expect(): এটি চেক করে যে ক্লাস যোগ করা হয়েছে কিনা এবং কাস্টম ইভেন্টটি সঠিকভাবে dispatch করা হয়েছে কিনা।

সারাংশ

JasmineJS এ DOM manipulation এবং events এর জন্য টেস্ট তৈরি করার জন্য আপনি নিম্নলিখিত কৌশল ব্যবহার করতে পারেন:

• DOM Manipulation: DOM উপাদান তৈরি, পরিবর্তন বা মুছে ফেলা এবং সেগুলি যাচাই করা।
• Events: DOM ইভেন্ট সিমুলেট করা এবং সেগুলি সঠিকভাবে ট্রিগার হওয়ার পর সঠিক ফলাফল যাচাই করা।
• spyOn(): ইভেন্ট হ্যান্ডলার বা ফাংশনের কল ট্র্যাক করা।
• CustomEvent(): কাস্টম ইভেন্ট তৈরি করে DOM এ ইভেন্ট ডিসপ্যাচ করা।

এই কৌশলগুলো অনুসরণ করে আপনি JasmineJS এর মাধ্যমে DOM manipulation এবং event handling এর কার্যকারিতা সঠিকভাবে টেস্ট করতে পারবেন।