test(subform): added default content test

examples/views/formEditorConfig.vue

@@ -41,6 +41,11 @@ watch(lang, (newLang) => {
         node.columns[0].rows[0].columns[0].label = `${node.columns[0].label} > ${node.columns[0].rows[0].columns[0].type}`
         store.layouts.push(node.columns[0].rows[0].columns[0])
         break
+      case 'subform':
+        node.columns[0].list[0].push(erGeneratorData(erComponentsConfig.fieldsConfig[1].list[0], true, 'en'))
+        // node.columns[0].rows[0].columns[0].label = `${node.columns[0].label} > ${node.columns[0].rows[0].columns[0].type}`
+        // store.layouts.push(node.columns[0].rows[0].columns[0])
+        break
     }
   })
   all.value = [...store.fields, ...store.layouts]

packages/formEditor/components/Panels/Config/components/SubformDefaultValue.vue

@@ -1,4 +1,5 @@
 <script>
+import _ from 'lodash-es'
 import hooks from '@ER/hooks'
 import { ref, inject, nextTick, reactive, computed, watch, onMounted, provide, onBeforeUnmount } from 'vue'
 import utils from '@ER/utils'
@@ -24,7 +25,8 @@ const {
   lang
 } = hooks.useI18n()
 const {
-  target
+  target,
+  state
 } = hooks.useTarget()
 const ns = hooks.useNamespace('ConfigSubformDefaultValueComponent')
 const dialogVisible = ref(false)
@@ -35,10 +37,20 @@ const handleClosed = () => {
 }
 const openDialog = async () => {
   dialogVisible.value = true
-  const rawData = ER.getData()
-  const inline = ER.wrapElement({})
-  inline.columns = [target.value.id]
-  rawData.list = [inline]
+  let rawData = {}
+  if (state.mode === 'config') {
+    rawData = utils.generateData()
+    rawData.list = [target.value]
+    rawData = utils.disassemblyData1(_.cloneDeep(rawData))
+  } else {
+    rawData = ER.getData()
+    rawData.list = [{
+      type: 'inline',
+      columns: [
+        target.value.id
+      ]
+    }]
+  }
   await nextTick()
   const value = {}
   value[target.value.key] = target.value.options.defaultValue
@@ -97,7 +109,11 @@ onMounted(() => {
           :isShowCompleteButton="false"
         />
       </el-scrollbar>
-      <el-button :class="[ns.e('button')]" @click="handleAction(1)">
+      <el-button
+        :class="[ns.e('button')]"
+        @click="handleAction(1)"
+        v-bind="utils.addTestId('configPanel:defaultValue:addButton')"
+      >
         {{ t('er.public.add')}}
       </el-button>
     </div>

packages/utils/generateOptions.js

@@ -1,4 +1,6 @@
 import { nanoid } from './nanoid'
+import { globalConfig } from '@ER/formEditor/componentsConfig.js'
+import _ from 'lodash-es'
 export const generateOptions = (len) => {
   const result = []
   while (len--) {
@@ -9,3 +11,16 @@ export const generateOptions = (len) => {
   }
   return result
 }
+export const generateData = (layoutType = 1) => {
+  const result = {
+    config: _.cloneDeep(globalConfig)
+  }
+  result.logic = result.data = {}
+  if (layoutType === 1) {
+    result.list = []
+  }
+  if (layoutType === 2) {
+    result.layout = []
+  }
+  return result
+}

test/formTypes/subform.test.js

@@ -1,5 +1,5 @@
 import { describe, assert, expect, test, beforeEach, beforeAll, vi } from 'vitest'
-import { mount, flushPromises, enableAutoUnmount, config } from '@vue/test-utils'
+import { mount, flushPromises, enableAutoUnmount, config, DOMWrapper } from '@vue/test-utils'
 import erGeneratorData from '@ER/formEditor/generatorData.js'
 import * as erComponentsConfig from '@ER/formEditor/componentsConfig.js'
 import _ from 'lodash-es'
@@ -61,7 +61,7 @@ describe('Field: subform', () => {
     await flushPromises()
     expect(configWrapper.find(utils.getTestId('configPanel:defaultValue:button')).exists()).toBe(false)
   })
-  test.only('Only one child', async () => {
+  test('Only one child', async () => {
     const newField = _.cloneDeep(field)
     newField.columns[0] = newField.columns[0].id
     const subForm = erGeneratorData(_.cloneDeep(erComponentsConfig.fieldsConfig[2].list[5]), true, 'en')
@@ -80,6 +80,10 @@ describe('Field: subform', () => {
     store.sector = subForm1.columns[0]
     await flushPromises()
     expect(configWrapper.find(utils.getTestId('configPanel:defaultValue:button')).exists()).toBe(true)
+    await configWrapper.find(utils.getTestId('configPanel:defaultValue:button')).trigger('click')
+    await flushPromises()
+    const setDefaultEl = new DOMWrapper(document.querySelector('.Everright-formEditor-ConfigSubformDefaultValueComponent'))
+    expect(setDefaultEl.findAll(utils.getTestId('SubformLayout:item'))).toHaveLength(0)
   })
   test('Only one child: has 2 default contents', async () => {
     const values = ['1', '2']
@@ -103,8 +107,27 @@ describe('Field: subform', () => {
     await previewWrapper.find(utils.getTestId('SubformLayout:addButton')).find('button').trigger('click')
     await flushPromises()
     expect(previewWrapper.findAll(utils.getTestId('SubformLayout:item'))[2].find('input').element.value).toEqual('')
+    const subForm1 = erGeneratorData(_.cloneDeep(erComponentsConfig.fieldsConfig[2].list[5]), true, 'en')
+    subForm1.columns[0].list[0].push(_.cloneDeep(field))
+    subForm1.columns[0].options.defaultValue = values.map(e => {
+      const result = {}
+      result[field.columns[0].key] = e
+      return result
+    })
+    store.fields.push(subForm1.columns[0])
+    store.sector = subForm1.columns[0]
+    await flushPromises()
+    expect(configWrapper.find(utils.getTestId('configPanel:defaultValue:button')).exists()).toBe(true)
+    await configWrapper.find(utils.getTestId('configPanel:defaultValue:button')).trigger('click')
+    await flushPromises()
+    const setDefaultEl = new DOMWrapper(document.querySelector('.Everright-formEditor-ConfigSubformDefaultValueComponent'))
+    expect(setDefaultEl.findAll(utils.getTestId('SubformLayout:item'))).toHaveLength(2)
+    expect(setDefaultEl.findAll(utils.getTestId('SubformLayout:item')).map(e => e.find('input').element.value)).toEqual(values)
+    await setDefaultEl.find(utils.getTestId('configPanel:defaultValue:addButton')).trigger('click')
+    await flushPromises()
+    expect(setDefaultEl.findAll(utils.getTestId('SubformLayout:item'))[2].find('input').element.value).toEqual('')
   })
-  test('Only one child: has 2 default contents && field has default', async () => {
+  test.only('Only one child: has 2 default contents && field has default', async () => {
     const values = ['1', '2']
     const addValue = 'everright-formeditor'
     const newField = _.cloneDeep(field)
@@ -128,5 +151,24 @@ describe('Field: subform', () => {
     await previewWrapper.find(utils.getTestId('SubformLayout:addButton')).find('button').trigger('click')
     await flushPromises()
     expect(previewWrapper.findAll(utils.getTestId('SubformLayout:item'))[2].find('input').element.value).toEqual(addValue)
+    const subForm1 = erGeneratorData(_.cloneDeep(erComponentsConfig.fieldsConfig[2].list[5]), true, 'en')
+    subForm1.columns[0].list[0].push(_.cloneDeep(field))
+    subForm1.columns[0].options.defaultValue = values.map(e => {
+      const result = {}
+      result[field.columns[0].key] = e
+      return result
+    })
+    store.fields.push(subForm1.columns[0])
+    store.sector = subForm1.columns[0]
+    await flushPromises()
+    expect(configWrapper.find(utils.getTestId('configPanel:defaultValue:button')).exists()).toBe(true)
+    await configWrapper.find(utils.getTestId('configPanel:defaultValue:button')).trigger('click')
+    await flushPromises()
+    const setDefaultEl = new DOMWrapper(document.querySelector('.Everright-formEditor-ConfigSubformDefaultValueComponent'))
+    expect(setDefaultEl.findAll(utils.getTestId('SubformLayout:item'))).toHaveLength(2)
+    expect(setDefaultEl.findAll(utils.getTestId('SubformLayout:item')).map(e => e.find('input').element.value)).toEqual(values)
+    await setDefaultEl.find(utils.getTestId('configPanel:defaultValue:addButton')).trigger('click')
+    await flushPromises()
+    expect(setDefaultEl.findAll(utils.getTestId('SubformLayout:item'))[2].find('input').element.value).toEqual(addValue)
   })
 })

test/utils.js

@@ -1,7 +1,8 @@
 import { mount } from '@vue/test-utils'
-import { erFormEditor, erFormPreview, erFormConfig } from '@ER/formEditor/index.js'
+import { erFormEditor, erFormPreview, erFormConfig, utils } from '@ER/formEditor/index.js'
 import ElementPlus from 'element-plus'
 import Vant from 'vant'
+import { generateData } from '@ER/utils/generateOptions.js'
 
 export const _mount = (template, data, otherObj) => mount(
   {
@@ -25,34 +26,8 @@ export const _mount = (template, data, otherObj) => mount(
   }
 )
 export const wrapLayoutDataByLayoutType = (layout, fields = [], layoutType = 1) => {
-  const result = {
-    config: {
-      isSync: true,
-      pc: {
-        size: 'default',
-        labelPosition: 'left',
-        completeButton: {
-          text: 'Submit',
-          color: '',
-          backgroundColor: ''
-        }
-      },
-      mobile: {
-        labelPosition: 'left',
-        completeButton: {
-          text: 'Submit',
-          color: '',
-          backgroundColor: ''
-        }
-      }
-    },
-    logic: {},
-    data: {},
-    fields
-    // fields: [
-    //   field.columns[0]
-    // ]
-  }
+  const result = utils.generateData(layoutType)
+  result.fields = fields
   if (layoutType === 1) {
     result.list = layout
   }