feat: getElementById 多根节点示例及测试

pages.json

@@ -308,6 +308,12 @@
         "navigationBarTitleText": "获取节点"
       }
     },
+    {
+      "path": "pages/API/get-element-by-id/get-element-by-id-multiple-root-node",
+      "style": {
+        "navigationBarTitleText": "获取节点-多根节点"
+      }
+    },
     {
       "path": "pages/API/nodes-info/nodes-info",
       "style": {

pages/API/get-element-by-id/get-element-by-id-multiple-root-node.test.js

+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

pages/API/get-element-by-id/get-element-by-id-multiple-root-node.uvue

+<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>

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();
   });

pages/API/get-element-by-id/get-element-by-id.uvue

@@ -15,6 +15,9 @@
       <button class="uni-btn" @click="changeViewStyle">
         修改 view 宽高及背景色
       </button>
+      <button class="uni-btn" @click="goMultipleRootNode">
+        跳转多根节点示例
+      </button>
     </view>
   </view>
 </template>
@@ -29,24 +32,27 @@ export default {
     }
   },
   methods: {
-    getElementByNotExistId(): Element | null {
+    getElementByNotExistId() : Element | null {
       return uni.getElementById('not-exist-id')
     },
-    changePageHeadBackgroundColor(){
+    changePageHeadBackgroundColor() {
       const pageHead = uni.getElementById('page-head')!
       pageHead.style.setProperty('backgroundColor', 'red')
     },
-    changeTextColor(){
+    changeTextColor() {
       const text = uni.getElementById('text')!
       text.style.setProperty('color', 'red')
     },
-    changeViewStyle(){
+    changeViewStyle() {
       const view = uni.getElementById<UniViewElement>('view')
-      if(view !== null){
+      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' })
     }
   }
 }