dom-sim
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

dom-sim · GitHub license npm version Build Status

dom-sim allows you to simulate user interaction with your interface by firing DOM events and changing input values.

Installation

npm install --save-dev dom-sim

Usage

Simulating events

You can simulate DOM events by using trigger().

import {trigger} from "dom-sim"
 
const button = document.querySelector("button")
trigger(button, 'click')

Additionally you can optionally pass an object with properties to be added to the event object.

import {trigger} from "dom-sim"
 
const input = document.querySelector("input[type='text']")
trigger(input, 'keydown', { charCode: 13 })

Setting inputs element values

import {setTextInputValue, setTextAreaValue, setCheckboxValue, setRadioButton, setSelectValue} from "dom-sim"
 
setTextInputValue(document.querySelector("input[type=text]"), "Sasquatch") //Text field now has value "Sasquatch"
setTextAreaValue(document.querySelector("textarea"), "Sasquatch") //Text area now has value "Sasquatch"
setCheckboxValue(document.querySelector("input[type=check]"), true) //Checkbox is now checked
setRadioButton(document.querySelector("input[type=radio]"), true) //Radio button is now selected
setSelectValue(document.querySelector("select"), "Hancock") //Dropdown list now has the value "Hancock" selected

Don't forget to fire the appropriate event after you change an input value or any code watching for changes will be unaware of the change.

import {setTextInputValue, trigger} from "dom-sim"
 
const input = document.querySelector("input[type='text']")
setTextInputValue(input, "Sasquatch")
trigger(input, 'change')

Package Sidebar

Install

npm i dom-sim

Weekly Downloads

0

Version

1.0.0

License

MIT

Unpacked Size

24.4 kB

Total Files

12

Last publish

Collaborators

  • tachyon5k