Angular: Testowanie interakcji ze szpiegiem

Angular 6, 7, 8+

0:00We wcześniejszych lekcjach utworzyliśmy tutaj przykładowe testy dla komponentu

0:05wyrenderowaliśmy komponent i sprawdziliśmy czy przy zmianach

0:09danych w tym komponencie i po wykryciu zmiany czy te zmiany właśnie są

0:13tutaj aktualizowane w szablonie w htmlu nie mniej cały czas te

0:18testy jakby są jednostronne my testujemy to co komponent

0:22przekazuje użytkownikowi ale nie testujemy tego jak on reaguje na

0:26zdarzenia na akcje użytkownika i właśnie tym zajmiemy się w tej

0:30lekcji powiedzmy że nasz komponent będzie miał tutaj jakiś button

0:34z opcją edit czyli przełączenie w tryb edycji

0:39i chciałem przetestować czy właśnie jak użytkownik kliknie w ten button

0:43czy przełączymy się w tryb edycji a dokładnie przetestować sam przycisk

0:47czyli jakby nie wciśnięcie od razu włącza tryb edycji tylko

0:52czy wciśnięcie powoduje uruchomienie konkretnej funkcjonalności

0:56a czy ta funkconalność uruchamia tryb edycji no to już uruchomimy sobie

1:01w kolejnym teście po to żeby te nasze testy były jak najbardziej precyzyjne

1:06żeby były testami jednostkowymi żeby ten test jakby zbyt wiele swoim

1:10zasięgiem nie obejmował czyli dam tutaj jakiś kolejny test it should

1:14powiedzmy switch to

1:18edit mode when edit

1:23button is clicked i teraz

1:28jak przetestować dokładnie no właśnie taką sytuację czyli

1:32jak wykryć że przycisk został wciśnięty albo inaczej mówiąc jak

1:38sprawdzić czy wciśnięcie przycisku wywołuje oczekiwaną

1:42jakąś reakcję czyli powiedzmy że nasz komponent nasz

1:47komponent miałby funkcje powiedzmy edit i

1:53wywołanie tej funkcji powinno przełączyć tryb edycji ale my nie chcemy sprawdzić tutaj czy

1:57wywołanie funkcji powoduje efekt chcemy sprawdzić czy wciśnięcie tego

2:01przycisku wywoła tą funkcję i teraz

2:05w jasmine możemy w bardzo fajny sposób sprawdzić czy

2:09właśnie funkcja została wywołana i w tym celu użyjemy szpiega

2:14czyli tutaj jest spy spy on albo

2:18spy on property to są funkcje które możemy zaimportować sobie z jasmine'a

2:22są tu już zaimportowane ze wszystkimi funkcjami jasmine

2:28i spy on pozwala nam wyrzucić obiekt czy na przykład nasz komponent w

2:32ramach tego obiektu określić jakąś metodę będzie to na przykład metoda edit

2:36która jeszcze nie istnieje okej edit

2:41i tu bardzo fajna rzecz bo on tutaj sprawdza typy automatycznie czyli

2:46jak widzisz type script sprawdza czy jak taki klucz jak edit w ogóle istnieje

2:50na naszym komponencie na naszej klasie jeśli nie to jest to błąd więc możemy tutaj w komponencie

2:54dopisać sobie nową metodę będzie to edit i

2:59na razie ta metoda nie będzie nic robiła po prostu zostawimy sobie ją w ten sposób chcę tylko sprawdzić czy

3:03nasz przycisk wywoła tą metodę czyli tutaj stworzę sobie

3:08zmienną edit spy i szpieg działa

3:12w ten sposób że jeśli wskażę mu obiekt i wskażę mu którąś

3:16metodę to on tak naprawdę podmienia tą metodę i

3:21zastępuje ją taką właśnie swoją metodą metodą szpiegują

3:25metoda szpieguja pozwala wykryć czy ktoś uruchomił

3:29kod jakiś na tej metodzie i teraz fajne rzeczy

3:33bo ja mogę ten szpieg rozszerzyć mogę tu na przykład powiedzieć na przykład żeby

3:37przy wywołaniu tej funkcji próbie wywołaniu tej funkcji tak naprawdę wywołać

3:41fałszywą funkcję mogę podmienić tą funkcję tutaj na widzisz zupełnie

3:45inną funkcję jakąś testową mogę oczywiście wykonać oryginalną

3:49funkcje przepuścić tego wywołującego przez szpiega do

3:54oryginalnej funkcji jeśli tego potrzebuje jeśli chcę zwrócić jakieś

3:58przykładowe fałszywe wartości do testów nie muszę tutaj mockować nie

4:02muszę fałszować całej funkcji mogę od razu powiedzieć żeby zwróciła jedną konkretną

4:06wartość albo przekazać sekwencje wartości tak że jak każde

4:10kolejny wywołanie tej naszej funkcji szpiega która symuluje oryginalną

4:14funkcje spowoduje że ten kod który wywoła tą funkcję dostanie

4:19każdą z tych wartości oczywiście możemy też wrócić z powrotem do

4:23zachowania potem jak sobie poszalejemy z tymi opcjami możemy

4:27też zasymulować w funkcję która zwraca błąd tak czy możemy przetestować co się

4:31dzieje kiedy ktoś poda nieprawidłowe parametry albo właśnie już zasymulować

4:35że zostały podane nieprawidłowe parametry zasymulować błąd

4:39i zobaczyć jak komponent na to zareaguje ja tu zostanę z zwykłą taką

4:43edit spy pokażę tylko jeszcze tutaj taką fajną rzecz bo jak widzisz mamy

4:47calls i most recent call czyli jakby szpieg zbiera zapisuje

4:52historię wszystkich wywołań wie dokładnie kto go wywołał i

4:56możemy sobie zrobić expect i sprawdzić czy nasz szpieg

5:00został faktycznie wywołany i to ma różne fajne metody takie jak na

5:04przykład to have been called czyli sprawdzić czy szpieg został wywołany został wywołany

5:08przed innym szpiegiem czyli możemy ustalić kolejność wywoływania funkcji

5:12i zapewnić że one faktycznie wywołają się w odpowiedniej kolejności możemy ilość wykonań

5:17zmierzyć czy ktoś za dużo razy nie uruchomił tej funkcji ten komponent albo za mało możemy

5:22też sprawdzić czy funkcja została wykonana z jakimś specyficznym parametrem

5:26albo zwróciła błąd tutaj też mamy taką możliwość ja się zatrzymam

5:30na jej podstawowej opcji czyli sprawdzamy czy ta funkcja została wykonana i

5:34teraz tu nam brakuje pewnej rzeczy bo ja podstawiam szpiega i

5:39sprawdzam czy został szpieg wykonany czy sprawdzam czy funkcja została

5:43uruchomiona brakuje nam tylko symulacji faktycznego

5:47kliknięcia w ten przycisk więc pierwsze co to zrobimy to

5:51ja sobie tutaj znajdę przycisk czyli const input z tym button to będzie

5:55oczywiście jak wiesz fixture debug element query by css

6:05button polecam tobie nie używać zbyt ogólnych tutaj

6:09selektorów tu będzie się zmieniał i nie chcesz później za

6:13każdym razem jak dodasz nowy przycisk zmieniać wszystkich pozostałych więc od razu dodam sobie tutaj jakąś klasę

6:18nazwę ją edit button powiedzmy

6:23i będę szukał tej po tej klasie edit button i

6:27teraz żeby zasymulować kliknięcie to jak widzisz mamy błąd bo szpieg

6:31nie został tutaj uruchomiony zasymulujemy kliknięcie w

6:35przycisk zobaczymy czy kliknięcie w przycisk wywoła funkcję oczywiście to się na razie nie stanie czyli

6:40tak button i tutaj jak pamiętasz była taka fajna funkcja trigger

6:45event handler nie mogę sobie zdarzenia tutaj ja chcę zsumować click

6:49czyli napiszę sobie po prostu tutaj click i bardzo ważna rzecz zdarzenie

6:53pamiętaj że tworzy zawsze obiekt typu eventy każde każde zdarzenie i obiekt

6:58event zawiera dodatkowe informacje na przykład gdybyśmy musieli sprawdzić którym przyciskiem myszy

7:03ktoś kliknął albo w jaki element został kliknięty tak

7:07złapał te wszystkie informacje o eventach tutaj możemy przekazać także

7:11fałszywe informacje fałszywe zdarzenie można podstawić nasz button

7:15nie musi nic wiedzieć na temat zdarzenia nie musi wiedzieć który przycisk myszy był wciśnięty

7:19czy control był wciśnięty czy alt te wszystkie dodatkowe informacje nam nie potrzebne więc tutaj też

7:23nie będę tutaj mockował żadnych dodatkowych informacji i zobaczmy teraz

7:29znajdujemy sobie szpiega znajdujemy przycisk

7:33klikamy w przycisk i sprawdzamy czy przycisk wywołał tego szpiega i oczywiście

7:38nie bo tutaj jak widzisz nasz button jest do niczego przypięty i mamy cały czas informacje

7:42że nasz szpieg nie został wykonany jeśli natomiast czyli jeśli dodamy

7:46tą usługę klik i naklika wywołam właśnie

7:50tą naszą metodę edit z komponentu edit

7:55tutaj zapiszę zapiszę ten plik jak widzisz

7:59mam pełen sukces w ten sposób możemy przetestować podstawić właściwie

8:03metodę po sobie szpiega zamiast jakiejś metody naszego komponentu znaleźć

8:07element wywołać akcje na htmlu i zobaczyć czy ta akcja faktycznie

8:11prawidłowo wykonała zmiany prawidłowo wykona funkcję na

8:15naszym komponencie i tutaj

8:19jeszcze według opisu naszego testu kliknijcie powinno

8:23przełączyć na tryb tutaj na edit czyli jeszcze w komponencie

8:27naszym tutaj pozwolę sobie dodać jeszcze tryb edit ustawimy

8:34go na false domyślnie akurat się tak samo widzę zgadza

8:39edit mode powiedzmy i

8:44edit ustawię edit mode

8:48na true w ten sposób i teraz

8:52w testach chciałbym też to sprawdzić czyli sprawdzimy expect komponent

8:57edit mode po prostu tu equal

9:02true okej

9:08zobaczmy co na to testy i tutaj widzisz to się nam nie

9:13zmieniło zobaczmy jeszcze tak edit klikam na edit i

9:17to powinno zmienić nam edit mode na true

9:21teraz można zastanowić się czemu to nie zadziałało mianowicie fakt tu

9:25nie znajduje przycisk klikam został przycisk wciśnięty

9:29funkcja nie została wykonana a nasz edit mode nie równa się true pamiętaj

9:34o tym że jak uruchamiasz szpiega to szpieg jakby zamienia oryginalną funkcję

9:38na szpiega jeśli chcesz aby oryginalna funkcja była mimo to wykonana to musisz pamiętać

9:42o tym tutaj żeby dodać właśnie którąś z tych opcji call true akurat

9:46po prostu wykona oryginalną funkcję jeśli funkcja oryginalna

9:51wykonuje jakieś efekty których byś nie chciał i nie są ci potrzebne przeszkadzają twoim tekście no

9:55to możesz podmienić szpiega i podmienić na inną funkcję z call fake zrobimy z call through

10:02i teraz jak widzisz wszystko poszło elegancko czyli jak szpiegujesz

10:06tutaj pamiętaj czy chcesz właśnie tylko szpiegować czy ktoś próbował uruchomić funkcję

10:10czy chcesz szpiegować i dodatkowo tą funkcję możesz wykonać możesz

10:15też zasymulować tutaj zwracanie konkretnego wyniku czyli

10:19można na przykład zrobić żeby tutaj return value

10:23true powiedzmy i tu sprawdzić z called with

10:27true tylko znowu to

10:31zasymulujemy wykonanie funkcji ale oryginalny funkcji nie wykona więc

10:35jak wrócę tutaj do naszej poprzedniej wersji kiedy my przepuszczamy oryginalną funkcję

10:39żeby się wykonała sprawdzamy czy ta funkcja została czy szpieg został wykonany ale

10:44także sprawdzamy czy ta funkcja odniosła efekt w testach już aplikacji polecam

10:48nie rozbudowywać za bardzo takich testów taki test możemy już właśnie rozbić na

10:52dwa w pierwszym teście byśmy sprawdzali po prostu czy kliknięcie

10:57w przycisk wykonuje funkcje a w drugim teście

11:01byśmy sprawdzali czy wywołanie funkcji zmienia mode czyli to powinny

11:05być de facto dwa osobne testy ja na razie zostawię to w ten sposób okej

11:11to tyle jeśli chodzi o testowaniu interaktywności i oczywiście tu możesz poustawiać

11:15dowolne inne zdarzenia i dowolne inne szczegóły tego zdarzenia żeby

11:19symulować bardziej zaawansowane interakcje nie tylko klikanie myszą na przykład

11:23tu integracja z klawiaturą czy na przykład inne bardziej zaawansowane zdarzenia

11:27myszy i nie tylko ale o tym powiemy sobie w już w kolejnej lekcji

11:31gdzie potestujemy sobie elementy formularza i potestujemy też troszeczkę bardziej

11:36zaawansowane interakcje niż po prostu kliknięcie tak więc

11:40do zobaczenia w kolejnej lekcji