fix(vue): remove empty default slots of fields (#1517)

Author: MisicDemone

package.json

@@ -57,16 +57,17 @@
     "@rollup/plugin-commonjs": "^17.0.0",
     "@testing-library/jest-dom": "^5.0.0",
     "@testing-library/react": "^11.2.3",
-    "@testing-library/vue": "^5.6.1",
-    "@types/hoist-non-react-statics": "^3.3.1",
+    "@testing-library/vue": "^5.6.2",
     "@types/fs-extra": "^8.1.0",
+    "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^24.0.18",
     "@types/node": "^12.6.8",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.9.1",
     "@typescript-eslint/parser": "^4.8.2",
     "@umijs/plugin-sass": "^1.1.1",
+    "@vue/test-utils": "^1.2.0",
     "antd": "^4.0.0",
     "chalk": "^2.4.2",
     "chokidar": "^2.1.2",
@@ -77,22 +78,22 @@
     "css-loader": "^5.0.0",
     "cz-conventional-changelog": "^2.1.0",
     "dumi": "^1.1.0-rc.8",
+    "escape-string-regexp": "^4.0.0",
     "eslint": "^7.14.0",
-    "semver": "^7.3.5",
-    "string-similarity": "^4.0.4",
     "eslint-config-prettier": "^7.0.0",
     "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-markdown": "^2.0.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-promise": "^4.0.0",
     "eslint-plugin-react": "^7.14.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-markdown": "^2.0.1",
     "eslint-plugin-vue": "^7.0.1",
     "execa": "^5.0.0",
     "file-loader": "^5.0.2",
     "findup": "^0.1.5",
     "fs-extra": "^7.0.1",
+    "gh-release": "^5.0.1",
     "ghooks": "^2.0.4",
     "glob": "^7.1.3",
     "html-webpack-plugin": "^3.2.0",
@@ -106,35 +107,37 @@
     "jest-styled-components": "6.3.3",
     "jest-watch-lerna-packages": "^1.1.0",
     "lerna": "^4.0.0",
-    "gh-release": "^5.0.1",
     "less": "^4.1.1",
     "less-plugin-npm-import": "^2.1.0",
-    "postcss": "^8.0.0",
     "lint-staged": "^8.2.1",
     "mfetch": "^0.2.27",
     "mobx": "^6.0.4",
     "mobx-react-lite": "^3.1.6",
-    "escape-string-regexp": "^4.0.0",
     "onchange": "^5.2.0",
     "opencollective": "^1.0.3",
     "opencollective-postinstall": "^2.0.2",
     "param-case": "^3.0.4",
+    "postcss": "^8.0.0",
     "prettier": "^2.2.1",
     "pretty-format": "^24.0.0",
     "pretty-quick": "^3.1.0",
     "raw-loader": "^4.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-mde": "^11.5.0",
     "react-test-renderer": "^16.11.0",
     "rimraf": "^3.0.0",
     "rollup": "^2.37.1",
     "rollup-plugin-external-globals": "^0.6.1",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
-    "rollup-plugin-postcss": "^4.0.0",
+    "semver": "^7.3.5",
     "semver-regex": "^2.0.0",
+    "showdown": "^1.9.1",
     "staged-git-files": "^1.1.2",
+    "string-similarity": "^4.0.4",
     "style-loader": "^1.1.3",
     "styled-components": "^5.0.0",
     "ts-import-plugin": "1.6.1",
@@ -145,9 +148,7 @@
     "vue-eslint-parser": "^7.1.1",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1",
-    "showdown": "^1.9.1",
-    "react-mde": "^11.5.0"
+    "webpack-dev-server": "^3.10.1"
   },
   "repository": {
     "type": "git",

packages/vue/docs/demos/api/components/recursion-field-with-component.vue

@@ -15,46 +15,69 @@ import { defineComponent, h } from '@vue/composition-api'
 // or "import { defineComponent, h } from 'vue'" if using vue3
 import { Input, Button, Space } from 'ant-design-vue'
 import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField, RecursionField, useField, useFieldSchema, observer } from '@formily/vue'
+import {
+  FormProvider,
+  createSchemaField,
+  RecursionField,
+  useField,
+  useFieldSchema,
+  observer,
+} from '@formily/vue'
 import 'ant-design-vue/dist/antd.css'
 
-const ArrayItems = observer(defineComponent({
-  props: ['value', 'disabled', 'readOnly'],
-  setup (props) {
-    const fieldRef = useField()
-    const schemaRef = useFieldSchema()
+const ArrayItems = observer(
+  defineComponent({
+    setup() {
+      const fieldRef = useField()
+      const schemaRef = useFieldSchema()
 
-    return () => {
-      const field = fieldRef.value
-      const schema = schemaRef.value
-      const items = props.value?.map((item, index) => {
-        return h('div', { key: item.id, style: { marginBottom: '10px' } }, [
-          h(Space, [
-            // params of render function is different in vue3
-            h(RecursionField, { props: { schema: schema.items, name: index } }),
-            h(Button, { on: { click: () => field.remove(index) } }, ['Remove']),
+      return () => {
+        const field = fieldRef.value
+        const schema = schemaRef.value
+        const items = field.value?.map((item, index) => {
+          return h('div', { key: item.id, style: { marginBottom: '10px' } }, [
+            h(Space, [
+              // params of render function is different in vue3
+              h(RecursionField, {
+                props: { schema: schema.items, name: index },
+              }),
+              h(Button, { on: { click: () => field.remove(index) } }, [
+                'Remove',
+              ]),
+            ]),
           ])
-        ])
-      })
-      const button = h(Button, { on: { click: () => field.push({ id: Date.now() }) } }, ['Add'])
-      return h('div', [items, button])
-    }
-  },
-}))
+        })
+        const button = h(
+          Button,
+          { on: { click: () => field.push({ id: Date.now() }) } },
+          ['Add']
+        )
+        return h('div', [items, button])
+      }
+    },
+  })
+)
 
-const { SchemaField, SchemaStringField, SchemaArrayField, SchemaObjectField } = createSchemaField({
-  components: {
-    ArrayItems,
-    Input,
-  },
-})
+const { SchemaField, SchemaStringField, SchemaArrayField, SchemaObjectField } =
+  createSchemaField({
+    components: {
+      ArrayItems,
+      Input,
+    },
+  })
 
 export default {
-  components: { FormProvider, SchemaField, SchemaStringField, SchemaArrayField, SchemaObjectField },
+  components: {
+    FormProvider,
+    SchemaField,
+    SchemaStringField,
+    SchemaArrayField,
+    SchemaObjectField,
+  },
   data() {
     return {
-      form: createForm()
+      form: createForm(),
     }
-  }
+  },
 }
 </script>

packages/vue/src/__tests__/schema.markup.spec.ts

@@ -8,6 +8,7 @@ import {
   Schema,
 } from '../index'
 import { render } from '@testing-library/vue'
+import { mount, createLocalVue } from '@vue/test-utils'
 import Vue, { CreateElement } from 'vue'
 import { defineComponent, h } from '@vue/composition-api'
 
@@ -570,87 +571,94 @@ describe('recursion field', () => {
     expect(queryByTestId('input')).toBeNull()
   })
 
-  // test('schema reactions', async () => {
-  //   const form = createForm()
-  //   const components = createSchemaField({
-  //     components: {
-  //       Input,
-  //     },
-  //   })
-  //   const { queryByTestId } = render({
-  //     components: components,
-  //     data () {
-  //       return {
-  //         form,
-  //         reactions: [
-  //           {
-  //             when: '{{$form.values.aaa === "123"}}',
-  //             fulfill: {
-  //               state: {
-  //                 visible: true,
-  //               },
-  //             },
-  //             otherwise: {
-  //               state: {
-  //                 visible: false,
-  //               },
-  //             },
-  //           },
-  //           {
-  //             when: '{{$self.value === "123"}}',
-  //             target: 'ccc',
-  //             fulfill: {
-  //               schema: {
-  //                 'x-visible': true,
-  //               },
-  //             },
-  //             otherwise: {
-  //               schema: {
-  //                 'x-visible': false,
-  //               },
-  //             },
-  //           },
-  //         ]
-  //       }
-  //     },
-  //     template: `<FormProvider :form="form">
-  //     <SchemaField>
-  //       <SchemaStringField
-  //         name="aaa"
-  //         x-component="Input"
-  //         :x-component-props="{
-  //           'data-testid': 'aaa',
-  //         }"
-  //       />
-  //       <SchemaStringField
-  //         name="bbb"
-  //         x-component="Input"
-  //         :x-component-props="{
-  //           'data-testid': 'bbb',
-  //         }"
-  //         :x-reactions="reactions"
-  //       />
-  //       <SchemaStringField
-  //         name="ccc"
-  //         x-component="Input"
-  //         :x-component-props="{
-  //           'data-testid': 'ccc',
-  //         }"
-  //       />
-  //     </SchemaField>
-  //   </FormProvider>`
-  //   })
-  //   expect(queryByTestId('bbb')).toBeNull()
-  //   fireEvent.update(queryByTestId('aaa'), '123')
-  //   expect(form.query('aaa').get('value')).toEqual('123')
-  //   await waitFor(() => {
-  //     expect(queryByTestId('bbb')).toBeVisible()
-  //   })
-  //   expect(queryByTestId('ccc')).toBeNull()
-  //   fireEvent.update(queryByTestId('bbb'), '123')
-  //   expect(form.query('bbb').get('value')).toEqual('123')
-  //   await waitFor(() => {
-  //     expect(queryByTestId('ccc')).toBeVisible()
-  //   })
-  // })
+  test('schema reactions', async () => {
+    const div = document.createElement('div')
+    document.body.appendChild(div)
+    const form = createForm()
+    const components = createSchemaField({
+      components: {
+        Input,
+      },
+    })
+    const localVue = createLocalVue()
+    localVue.component('FormProvider', FormProvider)
+    const TestComponent = {
+      components: components,
+      data() {
+        return {
+          form,
+          reactions: [
+            {
+              when: '{{$form.values.aaa === "123"}}',
+              fulfill: {
+                state: {
+                  visible: true,
+                },
+              },
+              otherwise: {
+                state: {
+                  visible: false,
+                },
+              },
+            },
+            {
+              when: '{{$self.value === "123"}}',
+              target: 'ccc',
+              fulfill: {
+                schema: {
+                  'x-visible': true,
+                },
+              },
+              otherwise: {
+                schema: {
+                  'x-visible': false,
+                },
+              },
+            },
+          ],
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField>
+          <SchemaStringField
+            name="aaa"
+            x-component="Input"
+            :x-component-props="{
+              'class': 'aaa',
+            }"
+          />
+          <SchemaStringField
+            name="bbb"
+            x-component="Input"
+            :x-component-props="{
+              'class': 'bbb',
+            }"
+            :x-reactions="reactions"
+          />
+          <SchemaStringField
+            name="ccc"
+            x-component="Input"
+            :x-component-props="{
+              'class': 'ccc',
+            }"
+          />
+        </SchemaField>
+      </FormProvider>`,
+    } as any
+    const wrapper = mount(TestComponent, {
+      attachTo: div,
+      localVue,
+    })
+    expect(wrapper.find('.bbb').exists()).toBeFalsy()
+    wrapper.find('.aaa').setValue('123')
+    expect(form.query('aaa').get('value')).toEqual('123')
+    await wrapper.vm.$forceUpdate()
+    expect(wrapper.find('.bbb').exists()).toBeTruthy()
+    expect(wrapper.find('.ccc').exists()).toBeFalsy()
+    wrapper.find('.bbb').setValue('123')
+    expect(form.query('bbb').get('value')).toEqual('123')
+    await wrapper.vm.$forceUpdate()
+    expect(wrapper.find('.ccc').exists()).toBeTruthy()
+    wrapper.destroy()
+  })
 })