From dc42c2dd6abbac83058fb102eada62c999c14a09 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Mon, 15 Jan 2024 21:03:28 +0800
Subject: [PATCH] feat(composition api): readonly

---
 .../reactivity/readonly/readonly.test.js      | 50 +++++++++++++++++++
 .../reactivity/readonly/readonly.uvue         | 43 +++++++++++++++-
 pages/tab-bar/composition-api.uvue            |  4 +-
 3 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 pages/composition-api/reactivity/readonly/readonly.test.js

diff --git a/pages/composition-api/reactivity/readonly/readonly.test.js b/pages/composition-api/reactivity/readonly/readonly.test.js
new file mode 100644
index 0000000..2cc2f09
--- /dev/null
+++ b/pages/composition-api/reactivity/readonly/readonly.test.js
@@ -0,0 +1,50 @@
+const PAGE_PATH = '/pages/composition-api/reactivity/readonly/readonly'
+
+describe('ref', () => {
+  if (process.env.uniTestPlatformInfo.startsWith('android')) {
+    let page = null
+    beforeAll(async () => {
+      page = await program.reLaunch(PAGE_PATH)
+      await page.waitFor('view')
+    })
+    it('basic', async () => {
+      const dataStr = await page.$('#data-str')
+      expect(await dataStr.text()).toBe('data.str: default str')
+      const dataNum = await page.$('#data-num')
+      expect(await dataNum.text()).toBe('data.num: 0')
+      const dataArr = await page.$('#data-arr')
+      expect(await dataArr.text()).toBe('data.arr: ["a","b","c"]')
+
+      const readonlyDataStr = await page.$('#readonly-data-str')
+      expect(await readonlyDataStr.text()).toBe('readonly data.str: default str')
+      const readonlyDataNum = await page.$('#readonly-data-num')
+      expect(await readonlyDataNum.text()).toBe('readonly data.num: 0')
+      const readonlyDataArr = await page.$('#readonly-data-arr')
+      expect(await readonlyDataArr.text()).toBe('readonly data.arr: ["a","b","c"]')
+
+      const updateDataBtn = await page.$('#update-data-btn')
+      await updateDataBtn.tap()
+
+      expect(await dataStr.text()).toBe('data.str: new str')
+      expect(await dataNum.text()).toBe('data.num: 1')
+      expect(await dataArr.text()).toBe('data.arr: ["a","b","c","d"]')
+      expect(await readonlyDataStr.text()).toBe('readonly data.str: new str')
+      expect(await readonlyDataNum.text()).toBe('readonly data.num: 1')
+      expect(await readonlyDataArr.text()).toBe('readonly data.arr: ["a","b","c","d"]')
+
+      const updateReadonlyDataBtn = await page.$('#update-readonly-data-btn')
+      await updateReadonlyDataBtn.tap()
+
+      expect(await dataStr.text()).toBe('data.str: new str')
+      expect(await dataNum.text()).toBe('data.num: 1')
+      expect(await dataArr.text()).toBe('data.arr: ["a","b","c","d"]')
+      expect(await readonlyDataStr.text()).toBe('readonly data.str: new str')
+      expect(await readonlyDataNum.text()).toBe('readonly data.num: 1')
+      expect(await readonlyDataArr.text()).toBe('readonly data.arr: ["a","b","c","d"]')
+    })
+  } else {
+    it('other platform', () => {
+      expect(1).toBe(1)
+    })
+  }
+})
\ No newline at end of file
diff --git a/pages/composition-api/reactivity/readonly/readonly.uvue b/pages/composition-api/reactivity/readonly/readonly.uvue
index 48fc4af..895bd67 100644
--- a/pages/composition-api/reactivity/readonly/readonly.uvue
+++ b/pages/composition-api/reactivity/readonly/readonly.uvue
@@ -1 +1,42 @@
- <template><view class="page">readonly</view></template>
\ No newline at end of file
+<template>
+  <view class="page">
+    <text id="data-str" class="uni-common-mb">data.str: {{ data.str }}</text>
+    <text id="data-num" class="uni-common-mb">data.num: {{ data.num }}</text>
+    <text id="data-arr" class="uni-common-mb">data.arr: {{ data.arr}}</text>
+
+    <text id="readonly-data-str" class="uni-common-mb">readonly data.str: {{ readonlyData.str }}</text>
+    <text id="readonly-data-num" class="uni-common-mb">readonly data.num: {{ readonlyData.num }}</text>
+    <text id="readonly-data-arr" class="uni-common-mb">readonly data.arr: {{ readonlyData.arr}}</text>
+
+    <button id="update-data-btn" class="uni-common-mb" @click="updateData">update data</button>
+    <button id="update-readonly-data-btn" @click="updateReadonlyData">update readonly data</button>
+  </view>
+</template>
+
+<script setup>
+  type Data = {
+    str : string,
+    num : number,
+    arr : string[]
+  }
+
+  const data = reactive({
+    str: 'default str',
+    num: 0,
+    arr: ['a', 'b', 'c']
+  } as Data)
+
+  const readonlyData = readonly(data)
+
+  const updateData = () => {
+    data.str = 'new str'
+    data.num++
+    data.arr.push('d')
+  }
+
+  const updateReadonlyData = () => {
+    readonlyData.str = 'new readonly str'
+    readonlyData.num++
+    readonlyData.arr.push('e')
+  }
+</script>
\ No newline at end of file
diff --git a/pages/tab-bar/composition-api.uvue b/pages/tab-bar/composition-api.uvue
index 6ed08ea..bb9f0d5 100644
--- a/pages/tab-bar/composition-api.uvue
+++ b/pages/tab-bar/composition-api.uvue
@@ -96,12 +96,12 @@
           {
             name: 'reactive',
             url: 'reactive',
-            enable: false,
+            enable: true,
           },
           {
             name: 'readonly',
             url: 'readonly',
-            enable: false,
+            enable: true,
           },
           {
             name: 'watch',
-- 
GitLab