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

const CLASS_NAME = "mobius-flex";

describe("Test for Flex", () => {
  it("should render without errors", () => {
    render(
      <Flex flexDirection="column" alignItems="start">
        <div>block 1</div>
        <div>block 2</div>
      </Flex>,
    );
  });

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

  describe("given props and style attributes", () => {
    it("merges all styles", () => {
      const { container } = render(
        <Flex
          justifyContent="flex-start"
          style={{ backgroundColor: "orange" }}
        />,
      );

      expect(container.firstChild).toHaveStyle(
        "justify-content: flex-start; background-color: rgb(255, 165, 0)",
      );
      expect(container.firstChild).not.toHaveStyle("display: flex");
    });
  });

  describe("uses correct class names", () => {
    it("uses Mobius class", () => {
      render(
        <Flex flexDirection="column" alignItems="start" data-testid="test">
          <div>block 1</div>
          <div>block 2</div>
        </Flex>,
      );
      expect(screen.getByTestId("test")).toHaveClass("mobius");
    });

    it("uses base Mobius class", () => {
      render(
        <Flex flexDirection="column" alignItems="start" data-testid="test">
          <div>block 1</div>
          <div>block 2</div>
        </Flex>,
      );
      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
    });

    it("includes custom class name", () => {
      render(
        <Flex
          flexDirection="column"
          alignItems="start"
          data-testid="test"
          className="my-class"
        >
          <div>block 1</div>
          <div>block 2</div>
        </Flex>,
      );
      expect(screen.getByTestId("test")).toHaveClass("my-class");
      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
    });
  });

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