JasmineJS শুধুমাত্র JavaScript কোডের টেস্টিং করতে ব্যবহৃত হয় না, এটি DOM elements (ডকুমেন্ট অবজেক্ট মডেল এলিমেন্টস) এর টেস্টিংও করতে পারে। DOM manipulation এবং interactions চেক করার জন্য Jasmine-এর সাথে browser environment (যেমন, Chrome, Firefox) বা headless browser (যেমন, PhantomJS) ব্যবহার করা হয়। Jasmine এর beforeEach() এবং afterEach() ফাংশন ব্যবহার করে DOM এ পরিবর্তন আনা, ইভেন্ট হ্যান্ডলিং করা, বা DOM থেকে মান সংগ্রহ করা খুব সহজে টেস্ট করা সম্ভব।
এই টিউটোরিয়ালে, আমরা আলোচনা করব কিভাবে JasmineJS ব্যবহার করে DOM elements এর টেস্টিং করা যায়।
DOM Elements এর টেস্টিং কেন গুরুত্বপূর্ণ?
DOM elements এর টেস্টিং মূলত আপনার ওয়েবপেজ বা অ্যাপ্লিকেশনের UI (User Interface) এর কার্যকারিতা যাচাই করার জন্য প্রয়োজনীয়। এতে আপনি নিশ্চিত হতে পারেন:
- DOM এলিমেন্টগুলোর সঠিক উপস্থিতি
- ইভেন্ট হ্যান্ডলারের সঠিক কার্যকারিতা
- DOM manipulation সঠিকভাবে হচ্ছে কি না
JasmineJS এর মাধ্যমে এই সমস্ত বিষয় খুব সহজেই পরীক্ষা করা সম্ভব।
DOM Elements টেস্টিং এর জন্য JasmineJS এর ব্যবহার
JasmineJS এ DOM manipulation এর টেস্টিং করার জন্য সাধারণত beforeEach(), afterEach(), এবং it() ব্লক ব্যবহার করা হয়, যাতে টেস্ট চলাকালীন DOM ম্যানিপুলেশন এবং অবজেক্ট চেক করা যায়।
DOM Elements টেস্টিং এর উদাহরণ
১. DOM এলিমেন্ট এর উপস্থিতি পরীক্ষা
ধরা যাক, আমাদের একটি HTML পেজে একটি div এলিমেন্ট রয়েছে এবং আমরা সেটির উপস্থিতি যাচাই করতে চাই।
HTML কোড:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jasmine Test Example</title>
</head>
<body>
<div id="container"></div>
<script src="app.js"></script>
</body>
</html>
JavaScript কোড (app.js):
function addElement() {
const div = document.createElement('div');
div.id = 'newElement';
document.getElementById('container').appendChild(div);
}
Jasmine টেস্ট:
describe("DOM Element Testing", function() {
beforeEach(function() {
// HTML কোডে container এর সাথে একটি নতুন div যুক্ত করা
document.body.innerHTML = '<div id="container"></div>';
});
it("should add a new div element inside container", function() {
// addElement() ফাংশন কল করা
addElement();
// 'newElement' এর উপস্থিতি পরীক্ষা করা
const newDiv = document.getElementById('newElement');
expect(newDiv).not.toBeNull(); // div এলিমেন্টটি DOM-এ আছে কিনা তা যাচাই করা
});
});
এখানে:
beforeEach()ব্লকে DOM তৈরি বা সেটআপ করা হচ্ছে।it()ব্লকেaddElement()ফাংশন কল করা হচ্ছে এবং যাচাই করা হচ্ছে যে নতুন div উপাদানটি সঠিকভাবেcontainerএর মধ্যে যুক্ত হয়েছে কিনা।
২. DOM Elements এর মান পরিবর্তন এবং যাচাই
ধরা যাক, একটি input ফিল্ড আছে এবং আপনি তার মান পরিবর্তন করতে চান। এরপর যাচাই করতে হবে যে ফিল্ডের মান ঠিকঠাক পরিবর্তিত হয়েছে কিনা।
HTML কোড:
<input type="text" id="nameInput" value="Old Name">
JavaScript কোড:
function changeInputValue() {
const input = document.getElementById('nameInput');
input.value = 'New Name';
}
Jasmine টেস্ট:
describe("Change input value", function() {
beforeEach(function() {
// HTML-এ একটি input ফিল্ড তৈরি করা
document.body.innerHTML = '<input type="text" id="nameInput" value="Old Name">';
});
it("should change the input value", function() {
// changeInputValue() ফাংশন কল করা
changeInputValue();
// 'nameInput' এর মান যাচাই করা
const input = document.getElementById('nameInput');
expect(input.value).toBe('New Name');
});
});
এখানে:
beforeEach()ব্লকেinputফিল্ড তৈরি করা হচ্ছে।changeInputValue()ফাংশন কল করার পর যাচাই করা হচ্ছে যেinputফিল্ডের মান সঠিকভাবে পরিবর্তিত হয়েছে।
৩. DOM ইভেন্ট হ্যান্ডলিং টেস্ট
JasmineJS আপনাকে DOM ইভেন্ট যেমন click, keyup, mouseover ইত্যাদি টেস্ট করতে দেয়। এই টেস্টিংয়ের মাধ্যমে আপনি নিশ্চিত হতে পারেন যে আপনার ইভেন্ট হ্যান্ডলার ঠিকভাবে কাজ করছে।
HTML কোড:
<button id="myButton">Click Me</button>
JavaScript কোড:
function handleClick() {
const button = document.getElementById('myButton');
button.innerText = 'Clicked';
}
document.getElementById('myButton').addEventListener('click', handleClick);
Jasmine টেস্ট:
describe("Event Handler Testing", function() {
beforeEach(function() {
// HTML-এ একটি button তৈরি করা
document.body.innerHTML = '<button id="myButton">Click Me</button>';
});
it("should change button text when clicked", function() {
// Button এ ক্লিক করা হচ্ছে
const button = document.getElementById('myButton');
button.click();
// Button এর innerText যাচাই করা
expect(button.innerText).toBe('Clicked');
});
});
এখানে:
beforeEach()ব্লকেbuttonএলিমেন্ট তৈরি করা হচ্ছে।button.click()এর মাধ্যমেclickইভেন্ট ট্রিগার করা হচ্ছে এবং তারপর যাচাই করা হচ্ছে যে বাটনের টেক্সট পরিবর্তন হয়েছে কিনা।
Jasmine এর DOM ম্যানিপুলেশন টেস্টিং সম্পর্কিত কিছু গুরুত্বপূর্ণ পয়েন্ট
document.body.innerHTMLব্যবহার করে DOM Setup: Jasmine এ সাধারণতbeforeEach()ব্লক ব্যবহার করে DOM সঠিকভাবে সেটআপ করা হয়।document.body.innerHTMLদিয়ে আপনি HTML কন্টেন্টকে সিম্পল করে প্রতিটি টেস্টের জন্য তৈরি করতে পারেন।- DOM এর সঙ্গে ইন্টারঅ্যাকশন: Jasmine এ DOM manipulation টেস্ট করার সময় সাধারণত
document.getElementById()বা অন্যান্য DOM সিলেক্টর ব্যবহার করা হয়। তবে, যদি আপনাকে জাভাস্ক্রিপ্টের ইভেন্ট হ্যান্ডলার চেক করতে হয়, তবে আপনিclick(),focus(),blur()ইত্যাদি ইভেন্ট ট্রিগার করতে পারেন। afterEach()দিয়ে DOM ক্লিনআপ:afterEach()ব্লক ব্যবহার করে টেস্ট শেষে DOM এলিমেন্ট বা অবজেক্ট গুলো ক্লিনআপ করা যেতে পারে, যাতে পরবর্তী টেস্টের জন্য সমস্যা না হয়।
সারাংশ
JasmineJS DOM টেস্টিং এর জন্য একটি শক্তিশালী টুল, যা আপনাকে DOM এলিমেন্টের উপস্থিতি, মান পরিবর্তন এবং ইভেন্ট হ্যান্ডলিং পরীক্ষা করতে সহায়তা করে। beforeEach() এবং afterEach() ব্লকগুলো ব্যবহার করে DOM কে সেটআপ এবং ক্লিনআপ করা হয়, এবং click(), innerText, value ইত্যাদি ব্যবহার করে DOM এর বিভিন্ন কার্যকারিতা পরীক্ষা করা হয়। JasmineJS আপনাকে ওয়েবপেজের UI এর সঠিক কার্যকারিতা নিশ্চিত করতে সক্ষম করে।
Read more
