تست (Testing)

تست (Testing) یعنی بررسی رفتار کد. هدف، اطمینان از درست کارکردن اجزاست. در انگولار، با ستاپ های سبک کار می کنیم. بنابراین کامپوننت و سرویس را جدا می سنجیم. همچنین، ماک (Mock) یعنی نسخه جعلیِ وابستگی ها برای تست امن.

مبانی تست

برای پایداری، انیمیشن ها را خاموش کن. سپس تست ها را کوچک و قطعی نگه دار. همچنین، TestBed سبک اجزا را می سازد. در نهایت، HTTP و روتر را ماک کن.

import { provideNoopAnimations } from '@angular/platform-browser/animations';
import { bootstrapApplication } from '@angular/platform-browser';

bootstrapApplication(App, {
  providers: [provideNoopAnimations()]
});

مشاهده در ادیتور

اسموک تست کامپوننت

اسموک تست یعنی یک چک خیلی ساده. بنابراین فقط رندر و خروجی اولیه را می بینیم. منطق را در توابع خالص نگه دار تا تست ساده شود.

import { Component } from '@angular/core';

@Component({
  standalone: true,
  template: `<p>{{ add(2,3) }}</p>`
})
class App {
  add(a: number, b: number) {
    return a + b;
  }
}

مشاهده در ادیتور

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

function add(a: number, b: number) {
  return a + b;
}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Testing Smoke</h3>
    <p>2 + 3 = {{ add(2,3) }} (expect 5)</p>
  `
})
class App {
  add = add;
}

bootstrapApplication(App);

نکات این مثال

• اینترپولیشن {{ expression }} مقدار را در DOM نشان می دهد.
• عبارت «expect 5» فقط متن راهنماست.
• در یونیت تست، از expect(actual).toBe(expected) استفاده کن.

نکته: برای زمان بندی پایدار، provideNoopAnimations() را در تست فعال کن.

تست های همگام و ناهمگام

برای کار ناهمگام از fakeAsync و tick کمک بگیر. سپس ساعت مجازی را جلو ببر و نتیجه را بررسی کن.

import { fakeAsync } from '@angular/core/testing';
import { tick } from '@angular/core/testing';

it('waits for async work', fakeAsync(() => {
  let done = false;
  setTimeout(() => {
    done = true;
  }, 10);
  tick(10);
  expect(done).toBeTrue();
}));

مشاهده در ادیتور

ماک کردن HTTP

برای HTTP، بک اند را ماک کن. بنابراین هیچ درخواست واقعی ارسال نشود. با HttpClientTestingModule و HttpTestingController درخواست ها را کنترل کن.

import { TestBed } from '@angular/core/testing';
import { HttpClient } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { HttpTestingController } from '@angular/common/http/testing';

TestBed.configureTestingModule({
  imports: [HttpClientTestingModule]
});
const http = TestBed.inject(HttpClient);
const httpMock = TestBed.inject(HttpTestingController);

http.get('/api/todos/1').subscribe((data) => {
  expect(data).toBeTruthy();
});
httpMock.expectOne('/api/todos/1').flush({ id: 1, title: 'Test' });
httpMock.verify();

مشاهده در ادیتور

گام های عملی

1. انیمیشن ها را در تست خاموش کن.
2. تابع های خالص را جدا تست کن.
3. برای HTTP از ماژول تست و کنترلر استفاده کن.

جمع بندی سریع

• تست ها کوچک و قطعی باشند.
• DOM را با وضعیت هدایت کن.
• fakeAsync و tick زمان را مدیریت می کنند.
• HTTP را کامل ماک و در پایان verify کن.