test: FloatForm

ColeWang · Jun 25, 2024 · a310cc6 · a310cc6
1 parent 3809ab8
commit a310cc6
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 76 deletions.
diff --git a/src/packages/descriptions/__tests__/Descriptions.test.jsx b/src/packages/descriptions/__tests__/Descriptions.test.jsx
@@ -42,6 +42,7 @@ describe('Descriptions', () => {
         })
         expect(wrapper.exists()).toBeTruthy()
     })
+
     it(`render slots`, async () => {
         const wrapper = mount(Descriptions, {
             props: { dataSource },
@@ -53,6 +54,7 @@ describe('Descriptions', () => {
         })
         expect(wrapper.exists()).toBeTruthy()
     })
+
     it(`test request`, async () => {
         const request = () => Promise.resolve({ data: dataSource })
         const wrapper = mount(Descriptions, {
@@ -65,6 +67,7 @@ describe('Descriptions', () => {
         const loadEvent = wrapper.emitted('load')
         expect(loadEvent).toHaveLength(2)
     })
+
     it(`test request error`, async () => {
         const request = () => Promise.reject('error')
         const wrapper = mount(Descriptions, {

diff --git a/src/packages/form/__tests__/BaseForm.test.jsx b/src/packages/form/__tests__/BaseForm.test.jsx
@@ -0,0 +1,100 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { last } from 'lodash-es'
+import { Button, Tooltip } from 'ant-design-vue'
+import { BaseForm, Field, HocField, Submitter } from '../index'
+import mountTest from '../../../../tests/shared/mountTest'
+
+describe('Form', () => {
+    const FieldDemo = HocField('text')
+
+    mountTest(Submitter)
+    mountTest(Field)
+    mountTest(FieldDemo)
+    mountTest(BaseForm)
+
+    it(`test Submitter emits`, async () => {
+        const wrapper = mount(Submitter)
+        const buttonAll = wrapper.findAll('button')
+        await Promise.all(buttonAll.map((button) => {
+            return button.trigger('click')
+        }))
+        expect(wrapper.emitted()).toHaveProperty('reset')
+        expect(wrapper.emitted()).toHaveProperty('submit')
+    })
+
+    it(`test Field namePath`, async () => {
+        const wrapper = mount(Field, {
+            props: { formItemProps: { name: ['demo'] } }
+        })
+        expect(wrapper.exists()).toBeTruthy()
+    })
+
+    it(`test BaseForm model change`, async () => {
+        const wrapper = mount(BaseForm, {
+            slots: {
+                default: () => <FieldDemo name={'demo'}/>
+            }
+        })
+        const changeEvents = wrapper.emitted('valuesChange')
+        // update:value
+        await wrapper.find('input').setValue('new value')
+        expect(wrapper.find('input').element.value).toBe('new value')
+        expect(last(changeEvents)).toEqual([{ demo: 'new value' }])
+        // getModelValue
+        expect(wrapper.vm.getModelValue(['demo'])).toEqual('new value')
+        // setModelValue
+        expect(wrapper.vm.setModelValue(['demo'], 'new text')).toEqual({ demo: 'new text' })
+        expect(last(changeEvents)).toEqual([{ demo: 'new text' }])
+        // updateModelValue
+        expect(wrapper.vm.updateModelValue(['demo'], (value) => {
+            return value + ' update'
+        })).toEqual({ demo: 'new text update' })
+        expect(last(changeEvents)).toEqual([{ demo: 'new text update' }])
+        // deleteModelValue
+        expect(wrapper.vm.deleteModelValue(['demo'])).toEqual(true)
+        expect(last(changeEvents)).toEqual([{}])
+    })
+
+    it(`test BaseForm submit`, async () => {
+        const transform = vi.fn(() => ({}))
+        const finishFailed = vi.fn()
+        const wrapper = mount(BaseForm, {
+            props: {
+                transform,
+                onFinishFailed: finishFailed,
+                scrollToFirstError: true,
+                submitOnReset: true
+            },
+            slots: {
+                default: () => {
+                    return [
+                        <Tooltip>getPopupContainer</Tooltip>,
+                        <FieldDemo name={'demo'} required={true}/>,
+                        <Button html-type={'submit'}>提交</Button>
+                    ]
+                }
+            }
+        })
+        await wrapper.find('button').trigger('submit')
+        await new Promise((resolve) => setTimeout(resolve, 100))
+        expect(finishFailed).toHaveBeenCalled()
+        // submit
+        wrapper.vm.submit()
+        await new Promise((resolve) => setTimeout(resolve, 100))
+        expect(wrapper.emitted()).toHaveProperty('finishFailed')
+        // input
+        await wrapper.find('input').setValue('new value')
+        wrapper.vm.submit()
+        await new Promise((resolve) => setTimeout(resolve, 100))
+        expect(wrapper.emitted()).toHaveProperty('finish')
+        expect(transform).toHaveBeenCalledWith({ demo: 'new value' })
+        // reset
+        wrapper.vm.resetFields()
+        await new Promise((resolve) => setTimeout(resolve, 100))
+        const resetEvents = wrapper.emitted('reset')
+        const changeEvents = wrapper.emitted('valuesChange')
+        expect(last(resetEvents)).toEqual([{ demo: undefined }])
+        expect(last(changeEvents)).toEqual([{ demo: undefined }])
+    })
+})
diff --git a/src/packages/form/__tests__/Form.test.jsx b/src/packages/form/__tests__/Form.test.jsx
@@ -1,106 +1,53 @@
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { last } from 'lodash-es'
-import { Button, Tooltip } from 'ant-design-vue'
-import { BaseForm, DrawerForm, Field, Form, HocField, ModalForm, QueryFilter, Submitter } from '../index'
+import { BaseForm, DrawerForm, Form, HocField, ModalForm, QueryFilter, Submitter } from '../index'
 import mountTest from '../../../../tests/shared/mountTest'
+import MockResizeObserver from '../../../../tests/__mocks__/resize-observer'
+import { last } from 'lodash-es'
 
 describe('Form', () => {
+    beforeEach(() => {
+        window.ResizeObserver = MockResizeObserver
+    })
+
     const FieldDemo = HocField('text')
 
-    mountTest(Submitter)
-    mountTest(Field)
-    mountTest(FieldDemo)
-    mountTest(BaseForm)
-    // --
     mountTest(Form)
     mountTest(Form.Item)
     mountTest(Form.Group)
+    mountTest(Form.List)
     mountTest(Form.Dependency)
     mountTest(QueryFilter)
     mountTest(ModalForm)
     mountTest(DrawerForm)
 
-    it(`test Submitter emits`, async () => {
-        const wrapper = mount(Submitter)
-        const buttonAll = wrapper.findAll('button')
-        await Promise.all(buttonAll.map((button) => {
-            return button.trigger('click')
-        }))
-        expect(wrapper.emitted()).toHaveProperty('reset')
-        expect(wrapper.emitted()).toHaveProperty('submit')
+    it(`test Form`, async () => {
+        const wrapper = mount(Form)
+        const formInstance = wrapper.vm.getFormInstance()
+        expect(formInstance).toBeTruthy()
     })
 
-    it(`test BaseForm model change`, async () => {
-        const wrapper = mount(BaseForm, {
-            slots: {
-                default: () => <FieldDemo name={'demo'}/>
-            }
-        })
-        const changeEvents = wrapper.emitted('valuesChange')
-        // update:value
-        await wrapper.find('input').setValue('new value')
-        expect(wrapper.find('input').element.value).toBe('new value')
-        expect(last(changeEvents)).toEqual([{ demo: 'new value' }])
-        // getModelValue
-        expect(wrapper.vm.getModelValue(['demo'])).toEqual('new value')
-        // setModelValue
-        expect(wrapper.vm.setModelValue(['demo'], 'new text')).toEqual({ demo: 'new text' })
-        expect(last(changeEvents)).toEqual([{ demo: 'new text' }])
-        // updateModelValue
-        expect(wrapper.vm.updateModelValue(['demo'], (value) => {
-            return value + ' update'
-        })).toEqual({ demo: 'new text update' })
-        expect(last(changeEvents)).toEqual([{ demo: 'new text update' }])
-        // deleteModelValue
-        expect(wrapper.vm.deleteModelValue(['demo'])).toEqual(true)
-        expect(last(changeEvents)).toEqual([{}])
-    })
-    it(`test BaseForm submit`, async () => {
-        const transform = vi.fn()
-        const finishFailed = vi.fn()
-        const wrapper = mount(BaseForm, {
-            props: {
-                transform,
-                onFinishFailed: finishFailed,
-                scrollToFirstError: true,
-                submitOnReset: true
-            },
+    it(`test Form Group`, async () => {
+        const wrapper = mount(Form, {
             slots: {
                 default: () => {
                     return [
-                        <Tooltip>getPopupContainer</Tooltip>,
-                        <FieldDemo name={'demo'} required={true}/>,
-                        <Button html-type={'submit'}>提交</Button>
+                        <Form.Group title={'Title'}>
+                            <FieldDemo name={'demo'}/>
+                        </Form.Group>
                     ]
                 }
             }
         })
-        await wrapper.find('button').trigger('submit')
-        await new Promise((resolve) => setTimeout(resolve, 100))
-        expect(finishFailed).toHaveBeenCalled()
-        // submit
-        wrapper.vm.submit()
-        await new Promise((resolve) => setTimeout(resolve, 100))
-        expect(wrapper.emitted()).toHaveProperty('finishFailed')
-        // input
-        await wrapper.find('input').setValue('new value')
-        wrapper.vm.submit()
-        await new Promise((resolve) => setTimeout(resolve, 100))
-        expect(wrapper.emitted()).toHaveProperty('finish')
-        expect(transform).toHaveBeenCalledWith({ demo: 'new value' })
-        // reset
-        wrapper.vm.resetFields()
-        await new Promise((resolve) => setTimeout(resolve, 100))
-        const resetEvents = wrapper.emitted('reset')
-        const changeEvents = wrapper.emitted('valuesChange')
-        expect(last(resetEvents)).toEqual([{ demo: undefined }])
-        expect(last(changeEvents)).toEqual([{ demo: undefined }])
+        expect(wrapper.exists()).toBeTruthy()
+        await wrapper.setProps({ layout: 'inline' })
+        expect(wrapper.exists()).toBeTruthy()
     })
+
     it(`test Form Dependency`, async () => {
         const renderChildren = vi.fn()
         const nilNameChildren = vi.fn()
-        const wrapper = mount(BaseForm, {
+        const wrapper = mount(Form, {
             slots: {
                 default: () => {
                     return [
@@ -119,4 +66,92 @@ describe('Form', () => {
         expect(renderChildren).toHaveBeenCalledWith({ demo: 'new value' })
         expect(nilNameChildren).toHaveBeenCalledWith({})
     })
+
+    it(`test Form QueryFilter`, async () => {
+        const valuesChange = vi.fn()
+        const wrapper = mount(QueryFilter, {
+            props: { showCollapse: true, onValuesChange: valuesChange },
+            slots: {
+                default: (slotScope) => {
+                    return [
+                        <FieldDemo name={'demo'} {...slotScope.props}/>
+                    ]
+                }
+            }
+        })
+        expect(wrapper.exists()).toBeTruthy()
+        const formInstance = wrapper.vm.getFormInstance()
+        expect(formInstance).toBeTruthy()
+        // ---
+        const buttonAll = wrapper.findAll('button')
+        await Promise.all(buttonAll.map((button) => button.trigger('click')))
+        expect(wrapper.emitted()).toHaveProperty('collapse')
+        // form
+        await new Promise((resolve) => setTimeout(resolve, 100))
+        const baseForm = wrapper.findComponent(BaseForm)
+        const changeEvents = baseForm.emitted('valuesChange')
+        const resetEvents = baseForm.emitted('reset')
+        const finishEvents = baseForm.emitted('finish')
+        expect(last(resetEvents)).toEqual([{ demo: undefined }])
+        expect(last(finishEvents)).toEqual([{ demo: undefined }])
+        // input
+        await wrapper.find('input').setValue('new value')
+        expect(valuesChange).toHaveBeenCalledWith({ demo: 'new value' })
+        expect(last(changeEvents)).toEqual([{ demo: 'new value' }])
+    })
+
+    function testFloatForm (Component, name) {
+        it(`test Form ${name}`, async () => {
+            const finish = vi.fn(() => Promise.resolve({}))
+            const open = vi.fn()
+            const cancel = vi.fn()
+            const wrapper = mount(Component, {
+                props: {
+                    onFinish: finish,
+                    extraProps: { onOpen: open, onCancel: cancel }
+                },
+                slots: {
+                    default: () => {
+                        return [
+                            <FieldDemo name={'demo'}/>
+                        ]
+                    },
+                    trigger: () => <button class={'open-button'}>打开</button>
+                }
+            })
+            // open
+            await wrapper.find('.open-button').trigger('click')
+            expect(open).toHaveBeenCalled()
+            expect(wrapper.emitted()).toHaveProperty('open')
+            // 首先需要打开弹框 才能获取到 form
+            const formInstance = wrapper.vm.getFormInstance()
+            expect(formInstance).toBeTruthy()
+
+            const submitter = wrapper.findComponent(Submitter)
+            const buttonAll = submitter.findAll('button')
+            // 提交
+            const baseForm = wrapper.findComponent(BaseForm)
+            const changeEvents = baseForm.emitted('valuesChange')
+            await baseForm.find('input').setValue('new value')
+            expect(last(changeEvents)).toEqual([{ demo: 'new value' }])
+            await buttonAll[1].trigger('click')
+            await new Promise((resolve) => setTimeout(resolve, 100))
+            expect(baseForm.emitted()).toHaveProperty('finish')
+            expect(finish).toHaveBeenCalled()
+            expect(cancel).toHaveBeenCalled()
+            expect(wrapper.emitted()).toHaveProperty('cancel')
+            // -----------------------------
+            expect(async () => {
+                wrapper.setProps({ onFinish: () => Promise.reject(false) })
+                wrapper.vm.open()
+                await new Promise((resolve) => setTimeout(resolve, 100))
+                const nextSubmitter = wrapper.findComponent(Submitter)
+                const nextButtonAll = nextSubmitter.findAll('button')
+                await nextButtonAll[1].trigger('click')
+            }).not.toThrow()
+        })
+    }
+
+    testFloatForm(ModalForm, 'ModalForm')
+    testFloatForm(DrawerForm, 'DrawerForm')
 })
diff --git a/src/packages/form/layouts/drawer-form/index.jsx b/src/packages/form/layouts/drawer-form/index.jsx
@@ -29,6 +29,7 @@ export default defineComponent({
             emit('loadingChange', value)
         })
 
+        /* v8 ignore next 16 */
         function onAfterClose () {
             const { extraProps } = props
 

diff --git a/src/packages/form/layouts/modal-form/index.jsx b/src/packages/form/layouts/modal-form/index.jsx
@@ -29,6 +29,7 @@ export default defineComponent({
             emit('loadingChange', value)
         })
 
+        /* v8 ignore next 16 */
         function onAfterClose () {
             const { extraProps } = props
 

diff --git a/src/packages/resize-observer/__tests__/ResizeObserver.test.jsx b/src/packages/resize-observer/__tests__/ResizeObserver.test.jsx
@@ -10,6 +10,7 @@ describe('ResizeObserver', () => {
     })
 
     mountTest(ResizeObserver)
+
     it(`emits resize`, async () => {
         const wrapper = mount(ResizeObserver)
         expect(wrapper.emitted()).toHaveProperty('resize')