import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'

import CheckboxPage from '../playground/docs/pages/CheckboxPage.vue'
import RadioPage from '../playground/docs/pages/RadioPage.vue'
import SwitchPage from '../playground/docs/pages/SwitchPage.vue'

describe('State control docs pages', () => {
  it('renders CheckboxPage with Figma coverage and API sections', () => {
    const wrapper = mount(CheckboxPage, {
      props: {
        isDark: true,
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('source=check box')
    expect(wrapper.text()).toContain('variant count=12')
    expect(wrapper.text()).toContain('Checkbox API')
    expect(wrapper.text()).toContain('dark-theme')
  })

  it('renders RadioPage with Figma coverage and API sections', () => {
    const wrapper = mount(RadioPage, {
      props: {
        isDark: true,
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('source=radio')
    expect(wrapper.text()).toContain('variant count=8')
    expect(wrapper.text()).toContain('Radio API')
    expect(wrapper.text()).toContain('dark-theme')
  })

  it('renders SwitchPage with Figma coverage and API sections', () => {
    const wrapper = mount(SwitchPage, {
      props: {
        isDark: true,
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('source=switch')
    expect(wrapper.text()).toContain('variant count=18')
    expect(wrapper.text()).toContain('Switch API')
    expect(wrapper.text()).toContain('loading')
  })
})