feat(ld-heading): add parts

emdgroup-liquid · Oct 12, 2021 · 6a704fe · 6a704fe
1 parent 180bd39
commit 6a704fe
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 40 deletions.
diff --git a/src/liquid/components/ld-heading/ld-heading.tsx b/src/liquid/components/ld-heading/ld-heading.tsx
@@ -131,6 +131,7 @@ export class LdHeading {
     return (
       <HTag
         class={cl}
+        part="tag"
         ref={(ref: HTMLHeadingElement) => (this.headingRef = ref)}
         {...cloneAttributes<HeadingHTMLAttributes<HTMLHeadingElement>>(this.el)}
       >

diff --git a/src/liquid/components/ld-heading/test/__snapshots__/ld-heading.spec.ts.snap b/src/liquid/components/ld-heading/test/__snapshots__/ld-heading.spec.ts.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ld-heading renders 1`] = `
+<ld-heading level="1">
+  <mock:shadow-root>
+    <h1 class="ld-heading ld-heading--h1" part="tag">
+      <slot></slot>
+    </h1>
+  </mock:shadow-root>
+  Text
+</ld-heading>
+`;
+
+exports[`ld-heading renders with visual b level and explicit aria-label 1`] = `
+<ld-heading aria-label="Yolo" level="1" visual-level="b3">
+  <mock:shadow-root>
+    <h1 aria-label="Yolo" class="ld-heading ld-heading--b3" part="tag">
+      <slot></slot>
+    </h1>
+  </mock:shadow-root>
+  Text
+</ld-heading>
+`;
+
+exports[`ld-heading renders with visual b level and implicit aria-label 1`] = `
+<ld-heading level="1" visual-level="b3">
+  <mock:shadow-root>
+    <h1 aria-label="Text" class="ld-heading ld-heading--b3" part="tag">
+      <slot></slot>
+    </h1>
+  </mock:shadow-root>
+  Text
+</ld-heading>
+`;
+
+exports[`ld-heading renders with visual level 1`] = `
+<ld-heading level="1" visual-level="h3">
+  <mock:shadow-root>
+    <h1 class="ld-heading ld-heading--h3" part="tag">
+      <slot></slot>
+    </h1>
+  </mock:shadow-root>
+  Text
+</ld-heading>
+`;
diff --git a/src/liquid/components/ld-heading/test/ld-heading.spec.ts b/src/liquid/components/ld-heading/test/ld-heading.spec.ts
@@ -7,16 +7,7 @@ describe('ld-heading', () => {
       components: [LdHeading],
       html: `<ld-heading level="1">Text</ld-heading>`,
     })
-    expect(page.root).toEqualHtml(`
-      <ld-heading level="1">
-        <mock:shadow-root>
-          <h1 class="ld-heading ld-heading--h1">
-            <slot></slot>
-          </h1>
-        </mock:shadow-root>
-        Text
-      </ld-heading>
-    `)
+    expect(page.root).toMatchSnapshot()
   })
   it('throws if no level is provided', async () => {
     expect.assertions(1)
@@ -49,48 +40,21 @@ describe('ld-heading', () => {
       components: [LdHeading],
       html: `<ld-heading level="1" visual-level="h3">Text</ld-heading>`,
     })
-    expect(page.root).toEqualHtml(`
-      <ld-heading level="1" visual-level="h3">
-        <mock:shadow-root>
-          <h1 class="ld-heading ld-heading--h3">
-            <slot></slot>
-          </h1>
-        </mock:shadow-root>
-        Text
-      </ld-heading>
-    `)
+    expect(page.root).toMatchSnapshot()
   })
   it('renders with visual b level and explicit aria-label', async () => {
     const page = await newSpecPage({
       components: [LdHeading],
       html: `<ld-heading level="1" visual-level="b3" aria-label="Yolo">Text</ld-heading>`,
     })
-    expect(page.root).toEqualHtml(`
-      <ld-heading aria-label="Yolo" level="1" visual-level="b3">
-        <mock:shadow-root>
-          <h1 aria-label="Yolo" class="ld-heading ld-heading--b3">
-            <slot></slot>
-          </h1>
-        </mock:shadow-root>
-        Text
-      </ld-heading>
-    `)
+    expect(page.root).toMatchSnapshot()
   })
   it('renders with visual b level and implicit aria-label', async () => {
     const page = await newSpecPage({
       components: [LdHeading],
       html: `<ld-heading level="1" visual-level="b3">Text</ld-heading>`,
     })
-    expect(page.root).toEqualHtml(`
-      <ld-heading level="1" visual-level="b3">
-        <mock:shadow-root>
-          <h1 aria-label="Text" class="ld-heading ld-heading--b3">
-            <slot></slot>
-          </h1>
-        </mock:shadow-root>
-        Text
-      </ld-heading>
-    `)
+    expect(page.root).toMatchSnapshot()
   })
   it('throws with invalid visual level prop', async () => {
     let error: unknown