Merge pull request #19 from 14nrv/dev

feat: allow VeeValidate simple validation rules

README.md

@@ -2,9 +2,7 @@
 [![Build Status](https://travis-ci.org/14nrv/vue-form-json.svg?branch=dev)](https://travis-ci.org/14nrv/vue-form-json)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/af5a15db118dac6343ab/test_coverage)](https://codeclimate.com/github/14nrv/vue-form-json/test_coverage)
 [![Maintainability](https://api.codeclimate.com/v1/badges/af5a15db118dac6343ab/maintainability)](https://codeclimate.com/github/14nrv/vue-form-json/maintainability)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
-![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)
 
 # vue-form-json
 

src/components/Fields/Control.vue

@@ -87,7 +87,7 @@ export default {
           max_value: isInputNumber ? max || defaultMax : false
         })
 
-      return validation
+      return { ...validation, ...this.item.validation }
     }
   },
   props: {

src/components/Form/Form.spec.js

@@ -29,6 +29,7 @@ const RADIO_VALUE = 'Radio-One'
 const NUMBER_VALUE = '18'
 const ZIP_VALUE = '12345'
 const PASSWORD_VALUE = ZIP_VALUE
+const BIG_VALUE = ZIP_VALUE
 
 const getInitialValue = (label, node, attribute) =>
   fields
@@ -43,6 +44,7 @@ const allFields = flatten(fields)
   .filter(field => !['html', 'slot'].includes(Object.keys(field)[0]))
 const allNormalInputLabel = allFields
   .filter(x => !x.type || x.type === 'tel')
+  .filter(x => !x.validation)
   .map(x => x.label)
 
 const fieldWithPattern = allFields.find(({ pattern }) => pattern)
@@ -76,6 +78,8 @@ describe('Form', () => {
     b.type(NUMBER_VALUE, 'input[name=age]')
     b.type(ZIP_VALUE, 'input[name=zip]')
     b.type(DEFAULT_VALUE, 'textarea[name=message]')
+    b.type(DEFAULT_VALUE, 'input[name=small]')
+    b.type(BIG_VALUE, 'input[name=big]')
   }
 
   const getFormValues = () => {
@@ -92,7 +96,9 @@ describe('Form', () => {
       Email: EMAIL_VALUE,
       Radio: RADIO_VALUE,
       Age: NUMBER_VALUE,
-      Zip: ZIP_VALUE
+      Zip: ZIP_VALUE,
+      big: BIG_VALUE,
+      small: DEFAULT_VALUE
     }
   }
 
@@ -108,7 +114,6 @@ describe('Form', () => {
   it('set input type text and required by default', () => {
     const LABEL_INPUT = 'testInput'
     const LABEL_INPUT_SLUGIFY = slug(LABEL_INPUT)
-
     wrapper.setProps({ formFields: [{ label: LABEL_INPUT }] })
 
     b.domHas(`input[name=${LABEL_INPUT_SLUGIFY}]`)
@@ -120,7 +125,6 @@ describe('Form', () => {
 
   it('set not required', () => {
     const label = 'plop'
-
     wrapper.setProps({ formFields: [{ label, isRequired: false }] })
 
     b.domHasNot('.label sup.has-text-grey-light')
@@ -129,10 +133,7 @@ describe('Form', () => {
   })
 
   it('hide label', () => {
-    const label = 'plop'
-
-    wrapper.setProps({ formFields: [{ label, showLabel: false }] })
-
+    wrapper.setProps({ formFields: [{ label: 'plop', showLabel: false }] })
     b.domHasNot('.label')
   })
 
@@ -148,7 +149,6 @@ describe('Form', () => {
 
   it('hide error icon', () => {
     b.domHas($errorIcon)
-
     wrapper.setProps({ hasIcon: false })
 
     b.domHasNot($errorIcon)
@@ -165,7 +165,6 @@ describe('Form', () => {
 
   it('validate on blur', async () => {
     const isDanger = '.is-danger'
-
     b.domHas(`${$inputLastName}:not(${isDanger})`)
 
     b.type('la', $inputLastName, 'blur')
@@ -199,12 +198,6 @@ describe('Form', () => {
     b.domHasNot($errorMessage)
   })
 
-  it('have custom attr', () => {
-    b.domHas('.field[data-attr=dataAttrOnField]')
-    b.domHas('input[data-attr=testingAttrFromJson]')
-    b.domHas('input.input.is-rounded')
-  })
-
   describe('slot', () => {
     const slotContainer = '[data-test=slot]'
 
@@ -316,7 +309,6 @@ describe('Form', () => {
       wrapper.setMethods({ resetForm: resetFormStub })
 
       b.click($reset)
-
       expect(resetFormStub).toHaveBeenCalled()
     })
   })

src/components/Form/FormAttr.spec.js

@@ -14,9 +14,7 @@ describe('custom css class', () => {
   beforeEach(() => {
     wrapper = mount(Form, {
       localVue,
-      provide: () => ({
-        $validator: v
-      }),
+      provide: () => ({ $validator: v }),
       propsData: {
         formFields: [{ label: 'default' }],
         formName: FORM_NAME

src/components/Form/FormHtml.spec.js

@@ -16,9 +16,7 @@ describe('Form with html content inside json', () => {
   beforeEach(() => {
     wrapper = mount(Form, {
       localVue,
-      provide: () => ({
-        $validator: v
-      }),
+      provide: () => ({ $validator: v }),
       propsData: {
         formFields: [{ label: 'defaultLabel' }],
         formName: FORM_NAME

src/components/Form/FormRules.spec.js

@@ -0,0 +1,65 @@
+import Helpers from 'mwangaben-vthelpers'
+import VeeValidate from 'vee-validate'
+import { mount, createLocalVue } from '@vue/test-utils'
+import Form from '@/components/Form'
+
+const v = new VeeValidate.Validator()
+const localVue = createLocalVue()
+localVue.use(VeeValidate)
+
+let wrapper, b
+
+const FORM_NAME = 'testFormName'
+const WORD_IN_IS_NOT_RULE = 'small'
+
+const $inputSmall = 'input#small'
+const $isDanger = '.is-danger'
+const $helpIsDanger = `.help${$isDanger}`
+
+describe('Form with html content inside json', () => {
+  beforeEach(() => {
+    wrapper = mount(Form, {
+      localVue,
+      provide: () => ({
+        $validator: v
+      }),
+      propsData: {
+        formFields: [{
+          label: 'small',
+          validation: { is_not: WORD_IN_IS_NOT_RULE, numeric: true }
+        }],
+        formName: FORM_NAME
+      }
+    })
+    b = new Helpers(wrapper)
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
+  it('apply custom rules in order', async () => {
+    b.domHasNot($isDanger)
+
+    b.type(WORD_IN_IS_NOT_RULE, $inputSmall)
+    await wrapper.vm.$nextTick()
+
+    b.domHas($isDanger)
+    b.see(`The ${WORD_IN_IS_NOT_RULE} value is not valid.`, $helpIsDanger)
+
+    b.type('not-small', $inputSmall)
+    await wrapper.vm.$nextTick()
+
+    b.see('The small field may only contain numeric characters.', $helpIsDanger)
+
+    b.type(0, $inputSmall)
+    await wrapper.vm.$nextTick()
+
+    b.domHasNot($isDanger)
+
+    expect(wrapper.vm.isFormValid).toBeTruthy()
+
+    const $inputSubmit = b.find('input[type=submit]')
+    expect($inputSubmit.attributes().disabled).toBe(undefined)
+  })
+})

src/components/Form/fields.json

@@ -76,7 +76,7 @@
     }
   ],
   {
-    "html": "<p class='label'>Custom attr<sup class='has-text-grey-light is-size-7'> *</sup></p>",
+    "html": "<p class='label'>Custom attr & validation<sup class='has-text-grey-light is-size-7'> *</sup></p>",
     "attr": {
       "class": "labelDefaultMb has-text-centered",
       "data-test": "dataTestFromJson"
@@ -85,19 +85,24 @@
   [
     {
       "label": "small",
-      "placeholder": "small",
+      "placeholder": "no string small",
       "showLabel": false,
-      "isRequired": false,
+      "value": "small",
+      "validation": {
+        "is_not": "small"
+      },
       "attr": {
         "data-attr": "testingAttrFromJson",
         "class": "is-rounded"
       }
     },
     {
       "label": "big",
-      "placeholder": "big",
+      "placeholder": "must be a numeric value",
       "showLabel": false,
-      "isRequired": false,
+      "validation": {
+        "numeric": true
+      },
       "field": {
         "attr": {
           "data-attr": "dataAttrOnField"