From 48b289fa9bae992d9cafc131bb1257aa3c759f97 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Sat, 21 Oct 2023 18:24:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20getElementById=20=E5=A4=9A=E6=A0=B9?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E7=A4=BA=E4=BE=8B=E5=8F=8A=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |   6 +
 ...t-element-by-id-multiple-root-node.test.js |  22 ++++
 .../get-element-by-id-multiple-root-node.uvue |  52 ++++++++
 .../get-element-by-id.test.js                 |   5 +-
 .../get-element-by-id/get-element-by-id.uvue  | 112 +++++++++---------
 5 files changed, 142 insertions(+), 55 deletions(-)
 create mode 100644 pages/API/get-element-by-id/get-element-by-id-multiple-root-node.test.js
 create mode 100644 pages/API/get-element-by-id/get-element-by-id-multiple-root-node.uvue

diff --git a/pages.json b/pages.json
index 3b7f56df..87431a40 100644
--- a/pages.json
+++ b/pages.json
@@ -307,6 +307,12 @@
       "style": {
         "navigationBarTitleText": "获取节点"
       }
+    },
+    {
+      "path": "pages/API/get-element-by-id/get-element-by-id-multiple-root-node",
+      "style": {
+        "navigationBarTitleText": "获取节点-多根节点"
+      }
     },
     {
       "path": "pages/API/nodes-info/nodes-info",
diff --git a/pages/API/get-element-by-id/get-element-by-id-multiple-root-node.test.js b/pages/API/get-element-by-id/get-element-by-id-multiple-root-node.test.js
new file mode 100644
index 00000000..c7863eb9
--- /dev/null
+++ b/pages/API/get-element-by-id/get-element-by-id-multiple-root-node.test.js
@@ -0,0 +1,22 @@
+const PAGE_PATH =
+  "/pages/API/get-element-by-id/get-element-by-id-multiple-root-node";
+let page;
+
+describe("getElementByIdForMultipleRootNode", () => {
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH);
+    await page.waitFor(1000);
+  });
+  it("getElementByNotExistId", async () => {
+    const res = await page.callMethod("getElementByNotExistId");
+    expect(res).toBe(null);
+  });
+  it("changeStyle", async () => {
+    await page.callMethod("changePageHeadBackgroundColor");
+    await page.callMethod("changeTextColor");
+    await page.callMethod("changeViewStyle");
+    await page.waitFor(500);
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+  });
+});
\ No newline at end of file
diff --git a/pages/API/get-element-by-id/get-element-by-id-multiple-root-node.uvue b/pages/API/get-element-by-id/get-element-by-id-multiple-root-node.uvue
new file mode 100644
index 00000000..66165ecb
--- /dev/null
+++ b/pages/API/get-element-by-id/get-element-by-id-multiple-root-node.uvue
@@ -0,0 +1,52 @@
+<template>
+  <view class="uni-padding-wrap">
+    <page-head
+      id="page-head"
+      title="getElementById-multiple-root-node"
+    ></page-head>
+    <text id="text">this is text</text>
+    <view id="view" class="uni-common-mt" style="border: 1px solid red"
+      >this is view</view
+    >
+    <button class="uni-btn" @click="changePageHeadBackgroundColor">
+      修改 page-head 背景色
+    </button>
+    <button class="uni-btn" @click="changeTextColor">修改 text 字体颜色</button>
+    <button class="uni-btn" @click="changeViewStyle">
+      修改 view 宽高及背景色
+    </button>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  data() {
+    return {
+      checked: false,
+      homePagePath: '/pages/tabBar/component',
+      launchOptionsPath: '',
+    }
+  },
+  methods: {
+    getElementByNotExistId(): Element | null {
+      return uni.getElementById('not-exist-id')
+    },
+    changePageHeadBackgroundColor(){
+      const pageHead = uni.getElementById('page-head')!
+      pageHead.style.setProperty('backgroundColor', 'red')
+    },
+    changeTextColor(){
+      const text = uni.getElementById('text')!
+      text.style.setProperty('color', 'red')
+    },
+    changeViewStyle(){
+      const view = uni.getElementById<UniViewElement>('view')
+      if(view !== null){
+        view.style.setProperty('width', '90%')
+        view.style.setProperty('height', '50px')
+        view.style.setProperty('backgroundColor', '#007AFF')
+      }
+    }
+  }
+}
+</script>
diff --git a/pages/API/get-element-by-id/get-element-by-id.test.js b/pages/API/get-element-by-id/get-element-by-id.test.js
index 34cd75ed..00a5f2e7 100644
--- a/pages/API/get-element-by-id/get-element-by-id.test.js
+++ b/pages/API/get-element-by-id/get-element-by-id.test.js
@@ -3,17 +3,18 @@ let page;
 
 describe("getElementById", () => {
   beforeAll(async () => {
-    page = await program.navigateTo(PAGE_PATH);
+    page = await program.reLaunch(PAGE_PATH);
     await page.waitFor(1000);
   });
   it("getElementByNotExistId", async () => {
     const res = await page.callMethod("getElementByNotExistId");
-    expect(!!res).toBe(false);
+    expect(res).toBe(null);
   });
   it("changeStyle", async () => {
     await page.callMethod("changePageHeadBackgroundColor");
     await page.callMethod("changeTextColor");
     await page.callMethod("changeViewStyle");
+    await page.waitFor(500);
     const image = await program.screenshot();
     expect(image).toMatchImageSnapshot();
   });
diff --git a/pages/API/get-element-by-id/get-element-by-id.uvue b/pages/API/get-element-by-id/get-element-by-id.uvue
index 4ef31ce3..6201accd 100644
--- a/pages/API/get-element-by-id/get-element-by-id.uvue
+++ b/pages/API/get-element-by-id/get-element-by-id.uvue
@@ -1,53 +1,59 @@
-<template>
-  <view>
-    <page-head id="page-head" title="getElementById"></page-head>
-    <view class="uni-padding-wrap">
-      <text id="text">this is text</text>
-      <view id="view" class="uni-common-mt" style="border: 1px solid red"
-        >this is view</view
-      >
-      <button class="uni-btn" @click="changePageHeadBackgroundColor">
-        修改 page-head 背景色
-      </button>
-      <button class="uni-btn" @click="changeTextColor">
-        修改 text 字体颜色
-      </button>
-      <button class="uni-btn" @click="changeViewStyle">
-        修改 view 宽高及背景色
-      </button>
-    </view>
-  </view>
-</template>
-
-<script lang="uts">
-export default {
-  data() {
-    return {
-      checked: false,
-      homePagePath: '/pages/tabBar/component',
-      launchOptionsPath: '',
-    }
-  },
-  methods: {
-    getElementByNotExistId(): Element | null {
-      return uni.getElementById('not-exist-id')
-    },
-    changePageHeadBackgroundColor(){
-      const pageHead = uni.getElementById('page-head')!
-      pageHead.style.setProperty('backgroundColor', 'red')
-    },
-    changeTextColor(){
-      const text = uni.getElementById('text')!
-      text.style.setProperty('color', 'red')
-    },
-    changeViewStyle(){
-      const view = uni.getElementById<UniViewElement>('view')
-      if(view !== null){
-        view.style.setProperty('width', '90%')
-        view.style.setProperty('height', '50px')
-        view.style.setProperty('backgroundColor', '#007AFF')
-      }
-    }
-  }
-}
-</script>
+<template>
+  <view>
+    <page-head id="page-head" title="getElementById"></page-head>
+    <view class="uni-padding-wrap">
+      <text id="text">this is text</text>
+      <view id="view" class="uni-common-mt" style="border: 1px solid red"
+        >this is view</view
+      >
+      <button class="uni-btn" @click="changePageHeadBackgroundColor">
+        修改 page-head 背景色
+      </button>
+      <button class="uni-btn" @click="changeTextColor">
+        修改 text 字体颜色
+      </button>
+      <button class="uni-btn" @click="changeViewStyle">
+        修改 view 宽高及背景色
+      </button>
+      <button class="uni-btn" @click="goMultipleRootNode">
+        跳转多根节点示例
+      </button>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  data() {
+    return {
+      checked: false,
+      homePagePath: '/pages/tabBar/component',
+      launchOptionsPath: '',
+    }
+  },
+  methods: {
+    getElementByNotExistId() : Element | null {
+      return uni.getElementById('not-exist-id')
+    },
+    changePageHeadBackgroundColor() {
+      const pageHead = uni.getElementById('page-head')!
+      pageHead.style.setProperty('backgroundColor', 'red')
+    },
+    changeTextColor() {
+      const text = uni.getElementById('text')!
+      text.style.setProperty('color', 'red')
+    },
+    changeViewStyle() {
+      const view = uni.getElementById<UniViewElement>('view')
+      if (view !== null) {
+        view.style.setProperty('width', '90%')
+        view.style.setProperty('height', '50px')
+        view.style.setProperty('backgroundColor', '#007AFF')
+      }
+    },
+    goMultipleRootNode() {
+      uni.navigateTo({ url: '/pages/API/get-element-by-id/get-element-by-id-multiple-root-node' })
+    }
+  }
+}
+</script>
-- 
GitLab