මොඩියුලය 12: Testing (පරීක්ෂා කිරීම)

Angular හි ප්‍රධාන වශයෙන් testing වර්ග දෙකක් කෙරෙහි අවධානය යොමු කෙරේ:

Unit Testing (ඒකක පරීක්ෂාව)

යෙදුමේ කුඩාම, හුදකලා කොටස් (units) - එනම් components, services, pipes වැනි දේ - නිවැරදිව ක්‍රියා කරන්නේ දැයි තනි තනිව පරීක්ෂා කිරීම. මෙය වේගවත් සහ නිතර සිදු කරන පරීක්ෂාවකි.

End-to-End (E2E) Testing

සම්පූර්ණ යෙදුම, පරිශීලයෙකු එය භාවිතා කරන ආකාරයටම, ආරම්භයේ සිට අවසානය දක්වා (end-to-end) පරීක්ෂා කිරීම. උදාහරණයක් ලෙස, ලොග් වීම, යමක් සෙවීම, සහ ලොග් අවුට් වීම වැනි සම්පූර්ණ පරිශීලක ක්‍රියාවලියක් (user flow) පරීක්ෂා කරයි. මෙය සාපේක්ෂව මන්දගාමී පරීක්ෂාවකි.

Angular CLI මගින් component, service, හෝ pipe එකක් generate කරන විට, ඊට අදාළ මූලික test file එකක් (`.spec.ts`) ද ස්වයංක්‍රීයව නිර්මාණය වේ. මෙම පරීක්ෂා ලිවීම සඳහා Jasmine framework එක සහ ඒවා browser එකක ක්‍රියාත්මක කිරීමට Karma test runner එක default ලෙස භාවිතා වේ.

Component එකක් Test කිරීම

Component test එකකදී, component එක නිවැරදිව render වන්නේද, පරිශීලක අන්තර්ක්‍රියා (user interactions) වලට නිවැරදිව ප්‍රතිචාර දක්වන්නේද, සහ දත්ත නිවැරදිව පෙන්වන්නේද යන්න පරීක්ෂා කරයි.

// my-component.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponentComponent } from './my-component.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MyComponentComponent ]
    })
    .compileComponents();
  });

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

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

  it('should have a title `My App`', () => {
    expect(component.title).toEqual('My App');
  });
});

Tests run කිරීමට CLI command එක: ng test

E2E tests මගින් යෙදුමේ විවිධ කොටස් එකට සම්බන්ධ වී නිවැරදිව ක්‍රියා කරන්නේ දැයි තහවුරු කරයි. පරිශීලකයෙකුගේ දෘෂ්ටිකෝණයෙන් යෙදුම පරීක්ෂා කරයි.

පෙරදී Angular හි default E2E testing framework එක Protractor වුවද, දැන් Cypress සහ Playwright වැනි නවීන, වඩාත් විශ්වාසදායක මෙවලම් බහුලව භාවිතා වේ. Angular CLI v12 සහ ඉන් ඉහළ සංස්කරණ වලදී මෙම නවීන මෙවලම් සඳහා සහාය දක්වයි.

Cypress උදාහරණයක්

// sample.e2e-spec.ts
describe('My First E2E Test', () => {
  it('should visit the homepage and find the title', () => {
    // 1. Visit the home page
    cy.visit('/');

    // 2. Find an element with the text 'Welcome'
    cy.contains('Welcome');
  });
});

E2E tests run කිරීමට CLI command එක: ng e2e