import React from "react"
import { render, screen, cleanup } from "@testing-library/react"
import "@testing-library/jest-dom/extend-expect"
import Button from "../"
import ButtonGroup from "../button-group"

afterEach(cleanup)
describe("ButtonGroup", () => {
  it("defaults `spacing` to 1", () => {
    render(
      <ButtonGroup>
        <Button>One</Button>
        <Button>Two</Button>
      </ButtonGroup>
    )

    const group = screen.getByTestId("btn-group")

    expect(group.className).toContain("gap-1")
    expect(group.className).toContain("p-1")
  })

  it("can set spacing via prop", () => {
    render(
      <ButtonGroup spacing={4}>
        <Button>One</Button>
        <Button>Two</Button>
      </ButtonGroup>
    )

    const group = screen.getByTestId("btn-group")

    expect(group.className).toContain("gap-4")
    expect(group.className).toContain("p-4")
  })

  it("doesnt override existing classes", () => {
    render(
      <ButtonGroup>
        <Button>One</Button>
        <Button className="button-two">Two</Button>
      </ButtonGroup>
    )

    const two = screen.getByRole("button", { name: "Two" })

    expect(two.classList).toContain("button-two")
  })
})
