Search code examples
typescriptweb-componente2e-testingstenciljs

StencilJS E2E testing: How do you dispatch a custom event?

How do you dispatch a CustomEvent to an element in StencilJS E2E testing:

const page = await newE2EPage({html: `<my-component></my-component>`});
let component = await page.find('my-component');

?? component.dispatch(new Event('my-event'));

In the code above I'm trying to dispatch a customEvent to my component so I can test to see it responds correctly. But I do not see any way of doing this in newE2EPage. Any suggestions?

Solution

  • Stenciljs provides a function triggerEvent on it's E2EElement class.

    You can do:

    const page = await newE2EPage();
await page.setContent('some-markup-with-your-component');
const el = page.find('#element-that-would-emit');
el.triggerEvent('some-custom-event');
await page.waitForChanges();
//Your expect assertion here.