Unit Test

A unit tesztelés célja annak biztosítása, hogy az alkalmazás egyes részei, mint például a komponensek, szolgáltatások és más osztályok, megfelelően működnek az elvárt specifikációk szerint.

A unit tesztelés alapvetően kis, önálló kód részek (egységek) tesztelését jelenti, annak érdekében, hogy megbizonyosodjunk arról, hogy azok megfelelően működnek-e.

Angular-ban a unit teszteket általában a Jasmine teszt keretrendszerrel írják, és a Karma teszt futtatóval futtatják. Az Angular CLI alapértelmezésben tartalmazza ezeket az eszközöket, így egyszerűen létrehozhat és futtathat teszteket.

Néhány alapelv és lépés az Angular unit teszteléshez:

1. Tesztelési környezet előkészítése: Ha egy új Angular projektet hoz létre az Angular CLI-val (ng new my-app), a Jasmine és a Karma automatikusan be lesz állítva.
2. Spec fájlok: A teszteseteket .spec.ts kiterjesztésű fájlokban tárolják. Például, ha egy my.component.ts nevű komponens van, a hozzá tartozó teszteseteket a my.component.spec.ts fájlban találhatjuk.
3. Teszt leírása: A Jasmine használatával describe és it blokkokat használunk a tesztek leírásához.

   describe('MyComponent', () => {
     it('should do something', () => {
       // A teszt logikája itt jön
     });
   });

4. Teszt futtatása: A teszteket a ng test parancs kiadásával futtathatja a Karma segítségével.
5. Tesztelési eszközök: Az Angular tesztkönyvtárat (@angular/core/testing) használhatjuk az Angular specifikus funkciók teszteléséhez, mint például a komponensek vagy a szolgáltatások. Ezek közé tartozik az async, TestBed és más mockolási és utility eszközök.
6. Elvárások (assertions): A Jasmine expect funkcióját használjuk az elvárások meghatározásához, melyekkel ellenőrizzük, hogy a kód megfelelően működik-e. Például: expect(something).toBe(true).

Összefoglalva, az Angular unit tesztelés lehetővé teszi az alkalmazás különböző részeinek önálló tesztelését, hogy biztosítsuk azok helyes működését. Az Angular CLI, a Jasmine és a Karma kombinációja egy erőteljes eszköztárat biztosít az Angular alkalmazások teszteléséhez.

Példa

Vegyük alapul az alábbi egyszerű Angular komponenst:

hello.component.ts:

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

@Component({
  selector: 'app-hello',
  template: `<h1>Hello {{name}}!</h1>`
})
export class HelloComponent {
  name = 'World';
}

Most írjunk egy unit tesztet, amely ellenőrzi, hogy a komponens helyesen inicializálódik-e és megfelelő üzenetet jelenít-e meg.

hello.component.spec.ts:

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { HelloComponent } from './hello.component';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [HelloComponent]
    });

    fixture = TestBed.createComponent(HelloComponent);
    component = fixture.componentInstance;
  });

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

  it('should display "Hello World!"', () => {
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Hello World!');
  });

  it('should update the name property', () => {
    component.name = 'Angular';
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Hello Angular!');
  });
});

Nézzük át, mit csinál a fenti tesztkód:

1. Setup: A beforeEach blokkban konfiguráljuk a TestBed-et a HelloComponent komponenssel, majd létrehozunk egy példányt a komponensből.
2. Első teszt: Ellenőrzi, hogy a komponens példányosításra került-e.
3. Második teszt: Azt ellenőrzi, hogy az elvárt üzenet (“Hello World!”) megjelenik-e a komponensben.
4. Harmadik teszt: Azt ellenőrzi, hogy ha megváltoztatjuk a komponens name tulajdonságát, akkor a megjelenített üzenet is megváltozik-e.

Ezek az alapvető lépések és logika, amelyeket egy egyszerű Angular komponens unit teszteléséhez alkalmazhatunk.