W dzisiejszym wpisie chciałbym poruszyć dość ważne zagadnienie – pisanie testów na frontendzie. Tematem zajmę się od podszewki więć jeśli masz już pewne doświadcznie w testowaniu, ten wpis najprawdopodobniej nie jest dla Ciebie. Jeśli jednak dopiero zaczynasz testować swoje aplikacje, to trafiłeś perfekcyjnie!
Po co tak właściwie nam te testy?
„Kontrola najwyższą formą zaufania” – testy służą nam do sprawdzania czy np. dana funkcjonalność (testy jednostkowe) działa tak jakbyśmy tego oczekiwali. Dzięki temu założeniu możemy przetestować dowolną małą część naszego kodu (np. funkcję) czy zwraca taki wynik lub wykonuję taką pracę jaką założyliśmy, że powinna. Dzięki temu przy rozwoju kodu możemy mieć ciągłą kontrolę czy dane funkcjonalności działają zgodnie z założeniami. Testy (zależnie od konfiguracji środowiska) mogą być uruchamiane przed każdym commitem i/lub mergem kodu.
Jak sprawę ułatwia nam Angular?
Projekt stworzony za pomocą Angular CLI ma już w sobie zawarty framework testowy Jasmine. Dzięki temu zaraz po instalacji możemy przeprowadzić testy wpisując w konsolę ng test.
Pliki testowe tworzone są z rozszerzeniem .spec.ts. Przy tworzeniu nowych kompomentów i serwisów z wykorzystaniem Angular CLI, pliki testowe generowane są automatycznie.
Jak testować?
Zacznijmy od najprostszego przykładu:
describe(`AppComponent`, () => {
it('1 + 1 powinno równać się 2', () => {
expect(1 + 1).toEqual(2);
});
}); W tym teście sprawdzamy czy równanie 1 + 1 = 2 jest prawdzie. Funkcja describe służy nam do opisania naszego testu. Jest to pewnego rodzaju pojemnik na nasze testy. Zazwyczaj jako pierwszy parametr funkcji describe wpisujemy nazwę komponentu, który testujemy. W moim wypadku był to „AppComonent”. Testy wpisujemy jako drugi parametr w funkcji strzałkowej.
W funkcję it() wpisujemy opis naszego testu (1 + 1 powinno równać się dwa) jako pierwszy parametr, oraz kod z testem w funkcji strzałkowej jako drugi parametr.
W funckję expect() wpisujemy nasze wyrażenie, może być w formie dodawania dwóch liczb lub zmiennej. Następnie używamy funckji toEqual() aby określić jaka jest oczekiwana wartość zmiennej w funkcji expect().
Lista wszystkich funkcji i możliwości jakie dają nam podczas testów dostępna jest w oficjalnej dokumentacji Jasmine.
Jak rozpocząć testowanie?
Mamy 3 możliwości:
- Jeśli chcemy aktywować tylko jeden test (przydatne w przypadku kiedy mamy sporo testów i nie chce nam się czekać aż wszystkie się wykonają) i używamy IDE od JetBrains (jak np. Webstorm) możemy skorzystać z zielonej strzałki przy funkcji describe(). Dzieki temu wykonamy testy zawartle tylko w tym „pojemniku”.
2. Za pomocą terminala i komendy ng test. W tym wypadku rozpoczniemy testowanie wszystkich plików testowych (oprócz dezaktywowanych).
3. Możemy kliknąć również prawym przyciskiem myszy na plik karma.conf.js i wybrać „Run Tests”.
Jak dezaktywować test?
Jak wspomniałem wyżej, testy da się również dezaktywować. Wystarczy dodać literę „x” przed test, który chcemy pominąć np:
xdescribe('AppComponent', () => {});Najtrudniejszy pierwszy krok, jak to śpiewała Anna Jantar. Mam nadzieję, że z tym artykułem wejście w świat testowania na fron-endzie będzie łatwiejsze i przyjemniejsze. W nastęnym wpisię poruszę temat testowania komponentów angularowych bardziej szczegółowo z praktycznymi przykładami, stay tuned!