Test.Html.Event

This module lets you simulate events on Html values and expect that they result in certain Msg values being sent to update.

Simulating Events

type Event msg

A simulated event.

See simulate.

simulate : ( String, Value ) -> Single msg -> Event msg

Simulate an event on a node.

import Test.Html.Event as Event


type Msg
    = Change String




test "Input produces expected Msg" <|
    \() ->
        Html.input [ onInput Change ] [ ]
            |> Query.fromHtml
            |> Event.simulate (Event.input "cats")
            |> Event.expect (Change "cats")

expect : msg -> Event msg -> Expectation

Passes if the given message is triggered by the simulated event.

import Test.Html.Event as Event


type Msg
    = Change String




test "Input produces expected Msg" <|
    \() ->
        Html.input [ onInput Change ] [ ]
            |> Query.fromHtml
            |> Event.simulate (Event.input "cats")
            |> Event.expect (Change "cats")

toResult : Event msg -> Result String msg

Returns a Result with the Msg produced by the event simulated on a node. Note that Event.expect gives nicer messages; this is generally more useful when testing that an event handler is not present.

import Test.Html.Event as Event




test "Input produces expected Msg" <|
    \() ->
        Html.input [ onInput Change ] [ ]
            |> Query.fromHtml
            |> Event.simulate (Event.input "cats")
            |> Event.toResult
            |> Expect.equal (Ok (Change "cats"))

Testing Event Effects

These functions allow you to test that your event handlers are (or are not) calling stopPropagation() and preventDefault(). In Elm, you do this by calling special functions in Html.Events.

expectStopPropagation : Event msg -> Expectation

expectNotStopPropagation : Event msg -> Expectation

expectPreventDefault : Event msg -> Expectation

expectNotPreventDefault : Event msg -> Expectation

Event Builders

custom : String -> Value -> ( String, Value )

Simulate a custom event. The String is the event name, and the Value is the event object the browser would send to the event listener callback.

import Test.Html.Event as Event
import Json.Encode as Encode exposing (Value)




type Msg
    = Change String




test "Input produces expected Msg" <|
    \() ->
        let
            simulatedEventObject : Value
            simulatedEventObject =
                Encode.object
                    [ ( "target"
                      , Encode.object [ ( "value", Encode.string "cats" ) ]
                      )
                    ]
        in
            Html.input [ onInput Change ] [ ]
                |> Query.fromHtml
                |> Event.simulate (Event.custom "input" simulatedEventObject)
                |> Event.expect (Change "cats")

click : ( String, Value )

A click event.

doubleClick : ( String, Value )

A dblclick event.

mouseDown : ( String, Value )

A mousedown event.

mouseUp : ( String, Value )

A mouseup event.

mouseEnter : ( String, Value )

A mouseenter event.

mouseLeave : ( String, Value )

A mouseleave event.