bug: Test Function toEqualHtml does not work with disabled shadowdom and slots properly #3218
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- 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
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>
`);
});