Angular: Jasmine i asercje testowe

Angular 6, 7, 8+

0:00Jak w poprzednich lekcjach zajmowaliśmy się konfiguracją uruchomieniem

0:04testów i wygenerowaniem raportów z istniejących już testów tak

0:09tej lekcji zajmiemy się uruchomieniem stworzeniem struktury testów

0:13tworzenie pierwszego testu i uruchomiłem pierwszego naszego testu na

0:17razie będzie to test które będzie testował javascriptu

0:22bez angulara chciałbym po prostu pokazać tobie jak wygląda struktura

0:26testów jasmine jeśli takich testów jeszcze nie widziałeś i w kolejnych

0:30lekcjach przejdziemy już do testowania poszczególnych elementów już z uwzględnieniem

0:34angulara czyli teraz mam uruchomiony ng test mam te nasze

0:38trzy wygenerowane przez angulara testy i nim przejdziemy do testu chciałbym pokazać jeden

0:42bardzo ważny plik tutaj w karma conf jest

0:47tu skonfigurowany ja nie widzę tego pliku ale nasze testy

0:52tak naprawdę uruchamiają plik test kropka ts

0:56ja tutaj na chwilkę zamknę tą konsolę i co się w takim pliku znajduje

1:00tu są zaimportowane wszystkie narzędzia w których będziemy

1:05z którym korzystać już w angularze czyli mamy zone testing jest to mechanizm

1:09wykrywania zmian w angularze i tutaj mamy narzędzia właśnie do wykorzystywania

1:13tego wykrywania zmian w naszych testach mamy tak zwaną uprząż testową

1:17czyli obiekt który jakby symuluje środowisko obsługuje

1:22system w którym będziemy to uruchamiać no i jak wiesz angular jest

1:26z frankiem uniwersalny mówiłaś na przeglądarce na serwerze na urządzeniach mobilnych i

1:30tak dalej i tak dalej tak więc mamy tutaj także import z class

1:36modułów dla środowiska na którym będziemy testować czyli jak widzisz

1:40browser dynamic testing module bo będziemy testować aplikację przeglądarkową

1:45czyli potrzebujemy także zaimportować wszystkie narzędzia do testowania przeglądarek i

1:49tam się znajdują między innymi takie informacje jak obsługa zdarzeń przeglądarki obsługa dom

1:53czy dokument object module co potrzebujemy do testowania w przeglądarce

1:57tutaj zmienna require pochodzi z webpack'a webpack

2:02zajmuje się właśnie zbieraniem wszystkich plików stąd kompilowanie

2:06ich poprzez type script czy babel także inne wtyczki pluginy

2:10pozwalające nam te setki plików które się znajdują jak widziałeś mamy właśnie

2:14building modules on to wszystko ładnie buduje w jedną paczkę więc

2:18require tutaj zadeklarowany tutaj w skrypcie żeby nie był to błąd i webpack

2:23pozwala na bardzo fajną rzecz możemy pliki załączyć pojedynczo tak jak tutaj import

2:27eksport import poszczególne jednak jak tutaj będziemy dodawać testy będziemy

2:31ich bardzo dużo i pamiętanie o tym żeby każdy taki plik dołączyć dopisywać

2:35do listy było bardzo męczące dlatego tutaj widzisz mam opcję znajdź

2:40wszystkie testy i require context taka funkcja gdzie podaję jej

2:44katalog mówię że ma rekurencyjnie wchodzić w głąb w podkatalogi

2:49podkatalogi i wszystkie pliki które kończą się na spec kropka ts

2:53tak jest przyjęta definicja że to jest nazwa modułu kropka spec

2:57czyli specyfikacja opis co robi ten

3:01moduł czyli testy jego jak widzisz to app nazywa się tutaj

3:06zobaczmy appcomponent i ma swój plik spec

3:10czyli komponent i spec czyli plik który opisuje go i

3:14udowadnia testami że opis jest prawdziwy czyli że

3:18wszystkie wyspecyfikowane funkcjonalności faktycznie działają poprawnie no i ten kontekst

3:22pozwala załadować definicję do tych plików do po prostu obiektu kontekst i

3:26tutaj zobacz pobieramy z tego kontekstu listę kluczy

3:31które będą praktycznie ścieżkami do plików i

3:35ta funkcja map wykonuje funkcje

3:39zawartą w każdym jakby funkcję ładującą każdy plik czyli

3:43kontekst zawiera nazwę pliku i funkcję ładującą i

3:47to polecenie po prostu ładuje wszystkie znalezione pliki jest to bardzo wygodny

3:51mechanizm bo jeśli utworzę jakikolwiek plik z końcówką conspect ts angular

3:56natychmiastowo wykryje właściwie sobie karma i webpack natomiast wykryją

4:00taki plik i jeszcze raz uruchamiam testy ale tym razem już kompilując się razem

4:05z tym plikiem uwzględniając każde testy jest to bardzo wygodne bo możesz prostu dopisywać pisać

4:09testy i nie musisz się zastanawiać się żeby dopisać dodać uruchomić ponownie po

4:13prostu jeśli pojawi się taki plik będzie uwzględniony w testach i jeszcze

4:17jedna rzecz tutaj to łoże testowe ta uprząż testowa w

4:21której będziemy testować komponenty myśl o tym jak takie właśnie szkiełko

4:25laboratoryjne gdzie ja mogę przyczepić zamontować przywiązać coś

4:30co na czym będę eksperymentował i pozwala mi to bardzo precyzyjnie używać

4:34różnych wygodnych pozwala symulować środowisko tak żeby te testy były

4:38jak najbardziej dokładne i tu właśnie to robię zobacz uruchamiam tą uprząż testową

4:42tak zwaną inicjalizuje testowe środowisko mówię

4:46jaki to jest rodzaj środowiska czy to jest przeglądarka czy nie no i uruchamiam

4:50tutaj platformę o właśnie środowiska jeśli to było przed platformą browser

4:55platformą server platform native typu na przykład ios czy android

5:00to właśnie tutaj konfiguruje środowisko symulowane i

5:03tutaj po kolei ładuje testy czyli mamy tutaj plik appcomponent spec

5:08tu jest troszkę rozbudowany o tym sobie powiemy za chwilę my zaczniemy

5:13prościej i stworzymy własny test który powinien być załadowany

5:17przez ten skrypt webpacka czyli tak otworzę sobie nową kartę i

5:23wygenerujemy ng generate najprostrzą możliwą rzecz czyli klasę

5:27po prostu klasę która będzie zwykłą klasą ecma script 6 nie będzie

5:32miała żadnych funkcji ale do tej klasy chciałbym testy czyli zobaczymy testing

5:37powiedzmy class tak sobie nazwę tą klasę i dopiszę spec true

5:41żeby nam angular wygenerował po prostu pustą klasę z jednym

5:46przykładowym pustym testem czyli tak aby w appie powstał nam plik testing

5:50class tak jak obiecałam jest to pusta klasa która nic nie robi nie ma żadnych danych ale

5:55spójrzmy na specyfikację na testy i teraz testy

5:59składają się przynajmniej z describe id

6:03i expect i teraz te funkcje describe id i

6:07expect jak widzisz one nie są importowane one są wstrzykiwane po prostu przez jasmine

6:11do środowiska i te testy właśnie tworzą specyfikację

6:16tworzą asercje testowe czyli działa to

6:20w ten sposób describe tutaj opisuje co będziemy

6:24testować czyli opisuje w tej specyfikacji element

6:28systemu który nazywa się testing class i w ramach tej

6:32specyfikacji mam ileś różnych twierdzeń czyli twierdzę że testing

6:37class tu jest jako id czyli to co testujemy testing

6:41class powinien utworzyć instancję czyli powinna być możliwość

6:45stworzenia takiego testing class próba utworzonia tutaj testing class nie powinna

6:49skończyć się błędem i wewnątrz tego

6:53twierdzenia mówię że coś powinno się stać i w środku muszę

6:57to udowodnić czyli oczekuję że jeśli stworzę new

7:01testing class to właśnie co i tutaj mamy funkcję

7:06expekt pozwala nam na asercje czyli jak widzisz już tu postawię kropkę możemy

7:11sprawdzić czy na przykład to equal czy równa się to

7:15be czyli jest dokładnie tą wartością jest podobna

7:20jest bliska tej wartości tu możemy zakres błędu ustawić sprawdzić czy zdefiniowana

7:24czy może z wartością fałszywą lub rzutowalną

7:29do fałszywej możemy napisać czy jest większy mniejszy czy jest liczbą

7:33czy nie jest liczbą jak widzisz mamy tutaj bardzo dużo różnych opcji porównywania

7:38oczywiście jasmine jest bardzo prostą biblioteką jeśli te funkcje okażą się do ciebie za mało

7:42możemy stworzyć własne takie tutaj asercje

7:46a także możesz pobrać bibliotekę typu na przykład mocha chai sinon

7:51i tak dalej czyli możesz pobrać jeszcze dodatkowe inne biblioteki

7:56które definiują zupełnie tutaj inny rodzaj czy więcej po prostu dostępnych porównań

8:01asercji i specyfikacji tak jasmine jest bardzo popularny i jasmine tak się akurat składa

8:05że jest jakby domyślną jasmine czyli describe testing class

8:09testing class powinien to i w funkcji musimy udowodnić że

8:14to jest czyli jeśli zrobimy to be truthy

8:19czyli było prawdziwe no to oczywiście klasa przyrównana do wartości

8:23true i false stworzony obiekt będzie w javascripcie prawdą i teraz

8:27zobaczcie zapisuję plik wrócę do naszych testów i nie mamy już

8:313 of 3 tylko mamy 4 of 4 czyli automatycznie

8:35wykrył nasz plik dołączył to do testów i jak widzisz

8:40mamy teraz 4 testy jeśli otworzę sobie tutaj ten raport nasz w htmlu to

8:44zobacz co się dzieje z tym raportem każda metoda

8:48describe deklaruje jak widzisz nową sekcję w testach

8:52czyli mamy testing class i każda sekcja id deklaruje

8:57kolejny test czyli jeśli dopiszę tutaj powiedzmy id should

9:01test

9:05that true is truthy

9:13czyli test jest totalnie bzdurny bo sprawdzimy czy true jest true

9:17czyli expect true to be

9:22truthy czy prawdę jest prawdą zapiszę

9:26i tutaj powinno być 5 testów i nasz kolejny test dodał się tutaj

9:30zwróć uwagę że taki zapis tworzy nam faktycznie specyfikację

9:35jeśli dobrze nazwiesz te testy to można wydruk

9:39po prostu z takiej specyfikacji pokazać komuś z biznesu

9:43klientowi i zapytać czy to są funkcje których oczekiwałeś czy czegoś

9:47tu brakuje czy aplikacja zachowuje się w poprawny sposób jest to format o którym

9:51można na przykład rozmawiać na spotkaniu nie trzeba wchodzić w kod nie trzeba wchodzić w szczegóły tylko

9:56mamy listę co zostało dodane do aplikacji co doszło co działa a na

10:00przykład gdy coś się popsuje powiedzmy zrobię sprawdzę że false nie jest prawdziwe

10:05tu mamy błąd i w naszej specyfikacji jak zobaczę spec list

10:09to mogę zobaczyć też co się udało co się nie udało wiem że testing class

10:13should test i to jest ostatnie nieprawdziwe

10:17są też różne inne raporty i muszę to dużo lepszy ładniejszy sposób zaprezentować

10:21tutaj na przykład na czerwono na zielono generalnie jeśli

10:25rozumiesz o co mi chodzi chodzi o to żeby specyfikacja była faktycznie listą

10:29twierdzeń o naszej aplikacji żeby ona potrafi zrobić to to to i tamto natomiast

10:34ta specyfikacja nie jest tak na papierze dokumentem który może mówić

10:38sobie wszystko ta specyfikacja faktycznie zawiera tutaj dowody czyli

10:42testy kod który udowadnia że to co jest podane u góry jest prawdą

10:47okej to jakby podstawa testów

10:51w jasmine jeśli pisałeś już testy w jakimś innym tak pewnie widzisz podobieństwo że

10:56mamy tą deklaracje jakiegoś modułu i piszemy asercje czyli piszemy o

11:00to co nasza funkcja co nasz moduł potrafi i w każdej z tych asercji

11:04udowadniamy że to jest prawda czyli podstawiamy jakąś wartość

11:08na przykład wynik działania aplikacji i sprawdzamy

11:12czy wartość którą zwróci aplikacja jest taka jak oczekiwana i w ten

11:17sposób będziemy pisać testy ale będziemy je uwzględniać w tych testach poszczególne

11:22metody poszczególne elementy funkcje angulara tak jak komponenty klasy

11:26dyrektywy abyśmy mogli pracować w formacie tdd

11:30test driven development ale o tym wszystkim już w kolejnych lekcjach tak więc do zobaczenia