From c3f6fa1d95fe7a75ee737680fa2a07ab56f9b35e Mon Sep 17 00:00:00 2001 From: Liberty <zhuizhuidea@gmail.com> Date: Sun, 10 Sep 2023 06:47:25 +0800 Subject: [PATCH] test(subform): added default content test --- examples/views/formEditorConfig.vue | 5 ++ .../Config/components/SubformDefaultValue.vue | 28 ++++++++--- packages/utils/generateOptions.js | 15 ++++++ test/formTypes/subform.test.js | 48 +++++++++++++++++-- test/utils.js | 33 ++----------- 5 files changed, 91 insertions(+), 38 deletions(-) diff --git a/examples/views/formEditorConfig.vue b/examples/views/formEditorConfig.vue index 29507e0..82d93a1 100644 --- a/examples/views/formEditorConfig.vue +++ b/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] diff --git a/packages/formEditor/components/Panels/Config/components/SubformDefaultValue.vue b/packages/formEditor/components/Panels/Config/components/SubformDefaultValue.vue index d152218..9a23d1f 100644 --- a/packages/formEditor/components/Panels/Config/components/SubformDefaultValue.vue +++ b/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> diff --git a/packages/utils/generateOptions.js b/packages/utils/generateOptions.js index 79c39a3..bd82d6b 100644 --- a/packages/utils/generateOptions.js +++ b/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 +} diff --git a/test/formTypes/subform.test.js b/test/formTypes/subform.test.js index 8c83188..0d93c87 100644 --- a/test/formTypes/subform.test.js +++ b/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) }) }) diff --git a/test/utils.js b/test/utils.js index 419615d..a985b05 100644 --- a/test/utils.js +++ b/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 }