diff --git a/test/unit/FormularioField.test.js b/test/unit/FormularioField.test.js
index 34302ff..f49f4b8 100644
--- a/test/unit/FormularioField.test.js
+++ b/test/unit/FormularioField.test.js
@@ -3,8 +3,8 @@ import flushPromises from 'flush-promises'
import { mount } from '@vue/test-utils'
import Formulario from '@/index.ts'
-import FormularioForm from '@/FormularioForm.vue'
import FormularioField from '@/FormularioField.vue'
+import FormularioForm from '@/FormularioForm.vue'
const globalRule = jest.fn(() => false)
@@ -151,32 +151,32 @@ describe('FormularioField', () => {
expect(wrapper.find('span').text()).toBe('failed the foobar check')
})
- it('Uses global custom validation rules', async () => {
- const wrapper = mount(FormularioField, {
+ it('uses global custom validation rules', async () => {
+ mount(FormularioField, {
propsData: {
name: 'test',
value: 'bar',
validation: 'required|globalRule',
validationBehavior: 'live',
- }
+ },
})
await flushPromises()
expect(globalRule.mock.calls.length).toBe(1)
})
- it('Emits correct validation event', async () => {
+ it('emits correct validation event', async () => {
const wrapper = mount(FormularioField, {
propsData: {
name: 'fieldName',
value: '',
validation: 'required',
validationBehavior: 'live',
- }
+ },
})
+
await flushPromises()
- expect(wrapper.emitted('validation')).toBeTruthy()
- expect(wrapper.emitted('validation')[0][0]).toEqual({
+ expect(wrapper.emitted('validation')).toEqual([[{
name: 'fieldName',
violations: [{
rule: expect.stringContaining('required'),
@@ -184,68 +184,55 @@ describe('FormularioField', () => {
context: expect.any(Object),
message: expect.any(String),
}],
- })
+ }]])
})
- it('Can bail on validation when encountering the bail rule', async () => {
- const wrapper = mount(FormularioField, {
- propsData: {
- name: 'test',
- validation: 'bail|required|in:xyz',
- validationBehavior: 'live',
- },
+ 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 = mount({
+ data: () => ({ validation }),
+ template: `
+
+
+
+ `
})
- await flushPromises();
- expect(wrapper.vm.context.violations.length).toBe(1);
+
+ await flushPromises()
+
+ expect(wrapper.findAll('[data-violation]').length).toBe(expectedViolationsCount)
})
- it('Can show multiple validation errors if they occur before the bail rule', async () => {
- const wrapper = mount(FormularioField, {
- propsData: {
- name: 'test',
- validation: 'required|in:xyz|bail',
- validationBehavior: 'live',
- },
+ it('proceeds validation if passed a rule with bail modifier', async () => {
+ const wrapper = mount({
+ template: `
+
+
+
+ `
})
- await flushPromises();
- expect(wrapper.vm.context.violations.length).toBe(2);
- })
- it('Can avoid bail behavior by using modifier', async () => {
- const wrapper = mount(FormularioField, {
- propsData: {
- name: 'test',
- value: '123',
- validation: '^required|in:xyz|min:10,length',
- validationBehavior: 'live',
- },
- })
- await flushPromises();
- expect(wrapper.vm.context.violations.length).toBe(2);
- })
+ await flushPromises()
- it('Prevents later error messages when modified rule fails', async () => {
- const wrapper = mount(FormularioField, {
- propsData: {
- name: 'test',
- validation: '^required|in:xyz|min:10,length',
- validationBehavior: 'live',
- },
- })
- await flushPromises();
- expect(wrapper.vm.context.violations.length).toBe(1);
- })
-
- it('can bail in the middle of the rule set with a modifier', async () => {
- const wrapper = mount(FormularioField, {
- propsData: {
- name: 'test',
- validation: 'required|^in:xyz|min:10,length',
- validationBehavior: 'live',
- },
- })
- await flushPromises();
- expect(wrapper.vm.context.violations.length).toBe(2);
+ expect(wrapper.findAll('[data-violation]').length).toBe(2)
})
it('Displays errors when validation-behavior is submit and form is submitted', async () => {
@@ -307,44 +294,52 @@ describe('FormularioField', () => {
it('Model setter for input', async () => {
const wrapper = mount({
- data: () => ({ values: { test: 'abcd' } }),
+ data: () => ({ values: { date: 'not a date' } }),
template: `
-
+
`,
methods: {
- onGet(source) {
- if (!(source instanceof Date)) {
- return source
- }
-
- return source.getDate()
+ onGet (source) {
+ return source instanceof Date ? source.getDate() : source
},
- onSet(source) {
+
+ onSet (source) {
if (source instanceof Date) {
return source
}
+
if (isNaN(source)) {
return undefined
}
- let result = new Date('2001-05-01')
+ const result = new Date('2001-05-01')
result.setDate(source)
return result
- }
+ },
}
})
await flushPromises()
- expect(wrapper.vm.values.test).toBe(undefined)
+
+ expect(wrapper.vm.values.date).toBe(undefined)
wrapper.find('input[type="text"]').element['value'] = '12'
wrapper.find('input[type="text"]').trigger('input')
+
await flushPromises()
- expect(wrapper.vm.values.test.toISOString()).toBe((new Date('2001-05-12')).toISOString())
+
+ expect(wrapper.vm.values.date.toISOString()).toBe(
+ (new Date('2001-05-12')).toISOString()
+ )
})
})