import { createRef } from "react";
import { render, screen } from "@testing-library/react";
import { Image } from ".";

const CLASS_NAME = "mobius-image";

const defaultProps = {
  src: "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
  alt: "Test image",
  "data-testid": "test",
};

describe("Test for Image", () => {
  it("should render without errors", () => {
    const view = render(<Image {...defaultProps} />);
    expect(view).toBeTruthy();
  });

  describe("given elementType", () => {
    it("is not applied as element attribute", () => {
      const { container } = render(
        <Image {...defaultProps} elementType="ul" />,
      );
      expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
    });
  });

  describe("uses correct class names", () => {
    it("uses Mobius class", () => {
      render(<Image {...defaultProps} />);
      expect(screen.getByTestId("test")).toHaveClass("mobius");
    });

    it("uses base Mobius class", () => {
      render(<Image {...defaultProps} />);
      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
    });

    it("includes custom class name", () => {
      render(<Image {...defaultProps} className="my-class" />);
      expect(screen.getByTestId("test")).toHaveClass("my-class");
      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
    });
  });

  it("forwards ref", () => {
    const ref = createRef<HTMLImageElement>();
    render(<Image ref={ref} alt="test" src="test.png" />);
    expect(ref.current).toBeInstanceOf(HTMLImageElement);
  });
});
