Тестирование сохранения данных

Gridstack.js — это мощная библиотека для создания динамических, перетаскиваемых сеток (grid layout) в браузере. Одной из ключевых задач при использовании Gridstack является сохранение состояния сетки после изменений пользователем и корректная проверка этого процесса через тестирование.

Методы сохранения данных в Gridstack

Gridstack предоставляет встроенные механизмы для получения текущего состояния сетки и его последующего сохранения. Основной метод для этого — grid.save(). Он возвращает массив объектов, каждый из которых описывает позицию и размер виджета:

const serializedData = grid.save();
console.log(serializedData);

Каждый объект содержит следующие ключи:

  • x — позиция по горизонтали (колонка)
  • y — позиция по вертикали (ряд)
  • width — ширина виджета в колонках
  • height — высота виджета в рядах
  • id — идентификатор элемента (если задан)

Для восстановления состояния используется метод grid.load(data):

grid.load(serializedData);
grid.commit(); // применяет изменения

commit() важен для применения загруженных данных и синхронизации DOM с внутренним состоянием Gridstack.

Подходы к тестированию сохранения

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

  1. Тестирование сериализации

    Проверяется корректность массива данных, который возвращает метод grid.save(). Основные сценарии:

    • После перемещения виджета x и y изменяются согласно новым координатам.
    • Размеры width и height корректно отражают изменения, если пользователь изменял размеры виджетов.
    • Для виджетов с заданным id сохраняется идентификатор.

    Пример проверки:

const serialized = grid.save();
serialized.forEach(item => {
  if (!('x' in item && 'y' in item && 'width' in item && 'height' in item)) {
    throw new Error("Ошибка сериализации виджета");
  }
});

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

    После загрузки сохраненных данных через grid.load(data) необходимо проверить:

    • Виджеты вернулись в правильные координаты.
    • Размеры соответствуют сохранённым значениям.
    • Состояние сетки синхронизировано с DOM.

    Пример проверки:

grid.load(serialized);
grid.commit();

const widgets = document.querySelectorAll('.grid-stack-item');
widgets.forEach((widget, index) => {
  const data = serialized[index];
  const rect = widget.getBoundingClientRect();
  // Проверка позиции и размера через CSS или внутренние методы Gridstack
});

  1. Тестирование с динамическими изменениями

    Gridstack поддерживает добавление и удаление виджетов в реальном времени. Тестирование должно учитывать:

    • Добавленные виджеты корректно сохраняются и восстанавливаются.
    • Удалённые виджеты не появляются при повторной загрузке данных.
    • Перетаскивание и изменение размера динамически добавленных виджетов отражается в сохранённой модели.

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

Для автоматизации используют фреймворки типа Jest, Mocha или Cypress. Примеры практик:

  • Jest + jsdom — для unit-тестов методов save и load без реального браузера.

  • Cypress — для e2e-тестирования пользовательского интерфейса:

    • Перетаскивание виджетов через cy.get().trigger('mousedown') и trigger('mousemove').
    • Проверка DOM после grid.save() и grid.load() на соответствие ожидаемым координатам.
    • Сценарии с добавлением/удалением виджетов.

Особенности тестирования сложных сеток

  1. Nested grids Gridstack поддерживает вложенные сетки. Сохранение данных таких сеток требует рекурсивного вызова save() и load() для каждого уровня.

  2. Responsiveness При изменении ширины экрана позиции виджетов могут меняться. Для тестирования важно проверять сохранение состояния до и после адаптивного изменения размеров контейнера.

  3. Динамическая подгрузка контента Если виджеты загружаются асинхронно (например, через API), необходимо убедиться, что метод load() вызывается после полной инициализации элементов, иначе данные могут быть некорректными.

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

  • Использовать идентификаторы для всех виджетов — это позволяет сохранять порядок и избегать конфликтов при динамических изменениях.
  • Вызывать commit() после load() — это гарантирует, что DOM синхронизирован с внутренней моделью Gridstack.
  • Хранить сохранённое состояние в JSON — это универсальный формат, легко сохраняется в localStorage, базе данных или через API.
  • Покрывать тестами критичные сценарии: перетаскивание, изменение размеров, удаление, добавление новых виджетов, адаптивность.

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

Оглавление