Podstawowa struktura testu

Instalacja

Aby móc uruchamiać testy z użyciem Jasmine wystarczy do odpowiedniego pliku HTML dodać załadowanie styli CSS oraz 3 plików JS:

  <link data-require="[email protected]" data-semver="2.4.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css" />
  <script data-require="[email protected]" data-semver="2.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script>
  <script data-require="[email protected]" data-semver="2.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script>
  <script data-require="[email protected]" data-semver="2.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script>

Funkcjonalność, którą chcemy przetestować znajduje się w klasie Car:

  Car = (function () {
    function Car (engine) {
      this.engine = engine;
    }

    Car.prototype.drive = function (speed) {
      this._lastSpeed = speed;
      return 'Car with ' + this.engine + ' engine ' +
        'drives at ' + speed + ' km/h.';
    }

    Object.defineProperty(Car.prototype, 'lastSpeed', {
      get: function () {
        return this._lastSpeed ? this._lastSpeed : 0;
      },
      enumerable: false,
      configurable: true
    });

    return Car;
  })();

Aby zweryfikować poprawność przypisania nazwy silnika do property engine wystarczy napisać następujący test:

  'use strict';

  it('should return car engine name', function() {
    var car = new Car('V8');

    expect(car.engine).toBe('V8');
  });

Teraz oba pliki dodajemy do pliku HTML (index.html) i uruchamiamy w przeglądarce:

  <script src="car.js"></script>
  <script src="car.spec.js"></script>

Przykład 1.1.

Funkcja it

Funkcja it służy do wyspecyfikowania pojedyńczego testu składającego się z jednej lub więcej asercji.

Dobre praktyki

Aby utrzymać porządek w kodzie testowym (który podlega tym samym regułom pisania i zarządzania dobrym kodem co nasz kod produkcyjny!) warto stosować się do następujących zasad:

• każdy plik z testami powinien mieć odpowiednią nazwę (np. sufiks .spec lub Tests)
• jeden plik z testami powinien zawierać testy wyłącznie jednej klasy/modułu/komponentu/...

Blok describe

Blok describe służy do grupowania wielu testów w jedną grupę. Dobrą praktyką jest grupowanie testów modułu lub jego części (jeden plik .spec.js) w blok describe aby w raport z testów był odpowiednio wyświetlany.

Przykład 1.2.

  'use strict';

  describe('Car class', function () {
    it('should return car engine name', function() {
      var car = new Car('V8');

      expect(car.engine).toBe('V8');
    });

    it('should return information about vehicle engine and speed', function () {
      var car = new Car('V8');

      var message = car.drive(120);

      expect(message).toBe('Car with V8 engine drives at 120 km/h.');
    })
  });

Zagnieżdżone bloki describe

Testując daną funkcjonalność modułu (przykładowo metodę) warto testy z nią związane zgrupować w jeden blok describe.

Przykład 1.3.

Before each

Zawartość bloku beforeEach jest wykonywana przed każdym testem (spec'iem) w danym bloku describe, do którego należy.

  describe('Car class', function () {
    var car;

    beforeEach(function () {
      car = new Car('V8');
    });
  });

Przykład 1.4.

After each

Blok afterEach służy do posprzątania po naszym teście (np. reset zmiennych blokowych, usunięcie obiektów typu Spy i Stub).

  describe('Car class', function () {
    var car;

    beforeEach(function () {
      car = new Car('V8');
    });

    afterEach(function () {
      car = null;
    });
  });

Przykład 1.5.