feat(provide): 补充响应式 Object 示例及测试

pages/composition/provide/component-for-inject-1.uvue

@@ -7,19 +7,39 @@
     <text class="uni-common-mt alias-provide-page-title"
       >aliasProvidePageTitle: {{ aliasProvidePageTitle }}</text
     >
-    <text class="uni-common-mt computed-title">computedTitle: {{ computedTitle }}</text>
-    <text class="uni-common-mt provide-page-str">providePageStr: {{ providePageStr }}</text>
-    <text class="uni-common-mt provide-page-num">providePageNum: {{ providePageNum }}</text>
-    <text class="uni-common-mt provide-page-bool">providePageBool: {{ providePageBool }}</text>
+    <text class="uni-common-mt computed-title"
+      >computedTitle: {{ computedTitle }}</text
+    >
+    <text class="uni-common-mt provide-data-obj-title"
+      >provideDataObj.title: {{ provideDataObj['title'] }}</text
+    >
+    <text class="uni-common-mt provide-data-obj-content"
+      >provideDataObj.content: {{ provideDataObj['content'] }}</text
+    >
+    <text class="uni-common-mt provide-page-str"
+      >providePageStr: {{ providePageStr }}</text
+    >
+    <text class="uni-common-mt provide-page-num"
+      >providePageNum: {{ providePageNum }}</text
+    >
+    <text class="uni-common-mt provide-page-bool"
+      >providePageBool: {{ providePageBool }}</text
+    >
     <text class="uni-common-mt provide-page-object-title"
       >providePageObject.title: {{ providePageObject['title'] }}</text
     >
     <text class="uni-common-mt provide-page-object-content"
       >providePageObject.content: {{ providePageObject['content'] }}</text
     >
-    <text class="uni-common-mt provide-page-arr">providePageArr: {{ providePageArr }}</text>
-    <text class="uni-common-mt provide-page-map">providePageMap: {{ providePageMap }}</text>
-    <text class="uni-common-mt provide-page-set">providePageSet: {{ providePageSet }}</text>
+    <text class="uni-common-mt provide-page-arr"
+      >providePageArr: {{ providePageArr }}</text
+    >
+    <text class="uni-common-mt provide-page-map"
+      >providePageMap: {{ providePageMap }}</text
+    >
+    <text class="uni-common-mt provide-page-set"
+      >providePageSet: {{ providePageSet }}</text
+    >
     <text class="uni-common-mt test-inject-string-default-value"
       >testInjectStringDefaultValue: {{ testInjectStringDefaultValue }}</text
     >
@@ -50,6 +70,9 @@ export default {
       type: String,
       default: 'default computed title'
     },
+    provideDataObj: {
+      type: Object as PropType<UTSJSONObject>,
+    },
     providePageStr: {
       type: String,
       default: 'default provide page str'

pages/composition/provide/provide.test.js

@@ -16,25 +16,40 @@ describe('字面量方式创建 provide', () => {
     it('alias', async () => {
       const aliasProvidePageTitleEl = await page.$('.alias-provide-page-title')
       const aliasProvidePageTitleText = await aliasProvidePageTitleEl.text()
-      // expect(aliasProvidePageTitleText).toBe(
-      //   'aliasProvidePageTitle: 字面量方式定义 provide page title'
-      // )
       expect(aliasProvidePageTitleText).toBe(
-        'aliasProvidePageTitle: default alias provide page title'
+        'aliasProvidePageTitle: 字面量方式定义 provide page title'
       )
     })
-    it('computed', async () => {
+    it('reactive data', async () => {
       const computedTitleEl = await page.$('.computed-title')
       let computedTitleText = await computedTitleEl.text()
       expect(computedTitleText).toBe(
         'computedTitle: 字面量方式定义 provide page title'
       )
-      const changeTitleBtn = await page.$('.change-title-btn')
-      await changeTitleBtn.tap()
+      const provideDataObjTitleEl = await page.$('.provide-data-obj-title')
+      let provideDataObjTitleText = await provideDataObjTitleEl.text()
+      expect(provideDataObjTitleText).toBe(
+        'provideDataObj.title: data obj.title'
+      )
+      const provideDataObjContentEl = await page.$('.provide-data-obj-content')
+      let provideDataObjContentText = await provideDataObjContentEl.text()
+      expect(provideDataObjContentText).toBe(
+        'provideDataObj.content: data obj.content'
+      )
+
+      const changeDataBtn = await page.$('.change-data-btn')
+      await changeDataBtn.tap()
+
       computedTitleText = await computedTitleEl.text()
       expect(computedTitleText).toBe(
         'computedTitle: 字面量方式定义 provide page title changed'
       )
+      provideDataObjTitleText = await provideDataObjTitleEl.text()
+      expect(provideDataObjTitleText).toBe('provideDataObj.title: new title')
+      provideDataObjContentText = await provideDataObjContentEl.text()
+      expect(provideDataObjContentText).toBe(
+        'provideDataObj.content: new content'
+      )
     })
     it('string', async () => {
       const providePageStrEl = await page.$('.provide-page-str')

pages/composition/provide/provide.uvue

@@ -7,7 +7,7 @@
       <button class="uni-common-mt" @click="goProvidePage2">
         跳转函数方式定义 provide 示例
       </button>
-      <button class="uni-common-mt change-title-btn" @click="changeTitle">change title</button>
+      <button class="uni-common-mt change-data-btn" @click="changeData">change data</button>
       <ComponentForInject />
     </view>
     <!-- #ifdef APP -->
@@ -25,12 +25,17 @@ export default {
   },
   data(){
     return {
-      title: '字面量方式定义 provide page title'
+      title: '字面量方式定义 provide page title',
+      obj: {
+        title: 'data obj.title',
+        content: 'data obj.content'
+      },
     }
   },
   provide: {
     providePageTitle: this.title,
     computedTitle: computed<string>((): string => this.title),
+    provideDataObj: this.obj,
     providePageStr: '字面量方式定义 provide page str',
     providePageNum: 1,
     providePageBool: true,
@@ -48,8 +53,10 @@ export default {
         url: '/pages/composition/provide/provide-page2'
       })
     },
-    changeTitle() {
+    changeData() {
       this.title = '字面量方式定义 provide page title changed'
+      this.obj['title'] = 'new title'
+      this.obj['content'] = 'new content'
     }
   },
 }