Nowoczesne testowanie kodu w JavaScript. Część Pierwsza – Setup

Testowanie kodu jest ważne. Wiem, że moje dotychczasowe projekty nie są może najlepszym przykładem jeśli o to chodzi, ale uwierzcie mi, w pracy zdarza mi się tworzyć, aż nadto (jak na mój gust) testów 🙂 . Jako programiści, często chcemy pominąć ten etap tworzenia oprogramowania, w końcu są testerzy. To Błąd. Pisanie testów to także odpowiedzialność twórcy kodu. Często wydaje się to żmudną, spowalniającą progres pracą ale, tu znów musicie mi uwierzyć na słowo, warto to robić.

Dzisiejszy post to pierwsza część dłuższej serii na temat testowania kodu tworzonego w JavaScripcie. Już wcześniej zdarzyło mi się popełnić kilka wpisów na temat testowania. Tym razem podejdę do tematu trochę ogólniej, będę omawiał testowanie kodu z punktu widzenia developera. Będę poruszał takie kwestie jak testy jednostkowe, testy end-to-end, testy pokrycia oraz wiele innych.

Nowoczesne testowanie kodu w JavaScript

W tym wpisie zajmę się podstawową konfiguracją środowiska testowego. Pisząc „podstawową”, mam na myśli, naprawdę podstawowe rozwiązania. Nie oznacza to, że są one jakieś gorsze. Często to właśnie najprostsze rozwiązania są najlepsze 🙂 .

Dla początkowego setupu skorzystam z jedynie dwóch narzędzi: Mocha i Chai. Oczywiście w przyszłości dodam do tej listy inne, nie wszystko da się zrobić tylko tymi dwoma (ale da się całkiem sporo 🙂 ). Do tego dodam jeszcze babel, czyli transpilator ES6.

Wracając do dwóch głównych narzędzi. Mocha to framework do tworzenia i uruchamiania testów a Chai to biblioteka, która zawiera wszystkie mechanizmy potrzebne do ich asercji.

Pierwszym krokiem, będzie oczywiście stworzenie nowego projektu npm za pomocą polecenia konsolowego:

Gdy to jest już gotowe należy zainstalować moche i chai:

Po uruchomieniu powyższych komend w terminalu, zawartość pliku package.json powinna wyglądać mniej więcej tak:

Dodam do niego skrypt, który będzie odpowiedzialny za uruchamianie testów. Aby to zrobić, wystarczy, że do jsona, wpiszę dodatkowe pole:

Teraz w terminalu, z folderu projektowego, mogę uruchomić testy za pomocą komendy:

Oczywiście mógłbym ten skrypt nazwać inaczej i wtedy po npm wystarczyłoby wpisać nową nazwę, jednak nazwa test ma najwięcej sensu.

Po uruchomieniu skryptu, Mocha automatycznie odszuka folder o nazwie test i uruchomi wszystkie znajdujące się w środku testy. Oczywiście ja jeszcze takiego folderu nie mam, tworzę więc go a w środku dodaję nowy plik: tests.spec.js.

W nowo utworzonym pliku napiszę swój pierwszy test. Oczywiście, nie ma jeszcze czego testować, oprócz tego czy środowisko działa poprawnie 🙂 . Tak będzie wyglądać zawartość tests.spec.js:

Jak widać posłużyłem się składnia ES6. Wprawdzie dokumentacja Mocha odradza używania funkcji strzałkowych, ponieważ powoduje to, że w ich wnętrzu nie mamy dostępu do kontekstu frameworka. Mi jednak nie jest to zupełnie potrzebne, dlatego zostaje przy nowoczesnej składni.

Nie będę dziś tłumaczył dokładnie co dzieje się w tym kodzie. Zaznaczę tylko, że describe oraz it to polecenia frameworkowe. Nie muszę ich w żaden sposób importować do skryptu, ponieważ jest on uruchamiany przez Mocha, czyli środowisko, które doskonale rozumie te polecenia.

Inaczej jest z obiektem expect. Jest to sposób asercji testu i muszę go najpierw pobrać z modułu Chai.

Tak przygotowany test mogę uruchomić za pomocą mojego skryptu npm’owego. Test sprawdza, czy wartość true jest równa true, więc jeżeli, wszystko mam dobrze ustawione, to skrypt powinien odpalić się bez problemu.

Niestety na tę chwilę środowisko(wersja 6.9) nie obsługuje jeszcze składni ES6. Muszę najpierw przetranspilować mój kod na zrozumiały dla node’a ES5.

Na szczęście automatyczna transpilacja jest bardzo prosta do ustawienia i jak już to zrobie, to nie będę musiał się więcej przejmować tym problemem.

Do transpilacji kodu użyję narzędzia babel. Najpierw muszę zainstalować dwa dodatkowe dwa moduły przez npm:

Gdy to jest już gotowe. w głównym katalogu projektu tworzę plik konfiguracyjny dla babel. Plik ten musi nazywać się .babelrc, beż żadnych dodatkowych rozwinięć.

Wewnątrz pliku umieszczam następującą treść:

I gotowe, babel już skonfigurowany. Ostatnią rzeczą jaką muszę zrobić, to w jakiś sposób poinformować moche, że przed uruchomieniem testów, musi je najpierw przetranspilować. I z tym nie będzie problemu, wystarczy zmodyfikować skrypt npmowy test.

W pliku package.json, zmieniam pole test w obiekcie scripts. Teraz wygląda to tak:

I tyle, podstawowe środowisko testowe jest gotowe do użycia. Aby wszystko potwierdzić wystarczy w głównym katalogu projektowym, w konsoli wpisać:

W konsoli powinno pokazać się informacje wyglądające mniej więcej tak:

testSuccess

To wszystko na dziś. Jeżeli chcesz być na bieżąco z postami na blogu zachęcam do polubienia mojej strony na facebooku. Zawsze zamieszczam tam informacje o wszystkich nowościach. Jest to też dobre miejsce na kontakt ze mną. Na wszystkie pytania zawsze odpowiem 🙂 .

One thought on “Nowoczesne testowanie kodu w JavaScript. Część Pierwsza – Setup”

  1. Brakuje mi informacji w jakiej konsoli to wpisujesz 😉 Może pytanie głupie ale do wyboru są windowsowe cmd, linuksowy terminal, konsola IDE (dobrze podać jakiego używasz) albo konsola w przeglądarce (F12). Ach jest jeszcze ta w Macach, ale tej akurat nie używałem.
    Samo npm (jak wygooglowalem) jest dystrybuowane z Nodejs. To może być oczywiste dla kogoś kto zajmuje się developerką w JS, ale dla osób nowych w temacie stricte testowania – już niekoniecznie…

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *