1
0
mirror of synced 2024-12-23 03:58:45 +03:00
vue-formulario/test/unit/FormularioField.test.js

323 lines
9.6 KiB
JavaScript
Raw Normal View History

import Vue from 'vue'
2020-05-22 14:22:16 +03:00
import flushPromises from 'flush-promises'
import { mount } from '@vue/test-utils'
2020-10-09 22:58:28 +03:00
import Formulario from '@/index.ts'
import FormularioField from '@/FormularioField.vue'
import FormularioForm from '@/FormularioForm.vue'
2020-05-22 14:22:16 +03:00
const globalRule = jest.fn(() => false)
2020-05-22 14:22:16 +03:00
Vue.use(Formulario, {
validationRules: { globalRule },
validationMessages: {
required: () => 'required',
'in': () => 'in',
min: () => 'min',
globalRule: () => 'globalRule',
},
2020-05-22 14:22:16 +03:00
})
describe('FormularioField', () => {
const createWrapper = (props = {}) => mount(FormularioField, {
propsData: {
name: 'field',
value: 'initial',
validation: 'required|in:abcdef',
validationMessages: { in: 'the value was different than expected' },
...props,
},
scopedSlots: {
default: `
<div>
<input type="text" v-model="props.context.model">
<span v-for="(violation, index) in props.context.violations" :key="index" data-violation>
{{ violation.message }}
</span>
</div>
`,
},
2020-05-22 14:22:16 +03:00
})
test('allows custom field-rule level validation strings', async () => {
const wrapper = createWrapper({
validationBehavior: 'live',
})
await flushPromises()
expect(wrapper.find('[data-violation]').text()).toBe(
'the value was different than expected'
)
})
test.each([
['demand'],
['submit'],
])('no validation when validationBehavior is not "live"', async validationBehavior => {
const wrapper = createWrapper({ validationBehavior })
await flushPromises()
expect(wrapper.find('[data-violation]').exists()).toBe(false)
wrapper.find('input').element['value'] = 'updated'
wrapper.find('input').trigger('change')
await flushPromises()
expect(wrapper.find('input').element['value']).toBe('updated')
expect(wrapper.find('[data-violation]').exists()).toBe(false)
})
test('allows custom validation rule message', async () => {
const wrapper = createWrapper({
value: 'other value',
validationMessages: { in: ({ value }) => `the string "${value}" is not correct` },
validationBehavior: 'live',
2020-05-22 14:22:16 +03:00
})
2020-10-18 20:45:18 +03:00
await flushPromises()
expect(wrapper.find('[data-violation]').text()).toBe(
'the string "other value" is not correct'
)
2020-05-22 14:22:16 +03:00
})
test.each([
['bar', ({ value }) => value === 'foo'],
['bar', ({ value }) => Promise.resolve(value === 'foo')],
])('uses local custom validation rules', async (value, rule) => {
const wrapper = createWrapper({
value,
validation: 'required|custom',
validationRules: { custom: rule },
validationMessages: { custom: 'failed the custom rule check' },
validationBehavior: 'live',
2020-05-22 14:22:16 +03:00
})
2020-05-22 14:22:16 +03:00
await flushPromises()
expect(wrapper.find('[data-violation]').text()).toBe('failed the custom rule check')
2020-05-22 14:22:16 +03:00
})
test('uses global custom validation rules', async () => {
mount(FormularioField, {
2020-05-22 14:22:16 +03:00
propsData: {
name: 'test',
value: 'bar',
2020-05-22 14:22:16 +03:00
validation: 'required|globalRule',
validationBehavior: 'live',
},
2020-05-22 14:22:16 +03:00
})
2020-05-22 14:22:16 +03:00
await flushPromises()
2020-05-22 14:22:16 +03:00
expect(globalRule.mock.calls.length).toBe(1)
})
test('emits correct validation event', async () => {
const wrapper = mount(FormularioField, {
2020-10-09 22:58:28 +03:00
propsData: {
name: 'field',
value: '',
validation: 'required',
validationBehavior: 'live',
},
2020-10-09 22:58:28 +03:00
})
2020-05-22 14:22:16 +03:00
await flushPromises()
expect(wrapper.emitted('validation')).toEqual([[{
path: 'field',
violations: [{
rule: 'required',
args: expect.any(Array),
context: {
name: 'field',
value: '',
formValues: {},
},
message: expect.any(String),
}],
}]])
2020-05-22 14:22:16 +03:00
})
test.each([
['bail|required|in:xyz', 1],
['^required|in:xyz|min:10,length', 1],
['required|^in:xyz|min:10,length', 2],
['required|in:xyz|bail', 2],
])('prevents further validation if not passed a rule with bail modifier', async (
validation,
expectedViolationsCount
) => {
const wrapper = createWrapper({
value: '',
validation,
validationBehavior: 'live',
2020-05-22 14:22:16 +03:00
})
await flushPromises()
2020-05-22 14:22:16 +03:00
expect(wrapper.findAll('[data-violation]').length).toBe(expectedViolationsCount)
2020-05-22 14:22:16 +03:00
})
test('proceeds validation if passed a rule with bail modifier', async () => {
const wrapper = createWrapper({
value: '123',
validation: '^required|in:xyz|min:10,length',
validationBehavior: 'live',
2020-05-22 14:22:16 +03:00
})
await flushPromises()
expect(wrapper.findAll('[data-violation]').length).toBe(2)
2020-05-22 14:22:16 +03:00
})
test('displays errors when validation-behavior is submit and form is submitted', async () => {
2020-05-22 14:22:16 +03:00
const wrapper = mount(FormularioForm, {
slots: {
default: `
<FormularioField
v-slot="{ context }"
name="field"
validation="required"
validation-behavior="submit"
>
<span v-for="(violation, index) in context.violations" :key="index" data-violation>
{{ violation.message }}
</span>
</FormularioField>
2020-05-22 14:22:16 +03:00
`
}
})
2020-10-18 20:45:18 +03:00
await flushPromises()
expect(wrapper.find('[data-violation]').exists()).toBe(false)
2020-05-22 14:22:16 +03:00
wrapper.trigger('submit')
2020-10-18 20:45:18 +03:00
await flushPromises()
expect(wrapper.find('[data-violation]').exists()).toBe(true)
2020-05-22 14:22:16 +03:00
})
test('model getter for input', async () => {
const wrapper = mount({
data: () => ({ state: { date: 'not a date' } }),
template: `
<FormularioForm v-model="state">
<FormularioField
v-slot="{ context }"
:model-get-converter="onGet"
name="date"
>
<span data-output>{{ context.model }}</span>
</FormularioField>
</FormularioForm>
`,
methods: {
onGet (source) {
return source instanceof Date ? source.getDate() : 'invalid date'
},
}
})
await flushPromises()
expect(wrapper.find('[data-output]').text()).toBe('invalid date')
wrapper.vm.state = { date: new Date('1995-12-17') }
await flushPromises()
expect(wrapper.find('[data-output]').text()).toBe('17')
})
test('model setter for input', async () => {
const wrapper = mount({
data: () => ({ state: { date: 'not a date' } }),
template: `
<FormularioForm v-model="state">
<FormularioField
v-slot="{ context }"
:model-get-converter="onGet"
:model-set-converter="onSet"
name="date"
>
<input type="text" v-model="context.model">
</FormularioField>
</FormularioForm>
`,
methods: {
onGet (source) {
return source instanceof Date ? source.getDate() : source
},
onSet (source) {
if (source instanceof Date) {
return source
}
if (isNaN(source)) {
return undefined
}
const result = new Date('2001-05-01')
result.setDate(source)
return result
},
}
})
await flushPromises()
wrapper.find('input').setValue('12')
wrapper.find('input').trigger('input')
await flushPromises()
const form = wrapper.findComponent(FormularioForm)
expect(form.emitted('input')).toEqual([
[{ date: new Date('2001-05-12') }],
])
})
test('unregister behavior', async () => {
const wrapper = mount({
props: {
formExists: {
type: Boolean,
default: true,
}
},
data: () => ({ state: { fieldA: '', fieldB: '' } }),
watch: {
state () {
this.$emit('updated', this.state)
},
},
template: `
<div>
<FormularioForm v-if="formExists" v-model="state">
<FormularioField name="fieldA" />
<FormularioField name="fieldB" unregister-behavior="unset" />
</FormularioForm>
</div>
`,
})
await wrapper.vm.$nextTick()
wrapper.setProps({ formExists: false })
await wrapper.vm.$nextTick()
expect(wrapper.emitted('updated')).toEqual([[{ fieldA: '' }]])
})
2020-05-22 14:22:16 +03:00
})