fix(ld-card): throws if there is no parent element

src/liquid/components/ld-card/ld-card.tsx

@@ -26,7 +26,7 @@ export class LdCard {
   @Prop() size?: 'sm'
 
   componentWillLoad() {
-    if (this.el.parentElement.tagName === 'LD-CARD-STACK') {
+    if (this.el.parentElement?.tagName === 'LD-CARD-STACK') {
       this.el.setAttribute('role', 'listitem')
     }
   }

src/liquid/components/ld-card/test/ld-card.spec.tsx

@@ -1,5 +1,6 @@
 import { newSpecPage } from '@stencil/core/testing'
 import { LdCard } from '../ld-card'
+import { h } from '@stencil/core'
 
 describe('ld-card', () => {
   it('renders', async () => {
@@ -35,4 +36,39 @@ describe('ld-card', () => {
       expect(page.root).toHaveClass('ld-card--interactive-sticky')
     })
   })
+
+  describe('as listitem', () => {
+    it('adds listitem role if in card stack', async () => {
+      const page = await newSpecPage({
+        components: [LdCard],
+        template: () => (
+          <ld-card-stack>
+            <ld-card>Card A</ld-card>
+          </ld-card-stack>
+        ),
+      })
+      expect(page.body.querySelector('ld-card').getAttribute('role')).toEqual(
+        'listitem'
+      )
+    })
+
+    it('does not add listitem role if not in card stack', async () => {
+      const page = await newSpecPage({
+        components: [LdCard],
+        template: () => (
+          <div>
+            <ld-card>Card A</ld-card>
+          </div>
+        ),
+      })
+      expect(
+        page.body.querySelector('ld-card').getAttribute('role')
+      ).not.toEqual('listitem')
+    })
+
+    it('does not throw if there is no parent element', async () => {
+      const component = new LdCard()
+      component.componentWillLoad()
+    })
+  })
 })