message: test: increase coverage for the vnode helper
diff: @@ -11,7 +11,6 @@ Vue.component('ValidationObserver', ValidationObserver);
  const DEFAULT_REQUIRED_MESSAGE = 'The {field} is required.';
  -describe('Validation Provider Component', () => {
  test('renders its tag attribute', () => {
  const wrapper = mount(
  {
  @@ -824,4 +823,102 @@ describe('Validation Provider Component', () => {
  await flushPromises();
  expect(wrapper.find('#error').text()).toBe('WRONG!');
  });
  +
  +describe('HTML5 Rule inference', () => {
  + test('Required and email rules', async () => {
  + const wrapper = mount(
  + {
  + data: () => ({ val: '1' }),
  + template: `
  + <ValidationProvider v-slot="{ errors }">
  + <input type="email" required v-model="val">
  + <p id="error">{{ errors[0] }}</p>
  + </ValidationProvider>
  + `
  + },
  + { localVue: Vue, sync: false }
  + );
  +
  + await flushPromises();
  + expect(wrapper.find('#error').text()).toBe('');
  + wrapper.find('input').setValue('');
  + await flushPromises();
  + expect(wrapper.find('#error').text()).toContain('is required');
  +
  + // test inferred email value
  + wrapper.find('input').setValue('123');
  + await flushPromises();
  + expect(wrapper.find('#error').text()).toContain('email');
  + });
  +
  + test('regex and maxlength rules', async () => {
  + const wrapper = mount(
  + {
  + data: () => ({ val: '1' }),
  + template: `
  + <ValidationProvider v-slot="{ errors }">
  + <input type="text" pattern="[0-9]+" maxlength="2" v-model="val">
  + <p id="error">{{ errors[0] }}</p>
  + </ValidationProvider>
  + `
  + },
  + { localVue: Vue, sync: false }
  + );
  +
  + wrapper.find('input').setValue('a');
  + await flushPromises();
  + expect(wrapper.find('#error').text()).toContain('format is invalid');
  +
  + // test inferred regex
  + wrapper.find('input').setValue('123');
  + await flushPromises();
  + expect(wrapper.find('#error').text()).toContain('greater than 2');
  + });
  +
  + test('number and min_value and max_value', async () => {
  + const wrapper = mount(
  + {
  + data: () => ({ val: '1' }),
  + template: `
  + <ValidationProvider v-slot="{ errors }">
  + <input type="number" min="2" max="4" v-model="val">
  + <p id="error">{{ errors[0] }}</p>
  + </ValidationProvider>
  + `
  + },
  + { localVue: Vue, sync: false }
  + );
  +
  + // test min_value
  + wrapper.find('input').setValue('1');
  + await flushPromises();
  + expect(wrapper.find('#error').text()).toContain('must be 2');
  +
  + // test max_value
  + wrapper.find('input').setValue('5');
  + await flushPromises();
  + expect(wrapper.find('#error').text()).toContain('must be 4');
  + });
  +
  + test('select input required', async () => {
  + const wrapper = mount(
  + {
  + data: () => ({ val: '1' }),
  + template: `
  + <ValidationProvider v-slot="{ errors }">
  + <select required v-model="val">
  + <option value="">1</option>
  + <option value="1">1</option>
  + </select>
  + <p id="error">{{ errors[0] }}</p>
  + </ValidationProvider>
  + `
  + },
  + { localVue: Vue, sync: false }
  + );
  +
  + wrapper.find('select').setValue('');
  + await flushPromises();
  + expect(wrapper.find('#error').text()).toContain('is required');
  + });
  });
  