refactor!: errorBehavior renamed to validationBehavior
This commit is contained in:
Zaytsev Kirill
parent
3f5735299d
commit
7b5d38923f
@ -49,18 +49,21 @@ export default class FormularioInput extends Vue {
|
||||
@Prop({ default: '' }) validation!: string|any[]
|
||||
@Prop({ default: () => ({}) }) validationRules!: Record<string, CheckRuleFn>
|
||||
@Prop({ default: () => ({}) }) validationMessages!: Record<string, CreateMessageFn|string>
|
||||
@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<any> = Promise.resolve()
|
||||
public proxy: any = this.getInitialValue()
|
||||
|
||||
private localErrors: string[] = []
|
||||
private violations: Violation[] = []
|
||||
private pendingValidation: Promise<any> = 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()
|
||||
}
|
||||
}
|
||||
|
||||
@ -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: `<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')
|
||||
})
|
||||
|
||||
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: `<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()
|
||||
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: `<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()
|
||||
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: `<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()
|
||||
@ -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: `
|
||||
<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>
|
||||
</FormularioInput>
|
||||
`
|
||||
@ -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)
|
||||
})
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user