Моки и стабы

Zepto.js — это минималистичная библиотека для работы с DOM, событийной моделью и AJAX в JavaScript. При разработке фронтенда часто возникает необходимость в тестировании поведения кода без реального взаимодействия с сервером или сторонними компонентами. В таких случаях используются моки и стабы, позволяющие изолировать части кода и контролировать их поведение.

Стабы (Stubs)

Стаб — это заглушка функции или метода, которая заменяет реальное поведение тестируемого кода. Основные цели использования стабов:

  • Изоляция зависимостей.
  • Контроль возвращаемых значений.
  • Отслеживание вызовов функций.

В контексте Zepto.js стабы особенно полезны при работе с AJAX-запросами и обработчиками событий.

Пример стаба для AJAX

// Оригинальный AJAX-запрос через Zepto
$.ajax({
  url: '/api/data',
  type: 'GET',
  success: function(response) {
    console.log('Данные получены:', response);
  }
});

// Стаб с использованием функции
var ajaxStub = function(options) {
  if (options.success) {
    options.success({ data: 'mocked data' });
  }
};

// Подмена оригинального $.ajax на стаб
$.ajax = ajaxStub;

// Вызов теперь использует стаб
$.ajax({
  url: '/api/data',
  type: 'GET',
  success: function(response) {
    console.log(response.data); // Выведет: mocked data
  }
});

Ключевые моменты:

  • Стабы позволяют полностью контролировать поведение функций.
  • Их можно использовать для имитации ошибок, задержек или различных ответов сервера.
  • Особенно полезны при написании модульных тестов для фронтенд-кода.

Моки (Mocks)

Мок — это объект или функция, которая не только подставляет нужное поведение, но и отслеживает, как она была вызвана: с какими аргументами, сколько раз и в каком порядке. Моки дают возможность проверять корректность взаимодействия с зависимостями.

Пример мока для событий

// Элемент DOM
var $button = $('<button id="testButton">Click</button>');
$('body').append($button);

// Создание мока для обработчика события
var clickMock = {
  calls: [],
  handler: function(event) {
    this.calls.push(event.type);
  }
};

// Привязка мока к событию
$button.on('click', clickMock.handler.bind(clickMock));

// Триггер события
$button.trigger('click');
$button.trigger('click');

console.log(clickMock.calls); // ['click', 'click']

Ключевые моменты:

  • Моки фиксируют все вызовы и позволяют проверять правильность работы кода.
  • В отличие от стабов, они не только подменяют поведение, но и проверяют взаимодействие.
  • Комбинируются с тестовыми фреймворками (например, Jasmine или Mocha) для ассертов.

Моки и стабы при работе с DOM через Zepto

Zepto активно используется для манипуляций с DOM, что делает моки и стабы полезными для тестирования:

  • Стабы для методов Zepto: можно подменять $.ajax, $.get, $.post и методы работы с элементами (.html(), .append()) для контроля поведения.
  • Моки для событий: любые обработчики событий (click, input, change) можно оборачивать в моки для отслеживания вызовов.

Пример стаба метода .html()

var $div = $('<div></div>');

// Стаб для .html()
var originalHtml = $.fn.html;
$.fn.html = function(content) {
  return 'stubbed content';
};

console.log($div.html()); // stubbed content

// Восстановление оригинала
$.fn.html = originalHtml;

Пример мока метода .append()

var $list = $('<ul></ul>');
var appendMock = {
  calls: [],
  handler: function(item) {
    this.calls.push(item);
  }
};

// Подмена метода
var originalAppend = $.fn.append;
$.fn.append = function(item) {
  appendMock.handler(item);
  return this; // для цепочки вызовов
};

$list.append('<li>item1</li>');
$list.append('<li>item2</li>');

console.log(appendMock.calls); // ['<li>item1</li>', '<li>item2</li>']

// Восстановление оригинального метода
$.fn.append = originalAppend;

Выводы из примеров:

  • Подмена методов Zepto на стабы и моки позволяет полностью контролировать тестируемый код.
  • Моки фиксируют вызовы, стабы подставляют поведение.
  • Совместное использование упрощает модульное тестирование интерфейсных компонентов.

Организация моков и стабов

  1. Изолированное подключение: все стабы и моки создаются в отдельном блоке теста, чтобы не влиять на другие сценарии.
  2. Восстановление оригинальных методов: после тестов нужно возвращать методы Zepto к исходным состояниям.
  3. Комбинация с фреймворками тестирования: моки и стабы интегрируются с Jasmine, Mocha или Jest для ассертов и проверки последовательности вызовов.

Практические рекомендации

  • Для AJAX-запросов использовать стабы, чтобы имитировать ответы сервера.
  • Для DOM-событий применять моки для отслеживания кликов, изменения значений и других событий.
  • Для методов Zepto (например, .html(), .append(), .remove()) стабы позволяют подменить реальное поведение без изменения интерфейса.
  • Всегда сохранять оригинальные методы для восстановления после теста, чтобы не сломать цепочки вызовов.

Моки и стабы являются ключевыми инструментами для гибкого тестирования кода на Zepto.js, позволяя проверять логику работы фронтенд-приложений без необходимости запуска реального сервера или воздействия на глобальный DOM.

Оглавление