fix(ld-icon): replace icon instead of appending it on name change

emdgroup-liquid · Nov 16, 2021 · 16605f0 · 16605f0
1 parent 1b53b7f
commit 16605f0
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 0 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -4034,6 +4034,19 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "1a6085ee",
+      "image": "bfbdc874abd3e1b63d6424c83049689d.png",
+      "userAgent": "default",
+      "desc": "ld-icon replaces existing icon on icon name change",
+      "testPath": "./src/liquid/components/ld-icon/test/ld-icon.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "652a1171",
       "image": "42c7b717e212fe83baa6bb0f35629284.png",

diff --git a/screenshot/images/bfbdc874abd3e1b63d6424c83049689d.png b/screenshot/images/bfbdc874abd3e1b63d6424c83049689d.png
diff --git a/src/liquid/components/ld-icon/ld-icon.tsx b/src/liquid/components/ld-icon/ld-icon.tsx
@@ -33,6 +33,7 @@ export class LdIcon {
     const iconString = await fetchIcon(this.name)
 
     div.innerHTML = iconString.replace('<svg', '<svg part="icon"')
+    this.element.shadowRoot.innerHTML = ''
     this.element.shadowRoot.appendChild(div.firstChild)
   }
 

diff --git a/src/liquid/components/ld-icon/test/ld-icon.e2e.ts b/src/liquid/components/ld-icon/test/ld-icon.e2e.ts
@@ -34,6 +34,18 @@ describe('ld-icon', () => {
     expect(results).toMatchScreenshot()
   })
 
+  it('replaces existing icon on icon name change', async () => {
+    const page = await getPageWithContent(`<ld-icon name="add"></ld-icon>`)
+    const ldIcon = await page.find('ld-icon')
+    expect(ldIcon).toHaveClasses(['hydrated'])
+
+    ldIcon.setProperty('name', 'matryoshka')
+    await page.waitForChanges()
+
+    const results = await page.compareScreenshot()
+    expect(results).toMatchScreenshot()
+  })
+
   describe('sizes', () => {
     it('sm', async () => {
       const page = await getPageWithContent(