import { mount } from '@vue/test-utils'
import SenseVideoPlayer from '@/components/sense/video-player/index.vue'

const ElButton = { emits: ['click'], template: '<button @click="$emit(\'click\')"><slot /></button>' }
const ElIcon = { template: '<span><slot /></span>' }

const mountPlayer = props => mount(SenseVideoPlayer, {
  props,
  global: { components: { ElButton, ElIcon }}
})

describe('Sense live-view player lifecycle', () => {
  it('creates an iframe only for a selected playable session', () => {
    const empty = mountPlayer({ state: 'loading', playerUrl: '' })
    expect(empty.find('iframe').exists()).toBe(false)
    empty.unmount()

    const waiting = mountPlayer({ state: 'waiting', playerUrl: '/api/v1/liveview/player/view_test' })
    expect(waiting.findAll('iframe')).toHaveLength(1)
    expect(waiting.find('iframe').attributes('src')).toBe('/api/v1/liveview/player/view_test')
    expect(waiting.attributes('aria-busy')).toBe('true')
    waiting.unmount()
  })

  it('removes the iframe on timeout and offers an explicit retry', async() => {
    const wrapper = mountPlayer({ state: 'timeout', playerUrl: '/api/v1/liveview/player/view_test' })
    expect(wrapper.find('iframe').exists()).toBe(false)
    expect(wrapper.text()).toContain('连接超时')
    await wrapper.find('button').trigger('click')
    expect(wrapper.emitted('retry')).toHaveLength(1)
  })
})