import React from "react";
import { Divider } from "./index";

import { render } from "@testing-library/react";

import "@testing-library/jest-dom";

describe("Divider", () => {
  it("renders a div element", () => {
    const { container } = render(<Divider />);
    expect(container.firstChild).toBeInstanceOf(HTMLDivElement);
  });

  it("has correct displayName", () => {
    expect(Divider.displayName).toBe("Divider");
  });

  it("applies default classes", () => {
    const { container } = render(<Divider />);
    const el = container.firstChild as HTMLElement;
    expect(el.className).toContain("h-[1px]");
    expect(el.className).toContain("border-t-0");
    expect(el.className).toContain("bg-bg-surface-tertiary-active");
    expect(el.className).toContain("opacity-100");
  });

  it("applies custom className", () => {
    const { container } = render(<Divider className="my-custom-class" />);
    const el = container.firstChild as HTMLElement;
    expect(el.className).toContain("my-custom-class");
  });

  it("passes through additional HTML attributes", () => {
    const { container } = render(
      <Divider data-testid="divider" id="my-divider" />
    );
    const el = container.firstChild as HTMLElement;
    expect(el).toHaveAttribute("data-testid", "divider");
    expect(el).toHaveAttribute("id", "my-divider");
  });

  it("renders without className", () => {
    const { container } = render(<Divider />);
    const el = container.firstChild as HTMLElement;
    expect(el).toBeInTheDocument();
  });

  it("supports role attribute", () => {
    const { container } = render(<Divider role="separator" />);
    const el = container.firstChild as HTMLElement;
    expect(el).toHaveAttribute("role", "separator");
  });
});