Angular testlash

Sinov componentlar va xizmatlarni yengil sozlamalar bilan tekshiradi.

Testlash asoslari

• componentlar va xizmatlar: DOM uslubidagi tekshiruvlar va yengil sozlamalar bilan sinovdan o‘ting (NgModules kerak emas).
• TestBed (lite): Komponentlarni provayderlari bilan samarali yarating.
• Sof mantiq: oson sinov uchun mantiqni sof funksiyalarda saqlang.
• Mock’lar: kerak bo‘lganda HTTP va router’ni mock qiling (soxtalashtiring).

// Disable animations in tests for stability
import { provideNoopAnimations } from '@angular/platform-browser/animations';

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

Komponentning tutun sinovi

@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);

<app-root></app-root>

Misol tushuntirildi

• Interpolatsiya {{ ifoda }}: angular ifodani komponentga nisbatan baholaydi va natijani DOMga matn sifatida kiritadi.
• "5 kuting": Shablondagi ibora o‘quvchi uchun tushuntirish matnidir, sinov tasdiqi emas.
• Haqiqiy tasdiqlar: Birlik testlarida natijalarni tekshirish uchun expect(actual).toBe(expected) (yoki toEqual(expected)) dan foydalaning.

Test strategiyalari

• Tez qayta aloqa qilish uchun birlik sof sinov tizimini to‘g‘ridan-to‘g‘ri o‘tkazish.
• Shablon harakati uchun sayoz component testlaridan foydalaning.
• Xulq-atvor komponentlarni qamrab oladigan integratsiya testlarini qo‘shing.

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

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

Misol tushuntirildi

• expect(actual): Tekshirilayotgan haqiqiy qiymat bilan tasdiqni yaratadi. Qattiq tenglik (===) uchun toBe(expected), chuqur strukturaviy tenglik uchun toEqual(expected) va mantiqiy tekshiruvlar uchun toBeTrue() / toBeFalse() dan foydalaning.
• fakeAsync(testFn): testFn-ni soxta asinxron zonada ishga tushiradi, shuning uchun vaqtni deterministik ravishda oshirish mumkin.
• tick(ms): kutilayotgan taymerlar va mikrovazifalarni o‘chirish uchun virtual soatni milodiy millisekundlarga kengaytiradi.
• Alternativlar: waitForAsync(testFn) kutilayotgan asinxron ishdan keyin testni yakunlaydi; whenStable() hech qanday vazifa qolmaganda hal qiladi.

// HTTP testing (conceptual)
import { TestBed } from '@angular/core/testing';
import { HttpClient } from '@angular/common/http';
import { HttpClientTestingModule, 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();

Misol tushuntirildi

• HttpClientTestingModule: HttpClient uchun soxta backend taqdim etadi, shuning uchun hech qanday haqiqiy tarmoq so‘rovlari yuborilmaydi.
• HttpTestingController: HttpClient tomonidan qilingan HTTP so‘rovlarini tekshirish, moslashtirish va ularga javob berish imkonini beradi.
• expectOne(match): Aynan bitta kutilayotgan so‘rovga mos keladigan moslik mavjudligini tasdiqlaydi (URL string, RegExp yoki predikat) va TestRequestni qaytaradi.
• flush(tana, variantlar?): Berilgan tana va ixtiyoriy variantlar (masalan, status , statusText , headers ) bilan mos keladigan so‘rov uchun soxta javob yuboradi.
• verify(): Agar oxirida mos kelmaydigan yoki bajarilmagan so‘rovlar bo‘lsa, sinovdan o‘tmaydi.