Angular: Testowanie formularzy

Angular 6, 7, 8+

0:00W poprzedniej lekcji testowaliśmy interakcje tutaj z użytkownikiem

0:04czyli zasymulowaliśmy kliknięcie w przycisk tutaj

0:08korzystając z trigger event handler a następnie przy użyciu szpiega

0:13przypiętego na metodzie tutaj edit naszego komponentu określiliśmy

0:17że tamta została wykonana ale także przepuściliśmy tutaj szpiega

0:21do oryginalnej metody żeby zobaczyć także czy udało tutaj tryb edit

0:25mode na true w tej lekcji zrobimy coś bardziej złożonego

0:30dodamy sobie tutaj jeszcze powiedzmy input czyli pole tekstowe

0:35tutaj zwykły tekst i zobaczymy tutaj jak zrobić interakcje

0:39nie jest przyciskiem nie kliknięcie tylko interakcje tutaj w dwie strony z

0:44takim elementem input i teraz pierwsza rzecz zapisze sobie to pierwsza

0:49rzecz w naszym polu input powinno się

0:53pojawić ta sama wiadomość ten sam tutaj tekst który znajduje się w tym

0:57polu żebyśmy mogli to edytować czyli it should nie it should

1:02no właśnie it should show task

1:06name inside input i tutaj

1:10może zrobimy też bardzo podobnie jak dodamy sobie klasę żeby łatwiej taki element znaleźć

1:16class class name powiedzmy input

1:20okej czyli chcemy sprawdzić czy

1:25po wyrenderowaniu czy w tym inpucie czy jego value jego wartość tego

1:29pola tutaj formularza jest taka sama jak tutaj message czyli

1:33zobaczymy znajdziemy po pierwsze ten element czyli const powiedzmy input

1:37znajdziemy go używając znowu fixture debug element

1:44query by css i

1:49użyję tej naszej klasy task name input okej

1:54i chcemy sprawdzić czy input native

1:59element tutaj cały czas nie mają podpowiadania więc warto

2:03by się zastanowić tutaj nad tym żeby w ogóle określić sobie typ że to jest as

2:09html input element tutaj

2:15jeszcze brakuje średnika teraz i teraz mamy wszystkie

2:19podpowiedzi które dotyczą elementów html typu input więc

2:23powinniśmy mieć na przykład tutaj value może w ten sposób no

2:28i możemy sprawdzić teraz czy to value czyli możemy zrobić expect i

2:33sprawdzić czy value to equal no i tutaj powinniśmy

2:37mieć tą samą wartość co wcześniej czyli powinniśmy mieć message

2:41works tu oryginalny tekst zrobię to jeszcze inaczej sprawdzę

2:45czy faktycznie ma on wartość tu jest komponent message po ten tekst dokładnie taki

2:49sam tutaj jak wcześniej sprawdzaliśmy teraz zapisze no

2:55i okazuje się że jest problem bo w nim może znaleźć tutaj tego elementu czyli native element

2:59of null tu jeszcze raz zapisze i mamy task name input

3:03szukamy task name input

3:08click niezapisany tu jak widzisz już mamę dokładnie

3:12problem czy udało się znaleźć element ale on nie zawiera nie ma prawidłowej

3:17wartości czyli tu nie pojawiła się wartość w środku no bo oczywiście w html'u

3:21nie mamy takiego bindowania więc spróbuj naprawić tutaj tą sytuację dopiszę

3:25sobie tutaj odpowiednie bindowanie że value tego elementu ma być równe

3:29dokładnie temu naszemu message zobaczmy teraz my

3:34mamy sukces czyli jak widzisz można bardzo łatwo znaleźć pole określić

3:38sobie jakieś jego dowolne właściwości na przykład value i zobaczyć czy bindowanie

3:42działa prawidłowo to jest w jedną stronę my chcemy wyświetlić

3:47tutaj informacje spróbuj teraz zrobić to w drugą stronę czyli

3:51zobaczyć co się stanie kiedy użytkownik wprowadzi jakieś zmiany no i wtedy czy

3:55te zmiany będą zsynchronizowane z powrotem do naszego message czyli

3:59w kolejnym teście it should

4:05no właśnie it should update

4:09task name

4:15when input value

4:20changes i tutaj trzeba być bardzo ostrożnym co to znaczy

4:24tutaj changes co znaczy że zostały wprowadzone zmiany jak wiesz pole

4:28tekstowe tutaj może reagować na każdy klawisz na key up key down

4:32key press może być na change czyli dopiero na opuszczenie pola

4:37ale mamy też taki nowy event która nazywa się input który reaguje na każdą zmianę

4:42tego pola niezależnie od powodu tak żeby control z czy wytnę treść

4:46nie ważne czy używasz klawiatury czy myszki czy pole się samo wypełnia

4:50na przykład przy użyciu jakieś automatycznego wypełniania w przeglądarce to input tutaj bardzo

4:54fajnie zadziała więc spróbujmy może w ten sposób znowu znajdę sobie ten element

4:59input tak samo jak zrobiłem to wcześniej i teraz ja chcę ustawić

5:04wartość i zobaczyć czy ona się pojawi u nas tutaj w message czyli

5:08chcemy na końcu w teście sprawdzić czy w drugą

5:12stronę komponent message tym razem tu i

5:17equal changed value

5:23na przykład w taki sposób jak byśmy ten changed value przypisali do naszego

5:27elementu czyli jeszcze raz ja zrobię tutaj const może tutaj się równa

5:35input native element as html

5:40input element i do elem do value przypiszę

5:46sobie nasz zmieniony tekst i niby wszystko w porządku bo znaleźliśmy

5:51element tutaj html do elementu html przypisuje

5:55nową wartość no i teraz tutaj właśnie test

5:59powinien pokazać że to jest nieprawda tak mamy błąd

6:03mamy message works a chcielibyśmy changed value czyli jak widzisz tutaj zmiana wartości nie

6:08zmienia naszego message mamy te bindowania teraz w angularze

6:12nie ma takiej opcji to jeżeli sobie mógł obserwować zmiany value i automatycznie

6:16zmieniał w angularze muszę obsłużyć jakieś zdarzenie czyli muszę tutaj wymyślić

6:21jakieś zdarzenie które będzie na to reagowało teraz jeśli zrobię tutaj sobie na przykład key

6:25app key down to okej ale ja chcę żebyś to jeszcze

6:29szybciej chciał żeby przy każdej zmianie czyli jeżeli użyję tego zdarzenia typu input i

6:34przy każdej zmianie w każdej zmianie wartości tą nową

6:38wartość przypiszemy do message czyli message równa się event target

6:42value czyli przy każdej zmianie tutaj w

6:47wartości naszego input'a ja chcę aktualizować ten

6:51message czy on się tutaj zaktualizował nam wewnątrz komponentu zapiszę i

6:55niestety to nadal nam nie działa to się nie zmienia żeby

7:00przetestować taką sytuację żeby przetestować wiązanie my musimy faktycznie zasymulować

7:05wystąpień takiego zdarzenia jak input jeśli ja po zmianie tej

7:09wartości zrobię sobie coś takiego jak input czyli nasz tutaj

7:13element tutaj input i zrobimy tak jak

7:17wcześniej miałem przy clicku trigger event handler input może

7:22tutaj zmienę troszkę nazwę aby to się nie myliło i

7:26tu musimy przekazać jeszcze szczegóły zdarzenia teraz mimo że ja wykonałem

7:31to zdarzenie to nadal to się nie zmienia zwróć uwagę że ja

7:35wartość pobieram event target value czyli tutaj

7:39jak chcesz symulować tego typu zdarzenia to musisz także zasymulować właściwości

7:43tego zdarzenia czyli jeśli ja to wyciągam wartość z event target value to

7:48po tej stronie muszę zasymulować dokładnie taki obiekt zdarzenia który zawiera ten target

7:52który tutaj mam i zawiera value

7:56tak się składa że nasz element html w którym my ten value ustawiliśmy on

8:01tutaj możemy po prostu podstawić go jako target i on powinien sobie pobrać

8:05value wtedy automatycznie zobaczymy jak widzisz masz

8:09teraz 11 na 11 sukces jest to fajna metoda bo

8:13pozwala tobie jak widzisz przekazać swoje własne szczegóły eventów własne

8:17szczegóły zdarzenia masz bardzo ścisłą kontrolę nad tym co się dzieje nie

8:22mniej jest to troszeczkę pracy tutaj żeby to zrobić część osób szczególnie

8:26jeśli to zdarzenie jest bardziej skomplikowane preferuję wykorzystać natywne zdarzenie

8:30przeglądarki czyli zamiast trigger event handler po prostu na elemencie dispatch

8:37event new event tutaj nazwa event'a input i

8:41to już praktycznie wystarczy event stworzony w ten sposób czyli

8:45natywny obiekt event z przeglądarki zdispatch'owany w ten sposób

8:49czyli także natywnie będzie automatycznie miał wszystkie te pola w

8:54tym target value i tak dalej ustawiony przez przeglądarkę jak widzisz jest to troszeczkę

8:58krótszy troszkę szybszy sposób ma on jednak tą wadę że

9:02tutaj nie mamy kontroli na tym eventem tutaj łatwo zasymulować bardzo skomplikowany cały

9:07event ale nie możemy żadnych opcji zmienić tutaj natomiast mamy

9:11pełną kontrolę ale niestety ta kontrola wymaga od nas zbudowania

9:15wszystkich szczegółów zdarzenia ja oczywiście polecam zapamiętać że jest to

9:19opcja alternatywna ale w testach polecam tobie zawsze pamiętać tutaj o tej

9:23wersji bo tutaj faktycznie mamy kontrolę nad tym co my

9:28symulujemy co my podstawiamy pod event i nie ma sytuacji że

9:32nasz event przez przypadek bo przeglądarka stworzyć coś innego że będziemy mieli nieoczekiwane rezultaty

9:37tak więc może spotkasz się z taką wersją z natywnym uruchamianiem

9:41prawdziwych zdarzeń przeglądarki ja polecam tobie tą wersję angularową gdzie my

9:46symulujemy zdarzenie i musimy zasymulować niestety wtedy jakby

9:50te właściwości ale tylko te właściwości które chcemy tutaj przetestować więc

9:54jeśli nasz komponent zostanie rozbudowany dodamy jakieś nowe funkcje będziemy sprawdzać jakieś

9:58nowe opcje eventów no to wtedy ten test automatycznie przestanie nam działać i będziemy

10:02wiedzieli że coś popsuliśmy więc takie podejście jakby jest o tyle lepsze że ja

10:07tylko testuję konkretne właściwości eventu te z których faktycznie korzystam

10:11i przypadkiem się nie pojawią inne tutaj eventy czyli jak

10:16widzisz w ten sposób możesz w dwie strony zsynchronizować tutaj pole formularza i możemy

10:20przetestować zarówno czy wartości się pojawiły w tym polu pamiętaj zawsze

10:24jakbyś chciał je zmienić żeby jeszcze detect changes wykonać no

10:28i tutaj jeśli chcemy obserwować jakie zdarzenia to tak jak przy clicku możemy

10:32tutaj triggerować dowolne zdarzenie key up key down input pamiętaj

10:37tylko żeby przekazać wszystkie tutaj potrzebne informacje na temat tego eventu

10:41który chcesz zasymulować czyli w ten sposób możesz

10:45łatwo tutaj testować interakcje z elementami formularza tak

10:49samo zasada byłaby tu dla checkbox'a dla selecta dla radio box żeby

10:53pamiętać o odpowiednim tutaj evencie i odpowiedniej tutaj właściwości

10:57odpowiedniej dla danego typu pola oczywiście w dużych aplikacjach

11:01rozbudowanych aplikacjach nie zarządzamy polami ręcznie w ten sposób tylko

11:06on ma tego odpowiednie mechanizmy taki jak ng model czy formularze

11:10reaktywne i te też można testować jednak testuje

11:15się troszeczkę w inny sposób niż tutaj ale o tym powiemy sobie

11:19już kolejnej lekcji tak więc do zobaczenia