fix: deep map schema fields against lookup components fixes #224 (#234)

* fix: deep map schema fields against lookup components

* test: add integration e2e with vee and lookup

Co-authored-by: Marina Mosti <[email protected]>

packages/formvuelate/tests/e2e/specs/SchemaFormFactory.e2e.js

@@ -3,6 +3,7 @@ import { mount } from '@cypress/vue'
 import { h, ref, shallowRef } from 'vue'
 import { SchemaFormFactory, useSchemaForm } from '../../../src/index'
 import LookupPlugin, { lookupSubSchemas } from '../../../../plugin-lookup/src/index'
+import VeeValidatePlugin from '../../../../plugin-vee-validate/src/index'
 import { BaseInput } from '../../utils/components'
 
 describe('SchemaFormFactory', () => {
@@ -70,4 +71,60 @@ describe('SchemaFormFactory', () => {
       cy.get('label').eq(3).should('have.text', 'Double nested text')
     })
   })
+
+  describe('with lookup and vee-validate', () => {
+    it('integrates lookup and vee plugins in nested schemas', () => {
+      const SCHEMA = [
+        {
+          model: 'firstName',
+          component: 'Text',
+          label: 'First Name'
+        },
+        {
+          model: 'nested',
+          component: 'SchemaForm',
+          schema: [
+            {
+              model: 'nestedfirstName',
+              component: 'Text',
+              label: 'First Name nested',
+              validations: value => value && value.length > 3
+            }
+          ]
+        }
+      ]
+
+      const SchemaFormWithPlugins = SchemaFormFactory([
+        LookupPlugin({
+          mapComponents: {
+            Text: BaseInput
+          }
+        }),
+        VeeValidatePlugin({})
+      ])
+
+      mount({
+        components: { SchemaFormWithPlugins },
+        setup () {
+          const model = ref({})
+          lookupSubSchemas(SchemaFormWithPlugins)
+          useSchemaForm(model)
+
+          const schemaRef = shallowRef(SCHEMA)
+
+          return () => h(SchemaFormWithPlugins, {
+            schema: schemaRef
+          })
+        }
+      })
+
+      cy.get('input').should('have.length', 2)
+      cy.get('label').eq(1).should('have.text', 'First Name nested')
+
+      cy.get('input').eq(1).type('Ma')
+      cy.get('.error').should('have.text', 'First Name nested is not valid.')
+
+      cy.get('input').eq(1).type('rina')
+    })
+  })
 })

packages/formvuelate/tests/utils/components.js

@@ -1,15 +1,23 @@
 import { h } from 'vue'
 
 export const BaseInput = {
-  props: ['label', 'modelValue'],
+  props: ['label', 'modelValue', 'validation'],
   render () {
     return [
       h('label', this.label),
       h('input', {
         ...this.$attrs,
         value: this.modelValue,
         onInput: ($event) => this.$emit('update:modelValue', $event.target.value)
-      })
+      }),
+      this.$props.validation?.errorMessage
+        ? h('div',
+          {
+            class: 'error'
+          },
+          this.$props.validation.errorMessage
+        )
+        : null
     ]
   }
 }

packages/plugin-lookup/src/index.js

@@ -57,17 +57,36 @@ export const mapElementsInSchema = (schema, fn) => schema.map(row => row.map(el
 * @returns {Array}
  */
 const mapComps = (schema, mapComponents) => {
-  return mapElementsInSchema(schema, el => {
+  function mapSchemaElement (el) {
     const newKey = mapComponents[el.component]
 
-    if (el.schema) return { ...el }
+    // recursively exhaust all sub schemas
+    if (el.schema) {
+      const schemaArray = Array.isArray(el.schema)
+        ? el.schema
+        : Object.keys(el.schema).map(model => {
+          return {
+            model,
+            ...el.schema[model]
+          }
+        })
+
+      return {
+        ...el,
+        component: mapComponents[el.component] || el.component,
+        schema: schemaArray.map(mapSchemaElement)
+      }
+    }
+
     if (!newKey) return { ...el }
 
     return {
       ...el,
       component: mapComponents[el.component]
     }
-  })
+  }
+
+  return mapElementsInSchema(schema, mapSchemaElement)
 }
 
 /**