import { mount } from "@vue/test-utils";
import VButtonGroup from '../src/components/button/VButtonGroup.vue';
import {test, expect, describe, vi} from 'vitest';

const buttons = [
  {title: 'button 1', label: 'label 1', onClick: vi.fn()},
  {title: 'button 2', label: 'label 2', onClick: vi.fn()}
]

describe('VButtonGroup', () => {
  test('Displays all buttons passed as props', () => {
    const wrapper = mount(VButtonGroup, {
      props: {
        buttons,
        title: 'button group',
      }
    })
    const buttonElements = wrapper.findAll('button')
    expect(buttonElements).toHaveLength(2)
    expect(buttonElements[0].text()).toContain('label 1')
    expect(buttonElements[1].text()).toContain('label 2')
  })

  test('applies the inline class when inlineLayoutWhen is “always”', () => {
    const wrapper = mount(VButtonGroup, {
      props: {
        buttons,
        title: 'button group',
        inlineLayoutWhen: 'always',
      }
    })
    expect(wrapper.classes()).toContain('btns-group--inline')
  })

  test('clicked button', async () => {
    const onClick = vi.fn()
    const wrapper = mount(VButtonGroup, {
      props: {
        buttons: [{title: 'button 1', label: 'label 1', onClick}],
        title: 'button group',
      }
    })
    await wrapper.find('button').trigger('click')
    expect(onClick).toHaveBeenCalled()
  })
})