Angular: Pokrycie linii kodu

Angular 6, 7, 8+

0:00W poprzednich lekcjach tu widziałaś tutaj jak wygląda konfiguracja

0:04narzędzia karma jak dodać przeglądarki jak dodać różne reportery

0:08czyli tutaj informacje o wyniku testów o czym nie powiedzieliśmy

0:13to jak dodać pokrycie linii kodu tutaj w wygenerowanym przez angular

0:17projekcie mamy dodany plugin karma coverage istanbul reporter

0:21i jest tak skonfigurowany żeby to działało z angularem czyli jak tu widzisz mamy już jakie

0:25ustawienia dla coverage czy istanbul reporter jest tu po prostu plugin mamy ścieżkę

0:29gdzie ma być wytworzony raport beta raport po prostu powstanie

0:33jako zestaw plików wynikowych mamy tutaj także

0:38raport jakby z czego mu się składać bo ten sam coverage też możemy skopiować

0:43na różne sposoby możemy też w różnym formacie wyeksportować dla

0:47człowieka do czytania html w którym możemy sobie otworzyć

0:51przeklikać i w tym html'u też możemy różne jakby statystyki uwzględnić

0:56tutaj domyślnie mamy line coverage only może

1:01tutaj więcej statystyk dodać także nie będę wchodził w szczegóły każdego z tych

1:05narzędzi polecam tobie też zobaczyć sobie co to jest coverage istambul

1:10i jakie on udostępnia możliwości tak więc tutaj

1:14mamy karma cover czyli sam reporter i tutaj też możesz zobaczyć jakie

1:18dodatkowe opcje można dodać pokażę natomiast jakie

1:23domyślnie mamy opcje właśnie dla tego instambul reporter i

1:27co nam to daje jeśli chodzi faktycznie o pisanie testów tutaj tak jak

1:31widzisz możesz to karma cover czy istanbul tylko wspomnę dodać tak zwane progi czyli

1:36dodać reguły poniżej których twoje testy pomimo że są napisane to

1:40jakby całościowo testy są niepoprawne nadal jest to błąd mimo

1:45że testy są napisane to jeśli jest ich za mało lub jeśli nie pokrywają wystarczającej

1:49części aplikacji możemy także jakby cały test oznaczyć jako błąd

1:54że jako się nie udało porażka jeśli testy mimo że są poprawne

1:58to jest ich zbyt mało lub one zbyt nieskutecznie określają

2:04opisują twoją aplikację więc tu polecam sobie zajrzeć poczytać ja

2:08pokażę jak takie testy jak taki raport z testów łatwo wygenerować

2:13czyli uruchamiam tutaj konsolę tak jak poprzednio ng test z

2:17jedną małą różnicą tym razem dopiszę opcje code coverage

2:23i takie coś uruchomi dokładnie te same testy ktore robiliśmy przed chwilą te testy

2:28tu chyba się nie udadzą bo to z tego co pamiętam dlatego że ja coś w komponencie zmieniłem więc

2:32ja może coś przywrócę to tak jak było żebyśmy mieli testy pełen sukces

2:40okej mamy sukces bo naprawiłem tutaj te zmiany które robiłem

2:42w poprzedniej lekcji uruchomiła mi się przeglądarka mam tutaj wynik testów

2:47ale to nie wszystko jeśli spojrzymy tutaj do katalogu odświeżę powstał

2:52nam to w naszym katalogu z projektem dodatkowy katalog o nazwie coverage jeśli

2:56ten katalog sobie rozwinę to jak widzisz mamy masę plików mamy jakieś css'y javascript'y

3:00i tak dalej jest to praktycznie strona internetowa raport

3:05z naszych testów w postaci stron internetowych żeby był po prostu wygodny do przeglądania

3:09i ja otworzę sobie tutaj index html i

3:14po prostu to jest sama strona internetowa więc to uruchomię po prostu w naszej

3:18przeglądarce czyli dodam sobie nową kartę okej

3:22i zobaczymy sobie jak to wygląda to jest raport z

3:26pokrycia jak widzisz mamy tutaj katalogi i pliki i dla

3:32każdego katalogu dla każdego pliku mam taki pasek który mówi ile wyrażeń

3:36zostało pokrytych a także ile gałęzi ile funkcji ile linii

3:40czyli zwróć uwagę że pokryliśmy 92% kodu ale

3:44tylko 42% gałęzi co to znaczy gałęzi

3:48zobaczymy wejdźmy w komponent i tutaj tam

3:52gdzie mamy żółto ten część ta część kodu jakby

3:57się nie wykonała ta część kodu się nie pokryła tu nie mamy za wiele logiki spróbuję

4:01przerobić troszeczkę ten komponent i pokazać ci o co chodzi powiedzmy

4:06że w naszym komponencie dopiero tutaj jest konstruktor czyli metoda

4:10która na pewno się wykona pokaże klasa jeśli jest utworzona konstruktor się wykona

4:14i tutaj napiszę jeśli title jeśli

4:20this title to console log mam

4:25title w przeciwnym wypadku i tu

4:31zrobimy drugi console.log nie mam title ten

4:36kod jakby jest tutaj nie znaczący on nic nie robi ma on jedną

4:40tutaj ważną cechę w naszym przypadku teraz ten kod zawsze

4:44wejdzie w tą gałąź kodu nigdy nie wejdzie w tą gałąź bo zawsze mamy tytuł dopóki

4:49nie zmienię tego kodu zawsze będziemy wchodzić w tą jedną gałąź zobaczmy zobaczmy

4:55jeszcze raz teraz raport ja go odświeżę ok 89

5:01wejdźmy do komponentu i tu jak widzisz pojawiła się taka

5:05czerwona linia kiepsko troszeczkę to widać ale

5:10nigdy nie weszliśmy w tą gałąź tutaj czyli w

5:14testach powinniśmy uwzględnić obie sytuacje co jeśli tytuł jest poprawny

5:18i przetestować tą ścieżkę oraz jeszcze raz uruchomić drugi

5:22test w którym sprawdzimy czy na przykład co się stanie kiedy tytułu nie ma i

5:26jak to zadziała jak to wejdzie w drugą ścieżkę tak czyli tym razem mamy pokrycie

5:3089% procent jeśli bym

5:35wykonał test tutaj właśnie który oba te warianty sprawdza

5:40no to wtedy byśmy mieli wyższe pokrycie o tym jak to testować

5:44żeby mieć wysokie pokrycie żeby tutaj sprawdzać różne gałęzie żeby testować funkcje

5:49i linie o tym będziemy sobie mówić w praktyce które pokażę tylko jak takie

5:53raport wygenerować jak w taki raport wejść natomiast

5:57już w trakcie pracy będziemy zaglądać w to pokrycie i sprawdzać

6:01właśnie jak nam się udało tutaj jakie wyniki się udało nam osiągnąć i

6:06też poromawiamy sobie o tym czy na pewno zawsze chcemy mieć przetestowane

6:10wszystko i które gałęzie powinniśmy testować a kiedy jakby

6:14opuszczenie gałęzi nie jest tak istotne nie zagraża jakby bezpieczeństwu aplikacji i nie

6:19jest wymagane pisanie testów specjalnie tylko po to żeby tutaj mieć po prostu wyższy

6:24procent okej to tyle jeśli chodzi o pokrycie kodu zobaczysz

6:28więcej praktycznych przykładów już gdy będziemy faktycznie pisać prawdziwe testy no

6:33i właśnie no właśnie kolejne testy prawdziwe

6:37testy gdzie już będziemy pracować z jasmine więc wyjaśnię tylko kod aplikacji tylko nasze

6:41testy o tym już w kolejnej lekcji tak więc do zobaczenia