This module lets you simulate events on Html
values and expect that
they result in certain Msg
values being sent to update
.
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"))
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.
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.