added tests

src/components/avatar/avatar.test.ts

@@ -72,6 +72,46 @@ describe('<sl-avatar>', () => {
     });
   });
 
+  describe('when image is present, the initials or icon part should not render', () => {
+    const initials = 'SL';
+    const image = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+    const label = 'Small transparent square';
+    before(async () => {
+      el = await fixture<SlAvatar>(
+        html`<sl-avatar image="${image}" label="${label}" initials="${initials}"></sl-avatar>`
+      );
+    });
+
+    it('should pass accessibility tests', async () => {
+      /**
+       * The image element itself is ancillary, because it's parent container contains the
+       * aria-label which dictates what "sl-avatar" is. This also implies that label text will
+       * resolve to "" when not provided and ignored by readers. This is why we use alt="" on
+       * the image element to pass accessibility.
+       * https://html.spec.whatwg.org/multipage/images.html#ancillary-images
+       */
+      await expect(el).to.be.accessible({ ignoredRules });
+    });
+
+    it('renders "image" part, with src and a role of presentation', () => {
+      const part = el.shadowRoot!.querySelector('[part~="image"]')!;
+
+      expect(part.getAttribute('src')).to.eq(image);
+    });
+
+    it('should not render the initials part', () => {
+      const part = el.shadowRoot!.querySelector<HTMLElement>('[part~="initials"]')!;
+
+      expect(part).to.not.exist;
+    });
+
+    it('should not render the icon part', () => {
+      const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=icon]')!;
+
+      expect(slot).to.not.exist;
+    });
+  });
+
   ['square', 'rounded', 'circle'].forEach(shape => {
     describe(`when passed a shape attribute ${shape}`, () => {
       before(async () => {