Simulate drag and drop
- Dominant language
- Elm
- Stars
- 95
- Forks
- 28
- PR merge metrics
- No merged PRs in 30d
Description
NOTE: a PR that adds this should also include a new example in `examples/` that demonstrates a minimal app with drag and drop with realistic tests.
Accessibility guidelines: https://www.w3.org/wiki/PF/ARIA/BestPractices/DragDrop
Initial draft of `ProgramTest.dragAndDrop`:
```elm
import Html.Attributes as HA
import Json.Encode
import ProgramTest exposing (ProgramTest)
import Test.Html.Query as Query
import Test.Html.Selector exposing (attribute)
dragAndDrop : String -> String -> String -> ProgramTest model msg effect -> ProgramTest model msg effect
dragAndDrop dragSourceLabel dropEffect dropTargetLabel programTest =
let
dragSource grabState =
-- TODO: or with text dragSourceLabel
Query.find
[ attribute (HA.draggable "true")
, attribute (HA.attribute "aria-grab" grabState)
, attribute (HA.attribute "aria-label" dragSourceLabel)
]
dropTarget =
-- TODO: or with text dropTargetLabel
Query.find
[ attribute (HA.attribute "aria-dropeffect" dropEffect)
, attribute (HA.attribute "aria-label" dropTargetLabel)
]
in
programTest
-- TODO: should validate that there is a determinable ARIA role on the drag source
|> -- start the drag
ProgramTest.simulateDomEvent
(dragSource "supported")
( "dragstart", Json.Encode.object [] )
|> -- ensure the drag as started
ProgramTest.ensureView
(dragSource "true" >> Query.has [])
-- TODO: should validate that there is a determinable ARIA role on the drop target
|> -- mouseover the target
ProgramTest.simulateDomEvent dropTarget
( "dragenter", Json.Encode.object [] )
|> -- drop
ProgramTest.simulateDomEvent dropTarget
( "drop", Json.Encode.object [] )
```
Contributor guide
Research direction
Start from the proposed ProgramTest.dragAndDrop draft and compare its use of ProgramTest.simulateDomEvent and ProgramTest.ensureView with the existing APIs. The work is done when drag-and-drop simulation and its accessibility checks are defined, with a minimal app and realistic tests added under examples/.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- elm
- Domain
- testing
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100