Spec.Markup.Event

Use these steps to trigger events during a scenario.

To trigger an event, you'll want to first use Spec.Markup.target to target a particular element (or the document as a whole) to which subsequent events should apply.

For example,

Spec.describe "a form"
[ Spec.scenario "completing the form" (
    Spec.given (
      testSubject
    )
    |> when "the form is revealed"
      [ Spec.Markup.target << by [ id "show-form" ]
      , Spec.Markup.Event.click
      ]
    |> when "the name is entered"
      [ Spec.Markup.target << by [ id "first-name-field" ]
      , Spec.Markup.Event.input "Brian"
      , Spec.Markup.target << by [ id "last-name-field" ]
      , Spec.Markup.Event.input "Watkins"
      ]
    |> when "the form is submitted"
      [ Spec.Markup.target << by [ id "submit" ]
      , Spec.Markup.Event.click
      ]
    |> it "does something cool" (
      ...
    )
  )
]

Mouse Events

click : Context model -> Command msg

A step that simulates a click event on the targeted item, either the document as a whole (using the Spec.Markup.Selector.document selector or some particular HTML element).

This will trigger mousedown, mouseup, and click DOM events on the targeted item.

In several cases, you can use click to trigger other kinds of events. Use click to simulate checking or unchecking a checkbox. Use click to select a radio button. Use click to submit a form by clicking the associated button.

You can also use click on an anchor tag, but here the behavior is a little more complicated.

First of all, any click event handlers associated with the anchor tag will be triggered as expected.

If the anchor tag has an href attribute, then elm-spec can usually intercept the navigation, which allows you to use Spec.Navigation.observeLocation to make a claim about the location to which you've navigated. Elm-spec will simulate going to another page by replacing the program's view with a page that states the program has navigated outside the Elm context.

If the anchor tag has an href attribute and a target attribute or a download attribute then elm-spec will not intercept the navigation. This means that the navigation will proceed as if the program were actually running, and this will usually cause your specs to get into a bad state. So, rather than clicking such a link during a scenario, you should instead just observe that it has the href attribute you expect.

doubleClick : Context model -> Command msg

A step that simulates a double click on the targeted HTML element.

This will trigger two sets of mouseup, mousedown, and click DOM events and then a dblclick DOM event.

mouseDown : Context model -> Command msg

A step that simulates pressing the mouse button on the targeted item, either the document as a whole (using the Spec.Markup.Selector.document selector or some particular HTML element).

This will trigger a mouseDown DOM event on the targeted item.

mouseUp : Context model -> Command msg

A step that simulates releasing the mouse button on the targeted item, either the document as a whole (using the Spec.Markup.Selector.document selector or some particular HTML element).

This will trigger a mouseup DOM event on the targeted item.

mouseMoveIn : Context model -> Command msg

A step that simulates the mouse moving into the targeted HTML element.

This will trigger mouseover and mouseenter DOM events on the targeted element.

mouseMoveOut : Context model -> Command msg

A step that simulates the mouse moving out of the targeted HTML element.

This will trigger mouseout and mouseleave DOM events on the targeted element.

Form Events

input : String -> Context model -> Command msg

A step that simulates text input to the targeted HTML element.

This will set the value attribute of the targeted element to the given string and trigger an input DOM event on that element.

To trigger input events on a radio button just target the button and simulate a click on it.

To trigger input events on a select, use selectOption.

selectOption : String -> Context model -> Command msg

A step that simulates selecting an option from the menu generated by a <select> element.

This will select the option whose text or label matches the given string, and then trigger change and input DOM events on the targeted HTML <select> element.

Window Events

resizeWindow : ( Int, Int ) -> Context model -> Command msg

A step that simulates resizing the browser window to the given (width, height).

This will trigger a resize DOM event on the window object.

hideWindow : Context model -> Command msg

A step that simulates hiding the window from view.

This will trigger a visibilitychange DOM event on the document object.

showWindow : Context model -> Command msg

A step that simulates the window returning into view.

This will trigger a visibilitychange DOM event on the document object.

Focus Events

focus : Context model -> Command msg

A step that simulates the targeted HTML element receiving focus.

This will trigger a focus DOM event on the targeted element.

blur : Context model -> Command msg

A step that simulates the targeted HTML element losing focus.

This will trigger a blur DOM event on the targeted element.

Custom Events

trigger : String -> Value -> Context model -> Command msg

A step that triggers a custom DOM event on the targeted item.

Provide the name of the DOM event and a JSON value that specifes any properties to add to the event object.

For example, to simulate releasing the A key:

Spec.when "The A key is released"
  [ Spec.Markup.target << by [ id "my-field" ]
  , Json.Encode.object [ ( "keyCode", Encode.int 65 ) ]
      |> Spec.Markup.event.trigger "keyup"
  ]

You may trigger a custom DOM event on the document (by selecting it with Spec.Markup.Selector.document) or some particular HTML element.

brian-watkins/elm-spec/2.0.0