E2E-тестирование взаимодействий

E2E (End-to-End) тестирование направлено на проверку работы интерфейса в условиях, максимально приближенных к реальному использованию. Для приложений на Gridstack.js это особенно важно, поскольку библиотека управляет интерактивными сетками и виджетами, поддерживая динамическое перемещение и изменение размеров элементов.

Gridstack.js использует контейнер с сеткой (grid), внутри которого располагаются виджеты (widgets). E2E-тестирование должно проверять:

  • корректность инициализации сетки и виджетов;
  • реакцию на перетаскивание и ресайз виджетов;
  • правильное обновление DOM после действий пользователя;
  • корректное сохранение и восстановление состояния сетки.

Для тестирования взаимодействий чаще всего применяются фреймворки Cypress, Playwright или Selenium, которые позволяют эмулировать действия пользователя и наблюдать изменения DOM.

Настройка тестового окружения

  1. Подключение Gridstack.js в тестируемый проект:
import { GridStack } from 'gridstack';
import 'gridstack/dist/gridstack.css';

const grid = GridStack.init({ staticGrid: false });
grid.addWidget('<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2"><div class="grid-stack-item-content">Widget 1</div></div>');
  1. Создание контейнера для тестов:
  • в HTML-файле добавляется <div class="grid-stack"></div>;
  • стили сетки должны быть загружены, чтобы тестируемые элементы корректно занимали позиции и размеры.
  1. Использование моков и фикстур:
  • фикстуры позволяют задавать начальное состояние виджетов, что критично для повторяемости тестов;
  • мок-данные для сохранения состояния позволяют проверять корректность сериализации сетки после изменений.

Симуляция перетаскивания и изменения размеров

Перетаскивание (drag)

Gridstack.js реализует drag через Interact.js, поэтому при E2E-тестировании важно имитировать последовательность событий:

  1. mousedown на заголовке виджета;
  2. mousemove с координатами новой позиции;
  3. mouseup для завершения перемещения.

Пример для Cypress:

cy.get('.grid-stack-item').first()
  .trigger('mousedown', { button: 0, clientX: 50, clientY: 50 })
  .trigger('mousemove', { clientX: 150, clientY: 150 })
  .trigger('mouseup');

Ключевой момент: проверка после drag должна включать не только изменение координат виджета, но и его положения в сетке (data-gs-x, data-gs-y).

Изменение размеров (resize)

Resize также требует эмуляции пользовательских событий:

  1. mousedown на краю виджета (handle);
  2. mousemove с новыми размерами;
  3. mouseup для подтверждения.

Пример:

cy.get('.grid-stack-item .ui-resizable-se').first()
  .trigger('mousedown', { button: 0, clientX: 200, clientY: 200 })
  .trigger('mousemove', { clientX: 300, clientY: 300 })
  .trigger('mouseup');

После изменения размеров проверяется data-gs-width и data-gs-height.

Проверка событий Gridstack.js

Gridstack.js генерирует ряд событий, которые критично тестировать:

  • change — вызывается при изменении положения или размеров виджетов;
  • added / removed — при добавлении или удалении элементов;
  • dragstart / dragstop и resizestart / resizestop — для проверки корректного начала и завершения взаимодействий.

Пример проверки события в Cypress:

cy.window().then(win => {
  cy.spy(win.grid, 'on').withArgs('change');
});

Асинхронность и тайминги

Взаимодействие с DOM и обработка событий в Gridstack.js происходит асинхронно. В E2E-тестах важно учитывать задержку:

  • после drag/resize использовать cy.wait() или проверять состояние через .should() для ожидания обновления DOM;
  • при работе с событиями лучше подписываться на них и проверять вызовы через spy/stub.

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

Gridstack.js позволяет сериализовать сетку через grid.save() и восстанавливать её через grid.load(). В E2E-тестах проверяются:

  1. Сериализация после перемещения и изменения размеров виджетов;
  2. Восстановление состояния и корректное позиционирование виджетов;
  3. Сохранение порядка виджетов при динамическом добавлении/удалении.

Пример:

cy.window().then(win => {
  const state = win.grid.save();
  expect(state).to.have.length(1);
  expect(state[0].x).to.equal(1);
});

Проверка адаптивности сетки

Gridstack.js поддерживает responsive layout:

  • при изменении ширины контейнера виджеты могут менять позиции;
  • важно тестировать, что drag/resize работают корректно при разных breakpoint’ах;
  • можно имитировать ресайз окна в тестах:
cy.viewport(1024, 768); // desktop
cy.viewport(375, 667);  // mobile

После каждого изменения проверяется корректность позиционирования виджетов.

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

  • Использовать функции-утилиты для drag/resize, чтобы код тестов был читаемым и повторно используемым;
  • Для сложных сеток создавать фикстуры с большим количеством виджетов, чтобы проверять взаимодействия в стресс-сценариях;
  • Логировать события Gridstack.js при тестах для упрощения отладки;
  • Проверять не только визуальные изменения, но и атрибуты DOM, которые управляют сеткой.

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

Оглавление