import { describe, it, expect } from 'vitest'
import { renderToString } from '../ssr/render-string.ts'
import { Frame } from '../../index.ts'

describe('SSR frame markers', () => {
  it('emits resolved markers for blocking frames', async () => {
    let html = await renderToString(
      <div>
        <Frame src="/fragment/a" />
      </div>,
      {
        resolveFrame: (src) => {
          if (src === '/fragment/a') return <span>A</span>
          return ''
        },
      },
    )
    expect(html).toMatch(
      /<div>.*<!--RMX:0-0:start-->[\s\S]*<!--RMX:0-0:end-->[\s\S]*<script type="application\/json" rmx-frame>[\s\S]*"id": "0-0"[\s\S]*"status": "resolved"[\s\S]*<\/script>.*<\/div>/,
    )
  })

  it('emits pending markers with fallback for non-blocking frames', async () => {
    let html = await renderToString(
      <div>
        <Frame src="/fragment/b" fallback={<span>Loading</span>} />
      </div>,
      {
        resolveFrame: (src) => {
          if (src === '/fragment/b') return <span>B</span>
          return ''
        },
      },
    )
    expect(html).toContain('<span>Loading</span>')
    expect(html).toMatch(
      /<script type="application\/json" rmx-frame>[\s\S]*"id": "0-0"[\s\S]*"status": "pending"[\s\S]*<\/script>/,
    )
  })
})