Моки и заглушки

Gridstack.js — это библиотека для динамической организации сетки элементов с возможностью перетаскивания, изменения размера и управления расположением виджетов. В процессе разработки сложных интерфейсов часто возникает необходимость создавать моки (mock) и заглушки (stub) для тестирования поведения сетки и взаимодействия с внешними источниками данных.

Моки — это объекты, имитирующие реальные компоненты или данные. Они позволяют проверять работу сетки в контролируемой среде без подключения к реальным API или базам данных. Заглушки — это более простая форма мока, используемая для возврата фиксированных значений вместо выполнения настоящей логики.

Создание моков для Gridstack.js

Для имитации виджетов сетки используется объектная структура, соответствующая API Gridstack:

const mockWidgets = [
  { id: 'widget1', x: 0, y: 0, width: 2, height: 2, content: 'Виджет 1' },
  { id: 'widget2', x: 2, y: 0, width: 3, height: 2, content: 'Виджет 2' },
  { id: 'widget3', x: 0, y: 2, width: 5, height: 3, content: 'Виджет 3' }
];

Каждый объект содержит параметры:

  • x, y — координаты в сетке,
  • width, height — размеры блока в ячейках,
  • id — уникальный идентификатор,
  • content — содержимое виджета, которое может быть HTML или текстом.

Эти моки можно передавать в Gridstack при инициализации:

const grid = GridStack.init({
  float: true,
  cellHeight: 100,
  disableOneColumnMode: true
});

mockWidgets.forEach(widget => {
  grid.addWidget(`<div id="${widget.id}">${widget.content}</div>`, {
    x: widget.x,
    y: widget.y,
    w: widget.width,
    h: widget.height
  });
});

Такой подход позволяет тестировать поведение сетки, перетаскивание, изменение размеров и визуальные коллизии без подключения к реальному серверу.

Использование заглушек для функций сетки

Gridstack.js предоставляет множество методов для работы с виджетами, таких как move(), removeWidget(), addWidget(). Для тестирования можно создавать заглушки, которые заменяют эти методы фиктивной логикой:

const gridStub = {
  addWidget: (html, options) => {
    console.log('Добавлен виджет:', html, options);
    return { html, options };
  },
  removeWidget: (element) => {
    console.log('Удален виджет:', element);
  },
  move: (el, x, y) => {
    console.log(`Виджет ${el.id} перемещен в (${x}, ${y})`);
  }
};

Заглушки позволяют отслеживать вызовы методов, проверять параметры, передаваемые в сетку, и предотвращать реальные изменения DOM. Это особенно полезно для unit-тестирования и автоматизации проверки логики работы виджетов.

Комбинирование моков и заглушек

Для комплексного тестирования интерфейсов Gridstack.js моки и заглушки часто используются вместе:

mockWidgets.forEach(widget => {
  gridStub.addWidget(`<div id="${widget.id}">${widget.content}</div>`, {
    x: widget.x,
    y: widget.y,
    w: widget.width,
    h: widget.height
  });
});

// Проверка перемещения
gridStub.move({ id: 'widget1' }, 1, 2);

Такой подход позволяет моделировать:

  • добавление и удаление виджетов,
  • перетаскивание и изменение размера,
  • проверку коллизий и ограничений сетки.

Применение моков в автоматизированном тестировании

Gridstack.js тесно интегрируется с инструментами тестирования, такими как Jest или Mocha. Моки и заглушки упрощают создание тестовых сценариев:

test('Добавление виджета с моками', () => {
  const consoleSpy = jest.spyOn(console, 'log');
  gridStub.addWidget('<div id="test"></div>', { x: 0, y: 0, w: 2, h: 2 });
  expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('Добавлен виджет:'));
});

Использование моков позволяет изолировать сетку от внешних зависимостей и проверять только поведение самой библиотеки и логики виджетов.

Создание динамических моков

Для более сложных интерфейсов можно создавать функции, генерирующие моки на лету:

function generateWidgets(count) {
  return Array.from({ length: count }, (_, i) => ({
    id: `widget${i + 1}`,
    x: i % 5,
    y: Math.floor(i / 5),
    width: 1 + (i % 3),
    height: 1 + (i % 2),
    content: `Виджет ${i + 1}`
  }));
}

const dynamicWidgets = generateWidgets(10);
dynamicWidgets.forEach(widget => gridStub.addWidget(`<div id="${widget.id}">${widget.content}</div>`, widget));

Это позволяет моделировать масштабные сетки и проверять работу алгоритмов компоновки и коллизий при разных конфигурациях.

Важные моменты при использовании моков и заглушек

  • Сохранять структуру объектов: моки должны полностью соответствовать API Gridstack.js, иначе тесты будут некорректными.
  • Изолировать тесты: заглушки предотвращают модификацию реального DOM.
  • Проверять вызовы методов: логирование или spy-функции помогают убедиться, что методы вызываются с корректными параметрами.
  • Использовать генераторы данных для масштабных сеток и сложных сценариев, чтобы избежать ручного создания большого количества виджетов.

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

Оглавление