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

const CLASS_NAME = "mobius-container";

describe("Container", () => {
  it("should render without errors", () => {
    const view = render(<Container>test</Container>);
    expect(view).toBeTruthy();
  });

  it("should use the provided elementType", () => {
    const view = render(<Container elementType="span">test</Container>);
    expect(view.container.firstElementChild?.tagName).toBe("SPAN");
  });

  it("should render provided style attributes", () => {
    const { container } = render(
      <Container style={{ backgroundColor: "red" }}>test</Container>,
    );

    expect(container.firstElementChild).toHaveStyle({
      "background-color": "rgb(255, 0, 0)",
    });
  });

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

  describe("uses correct class names", () => {
    it("uses Mobius class", () => {
      render(<Container data-testid="test">Sample text</Container>);
      expect(screen.getByTestId("test")).toHaveClass("mobius");
    });

    it("uses base Mobius class", () => {
      render(<Container data-testid="test">Sample text</Container>);
      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
    });

    it("includes custom class name", () => {
      render(
        <Container className="my-class" data-testid="test">
          Sample Text
        </Container>,
      );
      expect(screen.getByTestId("test")).toHaveClass("my-class");
      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
    });

    it.each(["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] as const)(
      "applies --is-%s class",
      size => {
        render(
          <Container size={size} data-testid="test">
            Sample text
          </Container>,
        );
        expect(screen.getByTestId("test")).toHaveClass(`--is-${size}`);
      },
    );
  });

  it("forwards ref", () => {
    const ref = createRef<HTMLDivElement>();
    render(<Container ref={ref}>Text</Container>);
    expect(ref.current).toBeInstanceOf(HTMLDivElement);
  });
});
