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

const CLASS_NAME = "mobius-label";

describe("Test for Label", () => {
  it("should render without errors", () => {
    render(<Label>Test label</Label>);
  });

  it("should support label HTML props", () => {
    render(
      <Label htmlFor="some-id" data-testid="test">
        Test label
      </Label>,
    );
    expect(screen.getByTestId("test")).toHaveAttribute("for");
  });

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

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

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

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

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