Unit-тестирование компонентов

Gridstack.js — это мощная библиотека для создания интерактивных, сеточных интерфейсов с возможностью перетаскивания и изменения размеров элементов. В основе работы лежит динамическая сетка, где каждый элемент (widget) представлен блоком с координатами x, y, шириной w и высотой h.

Для инициализации сетки используется:

const grid = GridStack.init({
  column: 12,
  float: true,
  cellHeight: 80,
  animate: true
});

column — количество колонок сетки.
float — разрешение свободного перемещения виджетов.
cellHeight — высота одной ячейки.
animate — включение анимации при перетаскивании и изменении размера.

Элементы сетки можно добавлять программно:

grid.addWidget({
  x: 0,
  y: 0,
  w: 4,
  h: 2,
  content: '<div class="grid-stack-item-content">Пример виджета</div>'
});

Или использовать HTML-структуру с классами grid-stack и grid-stack-item.

Структура виджетов и опции

Каждый виджет — это контейнер с классом grid-stack-item. Основные атрибуты для конфигурации:

data-gs-x, data-gs-y — координаты виджета.
data-gs-width, data-gs-height — размеры в ячейках.
data-gs-min-width, data-gs-max-width, data-gs-min-height, data-gs-max-height — ограничения размеров.
data-gs-auto-position — автоматическая расстановка при добавлении новых виджетов.

Внутри виджета обязательно наличие элемента с классом grid-stack-item-content. Он отвечает за визуальное отображение контента и обработку событий.

Управление событиями

Gridstack.js предоставляет систему событий для управления поведением виджетов:

grid.on('added', function(event, items) {
  console.log('Добавлены новые виджеты:', items);
});

grid.on('change', function(event, items) {
  console.log('Изменения виджетов:', items);
});

grid.on('removed', function(event, items) {
  console.log('Удалены виджеты:', items);
});

added — срабатывает при добавлении виджета.
change — при перемещении или изменении размера.
removed — при удалении.

Эти события критически важны для unit-тестирования, так как позволяют отслеживать состояние сетки после действий.

Программное управление виджетами

Gridstack.js позволяет динамически изменять виджеты:

grid.move(el, x, y) — перемещение виджета.
grid.resize(el, w, h) — изменение размера.
grid.removeWidget(el) — удаление виджета.
grid.batchUpdate() / grid.commit() — пакетные изменения для оптимизации перерисовки.

Пример использования:

const widget = document.querySelector('.grid-stack-item');
grid.move(widget, 2, 3);
grid.resize(widget, 5, 2);

Методы для проверки состояния

Для unit-тестирования важны методы, позволяющие проверять текущее состояние сетки:

grid.engine.nodes — массив объектов виджетов с координатами и размерами.
grid.isAreaEmpty(x, y, w, h) — проверка, свободна ли область сетки.
grid.isNodeDroppable(node) — проверка, можно ли переместить виджет.

Пример проверки состояния:

const node = grid.engine.nodes[0];
console.assert(node.x === 2 && node.y === 3, 'Координаты виджета неверны');
console.assert(node.w === 5 && node.h === 2, 'Размер виджета неверен');

Интеграция с unit-тестами

Для тестирования компонентов на Gridstack.js используют фреймворки вроде Jest, Mocha или Vitest. Основные подходы:

1. Тестирование добавления виджетов

test('Добавление виджета', () => {
  const grid = GridStack.init({column: 12});
  grid.addWidget({x:0, y:0, w:3, h:2});
  expect(grid.engine.nodes.length).toBe(1);
  expect(grid.engine.nodes[0].w).toBe(3);
  expect(grid.engine.nodes[0].h).toBe(2);
});

2. Тестирование перемещения и изменения размера

test('Перемещение виджета', () => {
  const widget = grid.engine.nodes[0].el;
  grid.move(widget, 2, 2);
  grid.resize(widget, 4, 3);
  const node = grid.engine.nodes[0];
  expect(node.x).toBe(2);
  expect(node.y).toBe(2);
  expect(node.w).toBe(4);
  expect(node.h).toBe(3);
});

3. Тестирование удаления

test('Удаление виджета', () => {
  const widget = grid.engine.nodes[0].el;
  grid.removeWidget(widget);
  expect(grid.engine.nodes.length).toBe(0);
});

4. Тестирование событий

Использование мок-функций позволяет проверять корректность вызова событий:

const mockChange = jest.fn();
grid.on('change', mockChange);
grid.move(widget, 1, 1);
expect(mockChange).toHaveBeenCalled();

Работа с динамическими сетками

Gridstack.js поддерживает добавление и удаление колонок, изменение размеров сетки и адаптивное поведение. Для unit-тестирования критично проверять:

соответствие координат виджетов после изменения числа колонок (grid.column());
корректность работы float и автоматической расстановки (data-gs-auto-position);
сохранение состояния после сериализации и десериализации (grid.save() / grid.load()).

Пример сериализации:

const serialized = grid.save();
grid.removeAll();
grid.load(serialized);
expect(grid.engine.nodes.length).toBe(serialized.length);