arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +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

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
}
}
})
}