Angular Material কম্পোনেন্টের ইউনিট টেস্টিং (Unit Testing) করা গুরুত্বপূর্ণ, যাতে আপনি নিশ্চিত করতে পারেন যে আপনার কম্পোনেন্ট সঠিকভাবে কাজ করছে এবং কোনো বাগ বা অপ্রত্যাশিত আচরণ দেখা যাচ্ছে না। Angular কম্পোনেন্টের জন্য ইউনিট টেস্টিং করতে সাধারণত Jasmine এবং Karma ব্যবহার করা হয়। Jasmine একটি টেস্টিং ফ্রেমওয়ার্ক এবং Karma একটি রাননার যা টেস্টগুলো চালায়। Angular CLI এর মাধ্যমে এটি স্বয়ংক্রিয়ভাবে কনফিগার করা থাকে।

এই টিউটোরিয়ালে, আমরা দেখব কীভাবে Angular Material কম্পোনেন্ট যেমন MatTable, MatButton, MatStepper ইত্যাদির ইউনিট টেস্ট তৈরি করা যায়।

১. Angular Material কম্পোনেন্টের টেস্টিং সেটআপ

প্রথমে, নিশ্চিত করুন যে আপনার অ্যাপ্লিকেশনটি Jasmine এবং Karma ব্যবহার করছে। যদি আপনি Angular CLI ব্যবহার করে অ্যাপ তৈরি করে থাকেন, তাহলে এটি স্বয়ংক্রিয়ভাবে কনফিগার করা থাকে।

টেস্ট ফাইলের মূল কাঠামো:

প্রতিটি কম্পোনেন্টের জন্য একটি টেস্ট ফাইল থাকে, যেটির এক্সটেনশন .spec.ts হয়।

২. MatButton কম্পোনেন্টের টেস্টিং

MatButton কম্পোনেন্টের টেস্টিং করতে নিচে একটি সাধারণ টেস্টের উদাহরণ দেওয়া হলো:

টেস্ট কোড:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatButtonModule } from '@angular/material/button';
import { AppComponent } from './app.component';
import { By } from '@angular/platform-browser';

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MatButtonModule], // MatButtonModule ইমপোর্ট করতে হবে
      declarations: [AppComponent],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the app', () => {
    expect(component).toBeTruthy();
  });

  it('should contain a button with the correct text', () => {
    const button = fixture.debugElement.query(By.css('button'));
    expect(button.nativeElement.textContent).toContain('Click me');
  });

  it('should call the onClick method when the button is clicked', () => {
    spyOn(component, 'onClick');
    const button = fixture.debugElement.query(By.css('button'));
    button.triggerEventHandler('click', null);
    expect(component.onClick).toHaveBeenCalled();
  });
});

কোড ব্যাখ্যা:

• MatButtonModule: MatButton কম্পোনেন্ট ব্যবহার করার জন্য এটি ইমপোর্ট করতে হয়।
• fixture.debugElement.query(By.css('button')): এই লাইনটি DOM-এ button এলিমেন্ট খুঁজে বের করে।
• button.triggerEventHandler('click', null): এটি বাটনে ক্লিক করার মতো ইভেন্ট ট্রিগার করে, যাতে onClick মেথডটি কল হয়।

৩. MatTable কম্পোনেন্টের টেস্টিং

MatTable কম্পোনেন্টে ডেটা সঠিকভাবে প্রদর্শিত হচ্ছে কিনা তা টেস্ট করতে হবে।

টেস্ট কোড:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatTableModule } from '@angular/material/table';
import { AppComponent } from './app.component';
import { By } from '@angular/platform-browser';

describe('AppComponent with MatTable', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MatTableModule], // MatTableModule ইমপোর্ট
      declarations: [AppComponent],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should display the correct number of rows in the table', () => {
    const rows = fixture.debugElement.queryAll(By.css('mat-row'));
    expect(rows.length).toBe(3); // এখানে ৩টি রো হওয়ার কথা
  });

  it('should display the correct data in the table', () => {
    const row = fixture.debugElement.queryAll(By.css('mat-row'))[0];
    const columns = row.queryAll(By.css('mat-cell'));
    expect(columns[0].nativeElement.textContent).toBe('1');
    expect(columns[1].nativeElement.textContent).toBe('Hydrogen');
    expect(columns[2].nativeElement.textContent).toBe('1.0079');
  });
});

কোড ব্যাখ্যা:

• MatTableModule: MatTable কম্পোনেন্ট ব্যবহার করার জন্য এটি ইমপোর্ট করতে হয়।
• fixture.debugElement.queryAll(By.css('mat-row')): এই লাইনটি ডেটা টেবিলের সব রো (row) গুলো খুঁজে বের করে।
• expect(columns[0].nativeElement.textContent): এখানে প্রতিটি সেলে সঠিক ডেটা প্রদর্শিত হচ্ছে কিনা তা যাচাই করা হচ্ছে।

৪. MatStepper কম্পোনেন্টের টেস্টিং

MatStepper কম্পোনেন্টের স্টেপ ভ্যালিডেশন এবং নেভিগেশন টেস্ট করার জন্য, স্টেপস মধ্যে ন্যাভিগেশন এবং ফর্ম ভ্যালিডেশন চেক করা হয়।

টেস্ট কোড:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatStepperModule } from '@angular/material/stepper';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

describe('AppComponent with MatStepper', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MatStepperModule, ReactiveFormsModule], // MatStepperModule ইমপোর্ট
      declarations: [AppComponent],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should disable next button if form is invalid', () => {
    const nextButton = fixture.debugElement.nativeElement.querySelector('button[matStepperNext]');
    expect(nextButton.disabled).toBeTruthy(); // ফর্ম ইনভ্যালিড হলে নেক্সট বাটন ডিসেবল থাকবে
  });

  it('should navigate to the next step when the form is valid', () => {
    component.firstFormGroup.controls.firstName.setValue('John');
    fixture.detectChanges();
    const nextButton = fixture.debugElement.nativeElement.querySelector('button[matStepperNext]');
    nextButton.click();
    fixture.detectChanges();
    expect(component.stepper.selectedIndex).toBe(1); // পরবর্তী স্টেপে নেভিগেট হবে
  });
});

কোড ব্যাখ্যা:

• matStepperNext: এটি নেক্সট স্টেপে নেভিগেট করতে ব্যবহৃত হয়।
• nextButton.disabled: এখানে টেস্ট করা হচ্ছে, যদি ফর্ম ইনভ্যালিড হয়, তাহলে নেক্সট বাটনটি ডিসেবল হবে।
• component.stepper.selectedIndex: এটি স্টেপারের নির্বাচিত স্টেপ চেক করার জন্য ব্যবহৃত হয়।

Angular Material কম্পোনেন্টের ইউনিট টেস্টিং অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি আপনার অ্যাপ্লিকেশনের ব্যবহারকারীর ইন্টারফেসের বিভিন্ন অংশের কার্যকারিতা নিশ্চিত করে। Jasmine, Karma, এবং TestBed ব্যবহার করে আপনি Angular Material কম্পোনেন্টের জন্য ইউনিট টেস্ট লিখতে পারেন। বিভিন্ন কম্পোনেন্ট যেমন MatButton, MatTable, MatStepper ইত্যাদির টেস্টিং সহজে করা যায়, যা আপনার অ্যাপ্লিকেশনকে আরও স্থিতিশীল এবং নির্ভরযোগ্য করে তোলে।