Angular: Konfiguracja testów

Angular 6, 7, 8+

0:00W tej lekcji pokażę ci jak uruchomić testy jednostkowe jak

0:04ustawić konfigurację oraz pokażę ci w jaki sposób te testy

0:08faktycznie są uruchamiane jaki mechanizm jest wykorzystywany pokaże

0:12tobie także jak czytać te komunikaty właśnie z tego test

0:16runnera czyli informacje o tym co się udało co co działa co nie działa w naszej

0:20aplikacji oraz także jak skonfigurować i uruchomić przejrzeć raporty

0:25typu code coverage czyli jak zobaczyć które części aplikacji faktycznie

0:29są przetestowane a gdzie mamy jeszcze braki które części jakby naszej

0:33aplikacji wymagają dokładniejszego przetestowania jak

0:37pamiętasz przy generowaniu projektu użyliśmy tutaj opcji właśnie żeby angular od

0:42razu dodał testy czy to już przy app jak widzisz już znajduje się jakiś

0:46tutaj plik spec kropka ts i jest wygenerowany przykładowe test dla

0:50komponentu i mamy tutaj przykładowy test

0:54także dla modułu nie dla modułu tutaj nie wygenerowało się test czyli mamy jeden test tutaj wygenerowany

0:58jeden plik testów i aby uruchomić testy uruchamiamy polecenie ng

1:03test sobie dopisze jeszcze help żeby pokazać tobie jakie opcje są dostępne

1:07czyli przy uruchamianiu testu możemy ustalić jakie

1:11przeglądarki chcemy uruchomić czy chcemy raport

1:15z pokrycia kodu możemy wybrać inny plik konfiguracyjny niż tutaj domyślny

1:19plik karma conf o tym sobie za chwilkę powiemy możemy wybrać

1:23różne środowiska czyli możemy skompilować tutaj aplikację dołączając jeden

1:27z wybranych plików w tych plikach możemy przekazać różne konfiguracje czyli na przykład

1:32chcemy co innego przekazać na przykład jako zmienne tutaj gdy

1:36testujemy aplikacje co innego chcemy przekazać z aplikacji już publikujemy produkcyjnie

1:41na przykład ustawienia jakieś na przykład adresy powiedzmy

1:45serwera tak serwera tak serwer produkcyjny będzie na innym adresie niż serwer na przykład testowy

1:49tutaj czy mamy także source mapy generować czyli mamy

1:53informacje dla przeglądarki o tym jak przestawić

1:58tutaj konfiguracja możemy dać który plik chcemy

2:02uruchomić tutaj jeśli korzystamy z maszyny

2:06wirtualnej i tutaj nie wykrywa tobie zmiany w plikach możesz przełączyć

2:10na opcję poll która będzie po prostu zamiast czekać na komunikat o zmianie

2:14plików co ileś milisekund będzie to sprawdzało możemy

2:18przełączyć plik polyfill na inne rzeczy jak wspomniałam w poprzedniej lekcji mamy

2:23plik polyfills dla starszych przeglądarek możemy specjalnie dla testów jakby

2:27zmienić ten plik na inny żeby tylko w przypadku testów testować przy użyciu innych polyfilli

2:32tutaj jeśli mamy symlinki dowiązania

2:36symboliczne zamiast prawdziwych plików tutaj czy to ma działać flaga

2:40produkcyjna czy chcemy testować w wersji deweloperskiej czy chcemy przetestować naszą aplikację jak ona się

2:45zachowa właśnie w wariancie produkcyjnym mam

2:49też informację czy mam wyświetlać progres które pliki konfiguracyjne i

2:54coś co nas będzie interesowało to jest opcja watch czyli czy chcę obserwować

2:58zmiany w plikach i uruchomić jeszcze raz te testy kiedy te

3:02zmiany się wprowadzą w większości przypadków te opcje nie musimy ich zmieniać wystarczy

3:06po prostu uruchomić ng test i taka opcja po prostu uruchomi

3:10z ustawieniami które mamy tutaj w pliku karma conf js tu

3:16niech się uruchamia proces a ja w tym czasie powiem to co się dzieje

3:20w tym pliku karma conf js po pierwsze karma zobacz co tutaj karma runner github io

3:25to jest takie narzędzie które pozwala uruchomić

3:29różne mechanizmy testów możemy takie testy sobie przypiąć w dowolny

3:33framework jakby testowy możemy to przypiąć do karma runnera a z drugiej strony możemy

3:37przypiąć do karma runnera dowolne środowisko dowolną przeglądarkę lub urządzenie

3:42jak przyjrzysz się tutaj temu plikowi tutaj eksport z tej funkcji mam

3:46coś takiego jak config set pokazujemy w którym miejscu jest nasza ścieżka bazowa

3:50czyli od którego katalogu chcemy rozpocząć i zwróć uwagę mam

3:54tutaj frameworks czyli mam dodany jako pierwszy jasmine i teraz tak tutaj

3:58może otworzę sobie otworzyła nam się przeglądarka okno przeglądarki o tym za chwilkę tutaj

4:03polecam sobie tobie spojrzeć na adres karma runner github i

4:08zobaczmy sobie także jasmine

4:12jasmine mam nadzieje że wyszuka no właśnie jasmine

4:16javaskryptowy tutaj jasmine to jest biblioteka do testów i biblioteka jasmine

4:20zapewnia tutaj asercję czyli zapewnia mechanizmy do

4:25faktycznie pisania kodu testów do określania czy coś działa

4:29lub nie działa karma natomiast przyjmuje takie specyfikacje

4:33i uruchamia je w przeglądarce tutaj jak uruchomiłem te testy

4:37to jak widzisz tutaj pokazało mi się że uruchamia chroma z

4:43nielimitowaną tutaj konkurencją co to znaczy że możemy ustawić

4:47ile przeglądarek na raz ma być uruchomione w testach jeżeli już mam wolny komputer to

4:51ustawiamy sobie tutaj ilość tych przeglądarek na mniejszą

4:55na przykład na dwie na raz albo jedna na raz w kilku przeglądarkach jednocześnie

4:59testować muszę zobaczyć czy aplikacja działa tak samo prawidłowo w chromie

5:03w explorerze firefoksie na urządzeniu mobilnym możemy dodać

5:08dodatkowe przeglądarki i jak to się odbywa po pierwsze tu z jednej strony przypinamy framework jasmine

5:13czyli wybieramy jaki mechanizm będzie faktycznie uruchamiał nasze testy jak

5:17w jakim formacie będziemy te testy zapisywać dodatkowo możemy dodać tutaj dodatkowe pluginy

5:21tutaj musi być tutaj taki zestaw angular dev kit build angular

5:25czy to jest zestaw pluginów który pozwala faktycznie testować angulara

5:32na przykład tutaj dzięki tej wtyczce nie musimy się martwić o to

5:36żeby angular zdążył skompilować szablony nim robimy testy nie

5:40musimy się martwić o type scripts tą całą konfigurację która tutaj trzeba by

5:44ją samemu stworzyć przygotować żeby te testy uruchomić to wszystko jest elegancko

5:48zawarte w jednej wtyczce w jednym pluginie która dopiero uruchamia testy gdy angular już jest

5:52zbudowany skompilowany gotowy do uruchomienia dodatkowo

5:57mam tutaj pluginy czyli karma tak naprawdę jest tylko frameworkiem i

6:01ona sama nic nie robi bo ona musi być dodane pluginy zarówno do obsługi przeglądarek

6:05jaki i mechanizmów testów czyli mamy na przykład karma jasmine zamiast

6:10jasmine mogliśmy użyć innych mechanizmów do testowania ja ich nie będę umawiał ale

6:14jeśli spotkałeś spotkałaś się wcześniej z takimi rzeczami jak powiedzmy

6:18jasmine chai sinon czy

6:23na przykład z nowszych mechanizmów na przykład jest

6:27jeśli chcesz inny tutaj mechanizm testów to bardzo

6:31fajnie do karma możesz znaleźć masę gotowych pluginów wyszukam

6:35sobie tutaj pluginy tu

6:40są właśnie z technologiami i ich używać ale też powinno właśnie

6:45być opcja plugins i jest opcja przypięcia właśnie różnych

6:49frameworków różnych pluginów na różnych urządzeniach ja tutaj nie będę wchodził w

6:53szczegóły karmy skupimy się na tej konfiguracji jakby angularowej czyli zobacz

6:57podpinam informację że będę testował korzystając z frameworka jasmine będę

7:01chciał uruchamiać to na przeglądarce na przykład chrome gdybym chciał dodać jeszcze powiedzmy

7:05firefoxa to nie ma problemu tutaj sobie robimy npm install

7:10save-dev żeby to zapamiętało i

7:14karma na przykład firefox launcher

7:21czyli instalujemy coś takiego i jeśli dopisałbym tu coś takiego karma

7:25firefox launcher których się zainstaluję i

7:30tutaj do przeglądarek dopisałbym jeszcze firefox

7:35to powinno nam to uruchomić nie tylko jedną przeglądarkę

7:40ale dwie zobaczymy uruchomię jeszcze raz po każdej zmianie dokumentacji musisz pamiętać żeby jeszcze

7:45raz uruchomić te testy czyli tutaj yes przerwę uruchomię

7:49jeszcze raz musisz pamiętać że przy każdej zmianie konfiguracji tutaj musisz te testy

7:54po prostu jeszcze raz uruchomić i tym razem podam jeszcze dwie przeglądarki

7:58żeby te same testy korzystając z tego samego frameworka zostały uruchomione w dwóch przeglądarkach

8:02jak widzisz mamy launching chrome launching firefox i

8:07tutaj mi się otworzyło jedno okno z firefoxem drugie

8:11okno z chrome i jak widzisz mamy mamy tutaj tu i tu mamy raport

8:15że testy zostały wykonane 3 specyfikacje czyli

8:193 testy w ramach jednego pliku app component mamy 3 testy 3 się udały mamy

8:23tutaj na zielono i tutaj także chrome

8:27odpalił tutaj także na zielono czyli jak widzisz karma pozwala

8:31wiele przeglądarek uruchomić można przeglądarki mobilne uruchomić możesz także

8:35skonfigurować tutaj widzisz port i możesz podłączyć na przykład przeglądarki nie

8:39znając nie znajdujących się na tym komputerze na przykład twój telefon komórkowy jeśli

8:44połączysz się właśnie z tutaj adresem twojego komputera i tym portem no

8:48to możesz ponieść dodatkowe przeglądarki jak nie znadujące się na tym komputerze to

8:53jest jedna rzecz ja tego firefox'a usunę żebyśmy za dużo przeglądarek na raz tu nie

8:57mieli uruchomionych i tu jak widzisz w raportach przy każdej zmianie mamy executed czyli

9:01wykonał 3 testy na firefoxie i każdy z nich się

9:06udał mamy też czas ile to zajęło i mamy tutaj widzisz chrome 3

9:10testy każdy z nich się udał czyli teraz zapiszę zmiany w

9:14tym pliku uruchomię ponownie testy żeby do jednej przeglądarki

9:18i co to jeszcze mamy oprócz chrome

9:22launcher firefox launcher mamy też jasmine html reporter

9:27i teraz jasmine html reporter to jest plugin który dokładnie

9:31wyświetla nam to co tutaj widzisz czyli wyświetla raport w postaci strony

9:35html gdzie możemy nie tylko poczytać sobie dokładnie o co chodzi możemy kliknąć

9:39uruchomić tylko jeden z testów jak widzisz wybierałem z testu mogę uruchomić tylko jeden

9:43z nich mogę uruchomić wszystkie trzy i jeśli pojawi się gdzieś jakiś błąd

9:47no to te błędy zobaczymy na przykład mamy coś takiego że app should create

9:51app i na przykład nasza aplikacja powinna mieć tytuł angular project jeśli

9:56wejdę do naszego kodu mamy tutaj testy ale powiedzmy że w komponencie zmienimy

10:01angular project 2 wprowadzę taką zmianę i

10:06jak tylko tu coś uruchamiamy jak widzisz od razu mam informację że zmieniłem coś

10:10co sprawiło że aplikacja jest niezgodna ze specyfikacją specyfikacja

10:15określa że tytuł aplikacji musi być angular projekt zmieniłem

10:19tutaj tytuł i natychmiast po zmianie pliku mam informacje dokładnie

10:23co przestało działać czyli nasz komponent nie wyświetla

10:27już tego tytułu i mam tu jakieś ładne exception mamy stack trace ja

10:32widzę dokładnie jaki jest błąd i widzę też dokładnie jak do niego doszło

10:36po kolei całą ścieżkę czyli w ogóle wczoraj dwa się nie udały czy

10:41mam tu zgłoszone dwa błędy czyli jak widzisz mamy nie tylko raport tutaj w konsoli

10:45na czerwono mamy informację co się miało stać tutaj mamy wynik

10:49czy to się udało czy jeśli by się udało byłoby to na zielono

10:53i tak samo mam tutaj tutaj w przeglądarce czyli nie

10:57tylko jak widzisz mechanizm testów jest skonfigurowany tylko przeglądarka skonfigurowana

11:02ale także raporty czyli w jaki sposób informowania o tych błędach są

11:06także konfigurowalne jeśli nie chciałbyś testów na przykład samemu przeglądać tutaj

11:10w postaci takiego raportu ale chciałbyś na przykład wygenerować plik xml dla

11:15serwera continuous integration na przykład junit to możesz także poszukać na przykład karma

11:20junit reporter i takie coś będzie nam tworzyło plik

11:25z właśnie raportem w postaci takiej która może być zaczytany

11:29przez jakiś system na przykład continuous integration typu powiedzmy jenkins

11:33o czym tylko musisz pamiętać to to że dodałeś tutaj

11:37plugin to za mało żeby to uruchomić musisz go także uruchomić tu w odpowiednich opcjach

11:42czyli nowa przeglądarka musi być tu dopisana do browsers nnowy reporter musi

11:46być dopisany tutaj do reporters progress to jest to co widzimy tutaj w konsoli

11:50kj czyli karma jasmine html to jest coś tutaj widzimy

11:55tutaj właśnie w przeglądarce okej tutaj mamy jeszcze

11:59dodatkowy reporter czyli tutaj cover instanbul mamy

12:04też plugin tutaj widzisz jeszcze który pomaga pracować

12:08z angularem który zabezpiecza żeby ten angular na pewno się załadował skompilował

12:13uruchomił nim te testy uruchomimy no właśnie za to jest jeszcze ten

12:17cover istanbul jest to reporter który mówi o pokryciu

12:21naszego kodu testami ale o tym już w kolejnej

12:26lekcji tak więc do zobaczenia