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

import DateTimePage from '../playground/docs/pages/DateTimePage.vue'
import InputPage from '../playground/docs/pages/InputPage.vue'
import SelectPage from '../playground/docs/pages/SelectPage.vue'

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

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('input box/filled')
    expect(wrapper.text()).toContain('variant count=224')
    expect(wrapper.text()).toContain('Input API')
    expect(wrapper.text()).toContain('feature')
  })

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

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('select box/filled')
    expect(wrapper.text()).toContain('variant count=288')
    expect(wrapper.text()).toContain('Select API')
    expect(wrapper.text()).toContain('multi select')
  })

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

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('feature=time/date')
    expect(wrapper.text()).toContain('DateTime API')
    expect(wrapper.text()).toContain('Time Picker')
    expect(wrapper.text()).toContain('Date Picker')
  })
})