Merge pull request #55 from 14nrv/dev

14nrv · Apr 13, 2021 · 4e635ba · 4e635ba
2 parents bf65ec3 + e6e4ade
commit 4e635ba
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 20 deletions.
diff --git a/src/components/Fields/Control.vue b/src/components/Fields/Control.vue
@@ -7,19 +7,19 @@
     :immediate="!!item.value"
     v-slot="{ errors, ariaInput }")
 
-    .control(:class="{'has-icons-left': item.iconLeft, 'has-icons-right': shouldShowErrorIcon}")
+    div(:class="{ 'control': !dynamicComponent, 'has-icons-left': item.iconLeft, 'has-icons-right': shouldShowErrorIcon }")
       component(v-model.lazy.trim="value",
-                v-bind="getDynamicComponentAttrs"
                 :item="item",
                 :is="dynamicComponent || `app-${getComponent}`",
                 :error="errors[0]",
                 :ariaInput="ariaInput")
 
-      span.icon.is-small.is-left(v-if="item.iconLeft")
-        i.fas(:class="`fa-${item.iconLeft}`")
-      span.icon.is-small.is-right(v-if="shouldShowErrorIcon")
-        i.fas.fa-exclamation-triangle
-      p.help.is-danger(v-if="errors.length") {{ errors[0] }}
+      span(v-if="!dynamicComponent")
+        span.icon.is-small.is-left(v-if="item.iconLeft")
+          i.fas(:class="`fa-${item.iconLeft}`")
+        span.icon.is-small.is-right(v-if="shouldShowErrorIcon")
+          i.fas.fa-exclamation-triangle
+        p.help.is-danger(v-if="errors.length") {{ errors[0] }}
 </template>
 
 <script>
@@ -84,10 +84,6 @@ export default {
     getComponent () {
       return this.isNormalInput ? 'input' : this.item.type
     },
-    getDynamicComponentAttrs () {
-      const { is, attr } = this.item
-      return is && attr ? attr : {}
-    },
     getRules () {
       const { rules = {}, pattern } = this.item
       rules.required = this.item.isRequired !== false

diff --git a/src/components/Form/Form.spec.js b/src/components/Form/Form.spec.js
@@ -1,6 +1,6 @@
 import matchers from 'jest-vue-matcher'
 import { mount, createLocalVue, createWrapper } from '@vue/test-utils'
-import { flatten, pickAll, map } from 'ramda'
+import { flatten, isEmpty, map, pickAll } from 'ramda'
 import { camelizeKeys, slug } from '@/helpers'
 import { extendRules, flush } from '@/helpers/test'
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
@@ -338,7 +338,7 @@ describe('Form', () => {
         if (hasResetAfterSubmit) wrapper.setProps({ resetFormAfterSubmit: true })
 
         const getValues = () => wrapper.vm.allControls.map(({ value }) => value)
-        const hasAllValuesEmpty = () => getValues().every(value => value === '')
+        const hasAllValuesEmpty = () => getValues().every(value => isEmpty(value))
 
         await fillForm()
         expect(hasAllValuesEmpty()).toBeFalsy()

diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
@@ -173,12 +173,12 @@ export default {
     clearValues () {
       const fieldsWithArrayValue = ['radio', 'checkbox']
 
-      this.allControls.map(x => { x.value = '' })
+      this.allControls.map(x => { x.value = Array.isArray(x.value) ? [] : '' })
 
       const subValues = this.allControls.filter(x => x.$children[0].$children[0].value)
       subValues.map(x => {
-        const { type } = x.$children[0].$children[0].item
-        const hasArrayAsValue = fieldsWithArrayValue.includes(type)
+        const { item, value } = x.$children[0].$children[0]
+        const hasArrayAsValue = fieldsWithArrayValue.includes(item.type) || Array.isArray(value)
 
         x.$children[0].$children[0].value = hasArrayAsValue ? [] : ''
       })

diff --git a/src/components/Form/FormComponent.spec.js b/src/components/Form/FormComponent.spec.js
@@ -39,6 +39,10 @@ const CustomField = Vue.component('CustomField', {
     item: {
       type: Object,
       required: true
+    },
+    error: {
+      type: String,
+      default: null
     }
   },
   mounted () {
@@ -50,7 +54,7 @@ const CustomField = Vue.component('CustomField', {
     }
   },
   render (h) {
-    return <input vOn:input={ this.handleClick } />
+    return <div><input vOn:input={this.handleClick} attrs={this.item.attr} /><p class="is-danger">{ this.error }</p></div>
   }
 })
 

diff --git a/src/components/Form/FormError.spec.js b/src/components/Form/FormError.spec.js
@@ -60,15 +60,15 @@ describe('Form Error', () => {
   it('show error if input value has not min length', async () => {
     const LABEL_INPUT_SLUGIFY = slug(LABEL_INPUT)
     const $inputTest = `input[name=${LABEL_INPUT_SLUGIFY}]`
-    const $error = `${$inputTest} ~ .help.is-danger`
+    const $error = `${$inputTest} ~ span .help.is-danger`
 
     expect($error).not.toBeADomElement()
 
     type('123456789', $inputTest)
     await flush()
 
     expect('.is-danger').toBeADomElement()
-    expect(`${$inputTest} ~ .icon.is-right`).toBeADomElement()
+    expect(`${$inputTest} ~ span .icon.is-right`).toBeADomElement()
 
     expect($error).toHaveText(`The ${LABEL_INPUT_SLUGIFY} field must be at least ${MIN_LENGTH} characters`, $error)
 
@@ -86,7 +86,7 @@ describe('Form Error', () => {
 
       it(`set ${isMinValue ? 'min' : 'max'} value control on input number`, async () => {
         const inputValue = (isMinValue ? val - 1 : val + 1).toString()
-        const $error = `${INPUT_NUMBER} ~ .help.is-danger`
+        const $error = `${INPUT_NUMBER} ~ span .help.is-danger`
 
         type(inputValue, INPUT_NUMBER)
         expect(INPUT_NUMBER).toHaveValue(inputValue)