test(hydrate): add a regression test for hydrating SVG children

This adds a regression test for the issue reported in #4278, which
doesn't currently occur on `main` but does occur in the branch
associated with #2938 (a PR containing a bunch of changes for fixing
bugs with slots).

This regression test will give us a bit more safety as we go to add more
slot behavior fixes in the future.

test/karma/test-app/prerender-test/karma.spec.ts

@@ -1,10 +1,30 @@
 import { setupDomTests, waitForChanges } from '../util';
 
+const orgConsoleError = window.console.error;
+
+/**
+ * This monkey-patches `window.console.error` in order to fail a test if that
+ * function is called within a test.
+ */
+function patchConsoleToFailOnError() {
+  window.console.error = function (...args: any[]) {
+    orgConsoleError.apply(this, args);
+    try {
+      throw new Error('console.error');
+    } catch (err) {
+      console.info('console.error', args, err);
+    }
+    fail('console.error was called, this is not allowed in a unit test run');
+  };
+}
+
 describe('prerender', () => {
   const { setupDom, tearDownDom } = setupDomTests(document);
   let app: HTMLElement;
   afterEach(tearDownDom);
 
+  beforeEach(() => patchConsoleToFailOnError());
+
   it('server componentWillLoad Order', async () => {
     app = await setupDom('/prerender/index.html', 500);
     const elm = app.querySelector('#server-componentWillLoad');
@@ -61,6 +81,14 @@ describe('prerender', () => {
     const greenTextStyle = getComputedStyle(greenText.querySelector('text-green'));
     expect(greenTextStyle.color).toBe('rgb(0, 255, 0)');
   });
+
+  it('should render an svg child', async () => {
+    app = await setupDom('/prerender/index.html');
+    await waitForChanges(500);
+
+    const testSvg = app.querySelector('test-svg');
+    expect(testSvg.className).toBe('hydrated');
+  });
 });
 
 function testScopedStyles(app: HTMLElement) {

test/karma/test-prerender/src/components.d.ts

@@ -29,6 +29,8 @@ export namespace Components {
     }
     interface CmpTextGreen {
     }
+    interface TestSvg {
+    }
 }
 declare global {
     interface HTMLAppRootElement extends Components.AppRoot, HTMLStencilElement {
@@ -97,6 +99,12 @@ declare global {
         prototype: HTMLCmpTextGreenElement;
         new (): HTMLCmpTextGreenElement;
     };
+    interface HTMLTestSvgElement extends Components.TestSvg, HTMLStencilElement {
+    }
+    var HTMLTestSvgElement: {
+        prototype: HTMLTestSvgElement;
+        new (): HTMLTestSvgElement;
+    };
     interface HTMLElementTagNameMap {
         "app-root": HTMLAppRootElement;
         "cmp-a": HTMLCmpAElement;
@@ -109,6 +117,7 @@ declare global {
         "cmp-scoped-b": HTMLCmpScopedBElement;
         "cmp-text-blue": HTMLCmpTextBlueElement;
         "cmp-text-green": HTMLCmpTextGreenElement;
+        "test-svg": HTMLTestSvgElement;
     }
 }
 declare namespace LocalJSX {
@@ -135,6 +144,8 @@ declare namespace LocalJSX {
     }
     interface CmpTextGreen {
     }
+    interface TestSvg {
+    }
     interface IntrinsicElements {
         "app-root": AppRoot;
         "cmp-a": CmpA;
@@ -147,6 +158,7 @@ declare namespace LocalJSX {
         "cmp-scoped-b": CmpScopedB;
         "cmp-text-blue": CmpTextBlue;
         "cmp-text-green": CmpTextGreen;
+        "test-svg": TestSvg;
     }
 }
 export { LocalJSX as JSX };
@@ -164,6 +176,7 @@ declare module "@stencil/core" {
             "cmp-scoped-b": LocalJSX.CmpScopedB & JSXBase.HTMLAttributes<HTMLCmpScopedBElement>;
             "cmp-text-blue": LocalJSX.CmpTextBlue & JSXBase.HTMLAttributes<HTMLCmpTextBlueElement>;
             "cmp-text-green": LocalJSX.CmpTextGreen & JSXBase.HTMLAttributes<HTMLCmpTextGreenElement>;
+            "test-svg": LocalJSX.TestSvg & JSXBase.HTMLAttributes<HTMLTestSvgElement>;
         }
     }
 }

test/karma/test-prerender/src/components/hydrate-svg/hydrate-svg.tsx

@@ -0,0 +1,11 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'test-svg',
+  shadow: true,
+})
+export class TestSvg {
+  render() {
+    return <svg></svg>;
+  }
+}

test/karma/test-prerender/src/index.html

@@ -11,5 +11,6 @@
   <app-root></app-root>
   <cmp-client-scoped>scoped light-dom: red if in the correct slot</cmp-client-scoped>
   <cmp-client-shadow>shadow light-dom: red if in the correct slot</cmp-client-shadow>
+  <test-svg></test-svg>
 </body>
 </html>