import React from 'react'
import { mount } from 'enzyme'
import { Button, BUTTON_VARIANTS } from '../lib'
import { ButtonGroup } from '../lib'

describe('@kyper/button', () => {
  it('should render ButtonGroup with two buttons properly spaced', () => {
    const wrapper = mount(
      <ButtonGroup>
        <Button variant={BUTTON_VARIANTS.TRANSPARENT}>Cancel</Button>
        <Button variant={BUTTON_VARIANTS.DESTRUCTIVE}>Remove</Button>
      </ButtonGroup>,
    )

    const buttonList = wrapper.find('button')

    expect(buttonList.length).toEqual(2)
    expect(buttonList.first().prop('className')).toContain(`kyper-${BUTTON_VARIANTS.TRANSPARENT}`)
    expect(buttonList.last().prop('className')).toContain(`kyper-${BUTTON_VARIANTS.DESTRUCTIVE}`)
  })
})
