test(web-components): add avatar tests

Author: amir78729

packages/web-components/src/avatar/avatar.test.tsx

@@ -1,23 +1,130 @@
-import { render, screen, userEvent } from "@internals/test-helpers";
-import { describe, expect, it, jest } from "@jest/globals";
+import { fireEvent, render, screen } from "@internals/test-helpers";
+import { describe, expect, it } from "@jest/globals";
+import { createComponent } from "@lit/react";
+import React from "react";
+import {
+  itShouldMount,
+  itSupportsClassName,
+  itSupportsDataSetProps,
+  itSupportsStyle,
+} from "../internals/tests.tsx";
+import { TapsiAvatar } from "./index.ts";
 
-import "./index.ts";
+const Avatar = createComponent({
+  react: React,
+  elementClass: TapsiAvatar,
+  tagName: "tapsi-avatar",
+});
+
+const mockRequiredProps = {
+  "data-testid": "test-avatar",
+};
+
+const getTestAvatarRoot = async () => screen.findByShadowTestId("avatar-root");
+
+const getTestAvatarImage = async () =>
+  screen.findByShadowTestId("avatar-image");
+
+const getTestAvatarPlaceholder = async () =>
+  screen.findByShadowTestId("avatar-placeholder");
+
+describe("🧪 avatar: UI", () => {
+  itShouldMount(Avatar, mockRequiredProps);
+  itSupportsClassName(Avatar, mockRequiredProps);
+  itSupportsStyle(Avatar, mockRequiredProps);
+  itSupportsDataSetProps(Avatar, mockRequiredProps);
+
+  it("should render placeholder if no image was set", async () => {
+    render(<Avatar {...mockRequiredProps} />);
+
+    const placeholder = await getTestAvatarPlaceholder();
+
+    expect(placeholder).toBeInTheDocument();
+  });
+
+  it("should render image if `image` property was set", async () => {
+    render(
+      <Avatar
+        {...mockRequiredProps}
+        image="image.png"
+        alt="image-alt"
+      />,
+    );
+
+    expect(await screen.findByShadowTestId("avatar-image")).toBeInTheDocument();
+  });
+
+  it("should render placeholder if image has error", async () => {
+    render(
+      <Avatar
+        {...mockRequiredProps}
+        image="image.png"
+        alt="image-alt"
+      />,
+    );
 
-describe("tapsi-avatar", () => {
-  it("renders", async () => {
-    // @ts-expect-error Current React does not support custom elements.
-    render(<tapsi-avatar data-testid="test"></tapsi-avatar>);
+    const image = await getTestAvatarImage();
 
-    const el = screen.getByTestId("test");
+    fireEvent.error(image);
 
-    const handleClick = jest.fn();
+    const placeholder = await getTestAvatarPlaceholder();
 
-    el.addEventListener("click", handleClick);
+    expect(placeholder).toBeInTheDocument();
+  });
+
+  it("should apply `loading` attribute correctly", async () => {
+    render(
+      <Avatar
+        {...mockRequiredProps}
+        image="image.png"
+        loading="lazy"
+      />,
+    );
+
+    const image = await getTestAvatarImage();
+
+    expect(image).toHaveAttribute("loading", "lazy");
+  });
+
+  it("should apply the correct size class", async () => {
+    render(
+      <Avatar
+        {...mockRequiredProps}
+        image="image.png"
+        size="lg"
+      />,
+    );
+
+    const avatarRoot = await getTestAvatarRoot();
+
+    expect(avatarRoot).toHaveClass("lg");
+  });
+
+  it("should apply `alt` attribute to the `img` tag correctly", async () => {
+    render(
+      <Avatar
+        {...mockRequiredProps}
+        image="image.png"
+        alt="Test Alt"
+      />,
+    );
+
+    const image = await getTestAvatarImage();
+
+    expect(image).toHaveAttribute("alt", "Test Alt");
+  });
 
-    await userEvent.click(el);
+  it("should apply `label` property as `aria-label`", async () => {
+    render(
+      <Avatar
+        {...mockRequiredProps}
+        image="image.png"
+        label="Avatar Label"
+      />,
+    );
 
-    expect(handleClick).toHaveBeenCalled();
+    const avatarRoot = await getTestAvatarRoot();
 
-    expect(await screen.findByShadowRole("img")).toBeInTheDocument();
+    expect(avatarRoot).toHaveAttribute("aria-label", "Avatar Label");
   });
 });

packages/web-components/src/avatar/avatar.ts

@@ -46,6 +46,7 @@ export class Avatar extends LitElement {
     return html`
       <img
         part="image"
+        data-testid="avatar-image"
         class="image"
         alt=${this.alt}
         src="${this.image}"
@@ -57,6 +58,7 @@ export class Avatar extends LitElement {
 
   private _renderPlaceholder() {
     return html` <div
+      data-testid="avatar-placeholder"
       part="placeholder"
       class="placeholder"
       aria-hidden="true"
@@ -73,6 +75,7 @@ export class Avatar extends LitElement {
 
     return html`
       <div
+        data-testid="avatar-root"
         role="img"
         aria-label=${this.label}
         part="root"