-
Notifications
You must be signed in to change notification settings - Fork 697
/
Copy pathInput.spec.ts
178 lines (154 loc) · 7.29 KB
/
Input.spec.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
import { describe, it, expect, test } from 'vitest'
import { mount } from '@vue/test-utils'
import Input, { type InputProps, type InputSlots } from '../../src/runtime/components/Input.vue'
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 variants = Object.keys(theme.variants.variant) as any
it.each([
// Props
['with id', { props: { id: 'id' } }],
['with name', { props: { name: 'name' } }],
['with type', { props: { type: 'password' } }],
['with placeholder', { props: { placeholder: 'Search...' } }],
['with disabled', { props: { disabled: true } }],
['with required', { props: { required: true } }],
['with file type', { props: { type: 'file' } }],
['with icon', { props: { icon: 'i-lucide-search' } }],
['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
['with avatar', { props: { avatar: { src: 'https://github.com/benjamincanac.png' } } }],
['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
['with loading', { props: { loading: true } }],
['with loading and avatar', { props: { loading: true, avatar: { src: 'https://github.com/benjamincanac.png' } } }],
['with loading trailing', { props: { loading: true, trailing: true } }],
['with loading trailing and avatar', { props: { loading: true, trailing: true, avatar: { src: 'https://github.com/benjamincanac.png' } } }],
['with loadingIcon', { props: { loading: true, loadingIcon: 'i-lucide-sparkles' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant } }]),
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { variant, color: 'neutral' } }]),
['with ariaLabel', { attrs: { 'aria-label': 'Aria label' } }],
['with as', { props: { as: 'section' } }],
['with class', { props: { class: 'absolute' } }],
['with ui', { props: { ui: { base: 'rounded-full' } } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }],
['with leading slot', { slots: { leading: () => 'Leading slot' } }],
['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: InputProps, slots?: Partial<InputSlots> }) => {
const html = await ComponentRender(nameOrHtml, options, Input)
expect(html).toMatchSnapshot()
})
it.each([
['with .trim modifier', { props: { modelModifiers: { trim: true } } }, { input: 'input ', expected: 'input' }],
['with .number modifier', { props: { modelModifiers: { number: true } } }, { input: '42', expected: 42 }],
['with .lazy modifier', { props: { modelModifiers: { lazy: true } } }, { input: 'input', expected: 'input' }],
['with .nullify modifier', { props: { modelModifiers: { nullify: true } } }, { input: '', expected: null }]
])('%s works', async (_nameOrHtml: string, options: { props?: any, slots?: any }, spec: { input: any, expected: any }) => {
const wrapper = mount(Input, {
...options
})
const input = wrapper.find('input')
await input.setValue(spec.input)
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[spec.expected]] })
})
test('with .lazy modifier updates on change only', async () => {
const wrapper = mount(Input, {
props: {
modelModifiers: { lazy: true }
}
})
const input = wrapper.find('input')
await input.trigger('update')
expect(wrapper.emitted()).toMatchObject({ })
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('[email protected]')
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['[email protected]']] })
})
test('change event', async () => {
const wrapper = mount(Input)
const input = wrapper.find('input')
await input.setValue('[email protected]')
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[], eagerValidation?: boolean) {
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" :eager-validation="eagerValidation">
<UInput id="input" v-model="state.value" />
</UFormField>
`,
slotVars: {
eagerValidation
}
})
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'], true)
await input.setValue('value')
expect(wrapper.text()).toContain('Error message')
await input.setValue('valid')
expect(wrapper.text()).not.toContain('Error message')
})
test('validate on input without eager validation works', async () => {
const { input, wrapper } = await createForm(['input'])
await input.setValue('value')
expect(wrapper.text()).not.toContain('Error message')
await input.trigger('blur')
await input.setValue('value')
expect(wrapper.text()).toContain('Error message')
await input.setValue('valid')
expect(wrapper.text()).not.toContain('Error message')
})
})
})