arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(Form): input events (#99)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-07-01 20:37:57 +02:00
committed by GitHub
parent ca029a4b6c
commit bad2e49de9
22 changed files with 947 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
playground/app/pages/form.vue
View File

@@ -72,14 +72,43 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
</UButton>
</div>
</UForm>
</div>
<div class="flex gap-4">
<FormNestedExample />
<FormNestedListExample />
<FormElementsExample />
<FormElementsExample disabled />
</div>
<div class="flex gap-4" />
<USeparator class="my-8" />
<div class="flex gap-4 flex-wrap">
<div>
<p class="text-lg font-bold underline mb-4">
Validate on input
</p>
<FormElementsExample :validate-on="['input']" />
</div>
<div>
<p class="text-lg font-bold underline mb-4">
Validate on change
</p>
<FormElementsExample :validate-on="['change']" />
</div>
<div>
<p class="text-lg font-bold underline mb-4">
Validate on blur
</p>
<FormElementsExample :validate-on="['blur']" />
</div>
<div>
<p class="text-lg font-bold underline mb-4">
Default
</p>
<FormElementsExample />
</div>
<div>
<p class="text-lg font-bold underline mb-4">
Disabled
</p>
<FormElementsExample disabled />
</div>
</div>
</div>
</template>

14
src/runtime/components/Checkbox.vue
View File

@@ -41,6 +41,7 @@ export interface CheckboxSlots {
export interface CheckboxEmits {
(e: 'update:modelValue', payload: boolean): void
(e: 'change', payload: Event): void
}
</script>
@@ -52,14 +53,14 @@ import { useId, useAppConfig, useFormField } from '#imports'
const props = defineProps<CheckboxProps>()
const slots = defineSlots<CheckboxSlots>()
defineEmits<CheckboxEmits>()
const emits = defineEmits<CheckboxEmits>()
const modelValue = defineModel<boolean | undefined>({ default: undefined })
const rootProps = useForwardProps(reactivePick(props, 'required', 'value'))
const appConfig = useAppConfig()
const { id: _id, emitFormChange, size, color, name, disabled } = useFormField<CheckboxProps>(props)
const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<CheckboxProps>(props)
const id = _id.value ?? useId()
const indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate))
@@ -80,6 +81,13 @@ const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
disabled: disabled.value,
checked: (modelValue.value ?? props.defaultValue) || indeterminate.value
}))
function onUpdate(value: any) {
const event = new Event('change', { target: { value } })
emits('change', event)
emitFormChange()
emitFormInput()
}
</script>
<template>
@@ -93,7 +101,7 @@ const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
:name="name"
:disabled="disabled"
:class="ui.base()"
@update:checked="emitFormChange()"
@update:checked="onUpdate"
>
<CheckboxIndicator as-child>
<UIcon v-if="indeterminate" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon()" />

3
src/runtime/components/Input.vue
View File

@@ -59,7 +59,7 @@ const slots = defineSlots<InputSlots>()
const [modelValue, modelModifiers] = defineModel<string | number>()
const { emitFormBlur, emitFormInput, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
@@ -116,6 +116,7 @@ function onChange(event: Event) {
(event.target as HTMLInputElement).value = value.trim()
}
emitFormChange()
emits('change', event)
}

38
src/runtime/components/InputMenu.vue
View File

@@ -85,7 +85,11 @@ export interface InputMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValu
ui?: Partial<typeof inputMenu.slots>
}
export type InputMenuEmits<T> = ComboboxRootEmits<T>
export type InputMenuEmits<T> = ComboboxRootEmits<T> & {
change: [payload: Event]
blur: [payload: FocusEvent]
focus: [payload: FocusEvent]
}
type SlotProps<T> = (props: { item: T, index: number }) => any
@@ -127,7 +131,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
const appConfig = useAppConfig()
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
const { emitFormBlur, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
@@ -187,6 +191,29 @@ onMounted(() => {
autoFocus()
}, props.autofocusDelay)
})
function onUpdate(value: any) {
const event = new Event('change', { target: { value } })
emits('change', event)
emitFormChange()
emitFormInput()
}
function onBlur(event: FocusEvent) {
emits('blur', event)
emitFormBlur()
}
function onUpdateOpen(value: boolean) {
if (!value) {
const event = new FocusEvent('blur')
emits('blur', event)
emitFormBlur()
} else {
const event = new FocusEvent('focus')
emits('focus', event)
}
}
</script>
<template>
@@ -201,7 +228,8 @@ onMounted(() => {
:filter-function="filterFunction"
:class="ui.root({ class: props.class })"
:as-child="!!multiple"
@update:model-value="emitFormChange()"
@update:model-value="onUpdate"
@update:open="onUpdateOpen"
@keydown.enter="$event.preventDefault()"
>
<ComboboxAnchor :as-child="!multiple" :class="ui.base()">
@@ -212,7 +240,7 @@ onMounted(() => {
:disabled="disabled"
delimiter=""
as-child
@blur="emitFormBlur()"
@blur="onBlur"
>
<TagsInputItem v-for="(item, index) in tags" :key="index" :value="(item as string)" :class="ui.tagsItem()">
<TagsInputItemText :class="ui.tagsItemText()">
@@ -248,7 +276,7 @@ onMounted(() => {
:placeholder="placeholder"
:required="required"
:class="ui.base()"
@blur="emitFormBlur()"
@blur="onBlur"
/>
<span v-if="isLeading || !!slots.leading" :class="ui.leading()">

17
src/runtime/components/RadioGroup.vue
View File

@@ -36,7 +36,9 @@ export interface RadioGroupProps<T> extends Pick<RadioGroupRootProps, 'defaultVa
ui?: Partial<typeof radioGroup.slots>
}
export interface RadioGroupEmits extends RadioGroupRootEmits {}
export type RadioGroupEmits = RadioGroupRootEmits & {
change: [payload: Event]
}
type SlotProps<T> = (props: { item: T, modelValue?: string }) => any
@@ -48,7 +50,7 @@ export interface RadioGroupSlots<T> {
</script>
<script setup lang="ts" generic="T extends RadioGroupItem | AcceptableValue">
import { computed } from 'vue'
import { ref, computed } from 'vue'
import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
import { reactivePick } from '@vueuse/core'
import { useId, useFormField } from '#imports'
@@ -61,7 +63,7 @@ const slots = defineSlots<RadioGroupSlots<T>>()
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
const { emitFormChange, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props)
const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props)
const id = _id.value ?? useId()
const ui = computed(() => tv({ extend: radioGroup, slots: props.ui })({
@@ -91,6 +93,13 @@ const normalizedItems = computed(() => {
if (!props.items) return []
return props.items.map(normalizeItem)
})
function onUpdate(value: any) {
const event = new Event('change', { target: { value } })
emits('change', event)
emitFormChange()
emitFormInput()
}
</script>
<template>
@@ -101,7 +110,7 @@ const normalizedItems = computed(() => {
:name="name"
:disabled="disabled"
:class="ui.root({ class: props.class })"
@update:model-value="emitFormChange()"
@update:model-value="onUpdate"
>
<fieldset :class="ui.fieldset()">
<legend v-if="legend || !!slots.legend" :class="ui.legend()">

26
src/runtime/components/Select.vue
View File

@@ -63,7 +63,11 @@ export interface SelectProps<T> extends Omit<SelectRootProps, 'dir'>, UseCompone
ui?: Partial<typeof select.slots>
}
export interface SelectEmits extends SelectRootEmits {}
export type SelectEmits = SelectRootEmits & {
change: [payload: Event]
blur: [payload: FocusEvent]
focus: [payload: FocusEvent]
}
type SlotProps<T> = (props: { item: T, index: number }) => any
@@ -95,7 +99,7 @@ const appConfig = useAppConfig()
const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as SelectContentProps)
const { emitFormChange, emitFormBlur, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
@@ -113,8 +117,22 @@ const ui = computed(() => tv({ extend: select, slots: props.ui })({
const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as SelectItem[][] : [])
function onUpdate(value: any) {
const event = new Event('change', { target: { value } })
emits('change', event)
emitFormChange()
emitFormInput()
}
function onUpdateOpen(value: boolean) {
if (!value) emitFormBlur()
if (!value) {
const event = new FocusEvent('blur')
emits('blur', event)
emitFormBlur()
} else {
const event = new FocusEvent('focus')
emits('focus', event)
}
}
</script>
@@ -125,7 +143,7 @@ function onUpdateOpen(value: boolean) {
v-bind="rootProps"
:name="name"
:disabled="disabled"
@update:model-value="emitFormChange()"
@update:model-value="onUpdate"
@update:open="onUpdateOpen"
>
<SelectTrigger :class="ui.base({ class: props.class })">

31
src/runtime/components/SelectMenu.vue
View File

@@ -72,7 +72,11 @@ export interface SelectMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelVal
ui?: Partial<typeof selectMenu.slots>
}
export type SelectMenuEmits<T> = ComboboxRootEmits<T>
export type SelectMenuEmits<T> = ComboboxRootEmits<T> & {
change: [payload: Event]
blur: [payload: FocusEvent]
focus: [payload: FocusEvent]
}
type SlotProps<T> = (props: { item: T, index: number }) => any
@@ -111,7 +115,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
const appConfig = useAppConfig()
const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
const { emitFormBlur, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
@@ -160,6 +164,24 @@ function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: stri
}
const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as SelectMenuItem[][] : [])
function onUpdate(value: any) {
const event = new Event('change', { target: { value } })
emits('change', event)
emitFormChange()
emitFormInput()
}
function onUpdateOpen(value: boolean) {
if (!value) {
const event = new FocusEvent('blur')
emits('blur', event)
emitFormBlur()
} else {
const event = new FocusEvent('focus')
emits('focus', event)
}
}
</script>
<template>
@@ -173,7 +195,8 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
:disabled="disabled"
:display-value="() => searchTerm"
:filter-function="filterFunction"
@update:model-value="emitFormChange()"
@update:model-value="onUpdate"
@update:open="onUpdateOpen"
>
<ComboboxAnchor as-child>
<ComboboxTrigger :class="ui.base({ class: props.class })" tabindex="0">
@@ -202,7 +225,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
<ComboboxPortal :disabled="!portal">
<ComboboxContent :class="ui.content()" v-bind="contentProps">
<ComboboxInput :placeholder="searchPlaceholder" :class="ui.input()" autofocus autocomplete="off" @blur="emitFormBlur()" />
<ComboboxInput :placeholder="searchPlaceholder" :class="ui.input()" autofocus autocomplete="off" />
<ComboboxEmpty :class="ui.empty()">
<slot name="empty" :search-term="searchTerm">

15
src/runtime/components/Slider.vue
View File

@@ -30,7 +30,9 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
ui?: Partial<typeof slider.slots>
}
export interface SliderEmits extends SliderRootEmits {}
export type SliderEmits = Omit<SliderRootEmits, 'valueCommit'> & {
change: [payload: Event]
}
</script>
<script setup lang="ts">
@@ -51,7 +53,7 @@ const modelValue = defineModel<number | number[]>()
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
const { id, emitFormChange, size, color, name, disabled } = useFormField<SliderProps>(props)
const { id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SliderProps>(props)
const defaultSliderValue = computed(() => {
if (typeof props.defaultValue === 'number') {
@@ -80,6 +82,12 @@ const ui = computed(() => tv({ extend: slider, slots: props.ui })({
color: color.value,
orientation: props.orientation
}))
function onChange(value: any) {
const event = new Event('change', { target: { value } })
emits('change', event)
emitFormChange()
}
</script>
<template>
@@ -91,7 +99,8 @@ const ui = computed(() => tv({ extend: slider, slots: props.ui })({
:disabled="disabled"
:class="ui.root({ class: props.class })"
:default-value="defaultSliderValue"
@update:model-value="emitFormChange()"
@update:model-value="emitFormInput()"
@value-commit="onChange"
>
<SliderTrack :class="ui.track()">
<SliderRange :class="ui.range()" />

14
src/runtime/components/Switch.vue
View File

@@ -45,6 +45,7 @@ export interface SwitchSlots {
export interface SwitchEmits {
(e: 'update:modelValue', payload: boolean): void
(e: 'change', payload: Event): void
}
</script>
@@ -56,14 +57,14 @@ import { useId, useAppConfig, useFormField } from '#imports'
const props = defineProps<SwitchProps>()
const slots = defineSlots<SwitchSlots>()
defineEmits<SwitchEmits>()
const emits = defineEmits<SwitchEmits>()
const modelValue = defineModel<boolean | undefined>({ default: undefined })
const appConfig = useAppConfig()
const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
const { id: _id, emitFormChange, size, color, name, disabled } = useFormField<SwitchProps>(props)
const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SwitchProps>(props)
const id = _id.value ?? useId()
const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
@@ -73,6 +74,13 @@ const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
loading: props.loading,
disabled: disabled.value || props.loading
}))
function onUpdate(value: any) {
const event = new Event('change', { target: { value } })
emits('change', event)
emitFormChange()
emitFormInput()
}
</script>
<template>
@@ -86,7 +94,7 @@ const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
:name="name"
:disabled="disabled || loading"
:class="ui.base()"
@update:checked="emitFormChange()"
@update:checked="onUpdate"
>
<SwitchThumb :class="ui.thumb()">
<UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ checked: true, unchecked: true })" />

3
src/runtime/components/Textarea.vue
View File

@@ -57,7 +57,7 @@ const emits = defineEmits<TextareaEmits>()
const [modelValue, modelModifiers] = defineModel<string | number>()
const { emitFormBlur, emitFormInput, size, color, id, name, disabled } = useFormField<TextareaProps>(props)
const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, disabled } = useFormField<TextareaProps>(props)
const ui = computed(() => tv({ extend: textarea, slots: props.ui })({
color: color.value,
@@ -107,6 +107,7 @@ function onChange(event: Event) {
(event.target as HTMLInputElement).value = value.trim()
}
emitFormChange()
emits('change', event)
}

4
src/runtime/composables/useFormField.ts
View File

@@ -55,9 +55,7 @@ export function useFormField<T>(props?: Props<T>) {
const emitFormInput = useDebounceFn(
() => {
if (blurred.value || formField?.value.eagerValidation) {
emitFormEvent('input', formField?.value.name)
}
emitFormEvent('input', formField?.value.name)
},
formField?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
)

71
test/components/Checkbox.spec.ts
View File

@@ -1,7 +1,10 @@
import { describe, it, expect } from 'vitest'
import { describe, it, expect, test } from 'vitest'
import Checkbox, { type CheckboxProps, type CheckboxSlots } from '../../src/runtime/components/Checkbox.vue'
import ComponentRender from '../component-render'
import theme from '#build/ui/checkbox'
import { renderForm } from '../utils/form'
import { mount, flushPromises } from '@vue/test-utils'
import type { FormInputEvents } from '~/src/module'
describe('Checkbox', () => {
const sizes = Object.keys(theme.variants.size) as any
@@ -31,4 +34,70 @@ describe('Checkbox', () => {
const html = await ComponentRender(nameOrHtml, options, Checkbox)
expect(html).toMatchSnapshot()
})
describe('emits', () => {
test('update:modelValue event', async () => {
const wrapper = mount(Checkbox)
const input = wrapper.findComponent({ name: 'CheckboxRoot' })
await input.vm.$emit('update:checked', true)
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[true]] })
})
test('change event', async () => {
const wrapper = mount(Checkbox)
const input = wrapper.findComponent({ name: 'CheckboxRoot' })
await input.vm.$emit('update:checked', false)
expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
})
})
describe('form integration', async () => {
async function createForm(validateOn?: FormInputEvents[]) {
const wrapper = await renderForm({
props: {
validateOn,
validateOnInputDelay: 0,
async validate(state: any) {
if (!state.value)
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotTemplate: `
<UFormField name="value">
<UCheckbox v-model="state.value" />
</UFormField>
`
})
const input = wrapper.findComponent({ name: 'CheckboxRoot' })
return {
wrapper,
input
}
}
test('validate on change works', async () => {
const { input, wrapper } = await createForm(['change'])
await input.vm.$emit('update:checked', false)
await flushPromises()
expect(wrapper.text()).toContain('Error message')
await input.vm.$emit('update:checked', true)
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
test('validate on input works', async () => {
const { input, wrapper } = await createForm(['input'])
await input.vm.$emit('update:checked', false)
await flushPromises()
expect(wrapper.text()).toContain('Error message')
await input.vm.$emit('update:checked', true)
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
})
})

352
test/components/Form.spec.ts
View File

@@ -1,7 +1,5 @@
import { reactive, ref, nextTick } from 'vue'
import { describe, it, expect, test, beforeEach, vi } from 'vitest'
import type { DOMWrapper, VueWrapper } from '@vue/test-utils'
import { flushPromises } from '@vue/test-utils'
import { mountSuspended } from '@nuxt/test-utils/runtime'
import { z } from 'zod'
import * as yup from 'yup'
@@ -9,66 +7,14 @@ import Joi from 'joi'
import * as valibot from 'valibot'
import ComponentRender from '../component-render'
import type { FormProps, FormSlots } from '../../src/runtime/components/Form.vue'
import { renderForm } from '../utils/form'
import {
UForm,
UInput,
UFormField
// URadioGroup,
// UTextarea,
// UCheckbox,
// USelect,
// URadio,
// USelectMenu,
// UInputMenu,
// UToggle,
// URange
} from '#components'
async function triggerEvent(
el: DOMWrapper<Element> | VueWrapper<any, any>,
event: string
) {
el.trigger(event)
return flushPromises()
}
async function setValue(
el: DOMWrapper<Element> | VueWrapper<any, any>,
value: any
) {
el.setValue(value)
return flushPromises()
}
async function renderForm(options: {
props: Partial<FormProps<any>>
slotVars?: object
slotComponents?: any
slotTemplate: string
}) {
const state = reactive({})
return await mountSuspended(UForm, {
props: {
id: 42,
state,
...options.props
},
slots: {
default: {
// @ts-expect-error setup does not exist on type
setup() {
return { state, ...options.slotVars }
},
components: {
UFormField,
...options.slotComponents
},
template: options.slotTemplate
}
}
})
}
import { flushPromises } from '@vue/test-utils'
describe('Form', () => {
it.each([
@@ -137,10 +83,6 @@ describe('Form', () => {
])('%s validation works', async (_nameOrHtml: string, options: Partial<FormProps<any>>) => {
const wrapper = await renderForm({
props: options,
slotComponents: {
UFormField,
UInput
},
slotTemplate: `
<UFormField name="email">
<UInput id="email" v-model="state.email" />
@@ -155,11 +97,11 @@ describe('Form', () => {
const emailInput = wrapper.find('#email')
const passwordInput = wrapper.find('#password')
await setValue(emailInput, 'bob@dylan.com')
await setValue(passwordInput, 'short')
await triggerEvent(form, 'submit.prevent')
await emailInput.setValue('bob@dylan.com')
await passwordInput.setValue('short')
await form.trigger('submit.prevent')
await flushPromises()
// @ts-expect-error object is possibly undefined
expect(wrapper.emitted('error')[0][0].errors).toMatchObject([
{
@@ -171,8 +113,9 @@ describe('Form', () => {
expect(wrapper.html()).toMatchSnapshot('with error')
await setValue(passwordInput, 'validpassword')
await triggerEvent(form, 'submit.prevent')
await passwordInput.setValue('validpassword')
await form.trigger('submit.prevent')
await flushPromises()
expect(wrapper.emitted()).toHaveProperty('submit')
expect(wrapper.emitted('submit')![0][0]).toMatchObject({
@@ -182,281 +125,6 @@ describe('Form', () => {
expect(wrapper.html()).toMatchSnapshot('without error')
})
it.each([
['input', UInput, {}, 'foo']
// ['textarea', UTextarea, {}, 'foo']
])('%s validate on blur works', async (_name, InputComponent, inputProps, validInputValue) => {
const wrapper = await renderForm({
props: {
validateOn: ['blur'],
async validate(state: any) {
if (!state.value)
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotVars: {
inputProps
},
slotComponents: { InputComponent },
slotTemplate: `
<UFormField name="value">
<InputComponent id="input" v-model="state.value" v-bind="inputProps" />
</UFormField>
`
})
const input = wrapper.find('#input')
await triggerEvent(input, 'blur')
expect(wrapper.text()).toContain('Error message')
await setValue(input, validInputValue)
await triggerEvent(input, 'blur')
expect(wrapper.text()).not.toContain('Error message')
})
it.each([
// ['checkbox', UCheckbox, {}, true],
// ['range', URange, {}, 2],
// ['select', USelect, { options: ['Option 1', 'Option 2'] }, 'Option 2']
])('%s validate on change works', async (_name, InputComponent, inputProps, validInputValue) => {
const wrapper = await renderForm({
props: {
validateOn: ['change'],
async validate(state: any) {
if (!state.value)
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotVars: {
inputProps
},
slotComponents: {
InputComponent
},
slotTemplate: `
<UFormField name="value">
<InputComponent id="input" v-model="state.value" v-bind="inputProps" />
</UFormField>
`
})
const input = wrapper.find('#input')
await triggerEvent(input, 'change')
expect(wrapper.text()).toContain('Error message')
await setValue(input, validInputValue)
await triggerEvent(input, 'change')
expect(wrapper.text()).not.toContain('Error message')
})
// test('radio group validate on change works', async () => {
// const wrapper = await renderForm({
// props: {
// validateOn: ['change'],
// validate (state: any) {
// if (state.value !== 'Option 2')
// return [{ name: 'value', message: 'Error message' }]
// return []
// }
// },
// slotVars: {
// inputProps: {
// options: ['Option 1', 'Option 2', 'Option 3']
// }
// },
// slotComponents: {
// UFormField,
// URadioGroup
// },
// slotTemplate: `
// <UFormField name="value">
// <URadioGroup id="input" v-model="state.value" v-bind="inputProps" />
// </UFormField>
// `
// })
//
// const option1 = wrapper.find('[value="Option 1"]')
// await setValue(option1, true)
// expect(wrapper.text()).toContain('Error message')
//
// const option2 = wrapper.find('[value="Option 2"]')
// await setValue(option2, true)
// expect(wrapper.text()).not.toContain('Error message')
// })
//
// test('radio validate on change works', async () => {
// const wrapper = await renderForm({
// props: {
// validateOn: ['change'],
// validate (state: any) {
// if (state.value !== 'Option 2')
// return [{ name: 'value', message: 'Error message' }]
// return []
// }
// },
// slotComponents: {
// UFormField,
// URadio
// },
// slotTemplate: `
// <UFormField name="value">
// <URadio id="option-1" v-model="state.value" value="Option 1" />
// <URadio id="option-2" v-model="state.value" value="Option 2" />
// </UFormField>
// `
// })
//
// const option1 = wrapper.find('#option-1')
// await setValue(option1, true)
// expect(wrapper.text()).toContain('Error message')
//
// const option2 = wrapper.find('#option-2')
// await setValue(option2, true)
// expect(wrapper.text()).not.toContain('Error message')
// })
//
// test('toggle validate on change', async () => {
// const wrapper = await renderForm({
// props: {
// validateOn: ['change'],
// validate (state: any) {
// if (state.value) return [{ name: 'value', message: 'Error message' }]
// return []
// }
// },
// slotComponents: {
// UFormField,
// UToggle
// },
// slotTemplate: `
// <UFormField name="value">
// <UToggle id="input" v-model="state.value" />
// </UFormField>
// `
// })
//
// const input = wrapper.findComponent({ name: 'Switch' })
// await setValue(input, true)
// expect(wrapper.text()).toContain('Error message')
//
// await setValue(input, false)
// expect(wrapper.text()).not.toContain('Error message')
// })
//
// test('select menu validate on change', async () => {
// const wrapper = await renderForm({
// props: {
// validateOn: ['change'],
// validate (state: any) {
// if (state.value !== 'Option 2')
// return [{ name: 'value', message: 'Error message' }]
// return []
// }
// },
// slotVars: {
// inputProps: {
// options: ['Option 1', 'Option 2', 'Option 3']
// }
// },
// slotComponents: {
// UFormField,
// USelectMenu
// },
// slotTemplate: `
// <UFormField name="value">
// <USelectMenu id="input" v-model="state.value" v-bind="inputProps" />
// </UFormField>
// `
// })
//
// const input = wrapper.findComponent({ name: 'Listbox' })
// await setValue(input, 'Option 1')
// expect(wrapper.text()).toContain('Error message')
//
// await setValue(input, 'Option 2')
// expect(wrapper.text()).not.toContain('Error message')
// })
//
// test('input menu validate on change', async () => {
// const wrapper = await renderForm({
// props: {
// validateOn: ['change'],
// validate (state: any) {
// if (state.value !== 'Option 2')
// return [{ name: 'value', message: 'Error message' }]
// return []
// }
// },
// slotVars: {
// inputProps: {
// options: ['Option 1', 'Option 2', 'Option 3']
// }
// },
// slotComponents: {
// UFormField,
// UInputMenu
// },
// slotTemplate: `
// <UFormField name="value">
// <UInputMenu id="input" v-model="state.value" v-bind="inputProps" />
// </UFormField>
// `
// })
//
// const input = wrapper.findComponent({ name: 'Combobox' })
// await setValue(input, 'Option 1')
// expect(wrapper.text()).toContain('Error message')
//
// await setValue(input, 'Option 2')
// expect(wrapper.text()).not.toContain('Error message')
// })
//
it.each([
['input', UInput, {}, 'foo']
// ['textarea', UTextarea, {}, 'foo']
])('%s validate on input works', async (_name, InputComponent, inputProps, validInputValue) => {
const wrapper = await renderForm({
props: {
validateOn: ['input', 'blur'],
async validate(state: any) {
if (!state.value)
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotVars: {
inputProps
},
slotComponents: {
UFormField,
InputComponent
},
slotTemplate: `
<UFormField name="value" :validate-on-input-delay="50">
<InputComponent id="input" v-model="state.value" v-bind="inputProps" />
</UFormField>
`
})
const input = wrapper.find('#input')
// Validation @input is enabled only after a blur event
await triggerEvent(input, 'blur')
expect(wrapper.text()).toContain('Error message')
await setValue(input, validInputValue)
// Waiting because of the debounced validation on input event.
await new Promise(r => setTimeout(r, 50))
expect(wrapper.text()).not.toContain('Error message')
})
describe('api', async () => {
let wrapper: any
let form: any

81
test/components/Input.spec.ts
View File

@@ -4,6 +4,9 @@ import Input, { type InputProps, type InputSlots } from '../../src/runtime/compo
import ComponentRender from '../component-render'
import theme from '#build/ui/input'
import { renderForm } from '../utils/form'
import type { FormInputEvents } from '~/src/module'
describe('Input', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
@@ -67,4 +70,82 @@ describe('Input', () => {
await input.trigger('change')
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['']] })
})
describe('emits', () => {
test('update:modelValue event', async () => {
const wrapper = mount(Input)
const input = wrapper.find('input')
await input.setValue('bob@dylan.com')
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['bob@dylan.com']] })
})
test('change event', async () => {
const wrapper = mount(Input)
const input = wrapper.find('input')
await input.setValue('bob@dylan.com')
expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
})
test('blur event', async () => {
const wrapper = mount(Input)
const input = wrapper.find('input')
await input.trigger('blur')
expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
})
})
describe('form integration', async () => {
async function createForm(validateOn?: FormInputEvents[]) {
const wrapper = await renderForm({
props: {
validateOn,
validateOnInputDelay: 0,
async validate(state: any) {
if (state.value !== 'valid')
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotTemplate: `
<UFormField name="value">
<UInput id="input" v-model="state.value" />
</UFormField>
`
})
const input = wrapper.find('#input')
return {
wrapper,
input
}
}
test('validate on blur works', async () => {
const { input, wrapper } = await createForm(['blur'])
await input.trigger('blur')
expect(wrapper.text()).toContain('Error message')
await input.setValue('valid')
await input.trigger('blur')
expect(wrapper.text()).not.toContain('Error message')
})
test('validate on change works', async () => {
const { input, wrapper } = await createForm(['change'])
await input.trigger('change')
expect(wrapper.text()).toContain('Error message')
input.setValue('valid')
await input.trigger('change')
expect(wrapper.text()).not.toContain('Error message')
})
test('validate on input works', async () => {
const { input, wrapper } = await createForm(['input'])
await input.setValue('value')
expect(wrapper.text()).toContain('Error message')
await input.setValue('valid')
expect(wrapper.text()).not.toContain('Error message')
})
})
})

85
test/components/InputMenu.spec.ts
View File

@@ -1,7 +1,10 @@
import { describe, it, expect } from 'vitest'
import { describe, it, expect, test } from 'vitest'
import InputMenu, { type InputMenuProps, type InputMenuSlots } from '../../src/runtime/components/InputMenu.vue'
import ComponentRender from '../component-render'
import theme from '#build/ui/input'
import { renderForm } from '../utils/form'
import { flushPromises, mount } from '@vue/test-utils'
import type { FormInputEvents } from '~/src/module'
describe('InputMenu', () => {
const sizes = Object.keys(theme.variants.size) as any
@@ -34,7 +37,7 @@ describe('InputMenu', () => {
['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
['with id', { props: { ...props, id: 'id' } }],
['with name', { props: { ...props, name: 'name' } }],
['with placeholder', { props: { ...props, placeholder: 'Select a status' } }],
['with placeholder', { props: { ...props, placeholder: 'InputMenu a status' } }],
['with disabled', { props: { ...props, disabled: true } }],
['with required', { props: { ...props, required: true } }],
['with icon', { props: { ...props, icon: 'i-heroicons-magnifying-glass' } }],
@@ -65,4 +68,82 @@ describe('InputMenu', () => {
const html = await ComponentRender(nameOrHtml, options, InputMenu)
expect(html).toMatchSnapshot()
})
describe('emits', () => {
test('update:modelValue event', async () => {
const wrapper = mount(InputMenu, { props: { items: ['Option 1', 'Option 2'] } })
const input = wrapper.findComponent({ name: 'ComboboxRoot' })
await input.setValue('Option 1')
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['Option 1']] })
})
test('change event', async () => {
const wrapper = mount(InputMenu, { props: { items: ['Option 1', 'Option 2'] } })
const input = wrapper.findComponent({ name: 'ComboboxRoot' })
await input.setValue('Option 1')
expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
})
test('blur event', async () => {
const wrapper = mount(InputMenu, { props: { items: ['Option 1', 'Option 2'] } })
const input = wrapper.findComponent({ name: 'ComboboxRoot' })
await input.vm.$emit('update:open', false)
expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
})
})
describe('form integration', async () => {
async function createForm(validateOn?: FormInputEvents[]) {
const wrapper = await renderForm({
props: {
validateOn,
validateOnInputDelay: 0,
async validate(state: any) {
if (state.value !== 'Option 2')
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotVars: {
items: ['Option 1', 'Option 2']
},
slotTemplate: `
<UFormField name="value">
<UInputMenu id="input" v-model="state.value" :items="items" />
</UFormField>
`
})
const input = wrapper.findComponent({ name: 'ComboboxRoot' })
return {
wrapper,
input
}
}
test('validate on blur works', async () => {
const { wrapper, input } = await createForm(['blur'])
await input.vm.$emit('update:open', false)
await flushPromises()
expect(wrapper.text()).toContain('Error message')
await input.setValue('Option 2')
await input.vm.$emit('update:open', false)
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
test('validate on change works', async () => {
const { input, wrapper } = await createForm(['change'])
input.setValue('Option 1')
await flushPromises()
expect(wrapper.text()).toContain('Error message')
input.setValue('Option 2')
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
})
})

77
test/components/RadioGroup.spec.ts
View File

@@ -1,7 +1,10 @@
import { describe, it, expect } from 'vitest'
import { describe, it, expect, test } from 'vitest'
import RadioGroup, { type RadioGroupProps, type RadioGroupSlots } from '../../src/runtime/components/RadioGroup.vue'
import ComponentRender from '../component-render'
import theme from '#build/ui/radio-group'
import { flushPromises, mount } from '@vue/test-utils'
import { renderForm } from '../utils/form'
import type { FormInputEvents } from '~/src/module'
describe('RadioGroup', () => {
const sizes = Object.keys(theme.variants.size) as any
@@ -34,4 +37,76 @@ describe('RadioGroup', () => {
const html = await ComponentRender(nameOrHtml, options, RadioGroup)
expect(html).toMatchSnapshot()
})
describe('emits', () => {
test('update:modelValue event', async () => {
const wrapper = mount(RadioGroup, { props: { items: ['Option 1', 'Option 2'] } })
const input = wrapper.findComponent({ name: 'RadioGroupRoot' })
await input.setValue('Option 1')
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['Option 1']] })
})
test('change event', async () => {
const wrapper = mount(RadioGroup, { props: { items: ['Option 1', 'Option 2'] } })
const input = wrapper.findComponent({ name: 'RadioGroupRoot' })
await input.setValue('Option 1')
expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
})
})
describe('form integration', async () => {
async function createForm(validateOn?: FormInputEvents[]) {
const wrapper = await renderForm({
props: {
validateOn,
validateOnInputDelay: 0,
async validate(state: any) {
if (state.value !== 'Option 2')
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotVars: {
items: ['Option 1', 'Option 2']
},
slotTemplate: `
<UFormField name="value">
<URadioGroup id="input" v-model="state.value" :items="items" />
</UFormField>
`
})
const input = wrapper.findComponent({ name: 'RadioGroupRoot' })
return {
wrapper,
input
}
}
test('validate on change works', async () => {
const { input, wrapper } = await createForm(['change'])
input.setValue('Option 1')
await flushPromises()
expect(wrapper.text()).toContain('Error message')
input.setValue('Option 2')
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
test('validate on input works', async () => {
const { input, wrapper } = await createForm(['input'])
input.setValue('Option 1')
await flushPromises()
expect(wrapper.text()).toContain('Error message')
input.setValue('Option 2')
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
})
})

94
test/components/Select.spec.ts
View File

@@ -1,7 +1,10 @@
import { describe, it, expect } from 'vitest'
import { describe, it, expect, test } from 'vitest'
import { flushPromises, mount } from '@vue/test-utils'
import Select, { type SelectProps, type SelectSlots } from '../../src/runtime/components/Select.vue'
import ComponentRender from '../component-render'
import theme from '#build/ui/input'
import { renderForm } from '../utils/form'
import type { FormInputEvents } from '~/src/module'
describe('Select', () => {
const sizes = Object.keys(theme.variants.size) as any
@@ -66,4 +69,93 @@ describe('Select', () => {
const html = await ComponentRender(nameOrHtml, options, Select)
expect(html).toMatchSnapshot()
})
describe('emits', () => {
test('update:modelValue event', async () => {
const wrapper = mount(Select, { props: { items: ['Option 1', 'Option 2'] } })
const input = wrapper.findComponent({ name: 'SelectRoot' })
await input.setValue('Option 1')
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['Option 1']] })
})
test('change event', async () => {
const wrapper = mount(Select, { props: { items: ['Option 1', 'Option 2'] } })
const input = wrapper.findComponent({ name: 'SelectRoot' })
await input.setValue('Option 1')
expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
})
test('blur event', async () => {
const wrapper = mount(Select, { props: { items: ['Option 1', 'Option 2'] } })
const input = wrapper.findComponent({ name: 'SelectRoot' })
await input.vm.$emit('update:open', false)
expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
})
})
describe('form integration', async () => {
async function createForm(validateOn?: FormInputEvents[]) {
const wrapper = await renderForm({
props: {
validateOn,
validateOnInputDelay: 0,
async validate(state: any) {
if (state.value !== 'Option 2')
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotVars: {
items: ['Option 1', 'Option 2']
},
slotTemplate: `
<UFormField name="value">
<USelect id="input" v-model="state.value" :items="items" />
</UFormField>
`
})
const input = wrapper.findComponent({ name: 'SelectRoot' })
return {
wrapper,
input
}
}
test('validate on blur works', async () => {
const { input, wrapper } = await createForm(['blur'])
await input.vm.$emit('update:open', false)
await flushPromises()
expect(wrapper.text()).toContain('Error message')
await input.setValue('Option 2')
await input.vm.$emit('update:open', false)
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
test('validate on change works', async () => {
const { input, wrapper } = await createForm(['change'])
input.setValue('Option 1')
await flushPromises()
expect(wrapper.text()).toContain('Error message')
input.setValue('Option 2')
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
test('validate on input works', async () => {
const { input, wrapper } = await createForm(['input'])
input.setValue('Option 1')
await flushPromises()
expect(wrapper.text()).toContain('Error message')
input.setValue('Option 2')
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
})
})

84
test/components/SelectMenu.spec.ts
View File

@@ -1,7 +1,10 @@
import { describe, it, expect } from 'vitest'
import { describe, it, expect, test } from 'vitest'
import SelectMenu, { type SelectMenuProps, type SelectMenuSlots } from '../../src/runtime/components/SelectMenu.vue'
import ComponentRender from '../component-render'
import theme from '#build/ui/input'
import { renderForm } from '../utils/form'
import { flushPromises, mount } from '@vue/test-utils'
import type { FormInputEvents } from '~/src/module'
describe('SelectMenu', () => {
const sizes = Object.keys(theme.variants.size) as any
@@ -70,4 +73,83 @@ describe('SelectMenu', () => {
const html = await ComponentRender(nameOrHtml, options, SelectMenu)
expect(html).toMatchSnapshot()
})
describe('emits', () => {
test('update:modelValue event', async () => {
const wrapper = mount(SelectMenu, { props: { items: ['Option 1', 'Option 2'] } })
const input = wrapper.findComponent({ name: 'ComboboxRoot' })
await input.setValue('Option 1')
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['Option 1']] })
})
test('change event', async () => {
const wrapper = mount(SelectMenu, { props: { items: ['Option 1', 'Option 2'] } })
const input = wrapper.findComponent({ name: 'ComboboxRoot' })
await input.setValue('Option 1')
expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
})
test('blur event', async () => {
const wrapper = mount(SelectMenu, { props: { items: ['Option 1', 'Option 2'] } })
const input = wrapper.findComponent({ name: 'ComboboxRoot' })
input.vm.$emit('update:open', false)
expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
})
})
describe('form integration', async () => {
async function createForm(validateOn?: FormInputEvents[]) {
const wrapper = await renderForm({
props: {
validateOn,
validateOnInputDelay: 0,
async validate(state: any) {
if (state.value !== 'Option 2')
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotVars: {
items: ['Option 1', 'Option 2']
},
slotTemplate: `
<UFormField name="value">
<USelectMenu id="input" v-model="state.value" :items="items" />
</UFormField>
`
})
const input = wrapper.findComponent({ name: 'ComboboxRoot' })
return {
wrapper,
input
}
}
test('validate on blur works', async () => {
const { input, wrapper } = await createForm(['blur'])
input.vm.$emit('update:open', false)
await flushPromises()
expect(wrapper.text()).toContain('Error message')
await input.setValue('Option 2')
input.vm.$emit('update:open', false)
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
test('validate on change works', async () => {
const { input, wrapper } = await createForm(['change'])
input.setValue('Option 1')
await flushPromises()
expect(wrapper.text()).toContain('Error message')
input.setValue('Option 2')
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
})
})

76
test/components/Slider.spec.ts
View File

@@ -1,7 +1,10 @@
import { describe, it, expect } from 'vitest'
import { describe, it, expect, test } from 'vitest'
import Slider, { type SliderProps } from '../../src/runtime/components/Slider.vue'
import ComponentRender from '../component-render'
import theme from '#build/ui/slider'
import { flushPromises, mount } from '@vue/test-utils'
import { renderForm } from '../utils/form'
import type { FormInputEvents } from '~/src/module'
describe('Slider', () => {
const sizes = Object.keys(theme.variants.size) as any
@@ -25,4 +28,75 @@ describe('Slider', () => {
const html = await ComponentRender(nameOrHtml, options, Slider)
expect(html).toMatchSnapshot()
})
describe('emits', () => {
test('update:modelValue event', async () => {
const wrapper = mount(Slider)
const input = wrapper.findComponent({ name: 'SliderRoot' })
input.vm.$emit('update:modelValue', 1)
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[1], [1]] })
})
test('change event', async () => {
const wrapper = mount(Slider)
const input = wrapper.findComponent({ name: 'SliderRoot' })
input.vm.$emit('valueCommit')
expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
})
})
describe('form integration', async () => {
async function createForm(validateOn?: FormInputEvents[]) {
const wrapper = await renderForm({
props: {
validateOn,
validateOnInputDelay: 0,
async validate(state: any) {
if (state.value < 20)
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotTemplate: `
<UFormField name="value">
<USlider v-model="state.value" />
</UFormField>
`
})
const input = wrapper.findComponent({ name: 'SliderRoot' })
return {
wrapper,
input
}
}
test('validate on change works', async () => {
const { input, wrapper } = await createForm(['change'])
await input.setValue(10)
input.vm.$emit('valueCommit')
await flushPromises()
expect(wrapper.text()).toContain('Error message')
await input.setValue(40)
input.vm.$emit('valueCommit')
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
test('validate on input works', async () => {
const { input, wrapper } = await createForm(['input'])
await input.setValue(10)
await flushPromises()
expect(wrapper.text()).toContain('Error message')
await input.setValue(40)
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
})
})

70
test/components/Switch.spec.ts
View File

@@ -1,7 +1,10 @@
import { describe, it, expect } from 'vitest'
import { describe, it, expect, test } from 'vitest'
import Switch, { type SwitchProps, type SwitchSlots } from '../../src/runtime/components/Switch.vue'
import ComponentRender from '../component-render'
import theme from '#build/ui/switch'
import { flushPromises, mount } from '@vue/test-utils'
import { renderForm } from '../utils/form'
import type { FormInputEvents } from '~/src/module'
describe('Switch', () => {
const sizes = Object.keys(theme.variants.size) as any
@@ -33,4 +36,69 @@ describe('Switch', () => {
const html = await ComponentRender(nameOrHtml, options, Switch)
expect(html).toMatchSnapshot()
})
describe('emits', () => {
test('update:modelValue event', async () => {
const wrapper = mount(Switch)
const input = wrapper.findComponent({ name: 'SwitchRoot' })
await input.vm.$emit('update:checked', true)
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[true]] })
})
test('change event', async () => {
const wrapper = mount(Switch)
const input = wrapper.findComponent({ name: 'SwitchRoot' })
await input.vm.$emit('update:checked', true)
expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
})
})
describe('form integration', async () => {
async function createForm(validateOn?: FormInputEvents[]) {
const wrapper = await renderForm({
props: {
validateOn,
validateOnInputDelay: 0,
async validate(state: any) {
if (!state.value)
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotTemplate: `
<UFormField name="value">
<USwitch v-model="state.value" />
</UFormField>
`
})
const input = wrapper.findComponent({ name: 'SwitchRoot' })
return {
wrapper,
input
}
}
test('validate on change works', async () => {
const { input, wrapper } = await createForm(['change'])
await input.setValue(false)
await input.vm.$emit('update:checked', false)
await flushPromises()
expect(wrapper.text()).toContain('Error message')
await input.vm.$emit('update:checked', true)
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
test('validate on input works', async () => {
const { input, wrapper } = await createForm(['input'])
await input.vm.$emit('update:checked', false)
await flushPromises()
expect(wrapper.text()).toContain('Error message')
await input.vm.$emit('update:checked', true)
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
})
})

86
test/components/Textarea.spec.ts
View File

@@ -3,6 +3,8 @@ import { mount } from '@vue/test-utils'
import Textarea, { type TextareaProps, type TextareaSlots } from '../../src/runtime/components/Textarea.vue'
import ComponentRender from '../component-render'
import theme from '#build/ui/textarea'
import { renderForm } from '../utils/form'
import type { FormInputEvents } from '~/src/module'
describe('Textarea', () => {
const sizes = Object.keys(theme.variants.size) as any
@@ -34,7 +36,7 @@ describe('Textarea', () => {
['with .number modifier', { props: { modelModifiers: { number: true } } }, { input: '42', expected: 42 }],
['with .lazy modifier', { props: { modelModifiers: { lazy: true } } }, { input: 'input', expected: 'input' }]
])('%s works', async (_nameOrHtml: string, options: { props?: any, slots?: any }, spec: { input: any, expected: any }) => {
const wrapper = await mount(Textarea, {
const wrapper = mount(Textarea, {
...options
})
@@ -58,4 +60,86 @@ describe('Textarea', () => {
await input.trigger('change')
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['']] })
})
describe('emits', () => {
test('update:modelValue event', async () => {
const wrapper = mount(Textarea)
const input = wrapper.find('textarea')
await input.setValue('bob@dylan.com')
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['bob@dylan.com']] })
})
test('change event', async () => {
const wrapper = mount(Textarea)
const input = wrapper.find('textarea')
await input.setValue('bob@dylan.com')
expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
})
test('blur event', async () => {
const wrapper = mount(Textarea)
const input = wrapper.find('textarea')
await input.trigger('blur')
expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
})
})
describe('form integration', async () => {
async function createForm(validateOn?: FormInputEvents[]) {
const wrapper = await renderForm({
props: {
validateOn,
validateOnInputDelay: 0,
async validate(state: any) {
if (state.value !== 'valid')
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotTemplate: `
<UFormField name="value">
<UTextarea id="input" v-model="state.value" />
</UFormField>
`
})
const input = wrapper.find('#input')
return {
wrapper,
input
}
}
test('validate on blur works', async () => {
const { input, wrapper } = await createForm(['blur'])
await input.trigger('blur')
expect(wrapper.text()).toContain('Error message')
await input.setValue('valid')
await input.trigger('blur')
expect(wrapper.text()).not.toContain('Error message')
})
test('validate on change works', async () => {
const { input, wrapper } = await createForm(['change'])
await input.trigger('change')
expect(wrapper.text()).toContain('Error message')
input.setValue('valid')
await input.trigger('change')
expect(wrapper.text()).not.toContain('Error message')
})
test('validate on input works', async () => {
const { input, wrapper } = await createForm(['input'])
await input.setValue('value')
expect(wrapper.text()).toContain('Error message')
await input.setValue('valid')
expect(wrapper.text()).not.toContain('Error message')
})
})
})

53
test/utils/form.ts Normal file
View File

@@ -0,0 +1,53 @@
import { 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,
USwitch,
USlider
} from '#components'
export async function renderForm(options: {
props: Partial<FormProps<any>>
slotVars?: object
slotTemplate: string
}) {
const state = reactive({})
return await mountSuspended(UForm, {
props: {
id: 42,
state,
...options.props
},
slots: {
default: {
setup() {
return { state, ...options.slotVars }
},
components: {
UFormField,
UForm,
UInput,
URadioGroup,
UTextarea,
UCheckbox,
USelect,
USelectMenu,
UInputMenu,
USwitch,
USlider
},
template: options.slotTemplate
}
}
})
}