Add SSR tests

lit · May 2, 2024 · e0c26df · e0c26df
1 parent 9ecde06
commit e0c26df
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 3 deletions.
diff --git a/packages/labs/ssr/src/test/integration/tests/basic.ts b/packages/labs/ssr/src/test/integration/tests/basic.ts
@@ -6,7 +6,7 @@
 
 import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
 
-import {html, svg, noChange, nothing, Part} from 'lit';
+import {html, math, svg, noChange, nothing, Part} from 'lit';
 import {html as staticHtml, literal} from 'lit/static-html.js';
 import {
   directive,
@@ -30,6 +30,7 @@ import {until} from 'lit/directives/until.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {live} from 'lit/directives/live.js';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import {unsafeMath} from 'lit/directives/unsafe-math.js';
 import {unsafeSVG} from 'lit/directives/unsafe-svg.js';
 import {createRef, ref} from 'lit/directives/ref.js';
 
@@ -320,6 +321,24 @@ export const tests: {[name: string]: SSRTest} = {
     stableSelectors: ['svg', 'circle'],
   },
 
+  'ChildPart accepts TemplateResult with MATHML type': {
+    render(x: unknown) {
+      return html` <math>${math`<mi>${x}</mi>`}</math> `;
+    },
+    expectations: [
+      {
+        args: ['a'],
+        html: '<math><mi>a</mi></math>',
+        check(assert: Chai.Assert, dom: HTMLElement) {
+          const mathElements = dom.querySelectorAll('math');
+          // Expect only a single math element to have been rendered.
+          assert.lengthOf(mathElements, 1);
+        },
+      },
+    ],
+    stableSelectors: ['math', 'mi'],
+  },
+
   'multiple ChildParts, adjacent primitive values': {
     render(x: unknown, y: unknown) {
       return html` <div>${x}${y}</div> `;
@@ -952,7 +971,24 @@ export const tests: {[name: string]: SSRTest} = {
         html: '<svg><ellipse cx="100" cy="50" rx="100" ry="50"></ellipse></svg>',
       },
     ],
-    stableSelectors: ['div'],
+    stableSelectors: ['svg'],
+  },
+
+  'ChildPart accepts directive: unsafeMath': {
+    render(v) {
+      return html` <math>${unsafeMath(v)}</math> `;
+    },
+    expectations: [
+      {
+        args: ['<mi>a</mi>'],
+        html: '<math><mi>a</mi></math>',
+      },
+      {
+        args: ['<mn>1</mn>'],
+        html: '<math><mn>1</mn></math>',
+      },
+    ],
+    stableSelectors: ['math'],
   },
 
   /******************************************************

diff --git a/packages/labs/ssr/src/test/lib/render-lit_test.ts b/packages/labs/ssr/src/test/lib/render-lit_test.ts
@@ -407,6 +407,24 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
     );
   });
 
+  test('math fragment template', async () => {
+    const {render, mathTemplate} = await setup();
+    const result = await render(mathTemplate(0));
+    assert.is(
+      result,
+      `<!--lit-part eIU1B9cAcXw=--><mn><!--lit-part-->0<!--/lit-part--></mn><!--/lit-part-->`
+    );
+  });
+
+  test('html template type with math template type ChildPart', async () => {
+    const {render, templateWithMathTemplate} = await setup();
+    const result = await render(templateWithMathTemplate(0));
+    assert.is(
+      result,
+      `<!--lit-part q5ZurYRhi1g=--><math><!--lit-part eIU1B9cAcXw=--><mn><!--lit-part-->0<!--/lit-part--></mn><!--/lit-part--></math><!--/lit-part-->`
+    );
+  });
+
   test('element with reflected properties', async () => {
     const {render, elementWithReflectedProperties} = await setup();
     const result = await render(elementWithReflectedProperties);

diff --git a/packages/labs/ssr/src/test/test-files/render-test-module.ts b/packages/labs/ssr/src/test/test-files/render-test-module.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {html, svg, nothing} from 'lit';
+import {html, math, svg, nothing} from 'lit';
 import {repeat} from 'lit/directives/repeat.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {ref, createRef} from 'lit/directives/ref.js';
@@ -58,6 +58,10 @@ export const templateWithMixedCaseAttrs = (str: string) => html`<svg dynamicCame
 export const svgTemplate = (x: number, y: number, r: number) => svg`<circle cx="${x}" cy="${y}" r="${r}" />`;
 // prettier-ignore
 export const templateWithSvgTemplate = (x: number, y: number, r: number) => html`<svg>${svgTemplate(x, y, r)}</svg>`;
+// prettier-ignore
+export const mathTemplate = (x: number) => math`<mn>${x}</mn>`;
+// prettier-ignore
+export const templateWithMathTemplate = (x: number) => html`<math>${mathTemplate(x)}</math>`;
 
 /* Reflected Property Expressions */