Prioritize Browser Testing for Drag and Drop Features

2min Snip

00:00

Play full episode

Summary

Transcript

Episode notes

For effective testing of drag and drop functionality, prioritizing browser testing is essential due to the complexity involved in these operations. Browser testing allows for a focus on high-level interactions rather than getting bogged down in minutiae that can overwhelm unit tests. Utilizing established guides for tools like Cypress, Puppeteer, and Playwright can streamline the testing process. The emphasis should be on verifying that actions, such as dragging a card from one column to another, yield the expected results, rather than testing the underlying drag and drop library itself. Incorporating visual regression testing can further enhance the testing strategy by ensuring visual aspects function correctly during interactions. A robust test suite should cover multiple browsers, including Chrome, Firefox, and Safari, to ensure comprehensive compatibility and performance.

Scott and Wes talk with Alex Reardon from Atlassian about developing drag-and-drop libraries, specifically the challenges with creating efficient and accessible drag-and-drop functionalities for the web. They also explore what it takes to build and implement a system that works seamlessly across various frameworks.

Show Notes

00:00 Welcome to Syntax!
01:18 Brought to you by Sentry.io.
01:51 What Alex does at Atlassian
- react-beautiful-dnd
- Pragmatic drag and drop
04:38 What makes drag and drop tricky.
06:38 Use-cases.
10:54 What security is in place?
12:30 How to make it feel native.
19:20 Is the drag and drop spec ongoing?
20:03 How do you build this headless?
21:33 How does drag and drop work with frameworks?
23:48 Making drag and drop feel the same across mobile and desktop.
26:09 What’s the key to really good drag performance?
29:58 How do you make drag and drop accessible?
34:57 Pragmatic drag and drop code vs application code.
- Shoelace
- shadcn
40:00 How does testing work?
- Playwright
- Cypress
43:15 Internal adoption at Atlassian.
44:27 Working on high-impact projects.
49:15 Versioning and internal adoption at Atlassian.
51:29 Sick Picks + Shameless Plugs.