feat(icon): image src invalid error api

adobe · May 8, 2023 · 19e06f9 · 19e06f9
1 parent 101b88c
commit 19e06f9
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 1 deletion.
diff --git a/packages/icon/src/Icon.ts b/packages/icon/src/Icon.ts
@@ -70,14 +70,28 @@ export class Icon extends IconBase {
         }
     };
 
+    private announceIconImageSrcError(): void {
+        this.dispatchEvent(
+            new Event('error', {
+                cancelable: true,
+                bubbles: true,
+                composed: true,
+            })
+        );
+    }
+
     protected override render(): TemplateResult {
         if (this.name) {
             return html`
                 <div id="container"></div>
             `;
         } else if (this.src) {
             return html`
-                <img src="${this.src}" alt=${ifDefined(this.label)} />
+                <img
+                    src="${this.src}"
+                    alt=${ifDefined(this.label)}
+                    @error=${this.announceIconImageSrcError}
+                />
             `;
         }
         return super.render();

diff --git a/packages/icon/stories/icon.stories.ts b/packages/icon/stories/icon.stories.ts
@@ -57,6 +57,27 @@ export const imageIcon = (): TemplateResult => {
 
 imageIcon.storyName = 'Image Icon';
 
+export const imageIconSrcError = (): TemplateResult => {
+    const error = (): void => {
+        console.error('Invalid sp-icon src provided');
+    };
+
+    return html`
+        ${sizes.map(
+            (size) => html`
+                <sp-icon
+                    label="Back"
+                    size=${size}
+                    src=${back}
+                    @error=${error}
+                ></sp-icon>
+            `
+        )}
+    `;
+};
+
+imageIcon.storyName = 'Image Icon src invalid error';
+
 export const svgIcon = (): TemplateResult => {
     return html`
         ${sizes.map(

diff --git a/packages/icon/test/icon.test.ts b/packages/icon/test/icon.test.ts
@@ -15,6 +15,7 @@ import { Icon } from '@spectrum-web-components/icon';
 import '@spectrum-web-components/icons/sp-icons-medium.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+import Sinon from 'sinon';
 
 describe('Icon', () => {
     before(async () => {
@@ -69,6 +70,25 @@ describe('Icon', () => {
         await expect(el).to.be.accessible();
     });
 
+    it('loads w/ invalid src, error dispatching', async () => {
+        const error = Sinon.spy();
+        const el = await fixture<Icon>(
+            html`
+                <sp-icon
+                    label="Image Icon"
+                    src="invalid-image-src"
+                    @error=${error}
+                ></sp-icon>
+            `
+        );
+
+        await elementUpdated(el);
+
+        await expect(el).to.be.accessible();
+
+        expect(error).to.be.calledWithExactly(new Event('error'));
+    });
+
     it('loads w/ label', async () => {
         const label = 'Chevron';
         const el = await fixture<Icon>(