Web Component Tester (WCT) হল একটি টেস্টিং টুল যা Polymer অ্যাপ্লিকেশন এবং ওয়েব কম্পোনেন্টগুলির জন্য ডিজাইন করা হয়েছে। এটি একটি সহজ এবং কার্যকরী টুল যা আপনাকে ওয়েব কম্পোনেন্টগুলির ইউনিট টেস্টিং এবং ইন্টিগ্রেশন টেস্টিং করতে সাহায্য করে। WCT সাধারণত Mocha, Chai, এবং Karma এর সাথে ব্যবহার করা হয়। এটি একাধিক ব্রাউজারে আপনার ওয়েব কম্পোনেন্টের আচরণ টেস্ট করতে সক্ষম, এবং এটি ব্রাউজার-ভিত্তিক টেস্টিংয়ের জন্য একটি সম্পূর্ণ সেটআপ প্রদান করে।
WCT (Web Component Tester) এর ব্যবহার
Polymer প্রজেক্টে WCT ব্যবহার করার মাধ্যমে আপনি আপনার কাস্টম ওয়েব কম্পোনেন্টগুলি সঠিকভাবে কাজ করছে কিনা তা যাচাই করতে পারবেন। WCT আপনাকে বিভিন্ন ধরনের টেস্ট যেমন Unit Testing, Integration Testing, এবং End-to-End Testing করতে সহায়তা করে। এখানে WCT সেটআপ এবং ব্যবহার করার প্রক্রিয়া সম্পর্কে বিস্তারিত আলোচনা করা হলো।
ধাপ ১: WCT সেটআপ করা
1.1: WCT ইনস্টলেশন
WCT ব্যবহার করার জন্য প্রথমে আপনার Polymer প্রজেক্টে WCT ইনস্টল করতে হবে। এটি NPM প্যাকেজ হিসেবে ইনস্টল করা যায়।
npm install --save-dev web-component-tester
এছাড়াও, আপনাকে Karma, Mocha, এবং Chai ইনস্টল করতে হবে, যা টেস্টিং পরিবেশে কাজ করবে।
npm install --save-dev karma karma-mocha karma-chai karma-firefox-launcher karma-chrome-launcher
1.2: karma.conf.js কনফিগারেশন ফাইল তৈরি করা
Karma কনফিগারেশন ফাইলটি তৈরি করতে হবে, যেখানে আপনি আপনার টেস্ট রানার এবং ব্রাউজার কনফিগারেশন সংজ্ঞায়িত করবেন।
karma.conf.js ফাইলটি সাধারণত নিচের মতো দেখতে হবে:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai'],
files: [
'node_modules/webcomponentsjs/webcomponents-lite.js', // Web Components polyfill
'test/**/*.html',
'test/**/*.js'
],
browsers: ['Chrome', 'Firefox'], // Testing in Chrome and Firefox
preprocessors: {
'test/**/*.html': ['html2js'] // HTML টেস্ট ফাইল প্রসেস করা
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
singleRun: false
});
};
1.3: Test Runner চালানো
এখন আপনি Karma টেস্ট রানার চালাতে পারেন:
npx karma start karma.conf.js
এটি আপনার টেস্টগুলো Chrome বা Firefox ব্রাউজারে চালাবে এবং ফলাফল কনসোলে প্রদর্শন করবে।
ধাপ ২: WCT টেস্ট তৈরি করা
WCT ব্যবহার করার জন্য আপনাকে web-component-tester ফাংশন ব্যবহার করতে হবে। একটি সাধারণ ওয়েব কম্পোনেন্টের জন্য টেস্ট তৈরি করা হয়, যা HTML টেমপ্লেট এবং JavaScript ফাংশন টেস্ট করবে।
2.1: কম্পোনেন্টের টেস্ট ফাইল তৈরি করা
ধরা যাক, একটি সাধারণ Polymer কম্পোনেন্ট তৈরি করা হয়েছে:
<dom-module id="my-element">
<template>
<h1>Welcome to {{name}}</h1>
</template>
<script>
class MyElement extends Polymer.Element {
static get is() {
return 'my-element';
}
static get properties() {
return {
name: {
type: String,
value: 'Polymer'
}
};
}
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
এখন, এই কম্পোনেন্টটির জন্য একটি টেস্ট ফাইল তৈরি করা হবে যা চেক করবে যে এটি সঠিকভাবে রেন্ডার হচ্ছে কিনা এবং name প্রপার্টি সঠিকভাবে কাজ করছে কিনা।
2.2: টেস্ট ফাইল লিখা
// test/my-element.test.js
suite('my-element', () => {
let element;
setup(() => {
element = document.createElement('my-element');
document.body.appendChild(element);
});
test('should render the correct name', () => {
const h1 = element.shadowRoot.querySelector('h1');
assert.equal(h1.textContent.trim(), 'Welcome to Polymer');
});
test('should have the default name property', () => {
assert.equal(element.name, 'Polymer');
});
test('should update the name property', () => {
element.name = 'Web Components';
const h1 = element.shadowRoot.querySelector('h1');
assert.equal(h1.textContent.trim(), 'Welcome to Web Components');
});
});
ব্যাখ্যা:
- setup(): এটি একটি হুক যা প্রতিটি টেস্টের আগে কম্পোনেন্টটি DOM-এ অ্যাড করে।
- test(): প্রতিটি আলাদা টেস্ট।
- প্রথম টেস্টটি চেক করে যে
<h1>এলিমেন্টে সঠিক টেক্সট রয়েছে কিনা। - দ্বিতীয় টেস্টটি চেক করে যে
nameপ্রপার্টির ডিফল্ট মান"Polymer"কি সঠিকভাবে সেট করা হয়েছে। - তৃতীয় টেস্টটি চেক করে যে
nameপ্রপার্টি আপডেট করার পর<h1>ট্যাগে সঠিক টেক্সট রেন্ডার হচ্ছে।
- প্রথম টেস্টটি চেক করে যে
ধাপ ৩: টেস্ট রান করা
এখন, আপনি WCT টেস্ট রান করতে পারেন।
npx wct
এটি আপনার ওয়েব কম্পোনেন্টের টেস্টগুলি চালাবে এবং কনসোলে ফলাফল প্রদর্শন করবে।
ধাপ ৪: ব্রাউজারে টেস্ট রান করা
আপনার টেস্টগুলিকে সরাসরি ব্রাউজারে চালানোর জন্য আপনি Karma এবং WCT-এর সাহায্যে ব্রাউজার-ভিত্তিক টেস্টিংও করতে পারেন। আপনার কনফিগারেশন অনুযায়ী, Karma ব্রাউজার-ভিত্তিক টেস্ট চালাবে এবং আপনি Chrome, Firefox, Safari বা অন্য যেকোনো ব্রাউজারে টেস্ট চালাতে পারেন।
WCT (Web Component Tester) ব্যবহার করার মাধ্যমে আপনি Polymer কম্পোনেন্টগুলির জন্য ইউনিট টেস্ট এবং ইন্টিগ্রেশন টেস্ট খুব সহজেই তৈরি এবং রান করতে পারেন। এটি আপনাকে আপনার কোডের সঠিকতা যাচাই করতে এবং ব্রাউজার-ভিত্তিক টেস্টিং করার সুযোগ দেয়, যা ডেভেলপমেন্ট প্রক্রিয়াকে আরও দ্রুত এবং নির্ভুল করে তোলে। WCT-র সাহায্যে আপনি Polymer কম্পোনেন্টগুলির কার্যকারিতা নিশ্চিত করতে পারবেন এবং আপনার অ্যাপ্লিকেশনটিকে আরও স্থিতিশীল ও বিশ্বস্ত বানাতে পারবেন।
Read more
