elm-program-test icon indicating copy to clipboard operation
elm-program-test copied to clipboard

Simulate drag and drop

Open avh4 opened this issue 4 years ago • 0 comments

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:

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

avh4 avatar May 13 '21 22:05 avh4