import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import StrategyPanel from './components/StrategyPanel.vue'

function mountPanel() {
  return mount(StrategyPanel, {
    props: {
      strategies: [
        {
          key: 'sma_cross',
          name: 'SMA Crossover',
          description: 'test',
          params: [{ name: 'fast', type: 'int', default: 10, description: '' }],
        },
      ],
      status: { running: false, symbol: 'BTC/USDT', timeframe: '5m', open_positions: 0 },
      busy: false,
      presets: [],
    },
  })
}

describe('StrategyPanel collapse', () => {
  it('shows the strategy form by default', () => {
    const wrapper = mountPanel()
    expect(wrapper.find('select').exists()).toBe(true)
  })

  it('hides the form when the header is clicked', async () => {
    const wrapper = mountPanel()
    const header = wrapper.find('button')
    expect(header.attributes('aria-expanded')).toBe('true')

    await header.trigger('click')

    expect(wrapper.find('button').attributes('aria-expanded')).toBe('false')
    // The form container is v-show-hidden, so the select is no longer visible.
    const hidden = wrapper.findAll('div').some((d) => d.element.style.display === 'none')
    expect(hidden).toBe(true)
  })

  it('picks the first strategy so the dropdown is populated', () => {
    const wrapper = mountPanel()
    const select = wrapper.find('select')
    expect(select.element.value).toBe('sma_cross')
    expect(select.findAll('option')).toHaveLength(1)
  })
})