RetailCRM-Mirror/vue-formulario
1
0
Fork 0
mirror of synced 2024-11-22 13:26:06 +03:00
Code Issues Projects Releases Wiki Activity

refactor!: errorBehavior renamed to validationBehavior

Browse Source
This commit is contained in:
Zaytsev Kirill 2020-10-26 00:36:03 +03:00
parent 3f5735299d
commit 7b5d38923f
2 changed files with 81 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/FormularioInput.vue
View File

@ -49,18 +49,21 @@ export default class FormularioInput extends Vue {
@Prop({ default: '' }) validation!: string|any[] @Prop({ default: '' }) validation!: string|any[]
@Prop({ default: () => ({}) }) validationRules!: Record<string, CheckRuleFn> @Prop({ default: () => ({}) }) validationRules!: Record<string, CheckRuleFn>
@Prop({ default: () => ({}) }) validationMessages!: Record<string, CreateMessageFn|string> @Prop({ default: () => ({}) }) validationMessages!: Record<string, CreateMessageFn|string>
@Prop({ default: () => [] }) errors!: string[]
@Prop({ @Prop({
default: VALIDATION_BEHAVIOR.DEMAND, default: VALIDATION_BEHAVIOR.DEMAND,
validator: behavior => Object.values(VALIDATION_BEHAVIOR).includes(behavior) 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 @Prop({ default: false }) errorsDisabled!: boolean
proxy: any = this.getInitialValue() public proxy: any = this.getInitialValue()
localErrors: string[] = []
violations: Violation[] = [] private localErrors: string[] = []
pendingValidation: Promise<any> = Promise.resolve() private violations: Violation[] = []
private pendingValidation: Promise<any> = Promise.resolve()
get fullQualifiedName (): string { get fullQualifiedName (): string {
return this.path !== '' ? `${this.path}.${this.name}` : this.name 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)) { if (!this.hasModel && !shallowEqualObjects(newValue, oldValue)) {
this.context.model = newValue this.context.model = newValue
} }
if (this.errorBehavior === VALIDATION_BEHAVIOR.LIVE) { if (this.validationBehavior === VALIDATION_BEHAVIOR.LIVE) {
this.runValidation() this.runValidation()
} else { } else {
this.violations = [] this.violations = []
@ -162,7 +165,7 @@ export default class FormularioInput extends Vue {
if (typeof this.addErrorObserver === 'function' && !this.errorsDisabled) { if (typeof this.addErrorObserver === 'function' && !this.errorsDisabled) {
this.addErrorObserver({ callback: this.setErrors, type: 'input', field: this.fullQualifiedName }) this.addErrorObserver({ callback: this.setErrors, type: 'input', field: this.fullQualifiedName })
} }
if (this.errorBehavior === VALIDATION_BEHAVIOR.LIVE) { if (this.validationBehavior === VALIDATION_BEHAVIOR.LIVE) {
this.runValidation() this.runValidation()
} }
} }

115
test/unit/FormularioInput.test.js
View File

@ -23,10 +23,10 @@ describe('FormularioInput', () => {
const wrapper = mount(FormularioInput, { const wrapper = mount(FormularioInput, {
propsData: { propsData: {
name: 'test', name: 'test',
value: 'other value',
validation: 'required|in:abcdef', validation: 'required|in:abcdef',
validationMessages: { in: 'the value was different than expected' }, validationMessages: { in: 'the value was different than expected' },
errorBehavior: 'live', validationBehavior: 'live',
value: 'other value',
}, },
scopedSlots: { scopedSlots: {
default: `<div><span v-for="violation in props.context.violations">{{ violation.message }}</span></div>` default: `<div><span v-for="violation in props.context.violations">{{ violation.message }}</span></div>`
@ -36,7 +36,7 @@ describe('FormularioInput', () => {
expect(wrapper.find('span').text()).toBe('the value was different than expected') 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, { const wrapper = mount(FormularioInput, {
propsData: { propsData: {
name: 'test', name: 'test',
@ -45,20 +45,20 @@ describe('FormularioInput', () => {
value: 'other value' value: 'other value'
}, },
scopedSlots: { scopedSlots: {
default: `<div><span v-for="error in props.context.allErrors">{{ error.message }}</span></div>` default: `<div><span v-for="error in props.context.violations">{{ error.message }}</span></div>`
} }
}) })
await flushPromises() await flushPromises()
expect(wrapper.find('span').exists()).toBe(false) 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, { const wrapper = mount(FormularioInput, {
propsData: { propsData: {
name: 'test', name: 'test',
validation: 'required|in:abcdef', validation: 'required|in:abcdef',
validationMessages: {in: 'the value was different than expected'}, validationMessages: {in: 'the value was different than expected'},
errorBehavior: 'submit', validationBehavior: 'submit',
value: 'Initial' value: 'Initial'
}, },
scopedSlots: { scopedSlots: {
@ -82,24 +82,24 @@ describe('FormularioInput', () => {
expect(wrapper.find('span').exists()).toBe(false) 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, { const wrapper = mount(FormularioInput, {
propsData: { propsData: {
name: 'test', name: 'test',
validation: 'required|in:abcdef', validation: 'required|in:abcdef',
validationMessages: { in: ({ value }) => `The string ${value} is not correct.` }, validationMessages: { in: ({ value }) => `The string ${value} is not correct.` },
errorBehavior: 'live', validationBehavior: 'live',
value: 'other value' value: 'other value'
}, },
scopedSlots: { scopedSlots: {
default: `<div><span v-for="error in props.context.allErrors">{{ error.message }}</span></div>` default: `<div><span v-for="error in props.context.violations">{{ error.message }}</span></div>`
} }
}) })
await flushPromises() await flushPromises()
expect(wrapper.find('span').text()).toBe('The string other value is not correct.') 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, { const wrapper = mount(FormularioInput, {
propsData: { propsData: {
name: 'test', name: 'test',
@ -115,18 +115,14 @@ describe('FormularioInput', () => {
expect(wrapper.find('span').exists()).toBe(false) 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, { const wrapper = mount(FormularioInput, {
propsData: { propsData: {
name: 'test', name: 'test',
validation: 'required|foobar', validation: 'required|foobar',
validationMessages: { validationRules: { foobar: async ({ value }) => value === 'foo' },
foobar: 'failed the foobar check' validationMessages: { foobar: 'failed the foobar check' },
}, validationBehavior: 'live',
validationRules: {
foobar: async ({ value }) => value === 'foo'
},
errorBehavior: 'live',
value: 'bar' value: 'bar'
}, },
scopedSlots: { scopedSlots: {
@ -137,22 +133,18 @@ describe('FormularioInput', () => {
expect(wrapper.find('span').text()).toBe('failed the foobar check') 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, { const wrapper = mount(FormularioInput, {
propsData: { propsData: {
name: 'test', name: 'test',
value: 'bar',
validation: 'required|foobar', validation: 'required|foobar',
validationMessages: { validationRules: { foobar: ({ value }) => value === 'foo' },
foobar: 'failed the foobar check' validationMessages: { foobar: 'failed the foobar check' },
}, validationBehavior: 'live',
validationRules: {
foobar: ({ value }) => value === 'foo'
},
errorBehavior: 'live',
value: 'bar'
}, },
scopedSlots: { scopedSlots: {
default: `<div><span v-for="error in props.context.allErrors">{{ error.message }}</span></div>` default: `<div><span v-for="error in props.context.violations">{{ error.message }}</span></div>`
} }
}) })
await flushPromises() await flushPromises()
@ -163,9 +155,9 @@ describe('FormularioInput', () => {
const wrapper = mount(FormularioInput, { const wrapper = mount(FormularioInput, {
propsData: { propsData: {
name: 'test', name: 'test',
value: 'bar',
validation: 'required|globalRule', validation: 'required|globalRule',
errorBehavior: 'live', validationBehavior: 'live',
value: 'bar'
} }
}) })
await flushPromises() await flushPromises()
@ -175,10 +167,10 @@ describe('FormularioInput', () => {
it('Emits correct validation event', async () => { it('Emits correct validation event', async () => {
const wrapper = mount(FormularioInput, { const wrapper = mount(FormularioInput, {
propsData: { propsData: {
validation: 'required',
errorBehavior: 'live',
value: '',
name: 'fieldName', name: 'fieldName',
value: '',
validation: 'required',
validationBehavior: 'live',
} }
}) })
await flushPromises() await flushPromises()
@ -197,31 +189,48 @@ describe('FormularioInput', () => {
it('Can bail on validation when encountering the bail rule', async () => { it('Can bail on validation when encountering the bail rule', async () => {
const wrapper = mount(FormularioInput, { 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(); await flushPromises();
expect(wrapper.vm.context.violations.length).toBe(1); 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, { 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(); await flushPromises();
expect(wrapper.vm.context.violations.length).toBe(2); 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, { 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(); await flushPromises();
expect(wrapper.vm.context.violations.length).toBe(2); 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, { 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(); await flushPromises();
expect(wrapper.vm.context.violations.length).toBe(1); 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 () => { it('can bail in the middle of the rule set with a modifier', async () => {
const wrapper = mount(FormularioInput, { 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(); await flushPromises();
expect(wrapper.vm.context.violations.length).toBe(2); 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, { const wrapper = mount(FormularioInput, {
propsData: { propsData: {
validation: 'required',
errorBehavior: 'submit',
name: 'test', name: 'test',
validation: 'required',
validationBehavior: 'submit',
}, },
scopedSlots: { scopedSlots: {
default: ` default: `
@ -253,18 +266,26 @@ describe('FormularioInput', () => {
}) })
expect(wrapper.find('span').exists()).toBe(false) expect(wrapper.find('span').exists()).toBe(false)
wrapper.find('input').trigger('input') wrapper.find('input').trigger('input')
wrapper.find('input').trigger('blur') wrapper.find('input').trigger('blur')
await flushPromises() await flushPromises()
expect(wrapper.find('span').exists()).toBe(false) 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, { const wrapper = mount(FormularioForm, {
propsData: { name: 'test' }, propsData: { name: 'test' },
slots: { slots: {
default: ` default: `
<FormularioInput v-slot="inputProps" validation="required" name="testinput" error-behavior="submit"> <FormularioInput
v-slot="inputProps"
name="testinput"
validation="required"
validation-behavior="submit"
>
<span v-for="error in inputProps.context.allErrors">{{ error.message }}</span> <span v-for="error in inputProps.context.allErrors">{{ error.message }}</span>
</FormularioInput> </FormularioInput>
` `
@ -272,11 +293,13 @@ describe('FormularioInput', () => {
}) })
await flushPromises() await flushPromises()
expect(wrapper.find('span').exists()).toBe(false) expect(wrapper.find('span').exists()).toBe(false)
wrapper.trigger('submit') wrapper.trigger('submit')
await flushPromises() await flushPromises()
expect(wrapper.find('span').exists()).toBe(true) expect(wrapper.find('span').exists()).toBe(true)
}) })
}) })