JasmineJS সাধারণত JavaScript টেস্টিং ফ্রেমওয়ার্ক হিসেবে পরিচিত, তবে এটি HTML এবং CSS এর সাথে ইন্টিগ্রেশন করে ফ্রন্ট-এন্ড টেস্টিংও করতে পারে। HTML এবং CSS এর সাথে JasmineJS ব্যবহার করা হলে আপনি শুধু JavaScript ফাংশন বা মেথডই পরীক্ষা করবেন না, বরং UI উপাদান, DOM (Document Object Model) ম্যানিপুলেশন এবং স্টাইল সম্পর্কিত বৈশিষ্ট্যও টেস্ট করতে পারবেন।
এটি সাধারণত ব্রাউজারে চলমান JavaScript কোডের ফাংশনালিটি এবং এর UI পারফরম্যান্স পরীক্ষার জন্য ব্যবহৃত হয়। এখানে আমরা দেখব কীভাবে JasmineJS এর মাধ্যমে HTML এবং CSS এর সাথে ইন্টিগ্রেশন করা যায় এবং কিছু সাধারণ টেস্টিং পদ্ধতি।
HTML এবং CSS টেস্টিংয়ের জন্য JasmineJS সেটআপ
JasmineJS সাধারণত node.js এর পরিবেশে ইনস্টল করা হয়, তবে ব্রাউজারেও এটি ব্যবহার করা যেতে পারে। HTML ও CSS এর সাথে ইন্টিগ্রেশন করার জন্য আপনার Jasmine এর SpecRunner.html ফাইল ব্যবহার করতে হবে।
JasmineJS ইনস্টলেশন
প্রথমে JasmineJS ইনস্টল করতে হবে যদি না করা থাকে:
npm install --save-dev jasmine
এবার JasmineJS সেটআপ করুন, যেটি আপনাকে HTML এবং CSS এর সাথে ইন্টিগ্রেটেড টেস্ট তৈরি করতে সহায়তা করবে।
HTML এবং CSS টেস্টিংয়ের জন্য JasmineJS কনফিগারেশন
JasmineJS এর মাধ্যমে HTML এবং CSS এর টেস্টিং করার জন্য প্রথমে SpecRunner.html ফাইল তৈরি করতে হবে যেখানে আপনি আপনার JasmineJS টেস্টিং ফাইল, HTML ফাইল এবং CSS ফাইলগুলো ইনক্লুড করবেন।
SpecRunner.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</title>
<link rel="stylesheet" href="style.css"> <!-- CSS ফাইল ইনক্লুড -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jasmine-core@3.10.0/lib/jasmine-core/jasmine.js"></script> <!-- JasmineJS ইনক্লুড -->
<script src="https://cdn.jsdelivr.net/npm/jasmine-core@3.10.0/lib/jasmine-core/jasmine-html.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jasmine-core@3.10.0/lib/jasmine-core/boot.js"></script>
<script src="spec.js"></script> <!-- Jasmine টেস্ট ফাইল -->
</head>
<body>
<div id="testDiv" class="hiddenDiv">Hello Jasmine!</div>
<button id="toggleBtn">Toggle Visibility</button>
</body>
</html>
এখানে:
style.css: CSS ফাইল যেটি আপনি টেস্ট করার জন্য ব্যবহার করতে চান।spec.js: Jasmine টেস্টিং ফাইল যেখানে আপনি JavaScript কোডের টেস্টিং করবেন।
HTML এবং CSS টেস্ট করার জন্য JasmineJS টেস্ট কেস
JasmineJS ব্যবহার করে HTML এবং CSS টেস্ট করার সময়, আপনি DOM ম্যানিপুলেশন, CSS ক্লাস পরিবর্তন, স্টাইল পরিবর্তন ইত্যাদি পরীক্ষা করতে পারবেন। নিচে কিছু সাধারণ টেস্ট কেস দেখানো হলো।
উদাহরণ ১: DOM ম্যানিপুলেশন টেস্ট
ধরা যাক, আপনার একটি বাটন আছে যা ক্লিক করলে একটি div এলিমেন্টের দৃশ্যমানতা পরিবর্তন করবে।
HTML (উপরের SpecRunner.html ফাইলেই অন্তর্ভুক্ত):
<button id="toggleBtn">Toggle Visibility</button>
<div id="testDiv" class="hiddenDiv">Hello Jasmine!</div>
CSS (style.css):
.hiddenDiv {
display: none;
}
.visibleDiv {
display: block;
}
Jasmine টেস্ট (spec.js):
describe("DOM manipulation tests", function() {
it("should hide the div initially", function() {
const div = document.getElementById("testDiv");
expect(div.style.display).toBe("none"); // div শুরুতে hiddenDiv ক্লাসের সাথে hidden অবস্থায় থাকবে
});
it("should toggle the visibility of the div when button is clicked", function() {
const button = document.getElementById("toggleBtn");
const div = document.getElementById("testDiv");
button.click(); // বাটন ক্লিক করা হচ্ছে
expect(div.style.display).toBe("block"); // div দৃশ্যমান হবে
button.click(); // আবার বাটন ক্লিক করা হচ্ছে
expect(div.style.display).toBe("none"); // div আবার hidden হবে
});
});
এখানে, button.click() দিয়ে আপনি DOM-এ ম্যানিপুলেশন পরীক্ষা করছেন এবং expect() দিয়ে CSS স্টাইল চেক করছেন যে এটি সঠিকভাবে পরিবর্তিত হচ্ছে কিনা।
CSS স্টাইল টেস্টিং
JasmineJS দিয়ে CSS স্টাইল পরীক্ষা করার জন্য, আপনি style প্রপার্টি দিয়ে কোনো HTML এলিমেন্টের স্টাইল পরীক্ষা করতে পারেন।
উদাহরণ ২: CSS ক্লাস পরিবর্তন টেস্ট
ধরা যাক, আপনার একটি ফাংশন আছে যা কোনো বিশেষ অবস্থায় একটি CSS ক্লাস পরিবর্তন করে।
HTML:
<button id="changeStyleBtn">Change Style</button>
<div id="testDiv">This is a test div.</div>
CSS:
.redBackground {
background-color: red;
}
Jasmine টেস্ট:
describe("CSS class manipulation", function() {
it("should add 'redBackground' class when button is clicked", function() {
const button = document.getElementById("changeStyleBtn");
const div = document.getElementById("testDiv");
button.addEventListener("click", function() {
div.classList.add("redBackground");
});
button.click(); // বাটন ক্লিক করা হচ্ছে
expect(div.classList.contains("redBackground")).toBe(true); // div এর classList-এ redBackground চেক করা হচ্ছে
});
});
এখানে, classList.contains() ব্যবহার করা হচ্ছে যে div এলিমেন্টে সঠিক CSS ক্লাস যুক্ত হয়েছে কিনা তা যাচাই করতে।
সারাংশ
JasmineJS এর মাধ্যমে আপনি HTML এবং CSS এর সাথে ইন্টিগ্রেশন করে ফ্রন্ট-এন্ড টেস্টিং করতে পারেন। এতে আপনি:
- DOM ম্যানিপুলেশন পরীক্ষা করতে পারেন,
- CSS ক্লাস পরিবর্তন এবং স্টাইল পরিবর্তন চেক করতে পারেন,
- JavaScript কোডের সাথে HTML এবং CSS এর পারফরম্যান্স এবং আচরণ যাচাই করতে পারেন।
JasmineJS ব্যবহার করে ফ্রন্ট-এন্ড ডেভেলপমেন্টের সময় আপনার UI উপাদানগুলোর কার্যকারিতা এবং উপস্থাপনা সঠিকভাবে পরীক্ষা করা যায়।
Read more
