// tests/audit-demo-framework-parity.test.ts
import { describe, it, expect } from 'vitest'
import { collectVueRegionTitles, collectReactTitles } from '../scripts/audit-demo-framework-parity.mjs'

const vue = `
<template>
  <FrameworkDemoRegion :loader="l" locale="en-US">
    <section><h2 class="docs-section__title">{{ t('Alpha', '甲') }}</h2></section>
    <section><h2 class="docs-section__title">{{ t('Beta', '乙') }}</h2></section>
  </FrameworkDemoRegion>
  <section><h2 class="docs-section__title">{{ t('API', 'API') }}</h2></section>
</template>`

const react = `
export default function D() {
  return (<div>
    <h2 className="docs-section__title">{t('Alpha','甲')}</h2>
    <h2 className="docs-section__title">{t('Beta','乙')}</h2>
  </div>)
}`

// ─── data-driven fixtures ────────────────────────────────────────────────────

const vueDataDriven = `
<template>
  <FrameworkDemoRegion :loader="l" locale="en-US">
    <section><h2 class="docs-section__title">{{ t('Figma Coverage', 'Figma 覆盖') }}</h2></section>
    <section
      v-for="row in axisSections"
      :key="row.id"
      class="docs-section"
    >
      <h2 class="docs-section__title">{{ t(row.title[0], row.title[1]) }}</h2>
    </section>
  </FrameworkDemoRegion>
</template>
<script setup lang="ts">
const axisSections = [
  { id: 'basic', title: ['Basic Usage', 'Basic Usage 基础用法'] },
  { id: 'color', title: ['Color Buttons', 'Color Buttons 颜色按钮'] },
  { id: 'status', title: ['Status Buttons', 'Status Buttons 状态按钮'] },
]
</script>`

const reactDataDriven = `
const axisSections = [
  { id: 'basic', title: ['Basic Usage', 'Basic Usage 基础用法'] },
  { id: 'color', title: ['Color Buttons', 'Color Buttons 颜色按钮'] },
  { id: 'status', title: ['Status Buttons', 'Status Buttons 状态按钮'] },
]
export default function D() {
  return (<div>
    <h2 className="docs-section__title">{t('Figma Coverage', 'Figma 覆盖')}</h2>
    {axisSections.map(row => (
      <section key={row.id}>
        <h2 className="docs-section__title">{t(row.title[0], row.title[1])}</h2>
      </section>
    ))}
  </div>)
}`

describe('demo-framework-parity extractors', () => {
  it('vue extractor takes only titles inside FrameworkDemoRegion (excludes API)', () => {
    expect(collectVueRegionTitles(vue).sort()).toEqual(['Alpha', 'Beta'])
  })
  it('react extractor takes docs-section__title english text', () => {
    expect(collectReactTitles(react).sort()).toEqual(['Alpha', 'Beta'])
  })

  it('vue extractor handles data-driven v-for over const array', () => {
    const titles = collectVueRegionTitles(vueDataDriven)
    expect(titles).toContain('Figma Coverage')
    expect(titles).toContain('Basic Usage')
    expect(titles).toContain('Color Buttons')
    expect(titles).toContain('Status Buttons')
    expect(titles.length).toBe(4)
  })

  it('react extractor handles data-driven .map over const array', () => {
    const titles = collectReactTitles(reactDataDriven)
    expect(titles).toContain('Figma Coverage')
    expect(titles).toContain('Basic Usage')
    expect(titles).toContain('Color Buttons')
    expect(titles).toContain('Status Buttons')
    expect(titles.length).toBe(4)
  })
})