Search code examples
reactjsintern

Double Click not firing when testing a React 0.5.0 webpage with Intern

I'm trying to use Intern to create functional tests for a React (0.12.2) webpage. I ran into an issue while trying to test functionality which is triggered by the dblclick event. The event fires normally when I am manually testing the webpage but it does not fire in my Intern tests.

Also, not sure if this information matters, but in the environment I am testing in (Dartium), brokenMouseEvents is true and brokenDoubleClick is false. I am using Selenium for my WebDriver server (v2.43.1, with Core v2.43.1. Built from revision 5163bce).

I am testing on SauceLabs. Here is my error log: https://github.com/danielbank/testDoubleClick/blob/master/saucelabs_results.log

GitHub Repo:

https://github.com/danielbank/testDoubleClick

React Page:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Test Doubleclick</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script>
    var HelloWorld = React.createClass({
        render : function() {
            return React.DOM.div({},[
                React.DOM.button({'id': 'foo', 'onDoubleClick': function() {
                    React.renderComponent(React.DOM.p({'id': 'double-click-fired'},['Double Click Fired']), document.body);
                }}, ['Double Click Me']),
                React.DOM.button({'id': 'bar', 'onClick': function() {
                    React.renderComponent(React.DOM.p({'id': 'click-fired'},['Click Fired']), document.body);
                }}, ['Click Me'])
            ]);
        }
    });
    React.renderComponent(
            HelloWorld({}),
            document.body
    );
</script>
</html>

Intern Tests:

define([
    'intern!object',
    'intern/chai!assert',
    'require'
], function (registerSuite, assert) {
    registerSuite({
        name: 'test doubleclick functionality',
        'test singleclick': function () {
            return this.remote.get('http://localhost:8010/web/test_doubleclick.html')
                .findById('bar')
                .sleep(2000)
                .click()
                .end()
                .sleep(2000)
                .findById('click-fired')
                .getVisibleText()
                .then(function(text) {
                    assert.equal(text, 'Click Fired');
                });
        },
        'test doubleclick': function () {
            return this.remote.get('http://localhost:8010/web/test_doubleclick.html')
                .findById('foo')
                .sleep(2000)
                .doubleClick()
                .end()
                .sleep(2000)
                .findById('double-click-fired')
                .getVisibleText()
                .then(function(text) {
                    assert.equal(text, 'Double Click Fired');
                });
        }
    });
});

Intern Configuration:

define({
    proxyPort: 9000,

    proxyUrl: 'http://localhost:9000/',

    capabilities: {
        'selenium-version': '2.44.0'
    },

    environments: [
        { browserName: 'internet explorer', version: '11', platform: 'Windows 8.1' },
        { browserName: 'internet explorer', version: '10', platform: 'Windows 8' },
        { browserName: 'internet explorer', version: '9', platform: 'Windows 7' },
        { browserName: 'firefox', version: '28', platform: [ 'OS X 10.9', 'Windows 7', 'Linux' ] },
        { browserName: 'chrome', version: '34', platform: [ 'OS X 10.9', 'Windows 7', 'Linux' ] },
        { browserName: 'safari', version: '6', platform: 'OS X 10.8' },
        { browserName: 'safari', version: '7', platform: 'OS X 10.9' }
    ],

    maxConcurrency: 3,

    tunnel: 'SauceLabsTunnel',

    tunnelOptions: {
        username: '<username>',
        accessKey: '<accessKey>'
    },

    useLoader: {
        'host-node': 'dojo/dojo',
        'host-browser': 'node_modules/dojo/dojo.js'
    },

    reporters: ['pretty'],

    functionalSuites: [ 'tests/functional/index' ],

    excludeInstrumentation: /^(?:tests|node_modules)\//
});

Thanks for any help.

Solution

  • I was able to reproduce this issue. I'm not sure if the problem is specific to just React components, but the solution is to precede the doubleClick() with a click():

    'test singleclick': function () { return this.remote.get('http://localhost:8010/web/test_doubleclick.html') .findById('bar') .sleep(2000) .click() .doubleClick() .end() .sleep(2000) .findById('click-fired') .getVisibleText() .then(function(text) { assert.equal(text, 'Click Fired'); }); }

    The intern.js documentation for doubleClick indicates that it:

    Double-clicks the primary mouse button.

    This does not seem to be the case. There seems to either be a bug in intern or a bug in the documentation.