elm-explorations / test / 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, Json.Encode.Value ) -> Test.Html.Query.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

Passes if the event handler stops propagation of the event.

expectNotStopPropagation : Event msg -> Expectation

Passes if the event handler doesn't stop propagation of the event.

expectPreventDefault : Event msg -> Expectation

Passes if the event handler prevents default action of the event.

expectNotPreventDefault : Event msg -> Expectation

Passes if the event handler doesn't prevent default action of the event.

Event Builders

custom : String -> Json.Encode.Value -> ( String, Json.Encode.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, Json.Encode.Value )

A click event.

doubleClick : ( String, Json.Encode.Value )

A dblclick event.

mouseDown : ( String, Json.Encode.Value )

A mousedown event.

mouseUp : ( String, Json.Encode.Value )

A mouseup event.

mouseEnter : ( String, Json.Encode.Value )

A mouseenter event.

mouseLeave : ( String, Json.Encode.Value )

A mouseleave event.

mouseOver : ( String, Json.Encode.Value )

A mouseover event.

mouseOut : ( String, Json.Encode.Value )

A mouseout event.

input : String -> ( String, Json.Encode.Value )

An input event.

check : Basics.Bool -> ( String, Json.Encode.Value )

A change event where event.target.checked is set to the given Bool value.

submit : ( String, Json.Encode.Value )

A submit event.

blur : ( String, Json.Encode.Value )

A blur event.

focus : ( String, Json.Encode.Value )

A focus event.