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,5 +1,25 @@
 import { setupDomTests, waitForChanges } from '../util';
 
+/**
+ * This monkey-patches `window.console.error` in order to fail a test if that
+ * function is called within a test.
+ *
+ * @returns a teardown function which ondoes the monkey-patch
+ */
+function patchConsoleError() {
+  const orgConsoleError = window.console.error;
+
+  window.console.error = function (...args: any[]) {
+    orgConsoleError.apply(window, args);
+    window.console.info('console.error', args);
+    throw new Error('console.error was called, this is not allowed in a unit test run');
+  };
+
+  return () => {
+    window.console.error = orgConsoleError;
+  };
+}
+
 describe('prerender', () => {
   const { setupDom, tearDownDom } = setupDomTests(document);
   let app: HTMLElement;
@@ -61,6 +81,21 @@ describe('prerender', () => {
     const greenTextStyle = getComputedStyle(greenText.querySelector('text-green'));
     expect(greenTextStyle.color).toBe('rgb(0, 255, 0)');
   });
+
+  // this describe block is just here to let us run a cleanup function after
+  // the test exits, whether or not it fails
+  describe('should render an svg child', () => {
+    const teardown = patchConsoleError();
+    afterAll(teardown);
+
+    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>