// tests/framework-demo-region.test.ts
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import { ref, readonly, h } from 'vue'
import FrameworkDemoRegion from '../playground/docs/components/FrameworkDemoRegion.vue'

function mountWith(framework: 'vue' | 'react') {
  return mount(FrameworkDemoRegion, {
    props: { loader: () => Promise.resolve({ default: () => null }), locale: 'en-US' as const },
    slots: { default: () => h('div', { class: 'vue-demo' }, 'vue side') },
    global: {
      provide: {
        docsFramework: readonly(ref(framework)),
        docsTheme: readonly(ref('dark')),
      },
      stubs: { ReactIsland: { template: '<div class="react-island-stub" />' } },
    },
  })
}

describe('FrameworkDemoRegion', () => {
  it('renders the Vue slot when framework is vue', () => {
    const w = mountWith('vue')
    expect(w.find('.vue-demo').exists()).toBe(true)
    expect(w.find('.react-island-stub').exists()).toBe(false)
  })
  it('renders ReactIsland when framework is react', () => {
    const w = mountWith('react')
    expect(w.find('.vue-demo').exists()).toBe(false)
    expect(w.find('.react-island-stub').exists()).toBe(true)
  })
})