Actions Object

Functions for simulating events on DOM nodes and React components.

If you're looking to implement your own custom action, this example shows how to do it.

Note on the operating DOM container:

When these helpers are called directly, they will operate with the "root node" as the DOM container. However, the recommended approach is to use them via Scope objects that you receive through drilling, in which case the container is whatever the scope is representing at the time.

Examples

Invoking through the Scope API

import drill from 'react-drill'

drill(component)
  .find('.something')
    .click()

Invoking a helper directly based on rootNode

const drill = require('react-drill');

drill.Selectors.setRootNode(document.body);
drill.Actions.find('.something');

// => document.body.querySelector('.something');

Static Methods

    blur(selector: String | HTMLElement) -> Event

    Simulate blur on any HTMLElement.

    change(
      selector: String | HTMLElement,
      attrs: Object
    )

    Simulate a change on any HTMLElement.

    Parameters (2)

    selector
    		String | HTMLElement
    attrs
    		Object

    The "change" event attributes.

    check(selector: String | HTMLElement)

    Check a checkbox.

    This action dispatches a native browser event as well as the React change event.

    click(
      selector: String | HTMLElement,
      options: Object
    )

    Simulate a React mouse-click on any HTMLElement.

    Parameters (2)

    selector
    		String | HTMLElement
    options
    		Object

    Synthetic event options to pass to React.

    clickNative(selector: String | HTMLElement)

    Simulate a native browser mouse-click event on any HTMLElement.

    dispatchNativeEvent(
      selector: String | HTMLElement,
      type: String,
      attrs: Object
    )

    Dispatch a Native event using dispatchEvent to trigger events added via addEventListener.

    This is useful if you need to interface with a non-React library.

    Parameters (3)

    selector
    		String | HTMLElement
    type
    		String
    attrs
    		Object

    See Event attributes on MDN.

    fillIn(
      selector: String | HTMLElement,
      text: String
    )

    Fill a text widget with some text.

    This action modifies the DOM node's "value" property and triggers the React "input" and "change" events.

    focus(selector: String | HTMLElement) -> Event

    Simulate focus on any HTMLElement.

    keyDown(
      selector: String | HTMLElement,
      keyCode: Number,
      options: Object
    )

    Simulate single "keyDown" event. Useful to test an isolated[1] onKeyDown handler.

    [1] See the note on Actions.keyPress

    keyPress(
      selector: String | HTMLElement,
      keyCode: Number,
      options: Object
    )

    Simulate single "keyPress" event. Useful to test an isolated[1] onKeyPress handler.

    [1] When a user is performing an action that triggers such an event in the browser, it will be preceded and followed by other events. For this reason, this action is not a reliable simulation for such a scenario. Consider using Actions.fillIn or Actions.typeIn instead.

    keyUp(
      selector: String | HTMLElement,
      keyCode: Number,
      options: Object
    )

    Simulate single "keyUp" event. Useful to test an isolated[1] onKeyUp handler.

    [1] See the note on Actions.keyPress

    mouseDown(selector: String | HTMLElement)

    Simulate a mouse-down on any HTMLElement.

    TODO: accept a button?

    mouseEnter(selector: String | HTMLElement)

    Simulate a mouseEnter on any HTMLElement. Assumes you are leaving document.body; use Actions.mouseTransition if you need to control both targets

    mouseLeave(selector: String | HTMLElement)

    Simulate a mouseLeave on any HTMLElement. Assumes you are entering document.body; use Actions.mouseTransition if you need to control both targets.

    mouseTransition(
      fromSelector: String | HTMLElement,
      toSelector: String | HTMLElement
    )

    Simulate a mouseEnter + mouseLeave events for two nodes

    Both the native mouseOut and mouseOver events need to be simulated in order for the mouseEnter or mouseLeave to fire.

    https://github.com/facebook/react/issues/1297

    mouseUp(selector: String | HTMLElement)

    Simulate a mouse-up on any HTMLElement.

    TODO: accept a button?

    paste(selector: String | HTMLElement)

    Paste some textual content into some text widget triggering the React "paste" event.

    References:

    select(
      selector: String | HTMLElement,
      value: String
    )

    Select an option inside a <select /> tag.

    Parameters (2)

    selector
    		String | HTMLElement
    value
    		String

    The value of the <option /> you want to select.

    submit(selector: String | HTMLElement)

    Submit a form elment.

    typeIn(
      selector: String | HTMLElement,
      text: String
    )

    Simulate key-presses to fill in an <input /> with some text.

    uncheck(selector: String | HTMLElement)

    Unmark a checkbox as checked.

    This action dispatches a native browser event as well as the React change event.