consdata.com
Blog techniczny Blog biznesowy Dział HR
EN
javascript

Testowanie frontendu - Cz. 1. Wprowadzenie do Jasmine - konfiguracja i przykładowe testy

author Marcin Mendlik
6 listopada 2019

Mój poprzedni wpis był o tym co testować w projektach frontendowych, teraz przyszedł czas aby wybrać odpowiednie narzędzia, zakasać rękawy i przejść do praktyki. Pokażę jak zainstalować i używać frameworka Jasmine w projekcie Node’owym.

Node

Instalacja za pomocą nvm

Aby zainstalować lokalnie Node’a można posłużyć się nvm, więcej w artykule autorstwa Krzysztofa Czechowskiego na łamach naszego bloga. Do używania frameworka będzie potrzebny projekt Node’owy, w przypadku jego braku można w dowolnym katalogu taki stworzyć za pomocą polecenia

npm init

Jasmine

Framework Jasmine jest frameworkiem służącym do testowania napisanym w duchu behaviour-driven development, nie ma dodatkowych zależności oraz, jak twierdzą twórcy, dostajemy go z bateriami, czyli powinien zawierać wszystko, co jest potrzebne do pisania testów jednostkowych w naszym projekcie.

Instalacja

Instrukcja instalacji jest zwięźle opisana w dokumentacji. Aby zainstalować framework w projekcie, należy:

dodać zależność w devDependencies,

npm:

npm install --save-dev jasmine

yarn:

yarn add jasmine --dev

inicjować lokalnie zainstalowany framework, polecenie utworzy domyślną konfigurację w katalogu spec, domyślnie Jasmine będzie wykonywał testy w plikach w katalogu spec o nazwach kończących się na spec.js lub Spec.js.

node node_modules/jasmine/bin/jasmine init

framework zainicjował się z domyślną konfiguracją:

{
  "spec_dir": "spec",
  "spec_files": [
    "**/*[sS]pec.js"
  ],
  "helpers": [
    "helpers/**/*.js"
  ],
  "stopSpecOnExpectationFailure": false,
  "random": true
}

następnie należy dodać wpis do package.json,

"scripts": { "test": "jasmine" }

zweryfikować instalację.

npm test

albo

yarn test

Angular CLI

W przypadku użycia frameworka Angular CLI mamy już dostępny framework Jasmine i wymaga on jedynie innej konwencji nazewniczej plików z testami.

Struktura testu

Testy są znajdowane przez Jasmine na podstawie ścieżki i nazwy pliku, są to po prostu pliki o strukturze:

describe("A suite is just a function", () => {
  let a;

  it("and so is a spec", () => {
    a = true;

    expect(a).toBe(true);
  });
});
Randomized with seed 12095
Started
.


1 spec, 0 failures
Finished in 0.008 seconds
Randomized with seed 12095 (jasmine --random=true --seed=12095)

Nawet doświadczonemu programiście przyzwyczajonemu do testów backendu powyższy przykład może wydawać się mało intuicyjny, na szczęście jest to tylko złudzenie.

describe - to funkcja opisująca zestaw testów, jako pierwszy parametr przyjmuje opis zestawu, jako drugi funkcję zawierającą poszczególne przypadki testowe.

it - funkcja opisująca pojedynczy przypadek testowy, tak samo jako describe pierwszym parametrem jest opis, drugim funkcja zawierający faktyczny test.

expect - przyjmuje bieżącą wartość i porównuje ją za pomocą wbudowanych metod porównujących z oczekiwaną wartością, w powyższym przypadku jest to toBe, ale są dostępne bardziej specyficzne porównania albo ich zaprzeczenia (np. not.toBeNull, toBeUndefined etc.)

Dostępne są również funkcje wykonujące się przed lub po wszystkich testach, lub każdym (beforeEach, afterEach, beforeAll, afterAll), przykładowo:

describe("Test for resetting value before each test", () => {
  let value;

  beforeEach(() => {
    value = 0;
  });

  it("value should be 1", () => {
    value = value + 1;
    expect(value).toBe(1);
  });
  
  it("value should be 0", () => {
    expect(value).toBe(0);
  });

});
Randomized with seed 22493
Started
..


2 specs, 0 failures
Finished in 0.009 seconds
Randomized with seed 22493 (jasmine --random=true --seed=22493)

Jeśli chcemy wyłączyć dany zestaw testów, lub pojedynczy przypadek testowy, możemy posłużyć się funkcjami xdescribe lub xit,fdescribe oraz fit służą po to, by wyłączyć resztę testów, a zostawić te oznaczone właśnie tą literką f (od focus). Jest to szczególnie przydatne gdy pracujemy nad nowymi funkcjonalnościami i nie chcemy marnować czasu na wykonywanie testów, które w tym momencie są nieistotne.

Jak widać na powyższych przykładach podstawy frameworka Jasmine są proste, sama instalacja i konfiguracja nie jest specjalnie skomplikowana, a w przypadku Angular CLI wszystko mamy już dostępne po instalacji. Ten wpis jest wprowadzeniem do testów jednostkowych we frontendzie, w następnej odsłonie pokażemy jak mockować lub stubować zależności w komponentach angularowych i serwisach.

Materiały źródłowe

  • https://jasmine.github.io
  • https://github.com/nvm-sh/nvm
  • https://angular.io/guide/testing
Najnowsze wpisy

  • Dostępność w PDF - dokumenty bez barier
  • Czy wiesz, że z pomocą @starting-style można animować elementy z display: none za pomocą samego CSS?
  • Czy wiesz, że w Angular 17 została wprowadzona alternatywa dla *ngSwitch?
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

newsletter

techniczny

Zapisz się

Podobne wpisy

post-image
WCAG

Dostępność w PDF - dokumenty bez barier

author
Kacper Hoffman 28 kwi 2025
post-image
angular

Czy wiesz, że z pomocą @starting-style można animować elementy z display: none za pomocą samego CSS?

author
Piotr Tatarski 7 kwi 2025
post-image
angular

Czy wiesz, że w Angular 17 została wprowadzona alternatywa dla *ngSwitch?

author
Dorian Mejer 10 mar 2025
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

Zapisz się na

newsletter

techniczny

consdata.com
  • Kontakt

    • sales@consdata.com
    • +48 61 41 51 000

  • Biuro

    • K9Office
      Krysiewicza 9/14
      61-825 Poznań
      Polska

  • Rozwiązania

    • Eximee
    • Kouncil
  • Blog Dołącz do nas
Copyright © 2024 Consdata. All rights reserved. Privacy Policy & Cookies
Chcemy używać plików cookie oraz skryptów podmiotów trzecich do polepszania funkcjonowania tej strony Zgadzam się