Karma এবং Jasmine হল Angular অ্যাপ্লিকেশন এবং Ionic অ্যাপ্লিকেশনগুলির জন্য জনপ্রিয় টেস্টিং ফ্রেমওয়ার্ক। Jasmine একটি behavior-driven development (BDD) ফ্রেমওয়ার্ক যা কোডের ইউনিট টেস্টিং করতে সাহায্য করে, এবং Karma হল একটি টেস্ট রানার যা টেস্টগুলো চালানোর জন্য ব্রাউজার বা পরিবেশ সেটআপ করে। Karma ব্যবহার করে Jasmine টেস্টগুলি ব্রাউজারে রান করা যায়, এবং এটি অ্যাপ্লিকেশন কোডের জন্য টেস্টিং প্রক্রিয়া সহজ করে তোলে।
এখানে Ionic অ্যাপে Karma এবং Jasmine ব্যবহার করে টেস্টিং করার বিস্তারিত প্রক্রিয়া তুলে ধরা হলো।
১. Karma এবং Jasmine ইনস্টলেশন এবং কনফিগারেশন
Ionic অ্যাপে Jasmine এবং Karma ইনস্টল এবং কনফিগার করা খুবই সহজ, কারণ Ionic CLI দ্বারা তৈরি প্রজেক্টগুলিতে আগেই Karma এবং Jasmine কনফিগার করা থাকে।
১.১ Ionic অ্যাপে Testing Setup
Ionic প্রজেক্টে ডিফল্টভাবে Jasmine এবং Karma কনফিগারেশনসহ আসে। নতুন Ionic প্রজেক্ট তৈরি করার সময় এই টুলগুলো সরাসরি ইনস্টল হয়। যদি আপনি নতুন Ionic প্রজেক্ট তৈরি করে থাকেন, তবে আপনাকে আলাদা করে ইনস্টল করার প্রয়োজন নেই।
ionic start myApp blank --type=angular
১.২ Karma এবং Jasmine ইনস্টল করা
যদি আপনার প্রজেক্টে Karma এবং Jasmine ইনস্টল না থাকে, তবে এটি ইনস্টল করতে হবে। নিচের কমান্ডটি চালান:
npm install karma karma-jasmine karma-chrome-launcher jasmine-core --save-dev
- karma-jasmine: Karma এর সাথে Jasmine ব্যবহার করতে।
- karma-chrome-launcher: Chrome ব্রাউজারে টেস্ট চালানোর জন্য।
- jasmine-core: Jasmine এর মূল প্যাকেজ।
২. Karma কনফিগারেশন ফাইল সেটআপ
Karma কনফিগারেশন ফাইলটি karma.conf.js নামে থাকবে যা টেস্ট রান করার জন্য বিভিন্ন সেটিংস ও কনফিগারেশন নির্ধারণ করে।
২.১ karma.conf.js কনফিগারেশন
Ionic CLI দ্বারা তৈরি প্রকল্পে এই কনফিগারেশনটি আগেই তৈরি থাকে। আপনি যদি এই ফাইলটি কাস্টমাইজ করতে চান, তাহলে সেটি karma.conf.js ফাইলে করতে পারেন।
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'src/**/*.spec.ts' // টেস্ট ফাইল
],
exclude: [],
preprocessors: {
'src/**/*.ts': ['karma-typescript'] // TypeScript টেস্টিং
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'], // টেস্ট চালানোর জন্য ব্রাউজার
singleRun: false,
concurrency: Infinity
})
}
এখানে:
- frameworks: আমরা jasmine ফ্রেমওয়ার্ক ব্যবহার করছি।
- files: এখানে আপনার টেস্ট ফাইলগুলো থাকবে (বিশেষ করে
.spec.tsফাইলগুলো)। - browsers: Chrome ব্রাউজারে টেস্ট রান করার জন্য সেট করা হয়েছে।
৩. Test File Structure
কোনো টেস্ট ফাইল .spec.ts এক্সটেনশনে তৈরি করা হয়। এই ফাইলের মধ্যে আপনি আপনার কোডের ইউনিট টেস্টিং কোড লিখবেন। সাধারণভাবে, .spec.ts ফাইলগুলি আপনার কম্পোনেন্ট, সার্ভিস, অথবা ডিরেকটিভের জন্য টেস্ট লেখার স্থান।
৩.১ কম্পোনেন্ট টেস্ট করা
ধরা যাক, একটি HomeComponent আছে এবং আপনি এটি টেস্ট করতে চান।
home.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
message = 'Hello, world!';
}
এখন, home.component.spec.ts ফাইলে এর টেস্ট লিখবেন:
home.component.spec.ts:
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [HomeComponent]
});
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should have the correct message', () => {
expect(component.message).toBe('Hello, world!');
});
});
এখানে:
- beforeEach(): এই ফাংশনটি প্রতিটি টেস্টের আগে রান হয় এবং কম্পোনেন্ট ইনস্ট্যান্স তৈরি করে।
- it(): টেস্ট কেস লিখতে ব্যবহৃত হয়।
expect()দ্বারা নির্ধারিত আউটপুটের সাথে মূল্যায়ন করা হয়।
৪. সার্ভিস টেস্ট করা
একটি সার্ভিস টেস্ট করার জন্য HttpClientTestingModule ব্যবহার করতে হবে যদি আপনি HTTP কল করতে চান। এখানে আমরা একটি সার্ভিস টেস্ট করার উদাহরণ দেখাবো।
user.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private http: HttpClient) {}
getUserData(): Observable<any> {
return this.http.get('https://api.example.com/user');
}
}
এখন user.service.spec.ts ফাইলের মধ্যে এর টেস্ট লিখুন:
user.service.spec.ts:
import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { UserService } from './user.service';
describe('UserService', () => {
let service: UserService;
let httpMock: HttpTestingController;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
providers: [UserService]
});
service = TestBed.inject(UserService);
httpMock = TestBed.inject(HttpTestingController);
});
it('should fetch user data', () => {
const mockData = { name: 'John', age: 30 };
service.getUserData().subscribe(data => {
expect(data).toEqual(mockData);
});
const req = httpMock.expectOne('https://api.example.com/user');
expect(req.request.method).toBe('GET');
req.flush(mockData);
});
afterEach(() => {
httpMock.verify();
});
});
এখানে:
- HttpClientTestingModule: HTTP টেস্টিংয়ের জন্য এটি ব্যবহৃত হয়।
- httpMock: HTTP কল পরীক্ষা করার জন্য ব্যবহৃত হয়।
৫. Karma Test Run
যখন আপনি টেস্টগুলি লিখে ফেলবেন, তখন আপনার টেস্ট চালানোর জন্য কেবল নিচের কমান্ডটি চালান:
ng test
এটি Karma রানের মাধ্যমে আপনার টেস্টগুলি চালাবে এবং ব্রাউজারে ফলাফল দেখাবে।
সারাংশ
- Karma এবং Jasmine হল দুটি শক্তিশালী টুল যা Ionic অ্যাপ্লিকেশন এবং Angular অ্যাপ্লিকেশনের জন্য টেস্টিং সমাধান প্রদান করে।
- Jasmine ব্যবহার করে আপনি অ্যাপ্লিকেশন লজিকের জন্য ইউনিট টেস্ট লিখতে পারেন, এবং Karma ব্যবহার করে সেগুলি ব্রাউজারে চালিয়ে দেখতে পারেন।
- Ionic অ্যাপ্লিকেশন তৈরি করার সময় আপনার কোডের কম্পোনেন্ট, সার্ভিস এবং অন্যান্য অংশের জন্য টেস্ট লিখে নিশ্চিত করতে পারেন যে সবকিছু সঠিকভাবে কাজ করছে।
এভাবে আপনি Ionic অ্যাপে কার্যকরী টেস্টিং কৌশল ব্যবহার করতে পারবেন এবং কোডের কোয়ালিটি নিশ্চিত করতে পারবেন।
Read more
