fix(ld-icon): icon component throws when hydrated in tests

emdgroup-liquid · Apr 13, 2023 · 8b6e6ec · 8b6e6ec · vercel · Apr 13, 2023
1 parent ee57d83
commit 8b6e6ec
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 15 deletions.
diff --git a/src/liquid/components/ld-icon/ld-icon.tsx b/src/liquid/components/ld-icon/ld-icon.tsx
@@ -32,11 +32,14 @@ export class LdIcon {
     const div = document.createElement('div')
     const iconString = await fetchIcon(this.name)
 
+    if (!iconString) return
+
     div.innerHTML = iconString.replace(
       '<svg',
       '<svg class="ld-icon__svg" part="icon"'
     )
     Array.from(this.el.shadowRoot.children).forEach((child) => {
+      /* istanbul ignore next */
       if (child.tagName !== 'STYLE') {
         this.el.shadowRoot.removeChild(child)
       }

diff --git a/src/liquid/components/ld-icon/test/__snapshots__/ld-icon.spec.tsx.snap b/src/liquid/components/ld-icon/test/__snapshots__/ld-icon.spec.tsx.snap
@@ -1,37 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ld-icon does not throw if icon is not found 1`] = `
+<ld-icon class="ld-icon" name="triangle" role="presentation">
+  <mock:shadow-root></mock:shadow-root>
+</ld-icon>
+`;
+
 exports[`ld-icon renders multiple 1`] = `
 <body>
-  <ld-icon class="ld-icon" name="add" role="presentation">
+  <ld-icon class="ld-icon" name="rect" role="presentation">
     <mock:shadow-root>
-      Not Found
+      <svg class="ld-icon__svg" fill="none" height="24" part="icon" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+        <rect fill="currentcolor" height="100" width="100"></rect>
+      </svg>
     </mock:shadow-root>
   </ld-icon>
-  <ld-icon class="ld-icon" name="education" role="presentation">
+  <ld-icon class="ld-icon" name="circle" role="presentation">
     <mock:shadow-root>
-      Not Found
+      <svg class="ld-icon__svg" fill="none" height="24" part="icon" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="50" cy="50" fill="currentcolor" r="50"></circle>
+      </svg>
     </mock:shadow-root>
   </ld-icon>
-  <ld-icon class="ld-icon" name="add" role="presentation">
+  <ld-icon class="ld-icon" name="rect" role="presentation">
     <mock:shadow-root>
-      Not Found
+      <svg class="ld-icon__svg" fill="none" height="24" part="icon" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+        <rect fill="currentcolor" height="100" width="100"></rect>
+      </svg>
     </mock:shadow-root>
   </ld-icon>
 </body>
 `;
 
 exports[`ld-icon renders with name prop 1`] = `
-<ld-icon class="ld-icon" name="add" role="presentation">
+<ld-icon class="ld-icon" name="rect" role="presentation">
   <mock:shadow-root>
-    Not Found
+    <svg class="ld-icon__svg" fill="none" height="24" part="icon" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+      <rect fill="currentcolor" height="100" width="100"></rect>
+    </svg>
   </mock:shadow-root>
 </ld-icon>
 `;
 
 exports[`ld-icon renders with size prop 1`] = `
-<ld-icon class="ld-icon ld-icon--sm" name="atom" role="presentation">
+<ld-icon class="ld-icon ld-icon--sm" name="rect" role="presentation">
   <mock:shadow-root>
-    Not Found
+    <svg class="ld-icon__svg" fill="none" height="24" part="icon" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+      <rect fill="currentcolor" height="100" width="100"></rect>
+    </svg>
   </mock:shadow-root>
 </ld-icon>
 `;

diff --git a/src/liquid/components/ld-icon/test/ld-icon.spec.tsx b/src/liquid/components/ld-icon/test/ld-icon.spec.tsx
@@ -2,11 +2,46 @@ import { h, Fragment } from '@stencil/core'
 import { newSpecPage } from '@stencil/core/testing'
 import { LdIcon } from '../ld-icon'
 
+const rectSvg =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="100" height="100" fill="currentcolor" /></svg>'
+const circleSvg =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><circle cx="50" cy="50" r="50" fill="currentcolor" /></svg>'
+
+function setupFetchStub() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  return function fetchStub(url: string): Promise<Response> {
+    return new Promise((resolve) => {
+      let data: string
+      if (url.endsWith('/rect.svg')) {
+        data = rectSvg
+      } else if (url.endsWith('/circle.svg')) {
+        data = circleSvg
+      } else {
+        data = ''
+      }
+
+      process.nextTick(() => {
+        resolve({
+          text: () => Promise.resolve<string>(data),
+        } as Response)
+      })
+    })
+  }
+}
+
 describe('ld-icon', () => {
+  beforeAll(() => {
+    jest.spyOn(global, 'fetch').mockImplementation(setupFetchStub())
+  })
+
+  afterAll(() => {
+    global.fetch['mockClear']()
+  })
+
   it('renders with name prop', async () => {
     const page = await newSpecPage({
       components: [LdIcon],
-      template: () => <ld-icon name="add" />,
+      template: () => <ld-icon name="rect" />,
     })
     expect(page.root).toMatchSnapshot()
   })
@@ -15,9 +50,9 @@ describe('ld-icon', () => {
       components: [LdIcon],
       template: () => (
         <>
-          <ld-icon name="add" />
-          <ld-icon name="education" />
-          <ld-icon name="add" />
+          <ld-icon name="rect" />
+          <ld-icon name="circle" />
+          <ld-icon name="rect" />
         </>
       ),
     })
@@ -26,7 +61,14 @@ describe('ld-icon', () => {
   it('renders with size prop', async () => {
     const page = await newSpecPage({
       components: [LdIcon],
-      template: () => <ld-icon name="atom" size="sm" />,
+      template: () => <ld-icon name="rect" size="sm" />,
+    })
+    expect(page.root).toMatchSnapshot()
+  })
+  it('does not throw if icon is not found', async () => {
+    const page = await newSpecPage({
+      components: [LdIcon],
+      template: () => <ld-icon name="triangle" />,
     })
     expect(page.root).toMatchSnapshot()
   })