docs(vue): add more scopedSlot content tests and readme (#2226)

alibaba · Sep 23, 2021 · ff7e790 · ff7e790
1 parent 2489182
commit ff7e790
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 9 deletions.
diff --git a/packages/vue/docs/demos/questions/scoped-slot.vue b/packages/vue/docs/demos/questions/scoped-slot.vue
@@ -16,7 +16,7 @@ const TextPreviewer = {
   render(h, context) {
     return h('div', {}, [
       context.scopedSlots.default({
-        scopedProp: 'default 作用域插槽',
+        slotProp: '有 default 作用域插槽组件的插槽属性值',
         onScopedFunc: ($event) => {
           alert($event)
         },
@@ -53,7 +53,7 @@ const ScopedSlotComponent = {
           },
         },
       },
-      [props.scopedProp]
+      [props.slotProp]
     )
   },
 }

diff --git a/packages/vue/docs/questions/README.md b/packages/vue/docs/questions/README.md
@@ -32,6 +32,6 @@ sidebar: auto
 
 ## 如何使用作用域插槽？
 
-`x-content` 使用函数式组件时, 渲染函数增加第二个参数，通过其 `props` 成员访问作用域插槽传入属性。
+`x-content` 使用函数式组件时, 渲染函数增加第二个参数，通过其 `props` 成员访问作用域插槽传入属性，支持 observer() 和 connect() 接入组件。
 
 <dumi-previewer demoPath="questions/scoped-slot" />
diff --git a/packages/vue/src/__tests__/schema.json.spec.ts b/packages/vue/src/__tests__/schema.json.spec.ts
@@ -4,6 +4,8 @@ import { render, waitFor } from '@testing-library/vue'
 import { mount } from '@vue/test-utils'
 import Vue, { FunctionalComponentOptions } from 'vue'
 import { FormProvider, createSchemaField } from '../vue2-components'
+import { connect, mapProps, mapReadPretty } from '../'
+import { defineComponent } from 'vue-demi'
 
 Vue.component('FormProvider', FormProvider)
 
@@ -81,7 +83,7 @@ const Previewer3: FunctionalComponentOptions = {
       },
       [
         context.scopedSlots.default({
-          scopedProp: '123',
+          slotProp: '123',
         }),
       ]
     )
@@ -100,7 +102,7 @@ const Previewer4: FunctionalComponentOptions = {
       },
       [
         context.scopedSlots.content({
-          scopedProp: '123',
+          slotProp: '123',
         }),
       ]
     )
@@ -444,7 +446,7 @@ describe('x-content', () => {
     const Content = {
       functional: true,
       render(h, context) {
-        return h('span', context.props.scopedProp)
+        return h('span', context.props.slotProp)
       },
     }
 
@@ -481,7 +483,7 @@ describe('x-content', () => {
     const Content = {
       functional: true,
       render(h, context) {
-        return h('span', context.props.scopedProp)
+        return h('span', context.props.slotProp)
       },
     }
     const { SchemaField } = createSchemaField({
@@ -520,7 +522,7 @@ describe('x-content', () => {
     const Content = {
       functional: true,
       render(h, context) {
-        return h('span', context.props.scopedProp)
+        return h('span', context.props.slotProp)
       },
     }
     const { SchemaField } = createSchemaField({
@@ -558,7 +560,7 @@ describe('x-content', () => {
     const Content = {
       functional: true,
       render(h, context) {
-        return h('span', context.props.scopedProp)
+        return h('span', context.props.slotProp)
       },
     }
     const { SchemaField } = createSchemaField({
@@ -591,6 +593,142 @@ describe('x-content', () => {
     expect(queryByTestId('previewer4').textContent).toEqual('123')
   })
 
+  test('scoped slot with connect', () => {
+    const form = createForm()
+    const ConnectedComponent = connect(
+      defineComponent({
+        render(h) {
+          return h(
+            'div',
+            {
+              attrs: {
+                'data-testid': 'ConnectedComponent',
+              },
+            },
+            [
+              this.$scopedSlots.default({
+                slotProp: '123',
+              }),
+            ]
+          )
+        },
+      }),
+      mapProps((props, field) => {
+        return {
+          ...props,
+        }
+      })
+    )
+
+    const scopeSlotComponent = {
+      functional: true,
+      render(h, context) {
+        return h('span', context.props.slotProp)
+      },
+    }
+    const { SchemaField } = createSchemaField({
+      components: {
+        ConnectedComponent,
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: new Schema({
+            type: 'string',
+            name: 'ConnectedComponent',
+            'x-component': 'ConnectedComponent',
+            'x-content': {
+              default: scopeSlotComponent,
+            },
+          }),
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          name="string"
+          :schema="schema"
+        />
+      </FormProvider>`,
+    })
+    expect(queryByTestId('ConnectedComponent')).toBeVisible()
+    expect(queryByTestId('ConnectedComponent').textContent).toEqual('123')
+  })
+
+  test('scoped slot with connect and readPretty', () => {
+    const form = createForm()
+
+    const ConnectedWithMapReadPretty = connect(
+      defineComponent({
+        render(h) {
+          return h(
+            'div',
+            {
+              attrs: {
+                'data-testid': 'ConnectedWithMapReadPretty',
+              },
+            },
+            [
+              this.$scopedSlots.withMapReadPretty({
+                slotProp: '123',
+              }),
+            ]
+          )
+        },
+      }),
+      mapProps((props, field) => {
+        return {
+          ...props,
+        }
+      }),
+      mapReadPretty({
+        render(h) {
+          return h('div', 'read pretty')
+        },
+      })
+    )
+
+    const scopeSlotComponent = {
+      functional: true,
+      render(h, context) {
+        return h('span', context.props.slotProp)
+      },
+    }
+    const { SchemaField } = createSchemaField({
+      components: {
+        ConnectedWithMapReadPretty,
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: new Schema({
+            type: 'string',
+            name: 'ConnectedWithMapReadPretty',
+            'x-component': 'ConnectedWithMapReadPretty',
+            'x-content': {
+              withMapReadPretty: scopeSlotComponent,
+            },
+          }),
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          name="string"
+          :schema="schema"
+        />
+      </FormProvider>`,
+    })
+    expect(queryByTestId('ConnectedWithMapReadPretty')).toBeVisible()
+    expect(queryByTestId('ConnectedWithMapReadPretty').textContent).toEqual(
+      '123'
+    )
+  })
+
   test('slot compitible', () => {
     const form = createForm()
     const { SchemaField } = createSchemaField({