Konfiguracja środowiska testowego

Pisanie testów dla kodu jQuery ma kluczowe znaczenie podczas tworzenia stabilnych i łatwych w utrzymaniu aplikacji internetowych. Pomaga wcześnie wykrywać błędy i zapewnia, że kod działa zgodnie z oczekiwaniami.

• Zapobieganie regresjom: Gwarantuje, że nowe zmiany nie zepsują istniejących funkcji.
• Poprawa jakości kodu: Skłania do pisania modułowego kodu, który można testować.
• Ułatwienie współpracy: Zapewnia przejrzystą dokumentację opisującą sposób działania komponentów.

Do testowania JavaScriptu, w tym jQuery, potrzebny jest test runner. To narzędzie uruchamia testy i przedstawia ich wyniki.

Dwie popularne opcje to:

• Jest: Nowoczesny, bogaty w funkcje framework testowy firmy Facebook, powszechnie używany z Reactem, ale dobrze sprawdzający się w przypadku dowolnego kodu JS.
• QUnit: Framework testowy przeznaczony dla jQuery, prostszy, ale oferujący mniej funkcji niż Jest.

W tej lekcji skupimy się na konfiguracji Jest ze względu na jego rozbudowane funkcje i szerokie zastosowanie.

Przed zainstalowaniem Jest potrzebują Państwo projektu Node.js. Jeśli jeszcze go Państwo nie mają, można go łatwo utworzyć.

Proszę przejść w terminalu do katalogu projektu i uruchomić:

To polecenie tworzy plik package.json, który zarządza zależnościami i skryptami projektu.

Teraz zainstalujmy Jest. Ponieważ jQuery często korzysta z DOM przeglądarki (Document Object Model), potrzebny będzie również pakiet jest-environment-jsdom. JSDOM zapewnia w Node.js środowisko przypominające przeglądarkę, dzięki czemu kod jQuery może modyfikować wirtualny DOM.

Proszę zainstalować je jako zależności deweloperskie:

Spowoduje to dodanie Jest i JSDOM do pliku package.json.

Aby wskazać Jest korzystanie z JSDOM, należy go skonfigurować. Można to zrobić, dodając skrypt test do pliku package.json albo tworząc plik jest.config.js.

Opcja 1: W pliku package.json

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

Flaga --env=jsdom gwarantuje, że Jest uruchomi testy w środowisku JSDOM.

Jest szuka plików testowych w katalogu __tests__ lub plików kończących się na .test.js (albo .spec.js). Utwórzmy prosty plik testowy.

Proszę utworzyć w katalogu głównym projektu katalog o nazwie __tests__, a następnie dodać plik taki jak __tests__/my-feature.test.js:

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

describe grupuje powiązane testy, a test (lub it) definiuje pojedynczy przypadek testowy.

Aby testować kod jQuery, należy zaimportować samo jQuery do pliku testowego. Można zainstalować jQuery za pomocą npm: npm install jquery.

Następnie w pliku testowym można je zaimportować:

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = '
Hello
';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

Asercje służą do weryfikowania, czy kod działa prawidłowo. Jest korzysta z funkcji expect() w połączeniu z matcherami do tworzenia asercji.

Oto prosty przykład w JavaScript (niezwiązany konkretnie z jQuery, ale pokazujący działanie asercji):

Jest oferuje bogaty zestaw matcherów. Oto kilka często używanych:

• .toBe(value): Sprawdza dokładną równość (podobnie jak ===).
• .toEqual(value): Sprawdza głęboką równość obiektów lub tablic.
• .not.toBe(value): Sprawdza nierówność.
• .toBeTruthy() / .toBeFalsy(): Sprawdza, czy wartość jest traktowana jako prawdziwa lub fałszywa.
• .toContain(item): Sprawdza, czy tablica lub ciąg znaków zawiera dany element.

W przypadku jQuery często łączy się je z metodami jQuery, na przykład expect($element.text()).toBe('Expected Text');

Po skonfigurowaniu plików testowych ich uruchomienie jest proste. Wystarczy użyć skryptu zdefiniowanego w pliku package.json:

Jest znajdzie wszystkie pliki testowe, uruchomi je w środowisku JSDOM i wyświetli wyniki w terminalu. Pokaże, które testy zakończyły się powodzeniem, które niepowodzeniem, oraz poda szczegóły dotyczące błędów.

Dowiedzieli się Państwo, jak skonfigurować środowisko testowe dla jQuery za pomocą Jest i JSDOM. Które z poniższych poleceń i konfiguracji są niezbędne do podstawowej konfiguracji Jest z obsługą DOM?

W tej lekcji dowiedzieli się Państwo, jak skonfigurować zaawansowane środowisko testowe dla aplikacji jQuery za pomocą Jest.

• Zainicjalizowaliśmy projekt Node.js za pomocą npm init.
• Zainstalowaliśmy Jest i jest-environment-jsdom, aby symulować środowisko przeglądarki.
• Skonfigurowaliśmy Jest w pliku package.json, aby korzystał z JSDOM.
• Dowiedzieliśmy się, jak organizować pliki testowe, importować jQuery i pisać podstawowe asercje za pomocą matcherów Jest.

Ta podstawa pozwala pisać skuteczne testy, dzięki którym kod jQuery jest niezawodny i łatwy w utrzymaniu.