jquery/jquery-simulate

jQuery Event Unit Testing Helpers

jQuery.simulate()

Simulate events to help unit test user interactions.

Project Status

jquery-simulate is in use by projects of the OpenJS Foundation, but isn't under active development. Usually issues are addressed by members of the jQuery UI team when they're affected, while other pull requests linger and get stale. We hesitate to put more time into this project, since its future is unclear.

Specifically we're hoping for the WebDriver API to become a much better solution. We're currently experimenting with that, via Intern on PEP).

That said, this project is stable and should work fine. Just keep the above in mind before using it.

How to build

If you don't yet have grunt installed:

npm install -g grunt-cli

Then:

npm install
grunt

How to test

Open the test/index.html in a browser.

jQuery Core Support

Simulate supports jQuery Core 1.7+

jquery-simulate's Issues

module is not defined

..my bad, was editing wrong file :(

default clientX/Y mouse event property to a position within the target element

currently, the clientX/Y is set to 1 for the mouseEvent if not overridden by options. This should default to a position within the target element.

Simulating selecting an option in a <select> tag

How would I simulate clicking on an option in a select tag? I am using this code but it's not updating the actual page. It could be special validation in the web page, but thought I would ask.

$('#state option').filter('[value=3]').simulate('click');

The page in question is here, the State dropdown:

https://www.upstart.com/funding_form

Thx.

KeyEvent: 'which' property is not declared

'which' property of keyboard events is not declared

Not working on Chrome Version 56

No issues in other browsers, just Chrome v56.

Using drag on element.

Tests for latest code ported from UI codebase

• drag options: x, y, handle
• drag simulating mousemove: document -> target.ownerDoucment
• drag element removed during drag: if ( $.contains( document, target ) ) {
• mouse event options: button value -1.

Commits:

• 44594dd
• dd3c930
• fce39f8
• 779bcef
• 386afd3

Remove dependency on jQuery UI

There are several instances of $.ui in the codebase. Only core should remain a dependency.

Null relatedTarget in HtmlUnit

Very useful project!

I find that when running tests with jasmine-maven-plugin, specifically when running a headless test (which internally uses HtmlUnit for the "browser") that event.relatedTarget can be null. This throws on line 118 which tries to get event.relatedTarget.ownerDocument. The same thing works fine when testing inside a browser.

My fix is:
eventDoc = event.relatedTarget ? event.relatedTarget.ownerDocument : undefined || document;

fire mouse up at the ownerDocument instead of document

Similar to the change in this commit: 779bcef

Should the mouseup event also get fired on target.ownerDocument instead of document?
(here: https://github.com/jquery/jquery-simulate/blob/master/jquery.simulate.js#L325)

This change fixes an issue with drag and drop within an iframe for me. (Not sure if it has other implications, though)

Touch events are not supported

Any prospects or debate on this? Would be very useful to have touchstart, touchmove, touchend etc.

Can't install from npm

Here's my npm-debug.log file output:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node',
1 verbose cli   '/Users/shawn/.node/bin/npm',
1 verbose cli   'install',
1 verbose cli   'jquery-simulate' ]
2 info using [email protected]
3 info using [email protected]
4 silly loadCurrentTree Starting
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 silly fetchPackageMetaData jquery-simulate
8 silly fetchNamedPackageData jquery-simulate
9 silly mapToRegistry name jquery-simulate
10 silly mapToRegistry using default registry
11 silly mapToRegistry registry https://registry.npmjs.org/
12 silly mapToRegistry data Result {
12 silly mapToRegistry   raw: 'jquery-simulate',
12 silly mapToRegistry   scope: null,
12 silly mapToRegistry   escapedName: 'jquery-simulate',
12 silly mapToRegistry   name: 'jquery-simulate',
12 silly mapToRegistry   rawSpec: '',
12 silly mapToRegistry   spec: 'latest',
12 silly mapToRegistry   type: 'tag' }
13 silly mapToRegistry uri https://registry.npmjs.org/jquery-simulate
14 verbose request uri https://registry.npmjs.org/jquery-simulate
15 verbose request no auth needed
16 info attempt registry request try #1 at 3:35:57 PM
17 verbose request id 8be6692d3b1c87d6
18 http request GET https://registry.npmjs.org/jquery-simulate
19 http 200 https://registry.npmjs.org/jquery-simulate
20 verbose headers { server: 'nginx/1.10.1',
20 verbose headers   'content-type': 'application/json',
20 verbose headers   'last-modified': 'Thu, 02 Apr 2015 22:12:07 GMT',
20 verbose headers   etag: 'W/"551dbeb7-1a6"',
20 verbose headers   'content-encoding': 'gzip',
20 verbose headers   'cache-control': 'max-age=300',
20 verbose headers   'content-length': '248',
20 verbose headers   'accept-ranges': 'bytes',
20 verbose headers   date: 'Thu, 12 Jan 2017 23:35:54 GMT',
20 verbose headers   via: '1.1 varnish',
20 verbose headers   age: '0',
20 verbose headers   connection: 'keep-alive',
20 verbose headers   'x-served-by': 'cache-lax8628-LAX',
20 verbose headers   'x-cache': 'HIT',
20 verbose headers   'x-cache-hits': '1',
20 verbose headers   'x-timer': 'S1484264154.758616,VS0,VE161',
20 verbose headers   vary: 'Accept-Encoding' }
21 silly get cb [ 200,
21 silly get   { server: 'nginx/1.10.1',
21 silly get     'content-type': 'application/json',
21 silly get     'last-modified': 'Thu, 02 Apr 2015 22:12:07 GMT',
21 silly get     etag: 'W/"551dbeb7-1a6"',
21 silly get     'content-encoding': 'gzip',
21 silly get     'cache-control': 'max-age=300',
21 silly get     'content-length': '248',
21 silly get     'accept-ranges': 'bytes',
21 silly get     date: 'Thu, 12 Jan 2017 23:35:54 GMT',
21 silly get     via: '1.1 varnish',
21 silly get     age: '0',
21 silly get     connection: 'keep-alive',
21 silly get     'x-served-by': 'cache-lax8628-LAX',
21 silly get     'x-cache': 'HIT',
21 silly get     'x-cache-hits': '1',
21 silly get     'x-timer': 'S1484264154.758616,VS0,VE161',
21 silly get     vary: 'Accept-Encoding' } ]
22 verbose get saving jquery-simulate to /Users/shawn/.npm/registry.npmjs.org/jquery-simulate/.cache.json
23 verbose correctMkdir /Users/shawn/.npm correctMkdir not in flight; initializing
24 verbose makeDirectory /Users/shawn/.npm creation not in flight; initializing
25 silly makeDirectory /Users/shawn/.npm uid: 501 gid: 20
26 verbose stack TypeError: Cannot convert undefined or null to object
26 verbose stack     at pickVersionFromRegistryDocument (/Users/shawn/.node/lib/node_modules/npm/lib/fetch-package-metadata.js:125:29)
26 verbose stack     at /Users/shawn/.node/lib/node_modules/npm/node_modules/iferr/index.js:13:50
26 verbose stack     at /Users/shawn/.node/lib/node_modules/npm/lib/utils/pulse-till-done.js:20:8
26 verbose stack     at saved (/Users/shawn/.node/lib/node_modules/npm/lib/cache/caching-client.js:174:7)
26 verbose stack     at /Users/shawn/.node/lib/node_modules/npm/node_modules/graceful-fs/polyfills.js:261:18
26 verbose stack     at FSReqWrap.oncomplete (fs.js:123:15)
27 verbose cwd /Users/shawn/dev/scootaloo
28 error Darwin 14.5.0
29 error argv "/usr/local/bin/node" "/Users/shawn/.node/bin/npm" "install" "jquery-simulate"
30 error node v6.9.2
31 error npm  v4.0.5
32 error Cannot convert undefined or null to object
33 error If you need help, you may report this error at:
33 error     <https://github.com/npm/npm/issues>
34 verbose exit [ 1, true ]

Use `new MouseEvent()` when possible

See http://trac.webkit.org/changeset/140657

Update .jshintrc to match style guide

See 1. Linting in the JS style guide.

Cannot simulate delegated events (e.g. click)

replace browser sniffs with feature detects

Simulating click should simulate mousedown, mouseup, click

pointerdown and pointerup events in IE & edge

$(element).simulate('mousedown') does not trigger pointerdown in IE & Edge
$(element).simulate('pointerdown') triggers an error
Same for mouseup vs. pointerup.

This makes portable tests a lot more complex than they could be and derail the purpose of jQuery.simulate for mouse events when targeting IE & Edge.

refactor dispatchEvent

currently it's passed in type as a formal parameter:

dispatchEvent: function( elem, type, event ) 

can't we just use event.type?

drag and drop refer to document while they should refer to element

if you implement a drag by binding all events 'mousedown','mousemove','mouseup' to the element, simulate will not be able to move the element as it dispatches even on doc instead of element.

This can be reproduced based on the plunker : http://plnkr.co/edit/fNL8esuTYapkj48p6XkO?p=preview

currently includes the fix - so you need to change simulate.js to reproduce the bug

If statement at the top of dispatchEvent causes event params to not work

These lines:

        if ( elem[ type ] ) {
            elem[ type ]();
        } else 

At the top of dispatchEvent cause issues when trying to simulate Ctrl + Clicks. If you remove that if statement, everything works correctly. Here is the code that doesn't work correctly:

$(document.body).simulate('click', {ctrlKey: true});

Furthermore, looking at https://github.com/jquery/jquery-ui/blob/master/tests/jquery.simulate.js I see that those lines are not present. How come they were added in this repository?

The event object is not passed to the handler

Regression after 206bbf8. In this commit, the following code was added:

if ( elem[ type ] ) {
    elem[ type ]();
} else …

But in this code, the event object is not passed to the handler! It leads to lots of bugs, for example, inability to use options for the click event:

$('button').simulate('click', { button: 2 }); /* right mouse button */

It has bad influence on the focus (and hence focusin and focusout) event as well.

Why not active development?

Is there a reason this isn't under active development that someone (e.g. @jzaefferer or @scottgonzalez) can explain more fully than the bit in the README?

Was it determined to be too difficult or impossible to simulate some of these events in even just the popular browsers? Or maybe it was just because Selenium was and is still popular?

A downside with Selenium and its WebDriver API is that it can't attach to existing browsers, but instead controls the whole browser lifecycle, so I feel there's still value in a library like this for the use case of injecting scripts into open pages.

Not Working on Firefox & IE

Hi !

anyone can put this to work with Firefox and IE?

Element type:
SELECT

Event type:
MOUSEDOWN

can't put'it to work on the 2 browsers :(

Clarify PhantomJS dependency

Since PhantomJS is not in package.json, grunt relies on a globally installed version. Either clarify that in the documentation, or put PhantomJS in the dependencies. Running grunt without PhantomJS installed globally will result in a cryptic Error: spawn ENOENT.

I'll be happy to submit a pull request for either choice.

properly assign event.button/event.buttons

currently, only event.button is populated. However, there is now also event.buttons in some browsers.

Investigate keyCode logic

This code assumes keyCode can be less than zero, is that even true?

event.keyCode = (options.charCode > 0) ? options.charCode : options.keyCode;

can we just use:

is charCode ever <0 ? Can we just use charCode || keyCode?

implement initKeyboardEvent for Webkit

currently, we fallback from

event = document.createEvent( "KeyEvents" );
                event.initKeyEvent

to just creating a generic event in Webkit. Webkit has an alternate implementation called initKeyBoardEvent, which needs to be evaluated rather than just using generic events.

simulated click events don't behave like real click events in oldIE

see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info

checkboxes don't fire state changes, @nzakas did great detective work there.

Error with HTTPs

Blocked a frame with origin "..." from accessing a frame with origin "...". Protocols, domains, and ports must match.

Uncaught SecurityError: Blocked a frame with origin "..." from accessing a frame with origin "...". Protocols, domains, and ports must match.

caused by line 25;
if (window.frames[i].document === doc) {

in https://cdn.rawgit.com/j-ulrich/jquery-simulate-ext/1.3.0/libs/jquery.simulate.js

Chrome and Firefox stopp execution, Safari continues...

Dropdown expansion does not work on Chrome Version 53.0.2785.101 (64-bit)

See this fiddle http://jsfiddle.net/e59rqyn0/.

It was working on Chrome Version 51.0.2704.106 (64-bit).

Shift + Drag not simulated correctly

Simulating keyboard options with drag events doesn't work. ie.

$(document.body).simulate('drag', {
    dx: 0,
    dy: 0,
    shiftKey: true
});

The "shiftKey" option is never passed through. Please update the "simulateDrag" method to passthrough all keyboard options such as shiftKey, ctrlKey, etc...