Angular: TestBed - uprząż testowa

Angular 6, 7, 8+

0:00W poprzednich lekcjach umówiliśmy konfigurację testów oraz pokazałem

0:04ci jak zbudować prostą tutaj strukturę testów korzystając z

0:08frameworka tutaj jasmine i z asercji także które oferuje

0:12nam jasmine nie mniej tego typu testy nadają się

0:17tylko do testowania kodu javascript'owego kodu javascript'owego

0:21bez angulara możesz tutaj klasy funkcje możesz te funkcje

0:26zaimportować i możesz tutaj jak widzieliśmy wcześniej sprawdzić

0:30wiele różnych asercji tak czyli czy nasza wartość oczekiwana

0:34jest równa czy jest większa mniejsza i tak dalej możemy

0:38sobie udowodnić że nasze testy działają jednak do pracy z angularem to

0:43jest troszeczkę za mało mianowicie ja mogę utworzyć po prostu klasę

0:47javascript'ową w ten sposób ale tutaj jak widzisz to

0:51jest to po prostu zwykła klasa jeśli będziemy testować elementy angulara

0:55więc będziemy mieli komponenty no to potrzeba nam będzie czegoś

0:59więcej przejdę więc tutaj do konsoli i przy użyciu narzędzia tutaj

1:03angular cli ng generate component wygeneruje

1:07nowy komponent i tutaj generalnie jeśli masz domyślne ustawienia

1:11to angular powinien nam automatycznie wygenerować testy

1:16do tego i jeśli tu na przykład jest spec false

1:21to oznacza że testy nie mają być generowane jeśli domyślnie

1:25masz ustawione tutaj w konfiguracji angular json że nie

1:29chcemy testów no to tutaj można też ustawić na true czyli

1:33powiedzieć wyjątkowo dla tego elementu chcemy ja wyjątek zacznę właśnie bez

1:37testów po to żeby ten test skonfigurować zupełnie

1:41ręcznie od początku żeby móc ci wytłumaczyć po kolei które elementy co robią w

1:46następnych lekcjach i także tobie w projekcie polecam po prostu już generować

1:50komponenty od razu z taką domyślną podstawową

1:54strukturą testu ja ten pierwszy komponent zrobimy taki komponent powiedzmy

1:59zadania na liście czyli task list

2:03item mogę w ten sposób zapisać mogę zrobić to task list

2:07item w ten sposób okej

2:11zobaczmy i wygenerował się tutaj raz dwa trzy

2:15pliki html type script i scss i

2:19oczywiście to zarejestrowało mi się tutaj w module czyli w apple module test

2:23pojawił się nasz task list component jest on zadeklarowany tutaj w deklaracjach

2:28komponentów komponent tutaj jest bardzo prosty nie ma żadnej logiki ma tylko

2:32html i css

2:35ja teraz dla tego komponentu naszego utworzę plik testów

2:39utowrzę sobie nowy plik

2:41spróbujemy go zapisać w tym katalogu task list item

2:45pod nazwą task list item component

2:49spec ts czyli tak jak mamy tutaj nasz wzorzec wyszukujący testy

2:54i podobnie jak w przypadku naszej klasy opiszemy tutaj przy użyciu jasmine

2:58co to jest za test czyli to jest describe

3:01i opisujemy nasz task list component

3:06tutaj powiedzmy zrobimy sobie pierwszy test it should create

3:11czyli powinniśmy móc stworzyć taki komponent powiedzmy

3:15sobie new component przypisze do zmiennej

3:19może w ten sposób to

3:25trzeba oczywiście zaimportować zaimportujemy sobie może

3:32w ten sposób relatywnie względna ścieżka że w tym katalogu po

3:36prostu znajdź ten nasz komponent i sprawdzimy component

3:41to be i zrobimy może fossil falsy zobaczmy

3:46czy ten test w ogóle będzie działał teraz uruchommy sobie na sucho ng test zobaczymy czy nasz

3:50test będzie tutaj uwzględniony aplikacja

3:58się buduje tu nam się uruchomiło okno przeglądarki i

4:04mamy jeden błąd tak jak błąd że nasz

4:08komponent jest nieprawdziwy czyli nasz jest tutaj działa zróbmy na prawdziwy

4:17i zielono tutaj wszystkie testy jak widzisz poprzednie

4:21testy które tu były wygenerowane automatycznie się uruchamiają testy naszej klasy pustej

4:25też tou się uruchamiają no i tutaj nasz nowy test komponentów także się uruchomił

4:30mamy 6 na 6 sukces okej czyli jak widzisz w ten

4:34sposób mogę utworzyć instancje komponentu niemniej tworzę tylko i wyłącznie

4:38instancji klasy więc ten test zupełnie się nie różni od tego testu który

4:42mieliśmy zbudowanego wcześniej tutaj możemy wytestować zwykłe funkcje klasy

4:46obiekty javascript'owe niemniej pojawia się pewien problem bo

4:50gdybym chciał na przykład zobaczyć czy nasz task

4:54list item komponent powiedzmy czy on prawidłowo

4:59wyświetla powiedzmy ten html tutaj no to jest problem bo ten

5:03html jak widzisz nie istnieje w klasie on jest generowany osobno

5:07przez angulara pytanie więc brzmi jak

5:11uruchomić ten komponent właśnie w kontekście angulara tak żeby został

5:15html wyrenderowany zostało wykrywanie zmian dependency

5:19injection cały mechanizm angulara a nie tylko utworzona sama klasa

5:24i spójrzmy na plik main tutaj test w którym startuje i uruchamia się

5:28cały angular to jak widzisz uruchamiamy tej platform browser i uruchamiamy

5:32moduł app module i tutaj startuje angular to się uruchamia cała

5:36aplikacja angulara uruchamiamy app module i w app module jak widzisz mamy zdefiniowany

5:40główny komponent komponent który chcemy uruchomić który chcemy na

5:44stronie wyrenderować razem z html'em i ten w tym komponencie możemy użyć

5:48na przykład tego komponentu i angular odpowiednio wszystkie te komponenty nam wyrenderuje

5:53wyświetli na ekranie teraz mógłbym to samo w testach zrobić

5:57tylko był mały problem nie mogę samego komponentu uruchomić musimy go razem

6:01z modułem uruchomić jeśli zaimportuje cały nasz app module no to musiał

6:05przy okazji w testach uruchomić także routing module browsing module i wszystkie

6:10inne moduły plugin wtyczki klasy usługi wszystko to co

6:14mam tutaj w app module to wszystko musiałbym uruchomić także w testach jak

6:19pamiętasz mamy testy jednostkowe i testy jednostkowe polegają na tym aby

6:23skupić się na wycięciu jednej jednostki logicznej

6:27z aplikacji i testowaniu tej jednostki jakby w oderwaniu

6:32od reszty aplikacji czyli w taki sposób żeby przetestować sam element bez

6:36wpływu na niego innych elementów czyli musi być musielibyśmy właśnie stworzyć

6:41no właśnie sam komponent nie możemy tworzyć samego komponentu ale

6:45moglibyśmy stworzyć osobny moduł tylko na

6:50potrzeby testowania tego komponentu i teraz angular dysponuje bardzo fajnym mechanizmem

6:54mianowicie w naszych testach możemy użyć czegoś takiego jak test

6:58bed tak zwane łoże albo uprząż testowa jest

7:03to takie środowisko testowe które pozwala nam jakby w oderwaniu

7:07od całej aplikacji utworzyć jakieś elementy angulara

7:11i uruchomić je zobaczyć jak one się zachowują właśnie po to

7:15żeby móc w testach je zbadać z każdej strony zobaczyć

7:19i jak się zachowują jeśli wykonamy na nich pewne operacje

7:25jest w naszym pierwszym teście użyję tego łoża

7:28testowego test bed i tutaj jak widzisz mamy tutaj kilka takich

7:32przydatnych metod możemy skompilować komponenty skonfigurować

7:38kompilator skonfigurować moduł testowy utworzyć

7:42komponent i pobrać instancje różnych

7:46klas różnych funkcji usług komponentów używając tokenów

7:50dependency injection nas oczywiście interesuje utworzenie modułu testowego

7:54który pozwala utworzyć specjalnie pod testy taki

7:58testowy moduł który symuluje nasz główny moduł aplikacji ale możemy w nim podmienić

8:03wszystkie dyrektywy providery wszystkie elementy które nie potrzebujemy

8:07w teście możemy pasuje pominąć a te które chcemy podmienić możemy łatwo podmienić

8:11tu jak widzisz definicję tego testing module praktycznie nie

8:15odbiega za bardzo od definicji zwykłego modułu mamy tutaj deklaracje

8:20mamy tak samo importy mamę providerów mamy

8:25schemat czyli tak jak widzisz mamy praktycznie te same opcje co w przypadku zwykłego modułu jednak

8:29tu konfigurujemy testowy moduł testowy aby móc naszą tutaj nasz komponent

8:34po prostu w oderwaniu od całego środowiska przetestować zobaczyć jak on sam się zachowuje

8:39bez wpływu innych elementów czyli tak declarations okej

8:44tutaj musimy zadeklarować nasz komponent zauważ że nie ma tu opcji bootstrap

8:48tak bo my nie chcemy żeby to startował nam samo my chcemy w testach dokładnie

8:53znać moment kiedy chcemy uruchomić dany komponent okej

8:57czyli w ten sposób mamy testowy moduł właśnie z naszym komponentem zarejestrowanym

9:02w dekoracjach i tutaj jest jeden mały problem mianowicie

9:07komponent może mieć tutaj jak widzisz html i style

9:11w osobnych plikach i teraz na potrzeby testu te pliki

9:15muszą być załadowane razem z komponentem muszą być skomplikowane

9:19i to wszystko jak rozumiesz muszę załadować pliki z zewnątrz nie

9:23może stać się natychmiast to musi przez chwilę potrwać więc ja będę ten cały mechanizm który

9:27mechanizm jest asynchroniczny mianowicie tutaj jeśli ja zrobię

9:31komponent tutaj mam i chciałbym go uruchomić muszę to już mieć compiled components

9:38tak używając właśnie template url i

9:44tutaj widzisz to jest potrzebne dlatego że ta funkcja jest asynchroniczna

9:48że on musi pobrać tamte nasze url pod którym znajdują się szablony

9:52html i css więc ta funkcja jeszcze przyjrzymy

9:56się ona zwraca nam na końcu promise zwraca

10:01obietnice czyli tutaj muszę zrobić then i dopiero

10:07tutaj dopiero w tym miejscu mógłbym

10:11wykonywać moje testy i oczywiście mogłbym te testy przesunąć do środka i tak

10:15byłoby to bardzo niewygodnie musiałbym w każdym teście tutaj robić ten compiled component then

10:19i tak dalej druga

10:23sprawa jest taka że jeśli będę chciał jeszcze drugi test tutaj dodać to musiałbym

10:28przy drugim także utworzyć jeszcze raz cały ten moduł i jeszcze skompilować

10:32komponenty i jeszcze raz to wszystko uruchomić i teraz pytanie dlaczego dlaczego

10:36nie możemy wykorzystać ponownie tego modułu dlaczego całym

10:41dlaczego chcemy go utworzyć na nowo na czysto w każdym teście dobrą

10:45praktyką jest to aby testy były czyste to znaczy żeby testy

10:49nie zawierały żadnych danych zmiennych komponentów które istniały

10:54w poprzednich testach dlatego że przez przypadek możemy zanieczyścić test

10:58jakimś starym testem na przykład test może powiedzieć że dane

11:02istnieją że komponent ma dane załadowane są a to nie będzie prawda

11:06bo dane po prostu zostaną nam jako artefakt z poprzedniego testu

11:10i nasze kolejne testy mogą wykazywać nieprawdę dlatego jest

11:14bardzo fajna opcja możemy z taką całą konfigurację przenieść do oczywiście bloku

11:19before each i taki blok

11:23before each pozwala mi właśnie tak jak nazwa wskazuje wykonać jakieś

11:27przygotowanie konfigurację czy inicjalizację różnych obiektów zmiennych przed

11:32każdym testem mamy tutaj before all który miałeś przed całą sekcją

11:36before describe natomiast before each uruchamia się przed

11:40automatycznym uruchamia się przed każdym id czyli cokolwiek tu umieszczę będzie jeszcze

11:44raz uruchomione czyli nasz ten cały configure testing module mamy gwarancję

11:48że każdy test będzie zaczynał od świeżego od czystego środowiska

11:52nie będzie tam żadnych pozostałości i teraz taki mały problem

11:56bo musimy tak robić żeby ten test pierwszy poczekał

12:01na zakończenie tej kompilacji komponentów i teraz jasmine ma taką

12:05funkcję możemy tutaj przekazać parametr dom jeśli jasmine

12:09wykryje że tu się znajduje zmienna to zobacz co się stanie w tym momencie

12:13z testami spróbuję uruchomić musimy chwilkę poczekać i tutaj

12:19powinienem dostać błąd zobacz async callback was not invoked within timeout

12:24specified czyli jeśli ja podam tutaj callback to

12:28jasmine nie przejdzie dalej nie wyjdzie poza ten test dopóki

12:32ten callback nie będzie wykonany jeśli w tym teście ja nie wykonam tego callbacka to

12:36znaczy że coś poszło nie tak i on przerwie wykonywanie testów tutaj mam informację że czekał

12:40określoną w konfiguracji długość czasu i ten

12:45test uznał za uszkodzony że on tu nie wywołuje się w określonym

12:49czasie i teraz żeby to zadziałało po prostu done muszę

12:54wykonać w tym miejscu tutaj mam funkcję w których mamy funkcje

12:59mogą też prościej zapisać i po prostu wsadzić done jako callback

13:03bezpośrednio do then zobaczmy

13:07teraz poszło tu idealnie bo

13:12ten pierwszy before each poczekał na zakończenie tego i

13:16dopiero wtedy nam przeszedł do tego drugiego testu czyli jak

13:20widzisz już ten sposób bardzo fajnie bardzo łatwo można testy asynchroniczne wykonać tutaj

13:24dodajemy sobie callback i tu mamy pewność że test zakończył się jakby

13:29asynchronicznie operacje zakończył że możemy iść dalej dopiero wtedy wykonuje ten callback

13:34i ten test wtedy ta sekcja before each wie że cała

13:38konfiguracja została zakończona asynchronicznie i że możesz śmiało przejść do kolejnych testów tak

13:42samo funkcji done możesz użyć w kolejnych testach żeby też opóźnić wykonywanie

13:47kolejnego testu dopóki ten się nie skończy aczkolwiek o tym powiemy sobie później okej

13:52i teraz to wszystko fajnie ale my nadal tworzymy komponent

13:56tutaj własnoręcznie mając ten nasz test bed i mając

14:00ten nasz tutaj skonfigurowany główny moduł testowy mamy skompilowane komponenty

14:04i wtedy w teście ja mogę zrobić tutaj sobie test bed

14:10create component tutaj widzisz muszę przekazać typ komponentu

14:13czyli nasz task list component i to nam zwróci

14:17coś takiego nazywa się w component fixture typu task list item

14:23ja zrobiłem sobie const fixture ok i

14:27w tym fixture między innymi mamy

14:31coś takiego jak component instance

14:36i tutaj znajduje się utworzona utworzony komponent ale już utworzony tutaj

14:41przez angulara nie przez nas jak widzisz nie ma tu słowa new tylko ja deleguje

14:45żeby angular wewnątrz tego modułu wraz z wszystkimi deklaracjami importami

14:49providerami konfiguracją angulara żeby on za mnie uruchamiał komponent i tu

14:54zobaczymy sobie jest komponent ale oprócz tego powiedzmy

14:59napiszę sobie tutaj html native element

15:04inner html i

15:08zobaczymy sobie console log html jak

15:16widzisz tutaj mamy tym razem nie tylko samą instancję klasy komponentu

15:20a mamy całe komponent wyrenderowany wraz z html'em wraz

15:24z odpowiednimi tagami css'owymi w ten sposób jak widzisz mogę

15:28uruchomić angulara ale uruchomić go w taki sposób żeby wyrenderował tylko

15:32i wyłącznie nasz pojedynczy element tutaj jak widzisz przy testach angular po

15:36kolei tutaj pod testami będzie po prostu uruchamiał renderował nasz komponent

15:41w prawdziwej przeglądarce jako prawdziwy html tu nam się pojawił dokładnie

15:45ten sam html tu jeszcze inna ciekawa rzecz ja

15:49mógłbym to wszystko jakby kopiować za każdym razem wklejać za każdym razem gdy

15:53potrzebuję właśnie któryś z tych rzeczy albo możemy utworzyć koleją

15:57sekcje before each before each

16:01i mogę sobie na przykład te dwie rzeczy których ja tu potrzebuję

16:06przyniosę wyżej zmiennych nie zadeklaruję

16:10tutaj tylko zmienną fixture zadeklaruje na samej górze jako let fixture

16:15typu component fixture

16:20i nasz typ komponentu mi podpowiada tutaj prawidłowo

16:24wszystkie opcje parametry i komponent nasz czyli

16:29let component także tutaj nam sobie przypisze do zmiennej to jest

16:33bardzo fajna rzecz bo ja będę miał tworzone te dwie rzeczy before each

16:37czyli przed każdym testem ale nie muszę tworzyć

16:41tu w teście i jak widzisz już przepisuje do zmiennych które

16:45są utworzone tu na samej górze czyli ta zmiana będzie za każdym razem czyszczona ustawiona

16:49na nowo przed każdym testem ale we wszystkich tutaj sekcjach before each id i każdym tutaj

16:54teście ja mam dostęp do tego fixture jak widzisz tutaj fixture tutaj piszemy

16:58prawidłowo wskazuje na ten fixture i przy każdym tekście mamy też gwarancję

17:02że przy każdym teście będzie on niszczony tworzony na nowo będzie za każdym razem miał nowy

17:07świeży komponent świeżą instancje stworzoną ze świeżego

17:11nowego modułu okej tutaj

17:15jest jedna fajna rzecz jeśli mamy tutaj gdzieś w teście promise i

17:20mamy jasmina to ten done to jest jedna opcja to tak wykomentuje na razie

17:25okej że mogę wewnątrz tutaj testu lub

17:29id lub wewnątrz before each jeśli mam promise to znaczy że ja

17:33zwrócę takie nierozwiązany promise i on tak samo jak bym tu dał callback

17:38then i wywołał callback on wtedy zrobi to za mnie czyli jeśli ja tutaj zwrócę

17:42promise to on także sobie

17:46z tym poradzi jest jeszcze jedna fajna opcja zamiast zwracać

17:50promise mogę zrobić to jeszcze inaczej mogę tutaj z angular testing

17:55zaimportować coś takiego jak async i mogę cały test objąć

18:00właśnie tutaj w tą operację async uwaga to nie jest słowo kluczowe async to jest zwykła

18:04funkcja angulara async jeśli opakuję nasz test w async to jest

18:08jeszcze prościej bo on sam wykryje czy mam jakieś tutaj promisy i

18:13wtedy już nie muszę przejmować się tutaj tymi callbackami po

18:17prostu on sam będzie wiedział kiedy ten promise się zakończy i od zablokuje

18:21wywołanie kolejnych testów dopóki ten test się tutaj nie uruchomi okej

18:26dobra mamy html i w ten sposób mniej więcej wygląda

18:31konfiguracja tutaj testów dla komponentów

18:35angular ale nie tylko bo tak samo jakbyś chciał testować dyrektywy czy jakieś

18:39usługi check i inne rzeczy to musisz zawsze stworzyć moduł testowy i

18:43dopiero wtedy możesz poprosić ten moduł tą uprząż testową żeby

18:48utworzyła ci dany moduł lub usługę i w twoich testach możesz elegancko korzystać

18:52z elementów których dostarcza po prostu tutaj nam angular możesz

18:56też w ogóle polecam wygeneruj sobie jeszcze jeden komponent wygeneruj go z testami

19:00i porównać jak bardzo się różni ta nasza wersja od tej

19:04wersji automatycznej generowanej przez angulara i tak samo jak już będziesz tworzył nowe

19:08komponenty to właśnie nie pomijaj testów generuj testy będziesz miał

19:12tą część jakby załatwioną będziesz mógł od razu skupić się na pisaniu testów

19:17i tym właśnie zajmiemy się w kolejnych lekcjach umiemy fixture

19:21i omówimy sobie jak wykorzystać te wszystkie elementy które nam angular w ogóle dostarcza żeby wygodnie

19:26pisać testy ale o tym już w kolejnych lekcjach dozobaczenia