Angular: Testowanie wiązań i wykrywanie zmian

Angular 6, 7, 8+

0:00We wcześniejszych lekcjach tutaj testowaliśmy komponent który

0:05jest statyczny tutaj nic nie zmieniało cały czas był ten sam tekst renderowany i

0:09to jest troszkę za mało na aplikacjach aplikacje angulara one

0:13służą angular służy do tego żeby renderować dynamicznie zmieniające się tutaj szablony i

0:18właśnie tyle mają się w tej lekcji tutaj ten tekst który jest statyczny

0:22zamienimy na tekst dynamiczny i zobaczymy obsłużymy test który sprawdzi czy tam

0:26się prawidłowo wyświetla tu troszkę uproszczę sytuację zrobię

0:30tylko sobie jeden element nasz message będziemy tylko ten jeden message

0:35znajdować i tu sprawdzamy czy on równy jest message works spróbujmy

0:40zmienić to tak żeby nie popsuć tego testu czyli przyniosę message

0:44works cały ten tekst który tu się znajdował spróbuję przenieść tutaj

0:49do komponentu czyli nasz task list component i

0:54przypiszę go do zmiennej message w ten sposób i

0:59tutaj umieszczę odniesienie

1:04do tej zmiennej message czyli jak widzisz tekst powinien znakjdować się w tym samym miejscu

1:08dokładnie ten sam tekst jednak jak widzisz to jest błąd bo

1:12tutaj on oczekuje message works czyli

1:16matchujemy message works a tekst wyrenderowany w tym elemencie tutaj

1:21p to jest pusty tekst pytanie dlaczego nasz

1:25tutaj message mimo że znajduje się na komponencie plik jest tutaj zapisany tutaj

1:29to jest dokładnie jak kliknę widzisz przeskakuje mi to jest dokładnie ten element więc

1:33wszystko się zgadza on mi tu nie wyświetla tego tekstu w angularze bardzo ważną

1:37koncepcją jest wykrywanie zmian czyli jeśli umieszczam komponent on

1:41po prostu jest renderowany jako sam html dopiero

1:46po wykryciu zmian angular podstawia pod wszystkim

1:50interpolację najnowsze wersję tych zmiennych tak po dokonanych zmianach

1:54on sprawdza co się zmieniło i aktualizuje te wszystkie tutaj wiązania więc w

1:58ten sposób my wyrenderowaliśmy komponent ale on właśnie nie miał wykrywania

2:03zmian nie miał tutaj fazy w której dopiero on tu uzupełnia poprawne

2:07dane i teraz możemy bardzo prosto to naprawić tutaj jak pamiętasz fixture

2:11miał taką metodę jak auto detect changes i auto detect changes

2:15raz by to uruchomił a potem by czekał na jakieś zdarzenia

2:20typu promise'y albo kliknięcia myszy i tak dalej dokładniejszą

2:24precyzyjną tutaj opcją bardziej byłoby detect changes manualne czyli ja

2:28wtedy wiem nie czekam aż może coś się wydarzy jakieś zdarzenie tylko ja dokładnie wiem

2:33że coś zostało zmienione i chce

2:37aby angular sprawdził jak to wpłynęło na szablon i przerenderował

2:41tutaj zaktualizował tutaj odpowiednie miejsca w szablonie i zobacz na samym początku testu tutaj dodaję

2:46detect changes żeby angular w ogóle zaktualizował html i

2:50dopiero wtedy szukam tutaj treści tak naprawdę mogę najpierw znaleźć element

2:55a później sprawdzić co w nim jest albo mogę najpierw robić wykrywanie zmian tutaj

2:59nie ma znaczenia bo zmiany pojawiają się wewnątrz elementu message zobaczymy teraz control s zapisałem

3:04jak widzisz teraz nie ma błędu tutaj jak zrobię jeszcze spację

3:09nasz test teraz widzisz tutaj mówisz że w tym elemencie html

3:13wyrenderował się napis message works i to się dokładnie zgadza z tym co mamy tutaj

3:17u nas w naszym teście czyli jak widzisz musimy

3:21użyć detect changes nawet przed pierwszym renderowaniem

3:26żeby pojawiły nam się tutaj jakiekolwiek zmiany czyli możemy

3:30żeby sobie usprawnić ułatwić życie żeby przy każdym

3:34teście musieć jeszcze musisz pamiętać o tym pierwszym wykryciu możemy oczywiście to pierwsze wykrycie zmian przenieść

3:38do before each i w ten sposób przed każdym testem mamy gwarancję

3:42html już zawiera jakieś początkowe dane że to

3:46wykrywanie zmian nastąpiło pierwsze renderowania początkowe to

3:50jedna rzecz ale co jeśli dane się zmienią więc napiszmy tutaj jeszcze jeden test powiedzmy

3:56że it should render updated task name czyli

4:00co się stanie jeśli my zmienimy te dane jak to się zachowa

4:05ja tu jeszcze jedną zmianę wprowadzę tu ma być task name mamy message więc

4:09ja tutaj wprowadzę sobie nazwę task name nazwę klasy i tu

4:13też zmienię na task name i tutaj zmienimy podobnie znajdę

4:18element sprawdzę czy treść

4:22tego elementu tutaj równa się nie message

4:27works tylko updated name tak czyli sprawdzimy czy po

4:34zmianie czyli nasz komponent nasz

4:39komponent komponent który tu sobie utworzyliśmy komponent teraz powinien zawierać

4:44tutaj zmienną message bo jak pamiętasz tutaj do naszego komponentu

4:48dodaliśmy tutaj elegancko jak widzisz pole message one początkowo ma wartość

4:52message works my chcemy je zmienić na updated

4:57name i chcemy zobaczyć czy tutaj to

5:01nowa treść ona się tutaj nam wyrenderuje w tym naszym

5:05komponencie i jest problem bo ten komponent

5:09jak widzisz cały czas zawiera tą początkową wiadomość nie zawiera

5:13tej nowej zmienionej i za każdym razem jeśli wprowadzasz zmiany gdzieś

5:18w danych twoich i chcesz by te dane się wyświetliły musisz

5:22pamiętać za każdym razem żeby powiedzieć angularowi uwaga zostały wprowadzone zmiany przerenderuj

5:26komponenty i sprawdź czy wszystko działa czyli jak dodam

5:30tutaj fixture detect changes tutaj jak widzisz

5:36mamy pełen sukces czyli musisz pamiętać że za każdym razem jak wprowadzasz zmiany

5:40gdzieś w danych i chcesz żeby te zmiany zostały prawidłowo tutaj zaktualizowane

5:44w htmlu że twoje komponenty wyrenderowały te zmiany nim sprawdzisz

5:48czy te elementy tutaj istnieją czy ten tekst się zgadza pamiętaj żeby po

5:52zmianach wykonać detect changes chyba że te zmiany są wynikiem

5:56na przykład działania promisów czy tutaj strumienie rx js czy jakichś

6:01akcji użytkownika w wyniku kliknięcia myszą czy

6:05czy klawisz na klawiaturze to możesz pokusić się o fixture autodetect

6:09changes tylko tutaj detect changes jest zawsze jakby bardziej precyzyjne bo wiesz

6:13dokładnie w którym momencie oczekujesz tutaj wykrywania zmian

6:18pamiętaj o tym że w testach musimy tutaj sami zarządzać wykrywaniem zmian w

6:22prawdziwej aplikacji angulara sam wykrywa te zmiany gdy nastąpi

6:26jakakolwiek interakcja z otoczeniem na przykład jeśli użytkownik tutaj kliknie

6:30gdzieś myszą jeśli na klawiaturę na przykład użyję klawiatury czy

6:34na przykład tyknie zegar bo zegar to też jest zdarzenie które przychodzi

6:39na zewnątrz tak samo nawet jeśli przyjdzie odpowiedz z serwera to też wszystko są zdarzenia

6:44które są wykrywane przez angulara i ona automatycznie spowodują wykrywanie zmian

6:48w testach niestety jeśli nie ma takich efektów jeśli nie ma jakiegoś

6:52zdarzenia tylko my ręcznie zmieniamy dane pamiętaj o tym żeby zawsze tutaj wykonać

6:56wykrywanie zmian żeby te zmiany zostały wprowadzone do html

7:01żeby były tutaj wyrenderowane zostały w naszym komponencie i

7:06w ten sposób możemy wykryć zmiany zaktualizować tutaj szablon

7:10jednak jest to komunikacja tylko w jedną stronę w ten sposób to co my ustawimy w

7:14komponencie możemy jedynie wyświetlić użytkownikowi brakuje

7:19nam komunikacji w drugą stronę czyli jak przetestować sytuacje kiedy użytkownik

7:23wchodzi w interakcje z naszą aplikacją jak zasymulować takie działanie i

7:27zobaczyć czy nasza aplikacja zachowała się prawidłowo czy

7:31prawidłowo zareagowała na jakąś akcję użytkownika o tym

7:35wszystkim już w kolejnej lekcji tak więc do zobaczenia