Testovanie svelte-dnd-action s Cypress

Používanie Drag & Drop je pravdepodobne jednoduchšie než kedykoľvek predtým, vďaka prakticky neobmedzenému množstvu nových front-end knižníc, ktoré každý deň pribúdajú. Implementovať Drag & Drop pre zoraditeľné trello-like tabule alebo pre nahrávanie súborov v prehliadači je tak otázkou importovania modulu a napísania nanajvýš pár riadkov, prípadne pridania nejakej konfiguračnej možnosti tu a tam.

Automatizované testovanie týchto vecí je však stále trochu v plienkach, čo môžem povedať zo skúsenosti, keďže som strávil celý deň pokusmi o to, ako napísať Cypress testovací úryvok pre funkciu Drag & Drop, ktorú ponúka skvelá knižnica svelte-dnd-action.

Po prelistovaní desiatok príspevkov na StackOverflow a vyskúšaní každého riešenia v tomto dlhom vlákne som nakoniec našiel možné východisko v tejto SO odpovedi. Odpoveď neposkytuje úplné riešenie, ale namiesto toho tip na spustenie udalosti mousemove dvakrát za sebou. Tu je Cypress testovací úryvok, ktorý mi funguje:

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 })

Tiež mi to nefungovalo, keď som vynechal wait(1), z dôvodov, ktorým momentálne úplne nerozumiem. Tiež si dajte pozor, aby ste na toto nepoužívali verziu Svelte 3.38.3, kvôli chybe.