nuxt__ui/test/utils/form.ts

import { reactive } from 'vue'
import type { Reactive } from 'vue'
import { mountSuspended } from '@nuxt/test-utils/runtime'
import type { FormProps } from '../../src/runtime/components/Form.vue'
import {
  UForm,
  UInput,
  UFormField,
  URadioGroup,
  UTextarea,
  UCheckbox,
  USelect,
  USelectMenu,
  UInputMenu,
  UInputNumber,
  USwitch,
  USlider,
  UPinInput,
  UCheckboxGroup,
  UFileUpload,
  UInputRating,
  UListbox
} from '#components'

export async function renderForm(options: {
  state?: Reactive<any>
  props?: Partial<FormProps<any>> & Record<string, any>
  slotVars?: object
  slotTemplate?: string
  fixture?: string
}) {
  const state = options.state ?? reactive({})

  if (options.fixture) {
    const fixture = await import(/* @vite-ignore */ `../components/fixtures/${options.fixture}.vue`).then(c => c.default)
    return await mountSuspended(fixture, {
      props: options.props
    })
  }

  return await mountSuspended(UForm, {
    props: {
      id: '42',
      state,
      ...options.props
    },
    slots: {
      default: {
        // @ts-expect-error - Object literal may only specify known properties, and setup does not exist in type
        setup() {
          return { state, ...options.slotVars }
        },
        components: {
          UFormField,
          UForm,
          UInput,
          URadioGroup,
          UTextarea,
          UCheckbox,
          USelect,
          USelectMenu,
          UInputMenu,
          UInputNumber,
          USwitch,
          USlider,
          UPinInput,
          UCheckboxGroup,
          UFileUpload,
          UInputRating,
          UListbox
        },
        template: options.slotTemplate
      }
    }
  })
}