event handlers added by inferno are breaking on phantomjs (via casperjs)

[dfleury]

Observed Behaviour

When using casperjs with phantomjs, inferno fails to deal with triggered events on handlers designated by itself like this:

contructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.state = { label: 'Load More' }
}

handleClick(event) {
    event.preventDefault()
    console.log('clicked')
    this.setState({ label: 'clicked' })
}

render() {
    return <a href="foo" className="load-more" onClick={this.handleClick}>{this.state.label}</a>
}

casper.test.begin('Simple test', 1, function(test) {
    casper.start('http://localhost:8887/simple-test', function() {
        this.click('.load-more')
        test.assertSelectorHasText('.load-more', 'clicked')
    })
    .run(function() {
        test.done()
    })
})

TypeError: Attempting to configurable attribute of unconfigurable property.
        at defineProperty (http://localhost:8887/build/bundle.js:13859)
        at docEvent (http://localhost:8887/build/bundle.js:13859)
        at click (:0)
        at <anonymous> (:2)
        at <anonymous> (:3)

bundle.js:13859
With this error, the event isn't dispatched as it should because the script is interrupted.

Expected Current Behaviour

Inferno should run the designated handler

More info

• Tested on Chrome and Firefox with good results.
• PhantomJS 2.1.1 still not support Map, WeakMap, Objection.assign
  • I've used babel-polyfills
  • Now I'm using es6-map, es6-weak-map and object.assign instead (without any effect)
• I've tried all ways casperjs provided to simulate a click (like clickLabel, mouse.click...)
• I've tried evaluate code on page's context with the same error (eliminating the possibility of being a casperjs issue)

this.evaluate(function() {
    document.querySelector('.load-more').click()
})

• I found a workaround. Just listen the event manually and it'll work as expected (the code and the test):

componentDidMount() {
    this.element.addEventListener('click', this.handleClick, false)
}

render() {
    return <a href="foo" className="load-more"
        ref={(node) => { this.element = node }}>{this.state.label}</a>
}

[lukeed]

This has to do with Inferno's (partially) synthetic event system.

You can achieve the same workaround by changing onClick to onclick; however, you lose the benefits of Inferno's system, including the ability to use linkEvent (which you should in your case).

Pinging @Havunen and @trueadm because I'm not sure how to approach this.

[Havunen]

Hey,

I dont know anything about casperjs, but make sure virtualDOM the node where you are rendering content to is appended to document body. Having "container" appended to document is requirement for clicks to propagate

I have been using following simulate click (which works at least in IE, Edge, Chrome, FF):

function triggerMouseEvent(node, eventType) {
    if (node === null) {
        throw new Error('Trying to Click null node!');
    }
    let event;

    if (document.createEvent) {
        event = document.createEvent('MouseEvents');
    } else {
        event = new MouseEvent('click');
    }
    event.initEvent(eventType, true, true);
    node.dispatchEvent(event);
}

triggerMouseEvent(node, 'click');

[dfleury]

Thanks, I made sure and isn't the case.

…

On qui, 12 de jan de 2017 at 08:11 Sampo Kivistö ***@***.***> wrote: Hey, I dont know anything about casperjs, but make sure virtualDOM the node where you are rendering content to is appended to document body. I have been using following simulate click (which works at least in IE, Edge, Chrome, FF): function triggerMouseEvent(node, eventType) { if (node === null) { throw new Error('Trying to Click null node!'); } let event; if (document.createEvent) { event = document.createEvent('MouseEvents'); } else { event = new MouseEvent('click'); } event.initEvent(eventType, true, true); node.dispatchEvent(event); } triggerMouseEvent(node, 'click'); — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#711 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAOheWIugORTCiLVXeOYmKg8qWAE57Opks5rRfw6gaJpZM4LhSTF> .

[Havunen]

This is related to PhantomJS bug: ariya/phantomjs#13895

[dfleury]

Well, I think there is no reason to stay with this issue open.
Thanks for that finding!