From 6a704feabf40e25b176c1caba05e6edfc0c0e432 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Schubert?= <reneschubert@gmx.de>
Date: Tue, 12 Oct 2021 15:03:05 +0200
Subject: [PATCH] feat(ld-heading): add parts

---
 .../components/ld-heading/ld-heading.tsx      |  1 +
 .../__snapshots__/ld-heading.spec.ts.snap     | 45 +++++++++++++++++++
 .../ld-heading/test/ld-heading.spec.ts        | 44 ++----------------
 3 files changed, 50 insertions(+), 40 deletions(-)
 create mode 100644 src/liquid/components/ld-heading/test/__snapshots__/ld-heading.spec.ts.snap

diff --git a/src/liquid/components/ld-heading/ld-heading.tsx b/src/liquid/components/ld-heading/ld-heading.tsx
index 883f1ac398..c83b5f2709 100644
--- 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
new file mode 100644
index 0000000000..f2d8084010
--- /dev/null
+++ 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
index 3a9813f2ef..f17a54ffb2 100644
--- 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