This repository has been archived by the owner. It is now read-only.

'[object EventConstructor]' is not a constructor #11289

Open
davidcelis opened this Issue May 3, 2013 · 63 comments

Comments

Projects
None yet
@davidcelis

This seems like a PhantomJS bug, but feel free to educate me if otherwise.

If I put new Event(message) in a Jasmine test and run it under PhantomJS's headless browser, I get an error saying '[object EventConstructor]' is not a constructor. This is weird, considering EventConstructor is probably really a constructor. If I run the Jasmine test normally (i.e. fire up a Jasmine server and let the test run in my actual browser), it works.

To fix the test on Phantom, I have to change new Event(); to document.createEvent();, which is deprecated.

@JamesMGreene

This comment has been minimized.

Show comment
Hide comment
@JamesMGreene

JamesMGreene May 4, 2013

Collaborator

I don't see new Event mentioned anywhere in the DOM4 spec, only derived types like new UIEvent, new MouseEvent, etc.

Even with the spec considered, I've personally never seen this used in the real world nor have I really found any practical documentation examples (i.e. on MDN, WebPlatform, etc.), so this must be a pretty new shift (which also means it likely isn't supported in PhantomJS yet as we have an older version of WebKit at the moment). If you know of any good documentation, please share it for my own edification.

Collaborator

JamesMGreene commented May 4, 2013

I don't see new Event mentioned anywhere in the DOM4 spec, only derived types like new UIEvent, new MouseEvent, etc.

Even with the spec considered, I've personally never seen this used in the real world nor have I really found any practical documentation examples (i.e. on MDN, WebPlatform, etc.), so this must be a pretty new shift (which also means it likely isn't supported in PhantomJS yet as we have an older version of WebKit at the moment). If you know of any good documentation, please share it for my own edification.

@davidcelis

This comment has been minimized.

Show comment
Hide comment
@davidcelis

davidcelis May 4, 2013

The MDN says to "use event constructors instead" here: https://developer.mozilla.org/en-US/docs/DOM/document.createEvent

If this isn't official, then I can retract this, but it is perturbing. MDN is where everybody points me to for JS-related docs, so I'm taking this as true.

But that doesn't seem to be my issue, I guess. I didn't realize that there are sub-constructors for specific event types that must be used. If that's the case, I'll give that a shot, and we can close this issue.

The MDN says to "use event constructors instead" here: https://developer.mozilla.org/en-US/docs/DOM/document.createEvent

If this isn't official, then I can retract this, but it is perturbing. MDN is where everybody points me to for JS-related docs, so I'm taking this as true.

But that doesn't seem to be my issue, I guess. I didn't realize that there are sub-constructors for specific event types that must be used. If that's the case, I'll give that a shot, and we can close this issue.

@JamesMGreene

This comment has been minimized.

Show comment
Hide comment
@JamesMGreene

JamesMGreene May 4, 2013

Collaborator

I did find a reference to new Event after a second look at the DOM Level 4 spec: http://www.w3.org/TR/domcore/#concept-event

However, MDN's deprecation warning seems a bit premature since the spec is still only a draft. 😕

Collaborator

JamesMGreene commented May 4, 2013

I did find a reference to new Event after a second look at the DOM Level 4 spec: http://www.w3.org/TR/domcore/#concept-event

However, MDN's deprecation warning seems a bit premature since the spec is still only a draft. 😕

@carlthuringer

This comment has been minimized.

Show comment
Hide comment
@carlthuringer

carlthuringer Jul 9, 2013

I'm also having this issue when trying to test that an event listener calls the right callback when an event occurs:

✘ sets the field value to the text
        ➤ TypeError: '[object EventConstructor]' is not a constructor (evaluating 'new Event('message')') in http://localhost:56873/assets/spec.js (line 42731)

but document.createEvent('message') doesn't work for me either.

 ➤ NOT_SUPPORTED_ERR: NOT_SUPPORTED_ERR: DOM Exception 9 in http://localhost:56873/assets/spec.js (line 42708)

I'm also having this issue when trying to test that an event listener calls the right callback when an event occurs:

✘ sets the field value to the text
        ➤ TypeError: '[object EventConstructor]' is not a constructor (evaluating 'new Event('message')') in http://localhost:56873/assets/spec.js (line 42731)

but document.createEvent('message') doesn't work for me either.

 ➤ NOT_SUPPORTED_ERR: NOT_SUPPORTED_ERR: DOM Exception 9 in http://localhost:56873/assets/spec.js (line 42708)
@JamesMGreene

This comment has been minimized.

Show comment
Hide comment
@JamesMGreene

JamesMGreene Jul 9, 2013

Collaborator

@carlthuringer: You're getting an error because you're not using document.createEvent correctly. Check out the suggested polyfill on MDN to easily see how document.createEvent and new CustomEvent differ.

TL;DR:
You need to do some like this:

var evt = document.createEvent('CustomEvent');  // MUST be 'CustomEvent'
evt.initCustomEvent('yourCustomEventName', false, false, null);
Collaborator

JamesMGreene commented Jul 9, 2013

@carlthuringer: You're getting an error because you're not using document.createEvent correctly. Check out the suggested polyfill on MDN to easily see how document.createEvent and new CustomEvent differ.

TL;DR:
You need to do some like this:

var evt = document.createEvent('CustomEvent');  // MUST be 'CustomEvent'
evt.initCustomEvent('yourCustomEventName', false, false, null);
@carlthuringer

This comment has been minimized.

Show comment
Hide comment
@carlthuringer

carlthuringer Jul 9, 2013

Awesome, thanks for the quick explanation and response!

Awesome, thanks for the quick explanation and response!

@ianstormtaylor

This comment has been minimized.

Show comment
Hide comment
@ianstormtaylor

ianstormtaylor Aug 26, 2013

+1

Also getting this error, except it's in a 3rd party library I have no access to. new Event('click') doesn't throw an error in the browser, so it would be nice if it didn't throw an error in Phantom either.

+1

Also getting this error, except it's in a 3rd party library I have no access to. new Event('click') doesn't throw an error in the browser, so it would be nice if it didn't throw an error in Phantom either.

@kramerc

This comment has been minimized.

Show comment
Hide comment
@kramerc

kramerc Oct 29, 2013

I have found that this issue is caused by QtWebKit in Qt4. This problem doesn't occur in Qt5 when testing with a simple web browser application though.

kramerc commented Oct 29, 2013

I have found that this issue is caused by QtWebKit in Qt4. This problem doesn't occur in Qt5 when testing with a simple web browser application though.

@rossbruniges

This comment has been minimized.

Show comment
Hide comment
@rossbruniges

rossbruniges Jan 16, 2014

Wondering if this bug is going to get active development?

I found that the only way I could trigger a resize event on window was by using new Event('resize') and then dispatchEvent.

Wondering if this bug is going to get active development?

I found that the only way I could trigger a resize event on window was by using new Event('resize') and then dispatchEvent.

@peter-mouland

This comment has been minimized.

Show comment
Hide comment
@peter-mouland

peter-mouland Jan 16, 2014

I was just wandering if this was still an issue?

I just bumped into the following error:

'[object EventConstructor]' is not a constructor (evaluating 'new Event(e)')

when running the following code within my mocha spec:

event.emit(window,'resize');

which translates into this pretty standard cross browser event handler

function emit(el, eventName) {
        var event;
        if (document.createEvent) {
            event = new Event(eventName);
            el.dispatchEvent(event);
        } else {
            event = document.createEventObject();
            el.fireEvent('on' + eventName, event);
        }
    }

I was just wandering if this was still an issue?

I just bumped into the following error:

'[object EventConstructor]' is not a constructor (evaluating 'new Event(e)')

when running the following code within my mocha spec:

event.emit(window,'resize');

which translates into this pretty standard cross browser event handler

function emit(el, eventName) {
        var event;
        if (document.createEvent) {
            event = new Event(eventName);
            el.dispatchEvent(event);
        } else {
            event = document.createEventObject();
            el.fireEvent('on' + eventName, event);
        }
    }
@hous

This comment has been minimized.

Show comment
Hide comment
@hous

hous Feb 6, 2014

Having issues with this myself. No problem executing tests in all browsers except phantomjs, which does throws a TypeError.

hous commented Feb 6, 2014

Having issues with this myself. No problem executing tests in all browsers except phantomjs, which does throws a TypeError.

@sukima

This comment has been minimized.

Show comment
Hide comment
@sukima

sukima Mar 28, 2014

For others who might stumble on this from Google, this is how I managed to facilitate my own tests that used keyboard events manually. The reason I had to do this was that I couldn't use $('#foo').keyup() as jQuery's trigger would not fire the browser's events that were added via addEventListener but only events that were attached through the jQuery's API. (Pasted gist available for commenting):

// <input id="my-input-element" type="text" value="foo"/>
var evt, node = document.getElementById('my-input-element');

// Have to use dispatchEvent/fireEvent because jQuery.trigger will not
// fire an event attached via addEventListener. Each environment has an
// unusual way to trigger a keyup event.
if (node.dispatchEvent) {
  // Sane browsers
  try {
    // Chrome, Safari, Firefox
    evt = new KeyboardEvent('keyup');
  } catch (e) {
    // PhantomJS (wat!)
    evt = document.createEvent('KeyboardEvent');
    evt.initEvent('keyup', true, false);
  }
  evt.keyCode = 32;
  node.dispatchEvent(evt);
} else {
  // IE 8
  evt = document.createEventObject('KeyboardEvent');
  evt.keyCode = 32;
  node.fireEvent('onkeyup', evt);
}

The situation I had to got me there was that I was in a test runner which had jQuery available for doing fixtures and testing assertions but the code I was testing (read: module) needed to be jQuery free. That code would attach to DOM events via addEventListener but when the test script attempted to trigger the event via jQuery it was ignored. Forcing me to trigger the event manually in all the browser environments.

sukima commented Mar 28, 2014

For others who might stumble on this from Google, this is how I managed to facilitate my own tests that used keyboard events manually. The reason I had to do this was that I couldn't use $('#foo').keyup() as jQuery's trigger would not fire the browser's events that were added via addEventListener but only events that were attached through the jQuery's API. (Pasted gist available for commenting):

// <input id="my-input-element" type="text" value="foo"/>
var evt, node = document.getElementById('my-input-element');

// Have to use dispatchEvent/fireEvent because jQuery.trigger will not
// fire an event attached via addEventListener. Each environment has an
// unusual way to trigger a keyup event.
if (node.dispatchEvent) {
  // Sane browsers
  try {
    // Chrome, Safari, Firefox
    evt = new KeyboardEvent('keyup');
  } catch (e) {
    // PhantomJS (wat!)
    evt = document.createEvent('KeyboardEvent');
    evt.initEvent('keyup', true, false);
  }
  evt.keyCode = 32;
  node.dispatchEvent(evt);
} else {
  // IE 8
  evt = document.createEventObject('KeyboardEvent');
  evt.keyCode = 32;
  node.fireEvent('onkeyup', evt);
}

The situation I had to got me there was that I was in a test runner which had jQuery available for doing fixtures and testing assertions but the code I was testing (read: module) needed to be jQuery free. That code would attach to DOM events via addEventListener but when the test script attempted to trigger the event via jQuery it was ignored. Forcing me to trigger the event manually in all the browser environments.

sukima added a commit to sukima/PasswordWidget that referenced this issue Mar 28, 2014

Fix broken spec in IE and PhantomJS
Seems both IE8 and PhantomJS need a lot of tender love and care to
dispatch a keyboard event. Had to open several conditionals to handle
them all.

This is the only spec that needs this help as once it works we can then
use the internal event system of PasswordWidget and never have to worry
about the keyup event again.

For reference IE8 lacks a dispatchEvent allowing a simple if/else to
detect. Phantom JS however doesn't support the standard event
constructors (yes, there is a languished [issue reported][1] about it)
but it does support dispatchEvent causing a difficulty in testing for
it. I used a try/catch to trap if it fails to create the event per
standards and fall back to the deprecated createEvent method that is
supported by PhantomJS.

[1]: ariya/phantomjs#11289

sukima added a commit to sukima/PasswordWidget that referenced this issue Mar 28, 2014

Fix broken spec in IE and PhantomJS
Seems both IE8 and PhantomJS need a lot of tender love and care to
dispatch a keyboard event. Had to open several conditionals to handle
them all.

This is the only spec that needs this help as once it works we can then
use the internal event system of PasswordWidget and never have to worry
about the keyup event again.

For reference IE8 lacks a dispatchEvent allowing a simple if/else to
detect. Phantom JS however doesn't support the standard event
constructors (yes, there is a languished [issue reported][1] about it)
but it does support dispatchEvent causing a difficulty in testing for
it. I used a try/catch to trap if it fails to create the event per
standards and fall back to the deprecated createEvent method that is
supported by PhantomJS.

[1]: ariya/phantomjs#11289
@mendozao

This comment has been minimized.

Show comment
Hide comment
@mendozao

mendozao Jun 6, 2014

I just ran into this issue - not sure how to work around it. According to MDN, document.createEvent is deprecated - so using event constructors is the correct way to implement your custom events.

See:
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent (Deprecated)

mendozao commented Jun 6, 2014

I just ran into this issue - not sure how to work around it. According to MDN, document.createEvent is deprecated - so using event constructors is the correct way to implement your custom events.

See:
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent (Deprecated)

@sukima

This comment has been minimized.

Show comment
Hide comment
@sukima

sukima Jun 8, 2014

@mendozao at the time I wrote the above comment PhantomJS did not support KeyboardEvent and still relied on the deprecated createEvent. I do not know if newer versions of PhantomJS have changed since.

sukima commented Jun 8, 2014

@mendozao at the time I wrote the above comment PhantomJS did not support KeyboardEvent and still relied on the deprecated createEvent. I do not know if newer versions of PhantomJS have changed since.

@mendozao

This comment has been minimized.

Show comment
Hide comment
@mendozao

mendozao Jun 10, 2014

@sukima the error I was getting was the following:

PhantomJS 1.9.7 (Mac OS X) player encountered a declaration exception FAILED
ReferenceError: Can't find variable: CustomEvent

In my code, I create an event using the following syntax:

var myevent  = new CustomEvent('onSomething');

Just seems wrong to have to write conditional logic in my code to support phantomJS's implementation

@sukima the error I was getting was the following:

PhantomJS 1.9.7 (Mac OS X) player encountered a declaration exception FAILED
ReferenceError: Can't find variable: CustomEvent

In my code, I create an event using the following syntax:

var myevent  = new CustomEvent('onSomething');

Just seems wrong to have to write conditional logic in my code to support phantomJS's implementation

@sukima

This comment has been minimized.

Show comment
Hide comment
@sukima

sukima Jun 11, 2014

Kinda sucks. The above is the best I could do.

Although if I had a choice I'd just rely on jQuery's event system or something of the like. Unfortunately the requirements I had circumvented any third party event system and forced me to come up with a cross browser / cross PhantomJS test suite as seen above.

sukima commented Jun 11, 2014

Kinda sucks. The above is the best I could do.

Although if I had a choice I'd just rely on jQuery's event system or something of the like. Unfortunately the requirements I had circumvented any third party event system and forced me to come up with a cross browser / cross PhantomJS test suite as seen above.

@leeight

This comment has been minimized.

Show comment
Hide comment
@leeight

leeight Jul 25, 2014

Contributor

+1

Contributor

leeight commented Jul 25, 2014

+1

@Vitallium

This comment has been minimized.

Show comment
Hide comment
@Vitallium

Vitallium Jul 31, 2014

Collaborator

Fixed in 2.0

Collaborator

Vitallium commented Jul 31, 2014

Fixed in 2.0

@Vitallium Vitallium closed this Jul 31, 2014

@peter-mouland

This comment has been minimized.

Show comment
Hide comment
@peter-mouland

peter-mouland Jul 31, 2014

@Vitallium when is 2.0.0 to be released, i see it's currently on 1.9.7?

@Vitallium when is 2.0.0 to be released, i see it's currently on 1.9.7?

@Robdel12

This comment has been minimized.

Show comment
Hide comment
@Robdel12

Robdel12 Nov 11, 2014

Is it possible to get this fixed sooner than 2.0?

Is it possible to get this fixed sooner than 2.0?

@benlesh

This comment has been minimized.

Show comment
Hide comment
@benlesh

benlesh Jan 5, 2015

"Fixed in 2.0" ... 6 months later, no 2.0. :(

benlesh commented Jan 5, 2015

"Fixed in 2.0" ... 6 months later, no 2.0. :(

@Robdel12

This comment has been minimized.

Show comment
Hide comment
@Robdel12

Robdel12 Jan 5, 2015

^ I ended up applying a hacky polyfill just to keep Travis CI building.

Robdel12 commented Jan 5, 2015

^ I ended up applying a hacky polyfill just to keep Travis CI building.

@benlesh

This comment has been minimized.

Show comment
Hide comment

benlesh commented Jan 6, 2015

same.

@Drahakar

This comment has been minimized.

Show comment
Hide comment
@Drahakar

Drahakar Jan 7, 2015

Contributor

An announcement was made on the mailing list, the version 2.0 is supposed to happen on Jan 23th.

Contributor

Drahakar commented Jan 7, 2015

An announcement was made on the mailing list, the version 2.0 is supposed to happen on Jan 23th.

@Robdel12

This comment has been minimized.

Show comment
Hide comment

Robdel12 commented Jan 7, 2015

Woop!

@xldenis

This comment has been minimized.

Show comment
Hide comment
@xldenis

xldenis Oct 12, 2015

Any recent news on this issue?

xldenis commented Oct 12, 2015

Any recent news on this issue?

@Vitallium

This comment has been minimized.

Show comment
Hide comment
@Vitallium

Vitallium Oct 12, 2015

Collaborator

Here is the list of all supported events in 2.x version:

BeforeLoadEvent
CloseEvent
CompositionEvent
CustomEvent
ErrorEvent
FocusEvent
HashChangeEvent
KeyboardEvent
KeyboardEvents
MessageEvent
MouseEvent
MouseEvents
MutationEvent
MutationEvents
OverflowEvent
PageTransitionEvent
PopStateEvent
ProgressEvent
TextEvent
TransitionEvent
WebKitAnimationEvent
WebKitTransitionEvent
WheelEvent
XMLHttpRequestProgressEvent
StorageEvent
SVGEvents
SVGZoomEvent
SVGZoomEvents
TouchEvent
CSSFontFaceLoadEvent
SecurityPolicyViolationEvent
Collaborator

Vitallium commented Oct 12, 2015

Here is the list of all supported events in 2.x version:

BeforeLoadEvent
CloseEvent
CompositionEvent
CustomEvent
ErrorEvent
FocusEvent
HashChangeEvent
KeyboardEvent
KeyboardEvents
MessageEvent
MouseEvent
MouseEvents
MutationEvent
MutationEvents
OverflowEvent
PageTransitionEvent
PopStateEvent
ProgressEvent
TextEvent
TransitionEvent
WebKitAnimationEvent
WebKitTransitionEvent
WheelEvent
XMLHttpRequestProgressEvent
StorageEvent
SVGEvents
SVGZoomEvent
SVGZoomEvents
TouchEvent
CSSFontFaceLoadEvent
SecurityPolicyViolationEvent
@Robdel12

This comment has been minimized.

Show comment
Hide comment
@Robdel12

Robdel12 Oct 12, 2015

Is there an easy way to install 2.x yet?

Is there an easy way to install 2.x yet?

@ortexx

This comment has been minimized.

Show comment
Hide comment
@ortexx

ortexx Oct 30, 2015

new WheelEvent.contructor is not contructor

v 2.0

ortexx commented Oct 30, 2015

new WheelEvent.contructor is not contructor

v 2.0

@sirLisko

This comment has been minimized.

Show comment
Hide comment
@sirLisko

sirLisko Oct 30, 2015

I resolved using simulant.

var fakeEvent = require('simulant');
fakeEvent.fire(ghost, fakeEvent('mousemove'));

It nicely wraps around the event API and it works also with phantom 1.9.x.

I resolved using simulant.

var fakeEvent = require('simulant');
fakeEvent.fire(ghost, fakeEvent('mousemove'));

It nicely wraps around the event API and it works also with phantom 1.9.x.

@wzhscript

This comment has been minimized.

Show comment
Hide comment
@wzhscript

wzhscript Jan 17, 2016

@sirLisko thx, simulant solved my problem too.

@sirLisko thx, simulant solved my problem too.

@ortexx

This comment has been minimized.

Show comment
Hide comment
@ortexx

ortexx Jan 31, 2016

WheelEvent is not working, with "simulant" too (v 2.1, ubuntu)

ortexx commented Jan 31, 2016

WheelEvent is not working, with "simulant" too (v 2.1, ubuntu)

@inf3rno

This comment has been minimized.

Show comment
Hide comment
@inf3rno

inf3rno Mar 15, 2016

+1, I still have to use document.createEvent('MouseEvent'); instead of new MouseEvent(). I am trying to test GUI with Karma (not Selenium), and triggering DOM events artificially is an important feature to do that.

inf3rno commented Mar 15, 2016

+1, I still have to use document.createEvent('MouseEvent'); instead of new MouseEvent(). I am trying to test GUI with Karma (not Selenium), and triggering DOM events artificially is an important feature to do that.

@eligrey eligrey referenced this issue Apr 1, 2016

Closed

This closes #195 #213

@bttf

This comment has been minimized.

Show comment
Hide comment
@bttf

bttf Apr 15, 2016

I'm also getting this error, using v2.1.7, after calling new window.Event('mousedown', { bubbles: true, cancelable: true, view: window });

EDIT: Re-installing phantom@2.1.7 fixed it :|

bttf commented Apr 15, 2016

I'm also getting this error, using v2.1.7, after calling new window.Event('mousedown', { bubbles: true, cancelable: true, view: window });

EDIT: Re-installing phantom@2.1.7 fixed it :|

@perrin4869

This comment has been minimized.

Show comment
Hide comment
@perrin4869

perrin4869 May 12, 2016

Same problem with phantomjs@2.1.1 (using npm's phantomjs-prebuilt):

KeyboardEventConstructor is not a constructor (evaluating 'new KeyboardEvent('keydown', {
                      key: 'a',
                      keyCode: 65,
                      which: 65
                    })')

Same problem with phantomjs@2.1.1 (using npm's phantomjs-prebuilt):

KeyboardEventConstructor is not a constructor (evaluating 'new KeyboardEvent('keydown', {
                      key: 'a',
                      keyCode: 65,
                      which: 65
                    })')

marcandre added a commit to marcandre/chosen that referenced this issue Sep 25, 2016

marcandre added a commit to marcandre/chosen that referenced this issue Sep 27, 2016

@astrotim

This comment has been minimized.

Show comment
Hide comment
@astrotim

astrotim Dec 1, 2016

My workaround to get tests working in both browsers and PhantomJS:

var clickEvent;
var keyupEvent;

// check if Event() is a constructor function
// usage as per the spec, if true
if (typeof(Event) === 'function') {

	clickEvent = new MouseEvent('click');
	clickEvent.initMouseEvent('click');

	keyupEvent = new Event('keyup');

// the deprecated way for PhantomJS
} else {

	clickEvent = document.createEvent('CustomEvent');
	clickEvent.initCustomEvent('click', false, false, null);

	keyupEvent = document.createEvent('CustomEvent');
	keyupEvent.initCustomEvent('keyup', false, false, null);

}

Usage:

submitButton.dispatchEvent(click);
textInput.dispatchEvent(keyup);

astrotim commented Dec 1, 2016

My workaround to get tests working in both browsers and PhantomJS:

var clickEvent;
var keyupEvent;

// check if Event() is a constructor function
// usage as per the spec, if true
if (typeof(Event) === 'function') {

	clickEvent = new MouseEvent('click');
	clickEvent.initMouseEvent('click');

	keyupEvent = new Event('keyup');

// the deprecated way for PhantomJS
} else {

	clickEvent = document.createEvent('CustomEvent');
	clickEvent.initCustomEvent('click', false, false, null);

	keyupEvent = document.createEvent('CustomEvent');
	keyupEvent.initCustomEvent('keyup', false, false, null);

}

Usage:

submitButton.dispatchEvent(click);
textInput.dispatchEvent(keyup);
@dwightdegroff

This comment has been minimized.

Show comment
Hide comment
@dwightdegroff

dwightdegroff Jan 19, 2017

Any progress here? Still running into"
TypeError: MouseEventConstructor is not a constructor (evaluating 'new MouseEvent("click")')

On PhantomJS 2.1.1

Any progress here? Still running into"
TypeError: MouseEventConstructor is not a constructor (evaluating 'new MouseEvent("click")')

On PhantomJS 2.1.1

@evandavis

This comment has been minimized.

Show comment
Hide comment
@evandavis

evandavis Jan 19, 2017

@dwightdegroff I switched to jsDOM 6 months ago and have never been happier.

@dwightdegroff I switched to jsDOM 6 months ago and have never been happier.

@cantonic

This comment has been minimized.

Show comment
Hide comment
@cantonic

cantonic Feb 2, 2017

we have failing tests because of TypeError: MouseEventConstructor is not a constructor (evaluating 'new MouseEvent("click")') and tried using PhantomJS 2.5.0-beta on TravisCI. Now all tests that were failing with the mentioned error are now failing with this:

Capybara::Poltergeist::DeadClient:
        PhantomJS client died while processing {"id":"9600aa3c-0be5-40f3-9010-018c39322890","name":"visit","args":["http://127.0.0.1:35752/messages/conversations",30]}

cantonic commented Feb 2, 2017

we have failing tests because of TypeError: MouseEventConstructor is not a constructor (evaluating 'new MouseEvent("click")') and tried using PhantomJS 2.5.0-beta on TravisCI. Now all tests that were failing with the mentioned error are now failing with this:

Capybara::Poltergeist::DeadClient:
        PhantomJS client died while processing {"id":"9600aa3c-0be5-40f3-9010-018c39322890","name":"visit","args":["http://127.0.0.1:35752/messages/conversations",30]}
@cantonic

This comment has been minimized.

Show comment
Hide comment
@cantonic

cantonic Feb 2, 2017

Not sure if this will help anyone else, but we were able to solve the issue by tracking it down to opal-browser gem. This commit fixes it for us: opal/opal-browser@6791db2

cantonic commented Feb 2, 2017

Not sure if this will help anyone else, but we were able to solve the issue by tracking it down to opal-browser gem. This commit fixes it for us: opal/opal-browser@6791db2

@runarberg

This comment has been minimized.

Show comment
Hide comment
@runarberg

runarberg Feb 7, 2017

This short shim worked for me:

function keyboardEvent(eventType, init) {
  try {
    return new KeyboardEvent(eventType, init);
  } catch (error) {
    const modKeys = [
      init.ctrlKey ? 'Control' : '',
      init.shiftKey ? 'Shift' : '',
      init.altKey ? 'Alt' : '',
      init.altGrKey ? 'AltGr' : '',
      init.metaKey ? 'Meta' : '',
    ].join(' ');
    const keyEvent = document.createEvent('KeyboardEvent');
    keyEvent.initKeyboardEvent(
      eventType,
      false,
      false,
      window,
      init.char || '',
      init.keyCode || 0,
      modKeys,
      init.repeat || false,
    );
    keyEvent.key = init.key;

    return keyEvent;
  }
}

And using it like so:

document.body.dispatchEvent(keyboardEvent('keydown', { key: 'Escape' }));

This short shim worked for me:

function keyboardEvent(eventType, init) {
  try {
    return new KeyboardEvent(eventType, init);
  } catch (error) {
    const modKeys = [
      init.ctrlKey ? 'Control' : '',
      init.shiftKey ? 'Shift' : '',
      init.altKey ? 'Alt' : '',
      init.altGrKey ? 'AltGr' : '',
      init.metaKey ? 'Meta' : '',
    ].join(' ');
    const keyEvent = document.createEvent('KeyboardEvent');
    keyEvent.initKeyboardEvent(
      eventType,
      false,
      false,
      window,
      init.char || '',
      init.keyCode || 0,
      modKeys,
      init.repeat || false,
    );
    keyEvent.key = init.key;

    return keyEvent;
  }
}

And using it like so:

document.body.dispatchEvent(keyboardEvent('keydown', { key: 'Escape' }));
@inf3rno

This comment has been minimized.

Show comment
Hide comment
@inf3rno

inf3rno Feb 8, 2017

@astrotim Creating some kind of polyfill would be better and you don't have to load it in your production code, just for testing.

inf3rno commented Feb 8, 2017

@astrotim Creating some kind of polyfill would be better and you don't have to load it in your production code, just for testing.

@bertofer

This comment has been minimized.

Show comment
Hide comment
@bertofer

bertofer Feb 8, 2017

We have faced this problem as well. In our case, we were using angular 2 testing and doing some MouseEvent with clientX and clientY properties. All the tests were working until we changed to PhantomJS instead of Chrome for CI, then we faced this.

We could fix it for PhantomJS, instead of creating a MouseEvent, creating an Event passing clientX and clientY properties, but then the typescript compiler complained that clientX and clientY are not properties expected on the properties passed to the event.

We ended up just doing:

const evtOpts = {
      clientX: component.menuContainer.nativeElement.offsetLeft + 1,
      clientY: component.menuContainer.nativeElement.offsetTop + 1
};
window.dispatchEvent(new Event('mousedown', evtOpts));

This way, evtOpts gets an implicit any, so when passed to Event constructor, TS does not complain, and PhantomJS works.

bertofer commented Feb 8, 2017

We have faced this problem as well. In our case, we were using angular 2 testing and doing some MouseEvent with clientX and clientY properties. All the tests were working until we changed to PhantomJS instead of Chrome for CI, then we faced this.

We could fix it for PhantomJS, instead of creating a MouseEvent, creating an Event passing clientX and clientY properties, but then the typescript compiler complained that clientX and clientY are not properties expected on the properties passed to the event.

We ended up just doing:

const evtOpts = {
      clientX: component.menuContainer.nativeElement.offsetLeft + 1,
      clientY: component.menuContainer.nativeElement.offsetTop + 1
};
window.dispatchEvent(new Event('mousedown', evtOpts));

This way, evtOpts gets an implicit any, so when passed to Event constructor, TS does not complain, and PhantomJS works.

@justingrayston

This comment has been minimized.

Show comment
Hide comment
@justingrayston

justingrayston Feb 24, 2017

@runarberg I hope you don't mind, but I created your function into a phantomJS polyfil. As above, I wanted to test in Angular2+ in Typescript and it type checking complained about the assignment of readonly properties. Being able to load it in via yarn or npm means it is outside of the linted code. It also makes it easily available to all.

https://github.com/justingrayston/basic-keyboard-event-polyfill

@runarberg I hope you don't mind, but I created your function into a phantomJS polyfil. As above, I wanted to test in Angular2+ in Typescript and it type checking complained about the assignment of readonly properties. Being able to load it in via yarn or npm means it is outside of the linted code. It also makes it easily available to all.

https://github.com/justingrayston/basic-keyboard-event-polyfill

@runarberg

This comment has been minimized.

Show comment
Hide comment

@justingrayston Sure, go ahead.

FYI: I extracted the vital bits from https://github.com/termi/DOM-Keyboard-Event-Level-3-polyfill.

@ghiscoding

This comment has been minimized.

Show comment
Hide comment
@ghiscoding

ghiscoding Feb 28, 2017

In order to fix the

MouseEventConstructor is not a constructor (evaluating 'new MouseEvent')

I used the Polyfill from the MSDN MouseEvent docs and that finally worked.

In order to fix the

MouseEventConstructor is not a constructor (evaluating 'new MouseEvent')

I used the Polyfill from the MSDN MouseEvent docs and that finally worked.

@inf3rno

This comment has been minimized.

Show comment
Hide comment
@inf3rno

inf3rno Feb 28, 2017

Probably creating a repo including both polyfills, and publishing it on npm as phantomjs-event-polyfill would be a wise idea until this is fixed. As far as I remember the error stack has similar issues, I managed to fix it somehow in my (partially complete) error polyfill.

inf3rno commented Feb 28, 2017

Probably creating a repo including both polyfills, and publishing it on npm as phantomjs-event-polyfill would be a wise idea until this is fixed. As far as I remember the error stack has similar issues, I managed to fix it somehow in my (partially complete) error polyfill.

@Vitallium

This comment has been minimized.

Show comment
Hide comment
@Vitallium

Vitallium Feb 28, 2017

Collaborator

Could you try again with 2.5 binary please? Thanks!

Collaborator

Vitallium commented Feb 28, 2017

Could you try again with 2.5 binary please? Thanks!

@lechu1985

This comment has been minimized.

Show comment
Hide comment
@lechu1985

lechu1985 May 25, 2017

For the same reasons as @justingrayston I created a npm package for helping PhantomJS with Mouse Events. It is based on the solution provided by: @ghiscoding

https://github.com/lechu1985/basic-mouse-event-polyfill-phantomjs

For the same reasons as @justingrayston I created a npm package for helping PhantomJS with Mouse Events. It is based on the solution provided by: @ghiscoding

https://github.com/lechu1985/basic-mouse-event-polyfill-phantomjs

@fgc29

This comment has been minimized.

Show comment
Hide comment
@fgc29

fgc29 Aug 21, 2017

I been experiencing a sort of similar problem. TypeError: undefined is not a constructor (evaluating 'targetElement.closest('tr')'). The arg 'targetElement' is the supposed to be the DOM target element retrieved from event.target. But event.target is only returning the href in a string. Has anyone had this happen and if so, were you able to resolve it? This is for a rails 5 system test using poltergeist to run the headless test.

fgc29 commented Aug 21, 2017

I been experiencing a sort of similar problem. TypeError: undefined is not a constructor (evaluating 'targetElement.closest('tr')'). The arg 'targetElement' is the supposed to be the DOM target element retrieved from event.target. But event.target is only returning the href in a string. Has anyone had this happen and if so, were you able to resolve it? This is for a rails 5 system test using poltergeist to run the headless test.

@ghost ghost removed 1.x labels Jan 10, 2018

@ghost ghost removed New Feature labels Jan 29, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.