avh4 / avh4/elm-program-test

Simulate drag and drop

Open
#125 0 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.