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

const CLASS_NAME = "mobius-divider";

describe("Divider", () => {
  it("should render without errors", () => {
    render(<Divider />);
  });

  it("renders as a hr element by default", () => {
    render(<Divider />);
    expect(screen.getByRole("separator")).toBeInTheDocument();
  });

  describe("uses correct class names", () => {
    it("uses mobius class", () => {
      render(<Divider />);
      expect(screen.getByRole("separator")).toHaveClass("mobius");
    });

    it("uses base Mobius class", () => {
      render(<Divider />);
      expect(screen.getByRole("separator")).toHaveClass(CLASS_NAME);
    });

    it("includes custom class name", () => {
      render(<Divider className="my-class" />);
      expect(screen.getByRole("separator")).toHaveClass("my-class");
      expect(screen.getByRole("separator")).toHaveClass(CLASS_NAME);
    });
  });

  describe("ARIA attributes", () => {
    it("has aria-orientation='horizontal' by default", () => {
      render(<Divider />);
      expect(screen.getByRole("separator")).toHaveAttribute(
        "aria-orientation",
        "horizontal",
      );
    });

    it("supports aria-orientation='vertical'", () => {
      render(<Divider aria-orientation="vertical" />);
      expect(screen.getByRole("separator")).toHaveAttribute(
        "aria-orientation",
        "vertical",
      );
    });
  });
});
