W poprzednimwpisie na temat testowania kodu JavaScript, przedstawiłem trzy najpopularniejsze frameworki służące do tego celu - QUnit, Mocha oraz Jasmine. Napisałem też baaardzo pokrótce na czym generalnie polega testowanie JavaScript. Myślę jednak, że to zdecydowanie za mało… Postanowiłem więc trochę zgłębić temat na łamach bloga, tak żebyśmy wszyscy się mogli czegoś nowego nauczyć ;) Całkiem subiektywnie, na warsztat wybrałem Jasmine. Podoba mi się składnia pisania testów w Jasmine oraz to, że jest on przystosowany do testów zarówno kodu uruchamianego w przeglądarce internetowej jak i na serwerze, za pomocą NodeJS. Dlatego też dziś przedstawiam wpis “Jasmine - podstawy testowania”. Poszerzę w nim trochę informacje, udostępnione przeze mnie w poprzednim wpisie. Dowiemy się więc przede wszystkim jak zacząć - skąd pobrać i jak zainstalować odpowiednie pliki oraz jak napisać pierwszy test. Zapraszam!

Jak zacząć pracę z Jasmine?

Na początek dowiedzmy się jak w ogóle rozpocząć pracę z Jasmine. Jeśli wejdziemy na stronę domową Jasmine, naszym oczom ukażą się linki do dokumentacji frameworka w wersji 1.3 oraz 2.0. Ja będę omawiać tę nowsza wersję. Ok, to zacznijmy - na początek należałoby pobrać Jasmine i jakoś zintegrować go z projektem. Wszystko co potrzeba znajduje się na GitHub’ie, w sekcji releases projektu.

Po pobraniu najnowszej wersji “standalone” i jej rozpakowaniu zobaczymy kilka plików i katalogów. Ich struktura wygląda mniej więcej tak jak na poniższym zdjęciu:

Jasmine - katalogi

Katalog lib, zawiera wszystkie pliki *.js frameworka Jasmine, w katalogu spec umieszczono przykładowe testy, natomiast w katalogu src znajduje się przykładowy kod do testowania. To co istotne, to plik SpecRunner.html, który służy do uruchamiania testów i prezentowania wyników.

Przykład użycia Jasmine

Myślę, że najlepiej będzie jeśli zajrzymy właśnie do tego ostatniego pliku - myślę, że to może wyjaśnić jak używać Jasmine w swoich projektach:

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Jasmine Spec Runner v2.4.1</title>

   <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.4.1/jasmine_favicon.png">
   <link rel="stylesheet" href="lib/jasmine-2.4.1/jasmine.css">

   <script src="lib/jasmine-2.4.1/jasmine.js"></script>
   <script src="lib/jasmine-2.4.1/jasmine-html.js"></script>
   <script src="lib/jasmine-2.4.1/boot.js"></script>

   <!-- include source files here... -->
   <script src="src/Player.js"></script>
   <script src="src/Song.js"></script>

   <!-- include spec files here... -->
   <script src="spec/SpecHelper.js"></script>
   <script src="spec/PlayerSpec.js"></script>

 </head>
 <body>
 </body>
</html>

Jak widać plik ten posiada w zasadzie tylko sekcję <head>. Omówmy więc co się w niej znajduje. Myślę, że dwóch pierwszych znaczników (<meta> oraz <title>) nie ma potrzeby opisywać… Następna w kolejności jest deklaracja obrazka i stylu CSS - są one potrzebne do prezentacji wyników.

Dalej widzimy mamy trzy deklaracjeskryptów JavaScript - są to pliki samego frameworka Jasmine niezbędne do “odpalenia” testów.

Kolejne dwa skrypty JavaScript deklarowane w sekcji <head> zawierają testowany przez nas kod. Oczywiście nie muszą się one znajdować w tym samym katalogu - możemy więc wedle uznania organizować sobie własne środowisko testowe. Muszą one jednak być tutaj załączone, tak aby testy “widziały” kod, który testują.

Na koniec mamy deklarację naszych testów. Poszczególne testy nazywane są w Jasmine “spec’ami”.

Uruchamiamy testy

Ok, uruchomię teraz powyższy plik w przeglądarce. Oto wynik:

Jasmine - przykładowy wynik testu

Wygląda to całkiem estetycznie ;) Być może zauważyliście, że całość wygląda jak kolejne zdania, tak jakby formułował je człowiek - to przez zastosowanie notacji typu “fluent”. Zapoznamy się z nią później.

Na powyższym obrazku widać, że wykonano 5 “spec’ów”. Poszczególnym “spec’om” odpowiadają zdania wyświetlane na zielono (?? - w każdym razie #007069) - widzicie wcięcia? Tak, “spec’i”mogą się zagnieżdżać… O tym też później (lub w kolejnym wpisie).

Jasmine - podstawy testowania. Jak wygląda test?

Dociekliwi zapewne już zajrzeli do plików JavaScript zawierających “spec’i”. Ja jednak na razie je odpuszczę ponieważ, są one trochę bardziej rozbudowane, a dzisiejszy wpis jest tylko wstępem do testowania za pomocą Jasmine. Do bardziej skomplikowanych przypadków wrócimy jeszcze w kolejnym(ch) wpisach.

Oto najbardziej podstawowy przykład testu (“spec’a”) wprost ze strony dokumentacji projektu:

describe('A suite', function() {
  it('contains spec with an expectation', function() {
    expect(true).toBe(true);
  });
});

Ok, to teraz szybkie wyjaśnienie o co chodzi. W pierwszej linii mówimy co chcemy testować (czyli “A suite”) i robimy to w funkcji callback będącej drugim parametrem funkcji describe. Następnie mówimy czego się spodziewamy (a więc “contains spec with expectation”). Dopiero funkcja callback, która jest drugim parametrem funkcji it, jest de facto prawdziwym testem ponieważ, zawiera asercję.

Wynik takiego testu wyglądałby następująco:

Jasmine - przykładowy wynik

Wiem, że dla wielu osób mających do tej pory styczność głównie z “tradycyjnymi” środowiskami testowania, taki sposób pisania testu może być nieco “przerażający”. Myślę jednak, że w miarę jak nabiera się wprawy, docenia się zalety takiego zapisu i trudno powrócić do starego sposobu.

Podsumowanie

To tyle na dziś. Jednak to nie koniec wpisów na temat Jasmine! Mam zamiar dużo mocniej wgłębić się w ten temat i przekazać Wam zdobyte informacje w postaci kolejnego wpisu… Dlatego zapraszam ;)

P.S. Wpis ten jest częścią mini-serii na temat testowania Jasmine. Poniżej wszystkie części tej serii: