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

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",

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

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