arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-21 15:31:46 +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

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