Wróć do strony głównej
Angular

Spectator – kiedy testowanie staje się przyjemnością

Angular to przyjemny framework, czyż nie? 😉 Ale tak jak każde narzędzie, ma niestety też i słabsze strony. Zdecydowanym mankamentem jest chociażby pisanie testów integracyjnych templatki i klasy komponentu. Udostępniony moduł do testowania TestBed jest po prostu nieprzyjemny.  Czy możemy stwierdzić śmiało, że tak podstawowe czynności jak chociażby:

  • mokowanie zależności komponentu
  • dostęp do bogatego zbioru asercji (tylko podstawowe z Jasmine)
  • łapanie elementów (fixture.debugElement, brrr!!)
  • proste przypadki testowe, np. czy „is button disabled”

Są proste i czytelne? Wg mnie… zdecydowanie nie! I w tym momencie wchodzi cały na biało:

Spectator!

 

Spectator to całkiem przemyślana abstrakcja na wbudowany angularowy moduł do testowania. Głównym autorem jest Netanel Basal, który również prowadzi angularowego bloga – https://netbasal.comgorąco polecam! Biblioteka znacząco ułatwia pisanie testów, ich czytelność i utrzymanie.

Główne zalety biblioteki:

  • wsparcie dla testowania pipes, komponentów, dyrektyw, serwisów HTTP oraz routingu
  • uproszczone łapanie elementów drzewa DOM (tak jak w jQuery ?)
  • bogatsze API do uruchamiania eventów (Mouse helpers i Keyboard helpers)
  • wygodne testowanie z użyciem HostComponent
  • wsparcie dla testowania ng-content
  • większa liczba matchers, takich jak chociażby .toBeDisabled() czy .toBeFocused()
  • wsparcie dla entry components i component providers
  • automokowanie serwisów, wow!
  • wsparcie dla JEST
  • global queries:

Let’s check it!

Porównajmy, jak mogą wyglądać elementy testów w Spectatorze w porównaniu z TestBed Module, na prostych przykładach.

  1. Stan disabled przycisku:

    2. Czy *ngFor wyświetla 2 komponenty w liście:

    3. Zamokowanie serwisu jako zależności komponentu:

    4. Wywołanie „enter’ na inpucie:

    5. Czy element zawiera text:

    Nie da się zaprzeczyć, że w Spectatorze wygląda to znacznie prościej i czytelniej! Dziesiątki przykładów znajdziesz w dokumentacji:
    https://github.com/ngneat/spectator

Instalacja

Jeśli przekonałem Cię do Spectatora, to nie pozostaje nic innego, jak dodanie go do projektu wraz z ng-mocks poprzez npm:

Schematics

Warto też dodać, że Spectator posiada własne Schematics. Na przykład w celu wygenerowania pliku z testem dla komponentu, możemy posłużyć się poleceniem:

Bonus!

A ja jeśli kodujesz z użyciem Visual Studio Code, to koniecznie dodaj wtyczkę do snippetów:

oraz poćwicz z playground od autorów:
PLAYGROUND

Miłego testowania! 😉

O autorze

Tomasz Nastały

JavaScript Developer, entuzjasta frameworka Angular oraz TypeScripta. Na co dzień lubię dzielić się wiedzą poprzez prowadzenie zajęć w jednym z trójmiejskich bootcampów i nagrywaniem kursów z Angulara.

Zapisz się do naszego newslettera. Bądź na bieżąco z najnowszymi trendami, poradami, meetupami i stań się częścią społeczności Angulara w Polsce. Rynek pracy docenia członków społeczności.

2 komentarzy

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *