From 7b5d38923fee843ef6a88001d03ac0c35841c624 Mon Sep 17 00:00:00 2001 From: Zaytsev Kirill Date: Mon, 26 Oct 2020 00:36:03 +0300 Subject: [PATCH] refactor!: errorBehavior renamed to validationBehavior --- src/FormularioInput.vue | 19 +++-- test/unit/FormularioInput.test.js | 117 ++++++++++++++++++------------ 2 files changed, 81 insertions(+), 55 deletions(-) diff --git a/src/FormularioInput.vue b/src/FormularioInput.vue index d3e02e6..4902ac2 100644 --- a/src/FormularioInput.vue +++ b/src/FormularioInput.vue @@ -49,18 +49,21 @@ export default class FormularioInput extends Vue { @Prop({ default: '' }) validation!: string|any[] @Prop({ default: () => ({}) }) validationRules!: Record @Prop({ default: () => ({}) }) validationMessages!: Record - @Prop({ default: () => [] }) errors!: string[] @Prop({ default: VALIDATION_BEHAVIOR.DEMAND, validator: behavior => Object.values(VALIDATION_BEHAVIOR).includes(behavior) - }) errorBehavior!: string + }) validationBehavior!: string + @Prop({ default: () => [] }) errors!: string[] + + // Affects only observing & setting of local errors @Prop({ default: false }) errorsDisabled!: boolean - proxy: any = this.getInitialValue() - localErrors: string[] = [] - violations: Violation[] = [] - pendingValidation: Promise = Promise.resolve() + public proxy: any = this.getInitialValue() + + private localErrors: string[] = [] + private violations: Violation[] = [] + private pendingValidation: Promise = Promise.resolve() get fullQualifiedName (): string { return this.path !== '' ? `${this.path}.${this.name}` : this.name @@ -140,7 +143,7 @@ export default class FormularioInput extends Vue { if (!this.hasModel && !shallowEqualObjects(newValue, oldValue)) { this.context.model = newValue } - if (this.errorBehavior === VALIDATION_BEHAVIOR.LIVE) { + if (this.validationBehavior === VALIDATION_BEHAVIOR.LIVE) { this.runValidation() } else { this.violations = [] @@ -162,7 +165,7 @@ export default class FormularioInput extends Vue { if (typeof this.addErrorObserver === 'function' && !this.errorsDisabled) { this.addErrorObserver({ callback: this.setErrors, type: 'input', field: this.fullQualifiedName }) } - if (this.errorBehavior === VALIDATION_BEHAVIOR.LIVE) { + if (this.validationBehavior === VALIDATION_BEHAVIOR.LIVE) { this.runValidation() } } diff --git a/test/unit/FormularioInput.test.js b/test/unit/FormularioInput.test.js index 620bc10..f8eb6bd 100644 --- a/test/unit/FormularioInput.test.js +++ b/test/unit/FormularioInput.test.js @@ -23,10 +23,10 @@ describe('FormularioInput', () => { const wrapper = mount(FormularioInput, { propsData: { name: 'test', + value: 'other value', validation: 'required|in:abcdef', validationMessages: { in: 'the value was different than expected' }, - errorBehavior: 'live', - value: 'other value', + validationBehavior: 'live', }, scopedSlots: { default: `
{{ violation.message }}
` @@ -36,7 +36,7 @@ describe('FormularioInput', () => { expect(wrapper.find('span').text()).toBe('the value was different than expected') }) - it('no validation on created when errorBehavior is not live', async () => { + it('No validation on created when validationBehavior is not live', async () => { const wrapper = mount(FormularioInput, { propsData: { name: 'test', @@ -45,20 +45,20 @@ describe('FormularioInput', () => { value: 'other value' }, scopedSlots: { - default: `
{{ error.message }}
` + default: `
{{ error.message }}
` } }) await flushPromises() expect(wrapper.find('span').exists()).toBe(false) }) - it('No validation on value change when errorBehavior is not live', async () => { + it('No validation on value change when validationBehavior is "submit"', async () => { const wrapper = mount(FormularioInput, { propsData: { name: 'test', validation: 'required|in:abcdef', validationMessages: {in: 'the value was different than expected'}, - errorBehavior: 'submit', + validationBehavior: 'submit', value: 'Initial' }, scopedSlots: { @@ -82,29 +82,29 @@ describe('FormularioInput', () => { expect(wrapper.find('span').exists()).toBe(false) }) - it('allows custom field-rule level validation functions', async () => { + it('Allows custom field-rule level validation functions', async () => { const wrapper = mount(FormularioInput, { propsData: { name: 'test', validation: 'required|in:abcdef', validationMessages: { in: ({ value }) => `The string ${value} is not correct.` }, - errorBehavior: 'live', + validationBehavior: 'live', value: 'other value' }, scopedSlots: { - default: `
{{ error.message }}
` + default: `
{{ error.message }}
` } }) await flushPromises() expect(wrapper.find('span').text()).toBe('The string other value is not correct.') }) - it('no validation on created when errorBehavior is not live', async () => { + it('No validation on created when validationBehavior is default', async () => { const wrapper = mount(FormularioInput, { propsData: { name: 'test', validation: 'required|in:abcdef', - validationMessages: {in: 'the value was different than expected'}, + validationMessages: { in: 'the value was different than expected' }, value: 'other value' }, scopedSlots: { @@ -115,18 +115,14 @@ describe('FormularioInput', () => { expect(wrapper.find('span').exists()).toBe(false) }) - it('uses custom async validation rules on defined on the field', async () => { + it('Uses custom async validation rules on defined on the field', async () => { const wrapper = mount(FormularioInput, { propsData: { name: 'test', validation: 'required|foobar', - validationMessages: { - foobar: 'failed the foobar check' - }, - validationRules: { - foobar: async ({ value }) => value === 'foo' - }, - errorBehavior: 'live', + validationRules: { foobar: async ({ value }) => value === 'foo' }, + validationMessages: { foobar: 'failed the foobar check' }, + validationBehavior: 'live', value: 'bar' }, scopedSlots: { @@ -137,22 +133,18 @@ describe('FormularioInput', () => { expect(wrapper.find('span').text()).toBe('failed the foobar check') }) - it('uses custom sync validation rules on defined on the field', async () => { + it('Uses custom sync validation rules on defined on the field', async () => { const wrapper = mount(FormularioInput, { propsData: { name: 'test', + value: 'bar', validation: 'required|foobar', - validationMessages: { - foobar: 'failed the foobar check' - }, - validationRules: { - foobar: ({ value }) => value === 'foo' - }, - errorBehavior: 'live', - value: 'bar' + validationRules: { foobar: ({ value }) => value === 'foo' }, + validationMessages: { foobar: 'failed the foobar check' }, + validationBehavior: 'live', }, scopedSlots: { - default: `
{{ error.message }}
` + default: `
{{ error.message }}
` } }) await flushPromises() @@ -163,9 +155,9 @@ describe('FormularioInput', () => { const wrapper = mount(FormularioInput, { propsData: { name: 'test', + value: 'bar', validation: 'required|globalRule', - errorBehavior: 'live', - value: 'bar' + validationBehavior: 'live', } }) await flushPromises() @@ -175,10 +167,10 @@ describe('FormularioInput', () => { it('Emits correct validation event', async () => { const wrapper = mount(FormularioInput, { propsData: { - validation: 'required', - errorBehavior: 'live', - value: '', name: 'fieldName', + value: '', + validation: 'required', + validationBehavior: 'live', } }) await flushPromises() @@ -197,31 +189,48 @@ describe('FormularioInput', () => { it('Can bail on validation when encountering the bail rule', async () => { const wrapper = mount(FormularioInput, { - propsData: { name: 'test', validation: 'bail|required|in:xyz', errorBehavior: 'live' } + propsData: { + name: 'test', + validation: 'bail|required|in:xyz', + validationBehavior: 'live', + }, }) await flushPromises(); expect(wrapper.vm.context.violations.length).toBe(1); }) - it('can show multiple validation errors if they occur before the bail rule', async () => { + it('Can show multiple validation errors if they occur before the bail rule', async () => { const wrapper = mount(FormularioInput, { - propsData: { name: 'test', validation: 'required|in:xyz|bail', errorBehavior: 'live' } + propsData: { + name: 'test', + validation: 'required|in:xyz|bail', + validationBehavior: 'live', + } }) await flushPromises(); expect(wrapper.vm.context.violations.length).toBe(2); }) - it('can avoid bail behavior by using modifier', async () => { + it('Can avoid bail behavior by using modifier', async () => { const wrapper = mount(FormularioInput, { - propsData: { name: 'test', validation: '^required|in:xyz|min:10,length', errorBehavior: 'live', value: '123' } + propsData: { + name: 'test', + value: '123', + validation: '^required|in:xyz|min:10,length', + validationBehavior: 'live', + }, }) await flushPromises(); expect(wrapper.vm.context.violations.length).toBe(2); }) - it('prevents later error messages when modified rule fails', async () => { + it('Prevents later error messages when modified rule fails', async () => { const wrapper = mount(FormularioInput, { - propsData: { name: 'test', validation: '^required|in:xyz|min:10,length', errorBehavior: 'live' } + propsData: { + name: 'test', + validation: '^required|in:xyz|min:10,length', + validationBehavior: 'live', + }, }) await flushPromises(); expect(wrapper.vm.context.violations.length).toBe(1); @@ -229,18 +238,22 @@ describe('FormularioInput', () => { it('can bail in the middle of the rule set with a modifier', async () => { const wrapper = mount(FormularioInput, { - propsData: { name: 'test', validation: 'required|^in:xyz|min:10,length', errorBehavior: 'live' } + propsData: { + name: 'test', + validation: 'required|^in:xyz|min:10,length', + validationBehavior: 'live', + }, }) await flushPromises(); expect(wrapper.vm.context.violations.length).toBe(2); }) - it('does not show errors on blur when set error-behavior is submit', async () => { + it('Does not show errors on blur when set validation-behavior is submit', async () => { const wrapper = mount(FormularioInput, { propsData: { - validation: 'required', - errorBehavior: 'submit', name: 'test', + validation: 'required', + validationBehavior: 'submit', }, scopedSlots: { default: ` @@ -253,18 +266,26 @@ describe('FormularioInput', () => { }) expect(wrapper.find('span').exists()).toBe(false) + wrapper.find('input').trigger('input') wrapper.find('input').trigger('blur') + await flushPromises() + expect(wrapper.find('span').exists()).toBe(false) }) - it('displays errors when error-behavior is submit and form is submitted', async () => { + it('Displays errors when validation-behavior is submit and form is submitted', async () => { const wrapper = mount(FormularioForm, { propsData: { name: 'test' }, slots: { default: ` - + {{ error.message }} ` @@ -272,11 +293,13 @@ describe('FormularioInput', () => { }) await flushPromises() + expect(wrapper.find('span').exists()).toBe(false) wrapper.trigger('submit') await flushPromises() + expect(wrapper.find('span').exists()).toBe(true) }) })