Browse Source

insert post cypress svelte-dnd-action

master
Peter Babič 2 months ago
parent
commit
219b306e73
  1. 50
      content/blog/testing-svelte-dnd-action-with-cypress.md

50
content/blog/testing-svelte-dnd-action-with-cypress.md

@ -0,0 +1,50 @@
---
title: "Testing svelte-dnd-action with Cypress"
date: "2021-08-17"
updated: "2021-08-17"
taxonomies:
tags:
- svelte
- cypress
- javascript
---
Using Drag & Drop is probably easier than ever due to virtually unlimited
supply of new front-end libraries appearing every day. Making Drag & Drop
for a sortable trello-like boards or for file uploads work in the browser
is thus becoming a matter of importing a module and writing at most a few
lines, maybe sprinkling a configuration option here and there.
Doing automated testing on the stuff however is still not kind of there
yet, I would say, as I have spent a day trying to figure out how to write a
Cypress test snippet for the Drag & Drop functionality offered by the
awesome
[svelte-dnd-action](https://github.com/isaacHagoel/svelte-dnd-action)
library.
After sieving through dozens of StackOverflow posts and even trying every
solution in
[this lengthy thread](https://stackoverflow.com/a/55320650/1972509) I have
finally found a possible way forward in
[this SO answer](https://stackoverflow.com/a/55320650/1972509). The asnwer
does not provide the full solution, but instead a hint to trigger the
`mousemove` even twice in a row. Here a Cypress test snippet that works for
me:
```javascript
const clientX = 300
const clientY = 500
const force = true
cy.get("[data-cy=draggable]")
.trigger("mousedown")
.trigger("mousemove", { clientX, clientY, force })
.trigger("mousemove", { clientX, clientY, force })
.wait(1)
.trigger("mouseup", { force })
```
Also it did not work for me if I omitted that `wait(1)` for the reasons I
definitelo do not comprehend right now. Also, make sure to not use the
Svelte version `3.38.3` for this, due to a
[bug](https://github.com/isaacHagoel/svelte-dnd-action/issues/304#issuecomment-881090814).
Loading…
Cancel
Save