Тестирование событий перетаскивания D3.js с помощью Cypress.js

Question

У меня есть объект SVG, который использует d3-zoom для масштабирования и панорамирования. Работает без нареканий, но проблема обнаружилась, когда я начал работать над интеграционными тестами, используя Cypress.js .

Я пытался использовать стандартные события мыши для элемента svg, чтобы имитировать поведение перетаскивания:

cy.get('svg')
  .trigger('mousedown', { which: 1, force: true })
  .trigger('mousemove', { position: 'left' })
  .trigger('mouseup', { position: 'left', force: true });

Приведенный выше пример взят из рецепта перетаскивания Cypress и выдает следующую ошибку в файле nodrag.js :

не может прочитать документ свойства неопределенного

Ниже вы можете увидеть, где происходит ошибка ( view is undefined):

__webpack_exports__["default"] = (function(view) {
  var root = view.document.documentElement,
  ...

Я потратил много часов, пытаясь вызвать событие по-другому, но безуспешно - как при попытке попробовать фрагмент кода выше с контейнером svg.

Помните, что я не могу получить доступ к любому пакету d3.js из теста Cypress, поскольку он импортирован как пакет NPM в приложении React.

Заранее спасибо за помощь!

Answer 1

Я немного отличался от вашего кода, поэтому вы можете попробовать

cy.get('svg')
.trigger('mousedown', { which: 1 })
.trigger('dragstart', {})
.trigger('drag', {});

Answer 2

Я мог получить только частичный ответ, прежде чем мне пришлось идти дальше, но, возможно, это может помочь вам или кому-то еще найти окончательное решение.

Чтобы исправить ошибку, свойство viewдолжны быть предоставлены для mousedown.Предоставление window, как это, позволило методам D3 запускаться правильно:

cy.get('svg')
  .trigger('mousedown', { which: 1, force: true, view: window }) // <-- here
  .trigger('mousemove', { position: 'left', view: window })      // <-- here
  .trigger('mouseup', { position: 'left', force: true });

Однако при выполнении теста не происходило перетаскивания или перемещения, и оттуда возникали другие вопросы.Начиная с ... Это правильный контекст для отправки вместе с событием?Казалось бы, так как window кажется единственным контекстом, который имеет цепочку свойств, которую ожидает D3:

view.document.documentElement

Или это анти-паттерн ... запах кода?

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

Первое касается того, как D3 обрабатывает события мыши и перетаскивания.D3 имеет многочисленные прослушиватели событий и обратные вызовы, которые переопределяют стандартные события и их соответствующие обработчики.

Во-вторых, iframes находятся в игре с Cyner Runner.

Может ли быть так, что события Cypress, запускаемые программным способом, правильно запускаются в iframe Cypress, но из-за агрессивной обработки событий D3 трансляция этих событий в iframe приложения теряется?Особенно если учесть, что ручное перетаскивание круга в окне просмотра тестирования работало нормально.

Что, опять же, приводит к:

• Не вызываются ли программно-инициируемые события в правильном контексте?
• Являются ли эти события каким-то образом поглощенными или сталкивающимися с обработчиками событий D3?

Я выбрал График направленной силы масштабирования в качестве объекта D3 внутри объекта D3.простое приложение Ember, для исследования этого вопроса.Он отлично воспроизвел упомянутую ошибку, так что это определенно вызов D3 + Cypress, не связанный с интерфейсной средой.

Я надеюсь, что это усилие будет полезным.

---

Продолжение ...

После дальнейшего чтения - Компромиссы Кипариса , и особенноих открытый запрос извлечения Поддержка событий собственного браузера - вполне вероятно, что переопределения обработки событий в D3 еще не полностью согласованы в Cypress.Более простые реализации, подобные описанным в примере drag & drop , не представляют проблем обработки событий, создаваемых сторонней библиотекой, такой как D3.Однако эта поддержка, похоже, находится в стадии разработки в команде Cypress.