import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import { defineComponent, h } from 'vue'
import UiComponentCard from '@/components/messages/UiComponentCard.vue'
import * as registry from '@/components/ui/registry.js'

vi.mock('@/components/ui/registry.js', () => ({
  resolve: vi.fn(),
  list: vi.fn(() => []),
}))

describe('UiComponentCard', () => {
  it('renders fallback JSON for unknown component', () => {
    registry.resolve.mockReturnValue(null)
    const wrapper = mount(UiComponentCard, {
      props: {
        component: { component: 'unknown', payload: { foo: 1 } }
      }
    })
    expect(wrapper.text()).toContain('"foo": 1')
  })

  it('renders resolved component with payload', () => {
    const Dummy = defineComponent({
      props: ['data'],
      render() {
        return h('div', { class: 'dummy' }, `Dummy: ${this.data.title}`)
      }
    })
    registry.resolve.mockReturnValue(Dummy)
    const wrapper = mount(UiComponentCard, {
      props: {
        component: { component: 'dummy', payload: { title: 'hello' } }
      }
    })
    expect(wrapper.find('.dummy').exists()).toBe(true)
    expect(wrapper.text()).toContain('Dummy: hello')
  })
})