Angular: Fixtura komponentu i DebugElement

Angular 6, 7, 8+

0:00W poprzedniej lekcji udało nam się skonfigurować uprząż testową w

0:04której skompilowaliśmy komponenty i utworzyliśmy komponent wraz

0:09z widokiem czyli udało się praktycznie wyrenderować tutaj html z

0:13przypiętą do niego instancją komponentu w tej lekcji zajmiemy

0:17się właśnie fixture czyli tym czymś co zwróciła funkcja

0:21create component to że funkcja create component nie zwraca instancji tylko

0:26zwraca tutaj cały obiekt fixture czyli instancja oraz wszystkie powiązane z instancją

0:30rzeczy takie jak właśnie szablon czy no właśnie zobaczmy co tu się jeszcze znajduje

0:35fixture mamy coś takiego jak autodetect changes

0:40tutaj uwaga bo kuszące może być włączenie tutaj autodetect

0:44o wykrywaniu zmian jeszcze powiemy autodetect wykryje

0:49zmiany tylko w przypadku kiedy my faktycznie symulujemy

0:53jakieś zdarzenie nie wykryje zmiany po prostu zmiennych czy obiektów wykryje

0:58zmiany tak samo jak angular by je wykrywał czy jeśli na przykład ktoś kliknie myszką lub zasymulujemy

1:02jakieś zdjęcie myszką czy klawiatury użyje czy na przykład zasymulujemy

1:06odpowiedź z serwera na przykład promise który się wykonał to autodetect wykrywa

1:10tylko faktycznie jakieś zdarzenia które nastąpiły nie wykryje

1:14zmian takich na sucho mamy też całe detector ref czyli możemy

1:19mieć całym mechanizmem wykrywanie zmian tutaj sterować sobie bezpośrednio z testów o

1:23tym też później możemy sprawdzić czy nie ma zmian component intance

1:27jak widzisz tutaj zwraca nam instancje naszego komponentu ale została tylko sama klasa tak

1:31czyli sam javascript sam type script nie ma tutaj dostępu do widoku component

1:35ref tutaj mamy już

1:40komponent zamontowany na stronie czyli mamy tutaj host view czyli obiekt w którym

1:45jest komponent zamontowany mamy location czyli element html jak na którym

1:49jest wyrenderowany komponent mamy jakąś instancje mamy injector dependency

1:53injection które możemy tutaj zobaczyć jakie są wstrzyknięte elementów

1:58wstrzyknąć jakieś elementy które istnieją już gdzieś w

2:02module lub tutaj na poziomie komponentu host

2:07view czyli jak widzisz możemy z fixture zobaczyć elementy component

2:11sum ale też jakby jego otoczenie miejsce w którym się znajduje i

2:15mamy też debug element w przeciwieństwie tutaj do takiego czegoś jak native element gdzie

2:20mamy zwykły html mamy tak debug element i jak nazwa wskazuje

2:24debug element nie tylko element ale sporo różnych przydatnych

2:28funkcji narzędzi właśnie do operowania na elementu html

2:32o tym za chwilkę tu może sobie to przypisze mamy

2:37jeszcze destroy możemy zobaczyć zniszczyć komponent całkowicie zobaczyć jak on się zachowa możemy

2:41ręcznie uruchomić wykrywanie zmian możemy dorzucać do elementu tutaj w ten

2:45sposób lub w ten sposób do natywnego elementu czyli elementu html który został wyrenderowany

2:50możemy zobaczyć czy akurat nie ma żadnych zmian czy nie jest jesteśmy w

2:54fazie wykrywania zmian tutaj ng zone możemy

2:58zobaczyć sobie tą całą ten obszar całą strefę wykrywania

3:02zmian w których znajduje się komponent zobaczyć w jakim znajduje się stanie czy ma jakieś zadania

3:06czy błędy wystąpiły możemy też uruchomić jakieś zadania

3:11tak jak widzieliśmy mamy masę rzeczy które pozwalają jakby testować ten

3:15komponent i tu jeszcze dwie fajne rzeczy when rendering done i when stable czyli

3:19mamy jakieś animacje można było poczekać na ich zakończenie jeśli mamy jakieś zmiany jeszcze

3:23jakieś operacje które się nie do końca wykonały nie nie nie zostały sprawdzone

3:28możemy także poczekać aż angular zakończy to sprawdzanie i wtedy

3:32zobaczy czy wszystko się prawidłowo wyrenderowało okej bardzo dużo tych wszystkich nowych

3:36informacji zajmuje się na początku tym debug elementem tutaj

3:40ja mogę podciągnąć cały html i mogę sprawdzić

3:44co tu się znajduje na nim i jest to jakiś sposób jednak jest

3:48on mało taki precyzyjny tak bo komponent może mieć dużo html'a a ja bym chciał

3:52testować czy on zawiera pojedyncze elementy a nie chce porównywać

3:56całego html całego komponentu tego może być zbyt dużo

4:00więc zobaczmy co znajduje się tutaj w naszym obiekcie

4:04debug element debug

4:09element tutaj stanowi coś na podobieństwo bardzo prostego

4:13j query możemy powiedzieć i takiej otoczki takie opakowania

4:18na jakiś element html który zawiera różne parametry metody które

4:22pozwalają nam lepiej pracować łatwiej pracować z tym elementem lepiej go na przykład zbadać

4:26czy także wprowadzać różne zmiany zobaczymy mamy taką opcję add child czy

4:30możemy dodać element tutaj do naszego elementu możemy zobaczyć atrybuty

4:34która nie występują możemy pobrać nodes i które children

4:39czyli podać węzły htmlu pobrać sobie jakie się znajdują w środku

4:43pobrać elementy które się znajdują klasę obejrzeć możemy wyciągnąć sobie

4:47instancję komponentu jeśli takowy istnieje na tym debug elemencie możemy też zobaczyć

4:51kontekst kontekst oznacza zmienne angularowe które

4:56są zdefiniowane w ramach tego elementu injector

5:01możemy wstrzyknąć sobie jakieś zależności dependency injection możemy dodać elementy

5:05możemy zobaczyć czy są jakieś event listenery nasłuchujemy jakichś zdarzeń w tym

5:09elemencie nazwa elementu tutaj możemy dostać się właśnie do tego zawartego

5:14w środku tego czystego zwykłego elementu html bez tych angularowych

5:18rzeczy jeśli to nie jest element tylko węzeł html tak samo

5:22może się do niego dostać mamy rodzic właściwości i tutaj najciekawsze

5:26rzeczy mamy coś takiego jak query query all i query all nodes i to

5:30służy nam wyszukiwaniu elementów znajdujących się gdzieś

5:34wewnątrz naszego debug elementu to możemy się zobaczyć czy istnieją jakieś referencje

5:39czy są jakieś elementy oznaczone w angularze krzyżykiem do których mogliśmy

5:43się dostać możemy usunąć element możemy style zobaczyć i tu też bardzo

5:47fajna funkcja bo możemy zasymulować wywołanie

5:51eventu ale nie natywnego ale eventu zdarzenia przeglądarki

5:55to po prostu znaleź sobie jakiś event listener który jest podpięty i

5:59zasymulować jego użycie takiego na przykład jak ktoś klikną w ten element albo klawisz wcisnął

6:04albo jakiekolwiek inne zdarzenie inne html możemy sobie tutaj zasymulować

6:08nie tylko html jeśli mamy jakiś event hander na przykład komponentów mają

6:13swoje własne outputs czyli mają swoje emitery zdarzeń

6:17to także możemy to tutaj zatriggerować czyli wykonać takie

6:21zdarzenie i zobaczyć jak się nasz komponent zachowa okej zaczniemy z czymś prostym

6:25spróbujemy poszukać tu jakiegoś elementu jak już widziałeś jeśli spróbujesz na przykład native

6:29element wyświetlić powiedzmi inner html to już widzieliśmy to

6:33nam wyświetlało po prostu html html

6:37tego elementu tak czyli jak zrobię w ten sposób mamy html a

6:42ja muszę być bardziej precyzyjny powiedzmy że w tym naszym komponencie znajduje

6:47się tutaj troszeczkę więcej rzeczy powiedzmy że mamy tutaj jeden akapit drugi

6:53trzeci i mnie nie interesuje na przykład ten środkowy message

6:58to co możemy zrobić zamiast

7:02pisać cały html tutaj native element

7:07oczywiście można by się pokusić tu o selektory natywne czyli

7:11na przykład query query selector i

7:16zwykły selector tutaj css'owy wykorzystać ale pokaże ci taką metodę

7:20bardziej angularową mamy tu właśnie query i

7:24query zobacz wymaga nie selectora css tylko wymaga predykatu

7:29ważniejsze że angular jest zaprojektowany jako framework uniwersalny czyli

7:33tutaj te testy powinny działać z każdą inną platformą nie tylko z przeglądarką

7:37na przykład była platforma mobilna na powiedzmy telefony mobilne

7:41albo aplikacja desktopowa gdzie nie koniecznie mamy dom

7:46niekoniecznie mamy html to jak widzisz możemy te elementy wyszukiwać na różne sposoby

7:50różne rodzaje elementów musimy tu określić czego my szukamy i

7:54ja też poszukam query by i by to jest klasa która mówi

7:58no właśnie jakiego elementu jakie elementy chcemy wyszukiwać i

8:02zobacz mamy tutaj by na przykład z selenium web driver

8:06protractor mamy jakieś inne jeszcze tutaj z innych

8:10pakietów ale my chcemy testować aplikacje przeglądarkową

8:15taką która jest w przeglądarce internetowej jak widzisz mamy angular platform browser

8:19czyli środowisko w którym chcemy to uruchamiać i stąd właśnie pobierzemy sobie

8:23by jak tu wcisnę enter powinno mi automatycznie zaimportować

8:27jeśli u ciebie się nie pojawiło to spróbuj dopisać sobie import tutaj by z angular

8:32platform browser i tutaj mamy fajną opcję to jest funkcja

8:38klasa która zawiera metody zobacz css i directive

8:42czyli możemy wyszukiwać po sektorach css albo

8:46jeśli w naszym komponencie znajduje się nie tylko html ale znajdują się inne komponenty

8:51inne dyrektywy to nie musimy znać tutaj css żeby

8:55do niej dostać nie musimy znać ścieżki css tylko możemy

8:59od razu wyszukać sobie element my tu jeszcze nie mamy żadnych komponentów więc zacznijmy z czymś prostym

9:03zaczniemy od szukania tutaj po css'ach i powiedzmy że wyszukamy

9:07naszego message i teraz zobacz co zwraca nasz selector query to

9:11selektor query zwraca kolejny element typu

9:16debug element czyli jak widzisz mamy znowu takie fajne przydatne tutaj metody

9:20czyli nie jesteśmy tutaj od razu ustawieni na sam html tylko nadal mamy te wszystkie

9:24tutaj przydatne narzędzia mógłem od razu pobrać tutaj elementy a mówić

9:29dalej query i jeszcze głębiej wyszukiwać jakiś elementów ja

9:33na tym etapie tutaj zostanę z tym sobie przy native element

9:39inner text tym razem razem i

9:43zobaczmy co nam zwróci console log okej

9:51jak widzisz tutaj mamy tylko tekst jeszcze

9:55zmienimy go żeby zobaczyć na pewno ten element udało się znaleźć

9:59tak mamy tylko ten element tam faktycznie w

10:03ten sposób ten nowy test żeby tu

10:07mamy it should create to zostawmy a kolejny test it should render minut będę

10:13task powiedzmy name czyli

10:18nasz message okej

10:22czyli tu znajdziemy element const element message

10:28i sprawdzimy czy element ma oczekujmy

10:32czy tekst czy

10:36jest równy i sprawdzamy czy to jest ten tekst

10:41i jeśli zapisze to w tym momencie powinienem mieć błąd że

10:45message works nie jest równe pustemu tekstowi jeśli

10:49tu wpiszę message works mamy message works tutaj

10:53też fajna rzecz bo nie tylko możemy szukać pojedynczego elementu mogę

10:57wiele elementów znaleźć szukając query all

11:02i tu spróbujemy nie po message którym po akapicie i zobaczymy co nam wyświetli tutaj

11:10nasz obiekt elements tutaj widzisz w konsoli

11:14niezbyt wygodne jak widzisz jest przeglądanie jakieś bardziej skomplikowane elementów więc

11:20pokaż tobie też inny sposób debugowania jeśli chcesz zbadać jakiś skomplikowany element

11:24albo jakąś logikę zobaczyć co tu się dzieje masz jakiś błąd w testach chciałbyś

11:29debugować tu jest bardzo fajna rzecz ja mogę po prostu tutaj w którymś

11:33miejscu w tekście którym chciałbym dowiedzieć się więcej użyć słówka

11:38debugger i jeśli pojawi się w kodzie takie słówko i

11:42otworzymy sobie to w naszej przeglądarce tu niestety nic się nie

11:46dzieje bo jesteśmy jak widzisz w ramce się otwiera kod może

11:50pokażę w ten sposób nasze testy uruchamiane są

11:55tutaj w iframe czyli w ramce jeśli uruchomię ten przycisk debug

12:00to tym razem jak widzisz testy uruchamiamy nie w ramce tylko

12:04już samą ramkę tak nie jest ona opakowana jeszcze w ten dodatkowy

12:08tutaj w tą bramkę i teraz jeśli wyjdę sobie z resources okej

12:13tutaj zapiszę próbuje

12:17się sam uruchomić ponownie f5 jak

12:23widzisz tutaj zatrzymał mi się tutaj

12:27zatrzymala się przeglądarka dokładnie w tej linii w której mam debugger i

12:31mogę zdebugować te elementy mianowicie mam tutaj callstack

12:35mogę dodać do watch jakąś zmienną przejdziemy

12:44dalej przejdziemy dalej jak widzisz

12:48elems wstawia trzy elementy mogę też najechać myszą po prostu i zobaczyć co się znajduje jak widzisz

12:52mamy trzy razy debug element czyli ma wszystkie po kolei elementy

12:56pierwszy akapit widzisz name drugi akapit i

13:00drugi tutaj jak to zobaczymy sobie gdzieś styles classes classes

13:06nie widać też ciekawa rzecz bo w każdej chwili mogę wziąć escape

13:10zrobić tutaj konsole na przykładzie pokazujemy chrome podobnie

13:14jest w firefox i tu oczywiście mamy zmianną elements to też

13:19mogę sobie podejrzeć to w konsoli widzę jej stan na ten moment czyli

13:23w ten sposób już możesz łatwo debugować sobie te testy zobaczyć krok po kroku co się u mnie dzieje może

13:27podejrzeć stan zmiennych i zobaczyć dlaczego test pokazuje że coś

13:32działa bo nie działa albo gdzie w którym momencie coś tutaj nam nie

13:36idzie po naszej myśli okej czyli ja tutaj puszczę luzem a jak już teraz

13:40elems mam wszystkie 3 elementy jeśli potrzebuję mogę całą kolekcję sobie znaleźć akurat

13:45tego nie potrzebujemy więc tak sobie po zamykam żeby te testy działały

13:49tutaj bez problemu okej czyli tutaj nie potrzebujemy

13:53wszystkich to wykomentuje debugger też wykomentuje okej

14:00message works super czyli jak widzisz

14:04w ten sposób możesz bardzo łatwo znaleźć jeden lub więcej elementów

14:08możesz zaś do środka tego elementu i sprawdzić czy on posiada odpowiednie

14:12właśnie właściwości parametry nazwę klasy czy

14:17na przykład tekst zawarty w środku czy równa się czy jest taki sam jak tekst

14:21drugiego którego oczekiwaliśmy okej to tyle jak zauważyłeś

14:26cały czas my renderujemy tekst statyczny nie ma

14:30tu żadnej interaktywności nie ma żadnych tutaj renderowanych danych dynamicznie

14:34więc w kolejnej lekcji zajmiemy się właśnie tym czyli tutaj wyświetlaniem

14:39tutaj dynamicznych interpolacji tak więc do zobaczenia w kolejnej lekcji