/**
 * @vitest-environment jsdom
 */

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

import { Button } from "../";

describe("rendering", () => {
  describe("initial state", () => {
    let button;

    beforeEach(() => {
      const { getByRole } = render(<Button />);
      button = getByRole("button");
    });

    it("has default tag", () => {
      expect(button).toBeInTheDocument();
    });

    it("has default className btn", () => {
      expect(button).toHaveClass("btn");
    });
  });

  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(<Button>Button</Button>);
      expect(getByText("Button")).toBeInTheDocument();
    });

    it("renders children as node", () => {
      const { getByTestId } = render(
        <Button>
          <span data-testid="child">Children</span>
        </Button>,
      );
      expect(getByTestId("child")).toBeInTheDocument();
    });

    it("has html type when defined", () => {
      const { getByText } = render(<Button htmlType="button">Button</Button>);
      expect(getByText("Button").type).toBe("button");
    });

    it("renders as <a> when href defined", () => {
      const { getByText } = render(<Button href="/">Button</Button>);
      expect(getByText("Button").tagName).toBe("A");
    });

    it("removes html type attribute when href and htmlType defined", () => {
      const { getByText } = render(
        <Button href="/" htmlType="button">
          Button
        </Button>,
      );
      expect(getByText("Button").type).toBeFalsy();
    });

    it("has aria-disabled when disabled", () => {
      const { getByText } = render(<Button isDisabled>Button</Button>);
      expect(getByText("Button").getAttribute("aria-disabled")).toBe("true");
    });

    it("has is-active class when active", () => {
      const { getByText } = render(<Button isActive>Button</Button>);
      expect(getByText("Button")).toHaveClass("is-active");
    });

    it("has btn--square class when squared", () => {
      const { getByText } = render(<Button isSquare>Button</Button>);
      expect(getByText("Button")).toHaveClass("btn--square");
    });

    it("has btn--small class when small", () => {
      const { getByText } = render(<Button size="small">Button</Button>);
      expect(getByText("Button")).toHaveClass("btn--small");
    });

    it("has btn--large class when large", () => {
      const { getByText } = render(<Button size="large">Button</Button>);
      expect(getByText("Button")).toHaveClass("btn--large");
    });

    it("has btn--primary class when primary", () => {
      const { getByText } = render(<Button type="primary">Button</Button>);
      expect(getByText("Button")).toHaveClass("btn--primary");
    });

    it("has btn--fill class when fill", () => {
      const { getByText } = render(<Button type="fill">Button</Button>);
      expect(getByText("Button")).toHaveClass("btn--fill");
    });

    it("has btn--ghost class when ghost", () => {
      const { getByText } = render(<Button type="ghost">Button</Button>);
      expect(getByText("Button")).toHaveClass("btn--ghost");
    });

    it("passes other props", () => {
      const { getByTestId } = render(
        <Button data-testid="test">Button</Button>,
      );
      expect(getByTestId("test")).toBeInTheDocument();
    });
  });
});