// tests/react-island.test.ts
import { describe, it, expect, vi } from 'vitest'
import { mount, flushPromises } from '@vue/test-utils'
import { createElement } from 'react'
import ReactIsland from '../playground/docs/components/ReactIsland.vue'

const loader = () => Promise.resolve({
  default: (p: { theme: string; locale: string }) =>
    createElement('span', { 'data-testid': 'demo' }, `${p.theme}/${p.locale}`),
})

describe('ReactIsland', () => {
  it('mounts a react demo module into the host and passes theme/locale', async () => {
    const wrapper = mount(ReactIsland, { props: { loader, theme: 'dark', locale: 'en-US' } })
    await flushPromises()
    expect(wrapper.find('.react-island').exists()).toBe(true)
    await vi.waitFor(() => {
      expect(wrapper.element.textContent).toContain('dark/en-US')
    })
  })

  it('re-renders when theme prop changes', async () => {
    const wrapper = mount(ReactIsland, { props: { loader, theme: 'dark', locale: 'en-US' } })
    await flushPromises()
    await vi.waitFor(() => {
      expect(wrapper.element.textContent).toContain('dark/en-US')
    })
    await wrapper.setProps({ theme: 'light' })
    await vi.waitFor(() => {
      expect(wrapper.element.textContent).toContain('light/en-US')
    })
  })
})