avh4 / elm-program-test

Test Elm programs
https://elm-program-test.netlify.com/
MIT License
93 stars 28 forks source link

Simulate drag and drop #125

Open avh4 opened 3 years ago

avh4 commented 3 years ago

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