Simulating user input for TDD JavaScript

Question

I'm finding it increasingly difficult to simulate actual user events using jQuery or native element trigger functions. For example, if you have a text input and you don't want the user to be able to add a character, you can call e.preventDefault() with the jQuery-normalised event object on the keydown event. However, there is no way to programatically verify this test scenario.

The following test passes even without the call to preventDefault because the jQuery keydown trigger isn't a "real" event.

input.val('test').trigger(jQuery.Event({
    which: 68
});
expect(input).toHaveValue('test');

Without the correct code, this test should fail because the input should have a value of 'testd' (68 is the character code for 'd').

Does anyone know any methods or libraries to simulate real browser UI events?

Ghostoy · Accepted Answer · 2011-07-21 04:19:54Z

4

Simulate real event is quite complicated. You must first determine which type of event you need and create it with document.createEvent. Then call different init*Event to initialize the event object. Finally, use element.dispatchEvent to dispatch the event to the target object.

answered Jul 21, 2011 at 4:19

Ghostoy

2,7591 gold badge19 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matty F Over a year ago

I've tried this but they keyCode and charCode kept coming up as 0, even though I specified them in initKeyboardEvent. Any ideas why? It would be awesome if there was a library that could do this for the A-spec browsers... may write one myself if I can get over this hurdle.

Ghostoy Over a year ago

@MattyF This seems to be a bug of Chrome from upstream code of WebKit, that event initialized by initKeyboardEvent always has keyCode and charCode set to 0. I guess you should refer to FF instead of WebKit based browsers.

brendan · Accepted Answer · 2011-07-21 02:26:03Z

2

You probably want to try using Selenium: http://seleniumhq.org/

Here's a decent overview: http://blog.frontendforce.com/2010/05/unit-testing-in-javascript-selenium/

answered Jul 21, 2011 at 2:26

brendan

30.1k20 gold badges70 silver badges109 bronze badges

3 Comments

Matty F Over a year ago

I had a look at this yesterday - is there a way to use Selenium via JavaScript, so that I can integrate it with my automated tests (JsTestDriver + Jasmine)?

brendan Over a year ago

I don't think you can use them 'together'. Many people would consider your JsTestDriver tests "unit tests" vs. Selenium being "integration tests".

brendan Over a year ago

Not exactly what you're looking for but maybe of use: stackoverflow.com/questions/5091935/…

airportyh · Accepted Answer · 2011-07-22 13:52:49Z

0

I believe YUI had some code to do that. Download their code and take a look. I believe it is called simulate.js or something similar. Alternatively you can look at how selenium does it.

answered Jul 22, 2011 at 13:52

airportyh

22.8k13 gold badges61 silver badges75 bronze badges

Comments

Nick Budden · Accepted Answer · 2014-02-12 14:34:36Z

0

Here's a repo that seems to be kept quite well up to date: https://github.com/mmonteleone/jquery.autotype

answered Feb 12, 2014 at 14:34

Nick Budden

6419 silver badges20 bronze badges

Collectives™ on Stack Overflow

Simulating user input for TDD JavaScript

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related