bug: Test Function toEqualHtml does not work with disabled shadowdom and slots properly

[raspyweather]

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.7.0

Current Behavior

Using a slot should not compromise a component's testability. Currently using a slot (with shadow:false) causes unit tests to fail due to a HTML comment being inserted as it seems. Removing the slot "fixes" the testcase (but makes it useless).

Expected Behavior

a) It is possible to use toEqualHtml to test a component with a slot and get proper error messages when test cases fail b) it is documented

Steps to Reproduce

Following testcase should work (toEqualHtml should normalize whitespaces anyway, adding or removing whitespaces to expectation does not change result).

@Component({
  tag: 'test-with-slot',
  styleUrl: 'test-with-slot.css',
  shadow: false,
})
export class TestWithSlot {
  render() {
    return (
      <Host>
        <slot></slot>
      </Host>
    );
  }

  /* OUTPUT:
      - <test-with-slot></test-with-slot>
      + <test-with-slot>
      + </test-with-slot>
  */
  it('should work as expected', async () => {
    const page = await newSpecPage({
      components: [TestWithSlot],
      html: `<test-with-slot></test-with-slot>`,
    });
    expect(page.root).toEqualHtml(`
      <test-with-slot>
      </test-with-slot>
    `);
  });

Code Reproduction URL

https://github.com/raspyweather/stencil-issues/blob/master/src/components/test-with-slot/test/test-with-slot.spec.tsx

Additional Information

Comparing "manually" via outerHTML reveals what looks like a HTML comment being inserted by the framework which causes the comparison to fail. I suspect the issue described above being not visible due to "prettyprinting" HTML to the console which I suspect hides the HTML comment and therefore makes it look like the issue would be caused by whitespaces.

  /* OUTPUT
    - <test-with-slot></test-with-slot>
    + <test-with-slot>
    +   <!---->
    + </test-with-slot>
  */
  it('should work with manual comparison - fails', async () => {
    const page = await newSpecPage({
      components: [TestWithSlot],
      html: `<test-with-slot></test-with-slot>`,
    });
    expect(page.root.outerHTML).toEqualHtml(`
      <test-with-slot>
      </test-with-slot>
    `);
  });

[rwaskiewicz]

Thanks for the detailed bug report! I'm going to label this issue so that it gets ingested into our internal issue tracker for the team to take a closer look. I agree this isn't working as expected here (at the very least is counterintuitive)

[classicmike]

Hi @rwaskiewicz,

Hope you're well. Just wondering if this issue is currently being worked on or if there is a resolution incoming for this issue. ATM I'm refraining from creating a new Github issue because a bug I'm experiencing seems very similar to this one. The only key difference my stencil components use a scoped based setup. i.e:

@Component({
    tag: 'foo-component',
    scoped: true,
}

This technically still in the non-shadow-dom based setup, but the symptoms are pretty much the same.

Thanks.

[christian-bromann]

@classicmike this has been ingested into our backlog but there hasn't been any progress on this. I also can't give you an ETA on when this happen. If you are interested taking a stab at providing a fix for this I am happy to help in that process.