Added unit tests.

Author: DaemonCahill

src/avatar/__tests__/avatar.test.tsx

@@ -9,6 +9,7 @@ import Avatar, { AvatarProps } from "../../../lib/components/avatar";
 import createWrapper from "../../../lib/components/test-utils/dom";
 
 import loadingDotsStyles from "../../../lib/components/avatar/loading-dots/styles.selectors.js";
+import avatarStyles from "../../../lib/components/avatar/styles.selectors.js";
 
 const defaultAvatarProps: AvatarProps = { ariaLabel: "Avatar" };
 
@@ -30,6 +31,15 @@ describe("Avatar", () => {
     expect(wrapper.getElement().textContent).toBe(initials);
   });
 
+  test("Renders avatar with image", () => {
+    const imgUrl =
+      "https://static1.colliderimages.com/wordpress/wp-content/uploads/2024/08/deadpool-wolverine-hugh-jackman-mask-reveal.jpg";
+    const wrapper = renderAvatar({ ...defaultAvatarProps, imgUrl });
+
+    const image = wrapper.findByClassName(avatarStyles.image)?.getElement();
+    expect(image).toBeInTheDocument();
+  });
+
   test("Shows tooltip on focus", () => {
     const tooltipText = "Jane Doe";
     const wrapper = renderAvatar({ ...defaultAvatarProps, color: "default", tooltipText });
@@ -75,6 +85,15 @@ describe("Avatar", () => {
     expect(loading).toBeInTheDocument();
   });
 
+  test("Loading takes precedence over image", () => {
+    const imgUrl =
+      "https://static1.colliderimages.com/wordpress/wp-content/uploads/2024/08/deadpool-wolverine-hugh-jackman-mask-reveal.jpg";
+    const wrapper = renderAvatar({ ...defaultAvatarProps, imgUrl, loading: true });
+
+    const loading = wrapper.findByClassName(loadingDotsStyles.root)?.getElement();
+    expect(loading).toBeInTheDocument();
+  });
+
   test("Shows warning when initials length is longer than 2", () => {
     const warnOnce = vi.spyOn(ComponentToolkitInternal, "warnOnce");
 

src/avatar/internal.tsx

@@ -34,7 +34,7 @@ const AvatarContent = ({
   }
 
   if (imgUrl) {
-    return <img src={imgUrl} style={{ height: width, width: width }} />;
+    return <img className={styles.image} src={imgUrl} style={{ height: width, width: width }} />;
   }
 
   if (initials) {

src/avatar/styles.scss

@@ -48,7 +48,7 @@ $avatar-size: 28px;
   inline-size: inherit;
   overflow: hidden;
 
-  img {
+  .image {
     @include mixins.border-radius-avatar;
     block-size: $avatar-size;
     inline-size: $avatar-size;