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 [] )
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
: