MouseEventConstructor is not a constructor

Question

When I execute my tests locally they pass with no problems but when tests proceed on the server I get:

TypeError: MouseEventConstructor is not a constructor (evaluating 'new MouseEvent('mousedown',
EXEC : error : TypeError: MouseEventConstructor is not a constructor (evaluating 'new MouseEvent('mousedown', 
        {
            'which': 1,
            'view': window,
            'bubbles': true,
            'cancelable': true
        })')

for the code:

HTMLElement.prototype.mouseDownLeftButton = function () {
        var event = new MouseEvent('mousedown',
        {
            'which': 1,
            'view': window,
            'bubbles': true,
            'cancelable': true
        });
        this.dispatchEvent(event);
    };

which is totally fine. Is there any other way to create a new MouseEvent ?

Coitus

"Locally", "on the server" - please be more specific about the used environment. Sounds like there simply is no DOM. – Alina

@Alina Means that when I run my qUnit tests locally everything is fine but when the server runs them as a part of Continous Integeration they fail because of this reason. I have no knowledge about configuration of the server itself. Is there an older version syntax than new MouseEvent available? About "no DOM" the RHS is failing not the LHS, so I think that dom is intact. Thanks. – Coitus

Answer 1

There is a polyfill from MDN that will resolve the issue:

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent#Polyfill

(function (window) {
    try {
        new MouseEvent('test');
        return false; // No need to polyfill
    } catch (e) {
        // Need to polyfill - fall through
    }

    // Polyfills DOM4 MouseEvent

    var MouseEvent = function (eventType, params) {
        params = params || { bubbles: false, cancelable: false };
        var mouseEvent = document.createEvent('MouseEvent');
        mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

        return mouseEvent;
    };

    MouseEvent.prototype = Event.prototype;

    window.MouseEvent = MouseEvent;
})(window);

Dippold

Is there such a polyfill for KeyboardEvent? I'm having problems with that one too. – Nanette

@Nanette Did you manage to get a polyfill for KeyboardEvent ? Struggling with the same – Ogilvie

@Ogilvie no, I don't think I did. – Nanette

Answer 2

Most likely your local test infra uses real browser and on server it uses PhantomJS.

The latter still doesn't support new MouseEvent: https://github.com/ariya/phantomjs/issues/11289

I had to do the following trick to make tests pass:

    function createMouseEvent(typeArg: string): MouseEvent {
        let event = document.createEvent('MouseEvent');
        event.initMouseEvent(typeArg,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined);
        return event;
    }

Coimbra