-
Notifications
You must be signed in to change notification settings - Fork 766
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: events with dispatchEvent()
do not reach a parent's event handler that was added with addEventListener()
in a Spec Page
#5676
Comments
Thanks for raising the issue @tomherni This seems to be a problem with our MockDoc implementation which is like JSDOM a JavaScript based re-implementation of the WHATWG DOM APIs. I will ingest this into our backlog but doubt that we provide any fast turnarounds due to competing priorities. I would recommend one of the other test solutions we've been working on that allow you to test your components in real browser / browser engines. Maybe take a look at: For WebdriverIO I got your test working with the following: import { h } from '@stencil/core'
import { fn, type Mock } from '@wdio/browser-runner'
import { render } from '@wdio/browser-runner/stencil'
import { expect } from '@wdio/globals'
import { MyParent } from './my-parent.js'
import { MyChild } from '../my-child/my-child.js'
describe('Stencil component testing', () => {
it('should increment value on click automatically', async () => {
console.log = fn()
await render({
components: [MyParent, MyChild],
template: () => <my-parent />
})
await browser.waitUntil(() => (console.log as Mock).mock.calls.length === 3)
expect(console.log).toHaveBeenNthCalledWith(1, 'adding event listener')
expect(console.log).toHaveBeenNthCalledWith(2, 'dispatching event')
expect(console.log).toHaveBeenNthCalledWith(3, 'event received')
})
}) |
@christian-bromann thanks for your quick reply and workaround. |
Prerequisites
Stencil Version
4.16.0
Current Behavior
Note: this bug is for the test setup only (Spec Page).
When a Stencil component emits an event using
dispatchEvent()
, then a parent component can listen for that event usingaddEventListener()
. This works as expected in the browser. But, while running Spec tests, the event handler is not being called.(The
@Listen
and@Event
decorators are not being used here.)Expected Behavior
While running Spec tests (with
npm run test
), then I expect event handlers (added withaddEventListener()
) to be called when a child component emits an event (emitted withdispatchEvent()
).System Info
Steps to Reproduce
addEventListener()
in theconstructor
. Put aconsole.log
in the event handler.dispatchEvent()
in thecomponentDidLoad
lifecycle method.console.log
being called.Code Reproduction URL
https://github.com/tomherni/stencil-event-bug
Additional Information
I have everything set up, including the Spec file, in my reproduction repo.
The text was updated successfully, but these errors were encountered: