bug: slotchange event is not triggered in tests

[DavideMininni-Fincons]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

2.17.4

Current Behavior

Hello guys, and thank you for your efforts.

I'm working on this project based on Stencil. One of the components is a form wrapper, with this specs (simplified):

• the <label> is inside the component;
• the <input> must be provided from consumers and projected into a slot;
• the input slot has a slotchange event, so when the content is added 1) the id from the input is set as htmlFor in the label and 2) if the input is readonly or disabled, a class is added to the <Host>.

What happens: in tests, the slotchange event is not triggered, so the handler's logic is lost. Tested:

• using the newSpecPage API with html prop set to <my-comp><input slot='input' disabled/></my-comp>
• using the newSpecPage API with html prop set to <my-comp></my-comp> and then manually add an input with slot & disabled attributes
• trying to directly dispatch the slotchange event on the slot.

Using VSCode with this guide I can see that debug points inside slotchange method are not reached,

Expected Behavior

I expect that the slotchange handler is called when the slot content is projected.

Steps to Reproduce

• Checkout from https://github.com/DavideMininni-Fincons/stencil-demo-slotchange
• Run npm install
• Run npm run test
• Tests failed

Code Reproduction URL

https://github.com/DavideMininni-Fincons/stencil-demo-slotchange

Additional Information

No response

[alicewriteswrongs]

@DavideMininni-Fincons thank you for filing this issue and for providing a detailed reproduction case! It is much appreciated.

I've been able to use your repro to confirm that these tests aren't working as expected. I'm not sure but I believe this may be a problem with Stencil's mock DOM library not having support for the onslotchange event.

In any case, I'm going to label this so it's ingested into our backlog.

Thank you again for reporting!

[kyubisation]

@alicewriteswrongs Is that a third party library or something internal to Stencil.js? As this is starting to become a blocker to us, we would like to try to contribute a solution to this problem.

[alicewriteswrongs]

The mock DOM library is something internal to Stencil called mock-doc. It provides some Stencil-specific support for mocking and testing things in a node.js environment.