feat(test): add toEqualLightHtml()

Author: manucorporat

src/runtime/test/shadow.spec.tsx

@@ -0,0 +1,108 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { Component, h } from '@stencil/core';
+
+
+@Component({
+  tag: 'cmp-a',
+  styles: ':host { color: black }',
+  shadow: true
+})
+class CmpA {
+  render() {
+    return (
+      <div>
+        <slot name='start'></slot>
+        <span>
+          <slot/>
+        </span>
+        <div class='end'>
+          <slot name='end'></slot>
+        </div>
+      </div>
+    );
+  }
+}
+
+describe('shadow', () => {
+
+  it('render with shadow-dom enabled', async () => {
+    const page = await newSpecPage({
+      components: [CmpA],
+      html: `
+      <cmp-a>
+        <span slot="end">End</span>
+        Text
+        <span slot="start">Start</span>
+      </cmp-a>`
+    });
+
+
+    expect(page.root).toEqualHtml(`
+    <cmp-a class="hydrated">
+      <mock:shadow-root>
+        <div>
+          <slot name=\"start\"></slot>
+          <span>
+            <slot></slot>
+          </span>
+          <div class='end'>
+            <slot name='end'></slot>
+          </div>
+        </div>
+      </mock:shadow-root>
+
+      <span slot=\"end\">
+        End
+      </span>
+      Text
+      <span slot=\"start\">
+        Start
+      </span>
+    </cmp-a>`);
+
+    expect(page.root).toEqualLightHtml(`
+    <cmp-a class="hydrated">
+      <span slot=\"end\">
+        End
+      </span>
+      Text
+      <span slot=\"start\">
+        Start
+      </span>
+    </cmp-a>`);
+  });
+
+  it('render scoped html with shadow-dom disabled', async () => {
+    const page = await newSpecPage({
+      components: [CmpA],
+      supportsShadowDom: false,
+      html: `
+      <cmp-a>
+        <span slot="end">End</span>
+        Text
+        <span slot="start">Start</span>
+      </cmp-a>`,
+    });
+
+    const expected = `
+    <cmp-a class="hydrated sc-cmp-a-h">
+      <!---->
+      <div class="sc-cmp-a sc-cmp-a-s">
+        <span slot=\"start\">
+          Start
+        </span>
+        <span class='sc-cmp-a sc-cmp-a-s'>
+          Text
+        </span>
+        <div class='end sc-cmp-a sc-cmp-a-s'>
+          <span slot=\"end\">
+            End
+          </span>
+        </div>
+      </div>
+    </cmp-a>`;
+    expect(page.root).toEqualHtml(expected);
+    expect(page.root).toEqualLightHtml(expected);
+  });
+
+});

src/testing/matchers/html.ts

@@ -2,6 +2,14 @@ import { NODE_TYPES, parseHtmlToFragment, serializeNodeToHtml } from '@mock-doc'
 
 
 export function toEqualHtml(input: string | HTMLElement | ShadowRoot, shouldEqual: string) {
+  return compareHtml(input, shouldEqual, true);
+}
+
+export function toEqualLightHtml(input: string | HTMLElement | ShadowRoot, shouldEqual: string) {
+  return compareHtml(input, shouldEqual, false);
+}
+
+export function compareHtml(input: string | HTMLElement | ShadowRoot,  shouldEqual: string, serializeShadowRoot: boolean) {
   if (input == null) {
     throw new Error(`expect toEqualHtml() value is "${input}"`);
   }
@@ -17,22 +25,22 @@ export function toEqualHtml(input: string | HTMLElement | ShadowRoot, shouldEqua
       prettyHtml: true,
       outerHtml: true,
       excludeTags: ['body'],
-      serializeShadowRoot: true
+      serializeShadowRoot
     });
 
   } else if ((input as HTMLElement).nodeType === NODE_TYPES.DOCUMENT_FRAGMENT_NODE) {
     serializeA = serializeNodeToHtml((input as any), {
       prettyHtml: true,
       excludeTags: ['style'],
       excludeTagContent: ['style'],
-      serializeShadowRoot: true
+      serializeShadowRoot
     });
 
   } else if (typeof input === 'string') {
     const parseA = parseHtmlToFragment(input);
     serializeA = serializeNodeToHtml(parseA, {
       prettyHtml: true,
-      serializeShadowRoot: true
+      serializeShadowRoot
     });
 
   } else {

src/testing/matchers/index.ts

@@ -1,6 +1,6 @@
 import { toEqualAttribute, toEqualAttributes, toHaveAttribute } from './attributes';
 import { toHaveReceivedEvent, toHaveReceivedEventDetail, toHaveReceivedEventTimes } from './events';
-import { toEqualHtml } from './html';
+import { toEqualHtml, toEqualLightHtml } from './html';
 import { toEqualText } from './text';
 import { toHaveClass, toHaveClasses, toMatchClasses } from './class-list';
 import { toMatchScreenshot } from './screenshot';
@@ -10,6 +10,7 @@ export const expectExtend = {
   toEqualAttribute,
   toEqualAttributes,
   toEqualHtml,
+  toEqualLightHtml,
   toEqualText,
   toHaveAttribute,
   toHaveClass,