Jasmine-ajax плагин

Jasmine-ajax — это плагин для библиотеки Jasmine, предназначенный для упрощения тестирования AJAX-запросов в JavaScript. С его помощью можно легко имитировать поведение HTTP-запросов и ответов, что позволяет протестировать логику работы с сервером без реального взаимодействия с сетью.

Установка Jasmine-ajax

Для начала работы с плагином необходимо установить его в проект. Это можно сделать через npm или напрямую через CDN.

  1. Установка с помощью npm:

    npm install jasmine-ajax --save-dev

  2. Подключение через CDN:

    Если вы не используете систему сборки, можно подключить плагин напрямую в HTML-файл с помощью тега <script>:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine-ajax/3.1.0/jasmine-ajax.min.js"></script>

После установки плагин необходимо подключить в вашем тестовом файле, например, так:

import 'jasmine-ajax';

Основные функции Jasmine-ajax

Плагин предоставляет несколько ключевых функций для работы с AJAX-запросами в тестах. Рассмотрим их более детально.

Мокирование запросов

Основная задача Jasmine-ajax — это возможность мокировать AJAX-запросы. Это позволяет создавать виртуальные ответы на запросы, имитируя работу с сервером, без необходимости реального взаимодействия с API.

Для мокирования запросов используется метод jasmine.Ajax.install(), который подключает фейковый механизм обработки HTTP-запросов.

beforeEach(() => {
  jasmine.Ajax.install();
});

afterEach(() => {
  jasmine.Ajax.uninstall();
});

В beforeEach устанавливается мок, а в afterEach удаляется, чтобы избежать утечек состояния между тестами.

Отправка AJAX-запросов

После установки мока можно отправлять AJAX-запросы, которые будут перехвачены плагином. Рассмотрим пример простого GET-запроса с использованием библиотеки XMLHttpRequest:

function fetchData() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/data', true);
  xhr.send();
}

Теперь можно написать тест, который перехватит запрос и ответит на него заранее подготовленными данными:

it('должен успешно отправить GET запрос и получить данные', () => {
  const mockResponse = { success: true };

  fetchData();

  const request = jasmine.Ajax.requests.mostRecent();
  request.respondWith({
    status: 200,
    responseText: JSON.stringify(mockResponse),
  });

  expect(request.status).toBe(200);
  expect(request.responseText).toBe(JSON.stringify(mockResponse));
});

Здесь:

  • Мы вызываем функцию fetchData(), которая отправляет GET-запрос.
  • Метод jasmine.Ajax.requests.mostRecent() позволяет получить последний выполненный запрос.
  • Метод request.respondWith() эмулирует ответ от сервера с нужным статусом и телом ответа.
Перехват других типов запросов

Jasmine-ajax также поддерживает работу с другими типами HTTP-запросов, такими как POST, PUT, DELETE и другими. Пример с POST-запросом:

function sendData(data) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/data', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify(data));
}

Для тестирования POST-запроса используем аналогичный подход:

it('должен успешно отправить POST запрос с данными', () => {
  const data = { userId: 123, name: 'John' };
  const mockResponse = { success: true };

  sendData(data);

  const request = jasmine.Ajax.requests.mostRecent();
  expect(request.method).toBe('POST');
  expect(request.url).toBe('/api/data');
  expect(request.data()).toEqual(data);

  request.respondWith({
    status: 200,
    responseText: JSON.stringify(mockResponse),
  });

  expect(request.status).toBe(200);
  expect(request.responseText).toBe(JSON.stringify(mockResponse));
});

Здесь:

  • Мы проверяем, что запрос был отправлен методом POST и с правильным URL.
  • С помощью request.data() мы проверяем отправленные данные.
  • После того как запрос будет “ответить” с помощью respondWith(), мы проверяем корректность полученного ответа.
Проверка вызова колбэков

Иногда важно не только проверять статус ответа, но и убедиться, что соответствующие колбэки были вызваны. Это можно сделать с помощью Jasmine-спайков.

Пример:

function fetchDataWithCallback(callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/data', true);
  xhr.onl oad = function () {
    callback(xhr.responseText);
  };
  xhr.send();
}

Тест с использованием шпионов:

it('должен вызвать callback при получении ответа', () => {
  const callbackSpy = jasmine.createSpy('callback');
  const mockResponse = { success: true };

  fetchDataWithCallback(callbackSpy);

  const request = jasmine.Ajax.requests.mostRecent();
  request.respondWith({
    status: 200,
    responseText: JSON.stringify(mockResponse),
  });

  expect(callbackSpy).toHaveBeenCalledWith(JSON.stringify(mockResponse));
});

В этом примере:

  • Создаём шпион с помощью jasmine.createSpy().
  • После получения ответа от сервера проверяем, что шпион был вызван с нужными аргументами.
Управление временем ответа

Jasmine-ajax позволяет настраивать задержки в ответах, что может быть полезно для тестирования асинхронных сценариев. Например:

it('должен обработать ответ с задержкой', (done) => {
  const mockResponse = { success: true };

  fetchData();

  const request = jasmine.Ajax.requests.mostRecent();
  request.respondWith({
    status: 200,
    responseText: JSON.stringify(mockResponse),
    responseDelay: 1000, // Задержка в 1 секунду
  });

  setTimeout(() => {
    expect(request.status).toBe(200);
    expect(request.responseText).toBe(JSON.stringify(mockResponse));
    done();
  }, 1100); // Завершаем тест с учётом задержки
});

В этом примере:

  • Задержка в 1000 миллисекунд добавляется к ответу с помощью параметра responseDelay.
  • В тесте используется setTimeout для проверки результата после задержки.

Полезные методы для тестирования

  1. jasmine.Ajax.requests.all() — возвращает все запросы, выполненные в текущем тесте.
  2. jasmine.Ajax.requests.mostRecent() — возвращает последний выполненный запрос.
  3. request.respondWith() — позволяет настроить ответ для запроса.
  4. request.data() — позволяет получить данные, отправленные в запросе (для POST, PUT и т. д.).

Эти методы являются основными инструментами для работы с моками AJAX-запросов и создания подробных тестов.

Заключение

Jasmine-ajax значительно упрощает тестирование компонентов, которые взаимодействуют с сервером через AJAX-запросы. Благодаря мокированию запросов и ответов можно точно контролировать поведение приложения без необходимости реального взаимодействия с сетью. Это делает тесты более быстрыми и стабильными, а также позволяет сосредоточиться на проверке логики работы с данными, а не на внешних факторах, таких как доступность API.

Оглавление