Angular: Testowanie formularza z ngModel

Angular 6, 7, 8+

0:00W poprzedniej lekcji udało nam się utworzyć tutaj proste pole formularza i

0:04przetestować zarówno przypisywanie tych wartości do formularza jak i

0:09obsługę zdarzeń na tym formularzu gdy na przykład użytkownik wprowadzić jakieś zmiany wprowadzi

0:13jakiś tekst jak jednak wiesz w aplikacjach bardziej rozbudowanych nie

0:17przypisujemy wartości pojedynczo tak nie obsługujemy osobno

0:22przypisania wartości w jedną stronę i obsługi zdarzenia w drugą tylko

0:26skorzystamy z bardziej rozbudowanego mechanizmu do formularzy tak jak na przykład

0:30ng model czyli jeśli tu values ją spróbuję użyć sobie ng model

0:34i zamiast input zrobimy sobie ng model change

0:39czyli zdarzenie które publikuje ng model i spróbuję zapisać takie coś pojawi się kilka

0:43problemów pierwsza rzecz tutaj jak widzisz cannot read property debug

0:47a jeszcze wcześniej tutaj cannot bind ng model ponieważ

0:52nie jest to rozpoznana właściwości input jeśli korzystałeś wcześniej z angulara

0:56no to wiesz dokładnie że to oznacza że mamy nie zaimportowany ng model i teraz

1:00ng model ja bym mógł tutaj dodać do modułu app module do app module

1:04aczkolwiek to by nazwę aplikacji w testach jak

1:08pamiętasz mamy nasz tu specjalny model tutaj moduł testowy i jeśli

1:13chcesz używać jakiś dyrektyw jakichś pluginów wtyczek czegoś spoza

1:18naszego komponentu no to trzeba zadeklarować albo zaimportować tutaj czyli

1:22żeby pierwszy błąd tu się go pozbyć tutaj tego błędu tu zrobimy sobie import forms

1:27module i forms module zaimportujemy sobie

1:31oczywiście z angular forms okej zapiszę

1:35i zobaczmy teraz i powinno

1:39być wszystko dobrze ale testy na to nie działają tutaj uruchomiło się całe

1:43jakby nasz komponent komponenty się nam wyrenderował

1:48aczkolwiek w wartość nie została zmieniona czyli tutaj nasza

1:52wartość tutaj w tym polu input ona nie odpowiada tej wartości którą

1:56ustawiliśmy w teście czyli ty wyszło który to jest test test task

2:01list item should update task when input value change

2:05czyli ten test się nie udał a zobaczmy troszkę wcześniej

2:10mamy jakiegoś console loga i jak zobaczymy tutaj task

2:15should show task name inside input także

2:19się nie udał czyli oba te tutaj testy które zajmują się

2:23inputem w momencie gdy przełączymy się na ng model powinien po prostu działać ale jednak

2:27oba tutaj nie działają tutaj wartość nie jest w ogóle nawet przypisana i teraz

2:31wynika to ze specjalnej funkcjonalności jaką ng model ng

2:36model aktualizuje pola asynchronicznie czyli jeśli my przypisujemy wartość

2:40do naszego model naszego komponentu w pierwszej fazie ng model

2:44zaczytuje tą wartość weryfikuje waliduje tą wartość czy ona jest poprawna

2:48dopiero jakby w drugiej fazie renderowania on tą wartość przypisuje do naszego inputa

2:52i teraz musimy odpowiednio przerobić test żeby taką sytuację obsłużyć czyli

2:57jeśli mamy tutaj nasz task name input nim

3:01pobierzemy sobie wartość i sprawdzimy czy ona się zgadza to

3:06musimy tutaj upewnić się że angular zakończył renderowanie

3:10czyli fixture i tutaj jak pamiętasz były takie funkcje when

3:14stable i when rendering done i tutaj when

3:18stable jest o tyle ważne że widzisz musimy poczekać na zakończenie

3:22się wszelkich asynchronicznych aktywności czyli za każdym razem

3:26gdy na coś czekamy wykonujemy jakieś eventy wszystko dzieje

3:30się asynchronicznie wszystko co nie dzieje się natychmiast tylko wymaga no

3:35właśnie kolejnej kolejnego kroku asynchronicznego musimy

3:39to wykonać poprzez when stable i when stable jak widzisz to jest funkcja która zwraca

3:44nam promise czyli robimy sobibe then i dopiero

3:48tutaj w tym then sprawdzimy czy oczekiwana wartość się zgadza

3:55jak widzisz teraz jeden test się nie udał ja tutaj zrobię

3:59f oznacza focus czyli sfocusuje się to jest na tym jednym teście czyli

4:04jak widzisz nas też ten jeden test na pewno działa jeśli pominę pozostałe to tutaj wszystko jest

4:08teraz spróbujmy to samo zrobić w drugim teście brakuje jednej

4:13rzeczy żeby jak masz promisy pamiętaj żeby ten promise zawsze z testu zwrócić

4:17żeby upewnić się że na pewno test o właśnie czy na

4:22pewno test tutaj dokończył się czy test na

4:26pewno poczekał na ten promise nim przejdzie dalej okej teraz

4:30mamy renderowanie w inpucie musimy pamiętać zawsze żeby poczekać

4:34aż ng model zaktualizuje input w drugą stronę to nie jest konieczne

4:38a tylko że tutaj mamy na trigger event czyli samo wywołanie zdarzenia wywołuje

4:43od razu przypisanie i tu tylko musimy się upewnić że przy ng modelu

4:47nie przypisujemy tutaj event target value tylko tutaj po prostu eventem

4:52jest już value czyli jak zrobię tutaj control s to drugi test

4:56automatycznie tutaj działa bez zmian i w zasadzie mogę ng model skrócić i całą tą drugą część

5:00po prostu tu elegancko zwinąć i jako

5:04zapis tutaj jako dwustronne wiązanie ng model okej

5:09w ten sposób zobaczymy i testy działają

5:13czyli już w ten sposób możesz elegancko tutaj testować nawet

5:17z ng model musisz pamiętać żeby wszędzie modelu poczekać ng model po

5:21pierwsze się tej podepnie i dopiero w drugiej fazie przy drugim tutaj

5:25sprawdzeniu zmian wprowadzi tutaj te zmiany jest jeszcze bardzo

5:29fajna rzecz bo jeśli mamy tutaj ng model to tak naprawdę nie

5:33musimy wyszukiwać tego po css można to zrobić trochę inaczej

5:37mogę to zrobićby directive i

5:42użyć po prostu ng model jako punktu

5:46zaczepienia dla naszego tutaj inputa podobnie

5:50zrobimy też na dole czyli wyszukam

5:54go nie po css tylko po samym po samej klasie ng

6:00model mogę znać to po klasie css tutaj lub po klasie

6:04po typie komponentu on też tutaj je znajduje i

6:08tutaj mogę dać też bardzo ciekawą rzecz że jeśli element

6:12który tutaj znajdziemy jako debug element i jest komponentem lub

6:16posiada przypiętą gdzieś jakąś dyrektywę to możemy też

6:20dostać się do tej samej dyrektywy lub do komponentu który tutaj

6:24mam w tym debug elemencie czyli tu mamy ng model to ja mogę nasz

6:29input element żebym miał do tego kolejny test powiedzmy

6:33że chciałbym sprawdzić tutaj z tamtego ng modelu powiedzmy

6:37chciałbym zobaczyć czy jest on poprawny

6:41czyli zrobimy sobie tutaj it should show

6:50error message when task

6:54name is empty na przykład czyli

6:58chcemy wyświetlić komunikat błędu sprawdzić czy jest błąd i wyświetlić

7:03komunikat błędu czyli powiedzmy że nasz tutaj ng model będzie required i

7:08chciałem sprawdzić to teraz może to zrobić tak że w podobny sposób pobiorę sobie te

7:12referencje do naszego input elementu i z tego input elementu

7:17możemy wyciągnąć nasz ng model i

7:22w ten sposób że tutaj jak sobie jak sobie poszukamy po tych wszystkich opcjach mamy jak widzisz injector

7:27czyli mamy injector i mogę z nim zrobić get i wyciągnąć dowolny

7:31token dependency injection czyli na przykład znaleźć sobie tutaj nasz ng model

7:35który znajduje się na injectorze tego naszego elementu czyli

7:40jeśli podejrzymy sobie tutaj zawartość tej zmiennej model to jak

7:44zobaczysz mamy wszystkie właściwości tutaj tego naszego ng modelu możemy

7:49zobaczyć czy jest touch untouched możemy pobrać sobie wartość na przykład

7:53możemy pobrać też informacje na przykład czy jest on poprawny

7:57i ja te dwie rzeczy może na początek wyświetlę czyli console log

8:02wyświetlimy sobie wartość i wyświetlimy sobie stan czy jest on poprawny będziemy

8:06chcieli sprawdzać czy jak zmienię właśnie jego wartość to czy jego stan będzie poprawny

8:11i czy wyświetlił się error więc na chwilkę tutaj console log sobie sprawdzimy co tam się

8:15dzieje wartość jest null i oczywiście jest

8:19valid false czy jest niepoprawny czyli nasz required tutaj

8:24spojrzę na model errors no

8:29to zobaczymy jeszcze tutaj o właśnie required true czyli nam walidacja elegancko

8:34zadziałała okej jednak test

8:38tutaj wymaga żebyśmy sprawdzili czy istnieje komunikat błędu jeśli

8:42właśnie taki błąd tutaj task is empty wystąpił czyli

8:46tutaj utworzymy sobie zaraz komunikat błędu ale najpierw zaczniemy od testów czy sprawdźmy czy on

8:50istnieje czyli const error

8:55to będzie fixture ponownie debug element i

9:00szukamy tym razem znowu po css dla

9:04uproszczenia czyli css i poszukamy

9:08sobie obiektu diva z klasy powiedzmy error na razie i

9:13teraz expect i sprawdźmy czy on tutaj istnieje czyli expect error

9:17i tu nie możemy zrobić to be defined dlatego że jeśli on nie znajdziesz

9:22null tutaj będzie zdefiniowany więc zrobimy po prostu czy jest prawdziwy

9:26to be truthy ewentualnie można by

9:30spróbować not to be null

9:34w ten sposób zobaczymy mamy

9:39błąd że expected null not to be null okej

9:43tu możemy sobie zrobić jeszcze message

9:50element

9:53not found zobaczmy teraz komunikat błędu error

9:58message not found ok spróbujmy teraz czy yda nam się ten błąd tutaj naprawić

10:02czyli dodamy sobie jakiegoś div'a powiedzmy field

10:08cannot be empty i

10:13dodamy jakiś ng if który to sprawdzi czyli jeśli

10:17mamy tutaj exception to chcemy wyświetlić ten błąd który

10:21tak samo jak mamy tutaj task name mamy referencje do tego elementu to

10:26ja mogę przypisać do niego tutaj na przykład ng model i tutaj

10:31wyciągnę sobie informację task name i sprawdzić

10:35czy jest valid albo jeszcze lepiej dokładnie stwierdzić get error albo has

10:41error i konkretny

10:45błąd pobrać na przykład błąd tutaj required okej zobaczmy

10:49teraz i oczywiście tego nie znajdzie bo szukam tej klasy

10:53error a tu zapomniałem dodać klasy error oczywiście więc

10:58nigdy nam by tego nie znalazł tutaj łatwo właśnie o tego typu błędy że szukamy

11:02czegoś po prostu z literówką na przykład o mamy sukces czyli teraz mogę

11:06pochować te console logi niepotrzebnie i zobaczmy

11:10sukces udało się czyli jeśli powiedzmy ja bym tutaj wprowadził jakąś

11:14wartość żeby był ng model set value set

11:25wartość i powiedzmy

11:29tutaj zrobiłbym detect changes czyli fixture detect

11:37changes to pojawi nam się tutaj

11:41elegancko że tu nie znalazł bo ng model sprawdził

11:46tą wartość stwierdził że mamy tutaj poprawną wartość więc ukryje nam

11:50ten komunikat tak czyli jak widzisz możemy sobie też dostać się do

11:54różnych dyrektyw przypiętych w różnych miejscach manipulować ich zawartością

11:58i sobie testować jak zmiana stanu tych dyrektyw jak komunikacja

12:02z tymi dyrektywami wpływa nam na to co renderujemy na

12:07nasz widok tutaj dodatkowo muszę jeszcze sprawdzić faktycznie expect

12:12mogłem sprawdzić czy model faktycznie zawiera

12:16ten stan czyli możemy też sprawdzić czy model powiedzmy

12:24valid to be no

12:29właśnie falsy jest

12:34okej także sprawdzamy czy już na pewno coś znajdowało i sprawdzamy czy faktycznie w

12:39wyniku tej walidacji pojawi nam się element jeszcze warto się zmienia my chcemy coś innego

12:44wyrenderować pamiętaj też żeby ten fixture detect changes no i oczywiście pamiętaj

12:48żeby te tutaj właśnie klasy żeby te nazwy się zgadzały żebyśmy na próżno

12:52nie szukali czegoś tylko dlatego że po prostu gdzieś tam jest literówka na przykład i

12:56nie możemy tego znaleźć okej to tyle jeśli chodzi właśnie

13:00o takie testowanie widoku renderowania o testowanie danych

13:04które pokazujemy na ekranie eventu które pobieramy i nieco

13:08bardziej skomplikowane rzeczy na przykład interakcja z dyrektywami z jakimś asynchronicznym

13:13kodem w kolejnych lekcjach zajmiemy się testowaniem już warstwy

13:17logiki aplikacji powiemy sobie o usługach strumienia i tak dalej no ale tu

13:22właśnie już w kolejnych lekcjach tak więc do zobaczenia