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

describe("Option", () => {
  it("renders an <option> element", () => {
    render(
      <select>
        <Option>Test</Option>
      </select>,
    );

    expect(screen.getByRole("option")).toBeInTheDocument();
  });

  it("passes value prop", () => {
    render(
      <select>
        <Option value="foo">Foo</Option>
      </select>,
    );

    expect(screen.getByRole("option")).toHaveValue("foo");
  });

  it("renders children as text content", () => {
    render(
      <select>
        <Option>Hello world</Option>
      </select>,
    );

    expect(screen.getByRole("option")).toHaveTextContent("Hello world");
  });

  it("maps isDisabled to disabled attribute", () => {
    render(
      <select>
        <Option isDisabled>Disabled</Option>
      </select>,
    );

    expect(screen.getByRole("option")).toBeDisabled();
  });

  it("does not have disabled attribute when not disabled", () => {
    render(
      <select>
        <Option>Enabled</Option>
      </select>,
    );

    expect(screen.getByRole("option")).toBeEnabled();
  });

  it("forwards ref", () => {
    const ref = createRef<HTMLOptionElement>();

    render(
      <select>
        <Option ref={ref}>With ref</Option>
      </select>,
    );

    expect(ref.current).toBeInstanceOf(HTMLOptionElement);
  });
});
