import { render } from '~/src/utils/test'

import { Button } from '~/src/components/Button'

import { ButtonGroup } from './ButtonGroup'
import type { ButtonGroupProps } from './ButtonGroup.types'

describe('ButtonGroup', () => {
  const props: ButtonGroupProps = {}

  it('creates a button group with spacing', () => {
    const { getByRole } = render(
      <ButtonGroup {...props}>
        <Button text="button1" />
        <Button text="button2" />
      </ButtonGroup>
    )

    const buttonGroup = getByRole('group')
    expect(buttonGroup).toHaveStyle('--b-stack-spacing: 6px')
  })

  it('creates a button group without spacing', () => {
    const { getByRole } = render(
      <ButtonGroup
        {...props}
        withoutSpacing
        data-testid="button-group"
      >
        <Button text="button1" />
        <Button text="button2" />
      </ButtonGroup>
    )

    const buttonGroup = getByRole('group')
    expect(buttonGroup).toHaveStyle('--b-stack-spacing: 0')
  })
})