import { mount } from '@vue/test-utils'
import ExportFieldPanel from '../ExportFieldPanel.vue'

describe('ExportFieldPanel', () => {
  it('emits updated selection when toggling optional field', async () => {
    const wrapper = mount(ExportFieldPanel, {
      props: {
        title: 'Fields',
        fields: [
          { key: 'name', label: 'Name', required: true },
          { key: 'status', label: 'Status' }
        ],
        selected: ['name']
      }
    })

    const inputs = wrapper.findAll('input[type="checkbox"]')
    expect(inputs).toHaveLength(2)
    expect((inputs[0].element as HTMLInputElement).checked).toBe(true)
    expect((inputs[0].element as HTMLInputElement).disabled).toBe(true)

    await inputs[1].setValue(true)
    const emitted = wrapper.emitted('update:selected')
    expect(emitted).toBeTruthy()
    expect(emitted?.[0][0]).toEqual(['name', 'status'])
  })

  it('emits export event when clicking export button', async () => {
    const wrapper = mount(ExportFieldPanel, {
      props: {
        title: 'Fields',
        fields: [{ key: 'name', label: 'Name' }],
        selected: ['name']
      }
    })

    await wrapper.get('[data-test="export-button"]').trigger('click')
    expect(wrapper.emitted('export')).toBeTruthy()
  })
})
