bug: there is no way to mock shadow-root in toEqualHtml result when delegatesFocus is true

[glushkova91]

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

4.38.3

Current Behavior

Currently there is no clear way how to test shadow dom components with delegateFocus: true. I'm using newSpecPage, toEqualHtml and mock:shadow-root to verify the rendered component result, but after update in 4.36 version the test started failing with the following error:

 expect(received).toBe(expected) // Object.is equality

    - Expected  - 1
    + Received  + 1

    @@ -1,7 +1,7 @@
      <cat-tag tabindex="0">
    -   <template shadowrootmode="open">
    +   <template shadowrootmode="open" shadowrootdelegatesfocus>

Expected Behavior

I'd expect that either mock:shadow-root can accept delegateFocus attribute or to have another mock:shadow-root-delegated element.

System Info

Steps to Reproduce

Run a standard test for shadow component with delegateFocus true, e.g.

  it('renders', async () => {
    const page = await newSpecPage({
      components: [MyTag],
      html: `<my-tag></my-tag>`
    });
    expect(page.root).toEqualHtml(`
        <my-tag tabindex="0">
         <mock:shadow-root>
           <div class="label-container"></div>
           <div class="input-wrapper">
            <div class="input-inner-wrapper">
             <input class="tags-input" id="tags-my-input-0-input" part="input" role="combobox">
            </div>
           </div>
         </mock:shadow-root>
        </my-tag>
    `);
  });

Code Reproduction URL

https://github.com/

Additional Information

As a workaround I use expect(page.root?.shadowRoot).toEqualHtml(...) instead expect(page.root).toEqualHtml(...)

[johnjenkins]

hi @glushkova91 - can you please add a reproduction 🙏 It makes our lives so much easier to replicate the issue, see if we can tweak the repro to work for you, write tests to fix the issue etc. Thanks!

[glushkova91]

Hi @johnjenkins, sure thing, I added the link, I forked component-starter repo(https://github.com/stenciljs/component-starter) and just changed the shadow: dom to shadow: { delegateFocus: true } https://github.com/glushkova91/stencil-component-starter/blob/main/src/components/my-component/my-component.spec.ts

[johnjenkins]

ty! Interestingly if you add the shadowrootdelegatesfocus ala <mock:shadow-root shadowrootdelegatesfocus> it almost passes:

I think it should be relatively straightforward to fix