Angular: Mockowanie Usług i Observable

Angular 6, 7, 8+

0:00W tej lekcji pokażę ci jak napisać testy dla usługi

0:04oraz jak przetestować prawidłową komunikację pomiędzy usługą a

0:08komponentem szczególnie gdy ta komunikacja odbywa się asynchronicznie

0:12jak taki test na przykład zrobić przy użyciu observable mam tutaj wygenerowaną

0:17usługę task serwis po prostu w katalogu projektu

0:21i mam tutaj też w katalogu tym samym wygenerowany

0:26testy przykładowe dla takiej usługi i teraz oczywiście

0:30żeby przetestować tą usługę trzeba będzie ją stworzyć i będę miał tutaj kilka testów więc

0:34znowu żeby nie powtarzać tych samych tych samych poleceń tworzących

0:38tą usługę dla każdego testu zrobimy sobie znowu before each

0:43czyli przed każdym testem utworzymy nową czystą intencję

0:47tej naszej usługi i znowu nie będziemy robić tego ręcznie tylko dlatego że usługa

0:51w przyszłości może mieć jakieś inne w zależności które

0:55chcemy żeby angular wstrzyknął przygotował czyli nie będziemy testować swoje usługi w oderwaniu

1:00tylko stworzymy sobie cały moduł testowy identycznie jak

1:04przy komponencie tym razem jednak nie będziemy deklarować żadnych komponentów będziemy

1:08definiować tutaj providers czyli tutaj konfigurację dependency injection dla naszej

1:13usługi no i chcielibyśmy właśnie skonfigurować task service czyli

1:17jeśli tutaj ktoś jakiś komponent inna usługa poprosiła task service no

1:21to żeby taki tesk service został dla nas utworzony i teraz

1:26jak można tutaj to przekazać sobie ten task service do testu

1:30czyli sprawdził ten pierwszy test it should be

1:34created czyli identycznie jak przy komponencie robiliśmy to wcześniej tu

1:40sobie zrobimy test i teraz nie chcę tu robić jej ręcznie bo przez

1:44new task service dlatego że w ten

1:48sposób jeśli ta usługa wymaga innych usług trzeba by tu coś wstrzyknąć przez

1:52konstruktor musiałnbym to samo robić ręcznie a ja nie chcę tego robić ręcznie chcę

1:56żeby to zrobił angular i to jest bardzo fajna metoda pomocnicza dlatego

2:01że mógłbym zrobić tutaj test bed get pobierać w

2:05ten sposób za każdym razem tu gdzieś po tokenie pobierać

2:09instancję jakiegoś elementu czy zrobisz task

2:13service tu jeszcze alternatywnie jest opcja jeśli nie

2:17znaleziono czyli można podać jakąś alternatywą wartość jeśli nie znaleziono to

2:21jest jedna opcja druga opcja to jest taka specjalna funkcja inject

2:26ja mogę cały test otoczyć funkcją inject która

2:30jako pierwszy argument przyjmuje listę tokenów a drugi

2:34funkcję do której ma je wstrzyknąć czyli mogę tutaj przekazać

2:38listę usług komponentów dowolnych zależności które są skonfigurowane

2:43w tym module i to będzie to będzie mi wstrzyknięty tutaj jako pierwszy

2:47argument w tej funkcji czyli task service na przykład w ten sposób albo

2:51service możemy tak to nazwać też okej

2:56i jeśli by tu było więcej jakichś parametrów to one w tej samej kolejności jak

3:00je zadeklarowałem tutaj pojawią mi się jako argumenty funkcji czyli jeśli teraz spojrzymy sobie na

3:04serwis nie mamy tutaj żadnego typu więc jeśli jeszcze warto by tutaj

3:08otypować sobie ten nasz serwis i teraz by nam podpowiadało tutaj wszystkie

3:12pola metody tej klasy którą właśnie wstrzykujemy

3:16i zaraz co my chcemy przetestować nasza

3:20usługa task chciałbym żeby pozwalała mi pobierać listę

3:24zadań którą możemy przekazać do komponentu aby je wyświetlił i jeśli

3:28któreś zadania zmienię edytuję i kliknę zapisz to także chciałbym

3:33żeby ten serwis tutaj ta usługa pozwalała właśnie obsłużyć

3:37zapis no właśnie takiego taska nie będziemy tutaj komunikować się

3:41z serwerem chciałbym zamockować tą usługę przygotować jakieś takie proste

3:45api żeby ją spiąć z komponentem

3:50i zobaczyć czy komplement prawidłowo komunikuje się z tą usługą czyli

3:55po pierwsze sprawdźmy czy ta usługa się nam utworzyła czyli pierwszy test to będzie

3:59expect serwis to

4:03be czyli czy jest on prawdziwy czy został

4:08utworzony jeśli otworzę tutaj testy no

4:12to mamy na zielono 16 na 16 jednak jeśli pracuję nad tą

4:16usługą tych testów jest bardzo dużo to oczywiście nie koniecznie musimy uruchamiać wszystkie

4:20za każdym razem możemy tutaj znowu przełączyć żeby tylko te testy

4:24się wykonywały które mamy tutaj i teraz jeden test się uruchamia

4:29tutaj a pozostałe 15 jest pominięte tylko pamiętać o

4:33tym żeby później to wyłączyć okej czyli usługa jest utworzona to

4:38jedna rzecz z głowy teraz faktycznie testujemy działanie czyli

4:42should powiedzmy fetch tasks

4:49czyli jakaś funkcja jakieś

4:52api do pobierania zadań i kolejny

4:56test to będzie should safe task

5:01i powiedzmy jakiś api powiedzmy że serwis no

5:05i tu jest znowu żeby go utrzymać musiał go tutaj wstrzyknąć i znowu

5:09jeśli chcemy wstrzykiwać praktycznie przy każdy teście

5:13to możemy takie wstrzykiwanie także przenieść do before each

5:17czyli mógłbym tutaj stworzyć let service typu

5:22task service i to całe wstrzykiwanie przenieść

5:26do sekcji before each inject

5:31czyli to samo co tutaj mieliśmy i

5:39tutaj zamiast testu po prostu service równa

5:43się i tu musimy zmienić nazwę żeby ta nazwa nie kolidowała nam z tą bo inaczej

5:47nie do tej zmiennej więc może tutaj napiszę task service

5:53innej nazwy użyje i przypiszę do tej zmiennej ten parametr

5:57który tu dostajemy okej service i teraz

6:01w kolejnych testach nie muszę już tego injectować dlatego

6:08że serwis powinien tutaj nam być dostępny z tej zmiennej zobaczmy

6:14udało się i teraz w kolejnych testach mogę po prostu już

6:18używać sobie tej zmiennej task service i tu właśnie stworzę nasze nowe api czyli

6:23powiedzmy fetch all będzie

6:27to funkcja która pobiera wszystkie zadania tutaj mi od razu

6:31podpowiada edytor czy chciałbym zadeklarować jeśli wybiorę zadeklaruj można zrobić

6:35to ręcznie można zrobić to automatycznie i wybiorę zadeklaruj jak widzisz tutaj automatycznie

6:39w tym pliku w tej klasie pojawiło mi się tutaj metoda i z błędem

6:43not implemented jeszcze raz spróbuj uruchomić powinno to ładnie pokazać

6:48mi tutaj na czerwono że nie ma takiej metody muszę zapisać oba pliki

6:52na pewno o i już mamy tutaj testy się nie udały ponieważ w

6:56tym zadaniu mamy błąd method not implemented ale to nie szkodzi opiszmy

7:00dokładnie cały test i wtedy zajmiemy się naprawą błędów implementacją żebyśmy najpierw

7:05zrobili test później sprawili żeby on działał czyli napisali

7:09implementację a później poprawili ewentualnie tutaj jakieś zmiany poprawki w

7:13obu częściach czyli powiedzmy że fetch all właśnie

7:18miałbyć typu observable czyli tu ja chciałem się zasubskrybować zobaczyć

7:22czy dostanę jakieś odpowiedzi aby to działało musimy ustawić typ

7:26observable any lub

7:31observable task i tutaj nie mamy

7:35typu task ja na chwilkę zajrzę do naszego komponentu task

7:39list item i tutaj mieliśmy gdzieś specyfikację

7:43naszego taska zobaczmy jeszcze nasz komponent no

7:49właśnie tutaj interface task on znajduje się w tym miejscu i

7:54warto go wyłączyć do następnego pliku dlatego że będziemy go współdzielić pomiędzy kilkoma różnymi

7:58plikami ja sobie klikam żarówkę do osobnego pliku i utworzył

8:02mi się plik task który zawiera ten nasz interfejs i

8:07teraz w teście task service tutaj mi znowu podpowiada edytor

8:13jeśli ci tu nie podpowiada to można zrobić to po prostu ręcznie fajnie

8:17jak edytor takie coś wspiera taki refaktoring czyli podpowiada

8:21co można tutaj przenieść co można zaimportować okej czyli mamy tutaj task i

8:26teraz tu mogę zrobić subscribe i

8:31tutaj dostanę obiekt

8:35typu task czyli tablica zadań i teraz jak sprawdzić czy

8:40to działa no najprościej po prostu tutaj wykonać expect

8:45i sprawdzić czy task czyli to co dostaliśmy tu

8:50equal nie to be tutaj żeby nie jechać to są te same obiekty tylko

8:54to equal są takie same obiekty i tu stworzyć jakąś tablicę zadań

8:58czyli powiedzmy id 1 2 3 tu

9:04jeszcze mogę sobie podpowiedzieć że to jest task by mi wtedy ładnie podpowiadał typy

9:11i teraz jak mam typ tu może mi właśnie podpowiedzieć title i czy

9:18oczekuje jakiś testowych danych jednak tego nie dostanę bo po pierwsze

9:22ta metoda zwraca zawsze error no a po drugie nizasymulowałem

9:28tej metody i teraz ja nie chce faktycznie tu od razu ją implementować chcę

9:33zasymulować działanie czyli muszę sprawdzić jak muszę

9:38jakoś podstawić te dane że w momencie kiedy wykonam funkcje fetch all żeby

9:42klasa task service faktycznie odwoływała się do jakiegoś źródła stamtąd

9:47pobrała dane i ja muszę pod to źródło podstawić tej naszej

9:51klasie dane żeby pobrała nieprawdziwe dane sprzed serwera tylko wybrała

9:55jakieś fałszywe dane z tego źródła żebym mógł sprawdzić te fałszywe dane podstawione

9:59zgadzają się z tym danymi których ja tutaj oczekuję powiedzmy więc

10:03że nasza usługa task service będzie faktycznie tutaj bardzo prostą usługą

10:08które od razu bezpośrednio próbuję pobierać takie dane z serwera

10:12czyli tu powiedzmy ma http jest to http client

10:16nie selenium web driver tylko

10:20z pakietu tutaj angular common

10:24http i powiedzmy jeśli tutaj ta metoda wykona

10:29metodę get z pakietu http client no to spowoduje to zapytanie

10:33do serwera i teraz my chcemy to przechwycić żeby zamiast

10:37prawdziwego zapytaj do prawdziwego serwera żebyśmy mogli podłożyć podstawić

10:41jakieś tutaj oszukane dane zmockowane i sprawdzić czy

10:45funkcja prawidłowo zwróci to co jej podstawiliśmy i teraz jeśli chcemy inne tutaj

10:49usługi testować no to prosta sprawa wystarczyło by do providerów dodać tą inną

10:53usługę zrobić szpiega i zamockować wywołanie metody http

10:58get z http client jest o tyle ciekawy że angular nam dostarcza jakby

11:02gotowe narzędzia do pracy z http jeśli tutaj spojrzysz na http

11:06common http tutaj jeszcze ma taki pakiet jak testing

11:11i w pakiecie testing mamy http

11:15klient testing module oraz http testing

11:19controller tu są dwie fajne rzeczy po pierwsze tutaj w provider'ach nie

11:23mogę podstawić prawdziwego modułu http dlatego że powodowały

11:27to prawdziwe zapytanie do prawdziwego serwera z prawdziwą bazą danych tego nie chcemy

11:31zamiast tego mamy właśnie ten testing module który

11:35pozwala nam wszystkie zapytania przechwycić i zamockować czyli

11:39postawić fałszywe odpowiedzi i teraz do podstawiania tych

11:44fałszywych odpowiedzi do sterowania zapytaniami używa się ten http testing controller

11:48jest to coś co pozwala nam zsymulować serwer w sensie przechwytywać

11:53wychodzące requesty sprawdzać co się w nim znajduje a także

11:57symulować odpowiedzi dla tych request'ów tak żeby nasz kod jemu

12:01wydawało się że jest prawdziwym serwerem a tak na prawdę będzie rozmawiał z naszym testing

12:06kontrolerem czyli musimy zasymulować komunikację z serwerem żeby tego użyć

12:10oczywiście to normalna usługa muszę ją wstrzyknąć ja sobie tutaj zdefiniuję zmienną

12:14controller typu http testing controller

12:18i podobnie jak nasz serwis tu sobie go wstrzykniemy

12:22czyli oprócz serwisu zrobimy jeszcze http controller

12:27i controller równa

12:31się http controll czyli to wstrzykniemy

12:36tutaj do tej lokalnej zmiennej wstrzykujemy nasz controller teraz jak taki kontroler

12:40działa jeśli ja tutaj robię fetch all to robiąc fetch all

12:44ja oczekuję że ta nasza usługa task serwis zrobi zapytanie do serwera

12:48więc jak robiąc tutaj fetch all na

12:53naszym kontrolerze mogę powiedzieć że oczekuję żadnych tutaj

12:58zapytań oczekuję jednego zapytania lub oczekuję specjalnego

13:03zapytania które pasuje do jakiegoś wzorca mogę też sprawdzić

13:07czy wszystkie zapytania zostały przechwycone czy nie zostało żadnych nieoczekiwanych

13:11tutaj nie ma nieoczekiwanych zapytań do serwera zacznijmy więc może od sprawdzenia czy mamy

13:15request tutaj potrzebujemy url tu podam tasks

13:19na przykład przykładowy url tu opis czyli

13:24coś tam się w błędach wyświetli czyli na przykład tasks api

13:29and point okej i

13:33takie coś zwraca nam obiekt typu test request czyli zobaczmy

13:37sobie const request i

13:43teraz request pozwala nam zanalizować zapytanie czyli

13:48jeśli faktycznie było zapytanie to zapytanie będzie pasowało

13:52do tego wzorca tutaj możemy zobaczyć szczegóły takiego zapytania na

13:57przykład zobacz tu właśnie request zobaczysz sobie ciało

14:01requesta nagłówki metoda parametry i tak

14:05dalej czyli możemy sobie podejrzeć takie zapytanie i teraz

14:10zobaczymy co testy teraz na to okej

14:15tutaj testy nie zadziałają bo mamy ten nasz błąd

14:20nie może wstrzyknąć http client do naszej usługi task service

14:24no właśnie to nie do providerów teraz

14:28oczywiście moduł więc do importów tutaj

14:32mój błąd zobaczmy teraz w method not implemented okej

14:37spróbujmy tutaj wykonać zapytanie this http

14:42get tasks okej tutaj

14:51mu się typy nie będą zgadzały bo otrzymujemy taska więc na chwilkę to zmienię na any

14:59i mamy tutaj sukces ja spróbuję tutaj zobaczyć jeszcze co się pojawiło

15:04w tym request to jest

15:09jedna opcja do debugowania z console logiem możemy także mając tutaj request na

15:13przykład debugger i jeśli mamy

15:17otwarte tutaj okno jasmine nie możemy tu uruchomić debuggera

15:21dlatego że to jest nakładka jeśli chcemy faktycznie zobaczyć co się dzieje w

15:25środku w naszych testach to tutaj klikając debug możemy jak widzisz bez tej

15:29tego całego całej nakładki tylko wejść faktycznie uruchomić się w

15:33okienku testów i tutaj mamy konsole mamy jak widzisz wszystkie testy i

15:38jak odświeżę z otwartym narzędziem deweloperskim to nam się elegancko to

15:42zatrzyma w teście powiększę tutaj trochę konsolę

15:47żebyśmy widzieli jak widzisz

15:51jest to nasz test nasz kod źródłowy timescript i mogę sobie przejrzeć właśnie

15:55request tutaj widać nagłówki zapytanie get nie mamy

15:59żadnych parametrów url task czyli faktycznie metoda

16:04nasza fetch all wykonała zapytanie i przechwyciliśmy

16:08to zapytanie i teraz co możemy jeszcze zrobić możemy

16:14zanalizować to zapytanie możemy sprawdzić czy ono faktycznie istnieje

16:18jeśli on mi się pomylił i wpisał inny url zobaczmy

16:26testy tu trzeba faktycznie jeśli mamy zablokowane

16:30to muszę zwolnić blokadę i spójrz

16:35spójrzmy sobie expected matching request for criteria task api endpoint

16:39found none czyli dokładnie ten nasz opis tego endpointa tutaj

16:44mamy w będzie że ten endpoint tutaj nie było request na ten endpoint

16:48a był jeden oczekiwany czyli jak widzisz on sprawdza czy faktycznie to

16:53api wykonuje wszystkie zapytania do serwera których oczekujemy co możemy

16:57jeszcze zrobić możemy faktycznie zasymulować jakąś zwracana wartość czyli

17:02powiedzmy że potrzebujemy tych tasków więc jak mam nasz request możemy

17:08zrobić tak zwany flush event lub error

17:12czyli możemy zasymulować błędną odpowiedź serwera na przykład

17:16tutaj błąd połączenia z siecią ale i tak dalej możemy pojedynczy

17:20event na przykład jeśli symulujemy pobieranie pliku albo upload pliku i chcemy mieć wiele

17:25eventów na przykład o postępie pobierania ile procent się pobrało możemy to symulować jeśli chcemy

17:29całą odpowiedź od razu zwrócić to mamy flash tutaj zobacz

17:33musimy przekazać praktycznie no właśnie odpowiedź body czyli

17:37tutaj właściwie mógłbym mieć dokładnie to samo co tutaj czyli listę naszych tasków

17:43bez tych nawiasów czyli tu przekazuję odpowiedź z serwera zasymulowaną

17:47okej success i teraz

17:51uwaga bo zobacz jeśli zmienię tutaj na przykład test task 2

17:59to zobaczmy okej udało się porównuje jak widzisz title

18:03test to jest teraz 2 tu equal test task czyli faktycznie to działa tutaj

18:10metoda subscribe wychwytuje odpowiedź

18:14tutaj z serwera czyli po pierwsze sprawdzamy że oczekuje odpowiedzi

18:19po tym jak wysłałem zapytanie nie przed a

18:24następnie jak mam zapytanie mogę na nie odpowiedzieć czyli mogę

18:28tutaj zwrócić i jakieś wyniki jeśli one się zgadzają to ten test

18:32nam zadziała i sprawdzi czy zasymulowane zapytania do

18:36serwera zwróciło faktycznie poprawną odpowiedź jeśli tutaj chcemy mieć

18:40poprawne typy to fajną rzeczą jest to że metoda get jest tutaj generyczna ja mogę

18:45przekazać typy zwracania odpowiedzi i wtedy upewnić się że to co wyjdzie z get będzie

18:49pasowało tutaj do naszego typu okej i zaraz zobaczmy jeszcze

18:53i mamy tej success i jeśli zrobisz

18:57kolejną metodę czyli save task może zrobić zupełnie

19:02analogicznie czyli też tasks service w

19:07tym miejscu tym razem nie fetch all tylko właśnie na przykład save i

19:12tu mogę zasymulować jakiegoś taska czyli też sobie wymyślę jakieś const task

19:18zróbmy go jeszcze typu task

19:20żeby mi tu pilnował przekażemy task do środka

19:25i możemy zasubskrybować na odpowiedź i

19:30w odpowiedzi no właśnie mógłbyś sprawdzić czy się udało go

19:34zapisać ale przedtem sprawdzimy czy faktycznie było

19:39zapytanie do serwera czyli sprawdzamy na przykład expect

19:43one i tutaj jest jeszcze kilka możliwości po do

19:47expect one mogę dać url i opis zwykłego geta robić

19:51bo mogę parametry opis mogę funkcje

19:55match'ującą przekazać to dostanie request i mogę sprawdzić czy to jest fałsz czy

20:00prawda tutaj możemy też

20:05tak zwane obiekt request match i możemy

20:09też zrobić to naszym tutaj match i

20:13match oczekuję tutaj no właśnie obiekt typu request match lub

20:17funkcja spróbujmy z obiektem jak widzisz tutaj mamy opcję method czyli

20:21mogę powiedzieć że to jest post bo chcemy zapisać naszego taska i url

20:26powiedzmy także tasks czyli jak widzisz mogę oczekiwać też różnych

20:30metod różnych szczegółów mógłbym też zrobić funkcję która dostaje tutaj request

20:35cały i wtedy dokładnie powiedzieć wszystko url parametry i tak dalej

20:39jest wiele możliwości porównywania i powiedzmy że odpowiemy

20:43na request czyli request flash coś

20:49tu poszło nie tak test request czemu

20:53tu mamy tablice no

20:57tak bo to znajdzie wiele odpowiedzi spróbujmy expect

21:05one spróbujmy teraz flush no

21:09właśnie expert one ma te same parametry przyjmuje ale właśnie wymaga jednego konkretnego że

21:13tylko jeden match jak widzisz pozwoli znaleźć wszystkie wysłane

21:17które pasują do jakiegoś wzorca nam wystarczy jeden więc znowu zrobimy flush

21:21i powiedzmy że no właśnie tutaj co

21:26mamy możemy tylko body przesłać czyli będzie to nasz tasks powiedzmy

21:30zapisany ale oprócz tego mam tu jeszcze opcję i możemy

21:34dodatkowo przekazać na przykład status że tu będzie 201 na przykład czyli utworzono

21:38zadanie czy powiedzmy że wysyłam go no właśnie wyszedł bez

21:42id a będę oczekiwał że przyjdzie do nas z

21:47id czyli utworzymy tutaj tasks

21:51id na przykład w ten sposób czy tu jest task

22:00częściowy

22:02task bez id przekazujemy do środka ok

22:09i w subscribe expect task

22:14to be defined

22:18na przykład i expect task kropka id

22:23to be defined na przykład w ten sposób i

22:27teraz znowu zadeklaruję sobie metodę bo jej nie ma mam błąd że save nie jest function

22:31czyli deklarujemy metodę tu oczywiście będę narzekał że jest niezdefiniowane

22:37typ zwracany tym razem to będzie nie any tylko

22:41będzie to jeden task zapisany a przyjmujemy tu jak ten typ sobie obeszliśmy tutaj

22:45partial task czyli task który może nie mieć pewnych pól może nie mieć id

22:49i odpowiednio return this i

22:53nie get tylko post czyli http post bo chcemy

22:57dopasować do tego typu tutaj które mamy w tym miejscu post status

23:01201 to

23:06właśnie można by jeszcze by sprawdzić test status ale to sobie już podarujemy

23:11czyli tak samo tasks i tu przekaże

23:15nasz task do zapisania i

23:20typ się oczywiście nie zgadza dlatego że w przy poście identycznie też

23:24mogę określić jaki jest oczekiwany zwracany typ serwera

23:28zapiszę zobaczymy teraz jeszcze jakiś błąd status

23:33test status text is required when setting a custom status

23:37no właśnie status

23:41text created czyli udało

23:45się utworzyć zobaczmy i mamy sukces czyli jak widzisz analogicznie

23:50mamy metodę save która już ma jakieś przekazywane body

23:54jakieś parametry też mogliśmy sobie je porównać i

23:58tu przy expect one mamy tylko

24:02method url gdybyśmy chcieli sprawdzić body

24:07no to tutaj niestety musimy korzystać z tej bardziej zaawansowanej

24:11metody czyli trzeba by przekazać tutaj funkcję i sprawdzić faktycznie czy zawiera

24:15body czyli zrobić tu request i

24:22sprawdzić tutaj odpowiednio czy method się zgadza czyli expect czyli

24:27sprawdzić czy request breakfast method

24:32równa się post request

24:37body równa się task

24:43tutaj nie przecinek and to trzeba zwrócić żeby powiedzieć

24:47czy to jest prawda czy fałsz robimy w ten sposób sprawdźmy jeszcze faktycznie

24:51czy to na pewno działa okej

24:56czyli jak widzisz możesz w bardziej zaawansowany sposób sprawdzić czy ten request jest

25:00poprawny czy zawiera wszystkie potrzebne informacje okej i

25:05teraz jeśli mamy taką przetestowaną usługę i chcielibyś spiąć

25:09ją z jakimś komponentem czyli powiedzmy nasz task service

25:14to jest coś co jest wymagane na przykład w komponencie task

25:19list component task list component i

25:26tak list component spec i powiedzmy

25:30że component chcielibyśmy wstrzykiwać do niego usługę jeśli on tu

25:34będzie wymagał naszego powiedzmy

25:38task serwisu i zrobimy żeby te testy

25:42też się uruchamiały to się może pojawić trochę problem

25:46no właśnie wymaga on tutaj task serwisu

25:51a task service wymaga http clienta i

25:55jest to problem dlatego że nie chcemy żeby nasz task list próbował

25:59ładować cały http client dlatego co możemy

26:03zrobić tutaj w providerach chcemy zrobić

26:07stap czyli chcemy podmienić tą usługę na coś co wygląda jak

26:11usługa ale nią nie jest czyli provide niby

26:16chcemy wziąć task service ale tak naprawdę w jego

26:20miejsce chce wstrzyknąć jakiś mock czy tutaj

26:25jasmine pozwala mi stworzyć szpiega albo

26:30cały obiekt szpiega i obiekt szpiega ma tutaj różne ciekawe

26:34opcje mogę nadać mu nazwę na pewno i metody

26:39zdejmę mu nazwę task service i

26:43metody będzie to tablica lub

26:47obiekt spróbujmy z tablicą i potrzebuję tych dwóch metod naszych

26:51czyli będą to save

26:56i fetch all fetch all

27:02no okej i teraz do naszych testów musimy wstrzyknąć tą usługę task serwis

27:06czyli tak jak robiliśmy to wcześniej po prostu do komponentu

27:12should fetch

27:16data from service tu robimy inject

27:20dlatego że potrzebował będę właśnie tego naszego task

27:24service i tutaj

27:30ja oszukam troszeczkę bo powiem że to jest tego typu mimo że nie

27:34jest chcę żeby było tutaj podpowiadał mi właściwe

27:38metody na tej usłudze naszej service ale

27:44te metody nie będą prawdziwe metody tej usługi tylko będą tymi zmockowanymi tutaj już

27:48szpiegami czyli spróbujemy wywołać fetch all

27:52no właśnie mogę powiedzieć że jest to task service albo

27:56jeszcze lepiej mogę powiedzieć że to jest szpieg

28:03typu task

28:08service i wtedy nasza metoda fetch all ma wszystkie parametry szpiega czyli

28:12w ten sposób mogę sobie zaszpiegować te odpowiednie informacje czyli

28:17powiedzmy że oczekuję że nasza metoda fetch all

28:22to have been called została wykonana ale nie

28:26od razu tylko po tym jak wykonam metodę powiedzmy

28:30fetch data

28:35naszym komponencie zadeklaruj metodę

28:39fetch data i metoda fetch data właśnie ma skorzystać z usługi czyli

28:45service fetch all subscribe

28:50data i powiedzmy że tu będą nasze zadania tasks i

29:03nasze data przy przypiszemy tutaj do this tasks to

29:07się równa data data jest typu task tu się wszystko

29:11zgadza zobaczmy

29:15testy fetch data i czy funkcja była wykonana

29:21funkcja była wykonana ale nie udało mu się zrobić

29:26subscribe tutaj bo oczekiwał że coś dostanie z powrotem nie chcę pobrać oryginalnej

29:30funkcji dlatego tutaj nasz fetch all przygotjemy

29:34go żeby zasymulował jakąś odpowiedź czyli and call fake

29:41return value i tu stworzymy sobie wartość

29:45czyli jakiś operator of z ng

29:51tak i zasymulujemy tablice

29:56jakiś tam zadań czyli to będzie as task

30:01okej tak jak wcześniej to robiliśmy

30:05czyli tu podpowiemy sobie id i ten 2 3 title

30:10test i sprawdzimy czy to have been called

30:14i możemy sprawdzić co zwróci nasze fetch data mianowicie

30:19po fetch data możemy sprawdzić czy komponent tasks

30:27ma dokładnie te same tutaj

30:32obiekty tą samą tablicę zadań okej sukces

30:39sprawdźmy jeszcze czy ten test na pewno nie jest dziurawy zmienię na dwójkę

30:43i dokładnie sprawdzę to co potrzebujemy czyli jak widzisz wspinając

30:47komponent z usługą nie chcemy używać prawdziwej usługi chcemy pod

30:52tą usługę wsadzić coś co pozwala przechwycić symulować właśnie

30:56jej api czyli przesłać jakichś szpiegów pojedynczych szpiegów lub cały tutaj spy

31:01object który pozwala zasymulować to natomiast wstrzykując to ja

31:05mogę określić jakiego typu ja oczekuję że on myśli że wstrzykuje mi

31:09task service a wstrzykuje mi szpiega ja sobie w typach oznaczam że to jest szpieg

31:13dzięki temu właśnie mogę tutaj mockować odpowiedzi mogę

31:18sprawdzać czy funkcja została wykonana mogę sprawdzać jakie parametry funkcja zwróciła

31:22jest jakaś podstawa testowania właśnie relacje między usługami

31:27byśmy też testowanie usług i testowanie właśnie usług

31:31które wymagają innych usług innych modułów nawet gdy te moduły pochodzą właśnie

31:35z angulara i testowanie odpowiedzi zapytań do serwera więc

31:40to pozwala jakby zamknąć jakby podstawy testów jednostkowych

31:44o testach będziemy jeszcze rozmawiać w kolejnych lekcjach

31:48zająłem się jednak architekturą zajmiemy się jednak praktycznym podejściem do

31:52budowania aplikacji na troszkę większą skalę niż pojedyncze

31:57komponenty i usługi ale o tym wszystkim już w kolejnych lekcjach więc do zobaczenia