Тестирование после миграции

При переходе на новую версию библиотеки Gridstack.js критически важно проводить тщательное тестирование всех функциональных блоков интерфейса, использующих сетку. Основная цель — убедиться, что новые версии компонентов корректно обрабатывают drag & drop, ресайз, сохранение состояния и совместимость с существующими виджетами.

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

Инициализация сетки в Gridstack.js после миграции может претерпеть изменения в параметрах конфигурации. Необходимо убедиться в корректной работе следующих аспектов:

  • Инициализация контейнера: метод GridStack.init(options) должен корректно создавать сетку. Следует проверить, что контейнер получает правильные размеры и классы.
  • Параметры конфигурации: float, cellHeight, column, margin и disableOneColumnMode — их значения могут отличаться между версиями. Любое расхождение может привести к смещению виджетов.
  • События added, removed, change: после миграции необходимо убедиться, что события по-прежнему вызываются и содержат корректные данные о положении виджетов.

Пример проверки инициализации:

const grid = GridStack.init({
  column: 12,
  float: true,
  cellHeight: 80,
  margin: 5
});
console.assert(grid.engine.nodes.length === 0, "Сетка должна быть пустой после инициализации");

Тестирование drag & drop

Drag & drop — ключевой элемент функционала Gridstack.js. Основные моменты, на которые стоит обратить внимание после миграции:

  • Перетаскивание виджетов: убедиться, что виджеты перемещаются без смещения или наложения друг на друга.
  • События dragstart, drag, dragstop: проверка корректной генерации событий и передачи правильных координат.
  • Интеграция с внешними библиотеками: если используется jQuery UI или нативный drag & drop, необходимо убедиться в совместимости.

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

const node = grid.getNodeById('widget1');
grid.move(node, 2, 3);
console.assert(node.x === 2 && node.y === 3, "Виджет должен корректно перемещаться");

Проверка ресайза виджетов

Изменение размеров виджетов после миграции может вызвать ошибки отображения. Основные параметры, которые проверяются:

  • Минимальные и максимальные размеры: minWidth, minHeight, maxWidth, maxHeight.
  • События resizestart, resize, resizestop: корректная генерация событий и передача актуальных размеров.
  • Автоматическое смещение соседних виджетов: после изменения размера виджет должен не нарушать сетку.

Пример проверки ресайза:

const node = grid.getNodeById('widget2');
grid.resize(node, 4, 2);
console.assert(node.w === 4 && node.h === 2, "Виджет должен изменять размер корректно");

Сохранение и восстановление состояния

После миграции особенно важно проверить сохранение состояния сетки, так как формат хранения данных может измениться:

  • Методы save() и load(): проверка того, что виджеты возвращаются в исходное положение и размер.
  • JSON-структура состояния: убедиться, что все необходимые свойства (x, y, w, h, id) сохраняются корректно.
  • Интеграция с сервером: если состояние сетки сохраняется на сервере, необходимо проверить совместимость сериализованного JSON с бэкендом.

Пример сохранения и восстановления:

const serialized = grid.save();
grid.removeAll();
grid.load(serialized);
console.assert(grid.engine.nodes.length === serialized.length, "Все виджеты должны быть восстановлены");

Тестирование адаптивного поведения

Gridstack.js активно используется в адаптивных интерфейсах, поэтому необходимо проверить поведение сетки при изменении размеров окна:

  • Переключение на режим одной колонки (oneColumnMode): проверка корректного стека виджетов.
  • Смена количества колонок (column): убедиться, что виджеты не перекрываются и сохраняют пропорции.
  • Событие change при ресайзе окна: должно правильно отражать новые координаты виджетов.

Автоматизация тестов

Для крупных проектов рекомендуется использовать автоматизацию тестирования:

  • Unit-тесты с Jest или Mocha для проверки логики и состояния сетки.
  • E2E-тесты с Cypress или Playwright для проверки перетаскивания, ресайза и адаптивного поведения в браузере.
  • Снимки состояния (snapshot) для визуальной регрессии при изменении версий Gridstack.js.

Пример unit-теста на Jest:

test('Добавление нового виджета', () => {
  const grid = GridStack.init();
  const node = grid.addWidget('<div class="grid-stack-item"></div>', {x:0, y:0, w:2, h:2});
  expect(grid.engine.nodes).toContain(node);
});

Проверка совместимости с кастомными виджетами

Если сетка содержит кастомные виджеты с собственным DOM и скриптами, необходимо проверить:

  • События пользовательских компонентов после перемещения или ресайза.
  • Стили и CSS-классы — они не должны ломаться при изменении позиции или размера.
  • Скрипты инициализации внутри виджетов — должны корректно работать после перезагрузки или восстановления состояния сетки.

Логирование и диагностика ошибок

Для выявления проблем после миграции целесообразно подключать расширенное логирование:

  • console.log(grid.engine.nodes) после ключевых операций.
  • Прослушка событий:
grid.on('change', (event, items) => console.table(items));
  • Проверка консольных ошибок при drag & drop и ресайзе.

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

Оглавление