import { render } from "@testing-library/react";

import { Avatar } from "../Avatar";

describe("rendering Avatar", () => {
  it("has default avatar class", () => {
    const { getByTestId } = render(
      <Avatar src="/avatar.png" alt="Person avatar" data-testid="test-id" />,
    );
    expect(getByTestId("test-id")).toHaveClass("avatar");
  });

  it("renders image when src is set", () => {
    const { getByAltText } = render(
      <Avatar src="/avatar.png" alt="Person avatar" />,
    );
    expect(getByAltText("Person avatar")).toHaveAttribute("src", "/avatar.png");
  });

  it("does not render decoration by default", () => {
    const { container } = render(
      <Avatar src="/avatar.png" alt="Person avatar" />,
    );
    expect(container.getElementsByClassName("avatar__icon").length).toBe(0);
  });

  it("renders decoration when image and iconName are set", () => {
    const { container } = render(
      <Avatar src="/avatar.png" alt="Person avatar" iconName="quote" />,
    );
    expect(container.getElementsByClassName("avatar__icon").length).toBe(1);
  });

  it("passes custom classes through", () => {
    const { getByTestId } = render(
      <Avatar
        src="/avatar.png"
        alt="Person avatar"
        data-testid="test-id"
        className="surface-secondary"
      />,
    );
    expect(getByTestId("test-id")).toHaveClass("surface-secondary");
  });
});