feat(dialogPage): 补充 dialogPage 方法示例及测试

pages/API/dialog-page/dialog-1.uvue

 <template>
   <view id="dialog1" class="dialog-container">
     <view class="dialog-content">
-      <text>title: {{title}}</text>
+      <text>title: {{ title }}</text>
       <text class="mt-10">onBackPress return true</text>
-      <button class="mt-10" id="dialog1-go-next-page" @click="goNextPage">go next page</button>
-      <button class="mt-10" id="dialog1-open-dialog2" @click="openDialog2">openDialog2</button>
-      <button class="mt-10" id="dialog1-close-dialog" @click="closeDialog">closeDialog</button>
-      <button class="mt-10" id="dialog1-close-this-dialog" @click="closeThisDialog">closeThisDialog</button>
+      <button class="mt-10" id="dialog1-go-next-page" @click="goNextPage">
+        go next page
+      </button>
+      <button class="mt-10" id="dialog1-open-dialog2" @click="openDialog2">
+        openDialog2
+      </button>
+      <button class="mt-10" id="dialog1-close-dialog" @click="closeDialog">
+        closeDialog
+      </button>
+      <button class="mt-10" id="dialog1-close-this-dialog" @click="closeThisDialog">
+        closeThisDialog
+      </button>
+      <button class="mt-10" @click="checkGetParentPage">
+        check getParentPage
+      </button>
+      <button class="mt-10" @click="checkGetElementById">
+        check getElementById
+      </button>
+      <button class="mt-10" @click="toggleBackgroundColor">
+        toggleBackgroundColor
+      </button>
       <button class="mt-10" id="dialog1-back" @click="back">back</button>
-      <input class="uni-common-mt" style="border-width: 1px;border-style: solid;" :focus="true" value="DialogPage中焦点测试"/>
+      <input class="uni-common-mt" style="border-width: 1px; border-style: solid" :focus="true"
+        value="DialogPage中焦点测试" />
     </view>
   </view>
 </template>
@@ -23,6 +41,7 @@
     data() {
       return {
         title: 'dialog 1',
+        backgroundColorContent: 'transparent'
       }
     },
     onLoad(options : OnLoadOptions) {
@@ -137,6 +156,39 @@
           }
         })
       },
+      checkGetParentPage() : boolean {
+        const parentPage = this.$page.getParentPage()
+        console.log('checkGetParentPage', parentPage)
+        const res = parentPage != null
+        uni.showToast(res ? {
+          title: 'check success'
+        } : {
+          title: 'check fail',
+          icon: 'error'
+        })
+        return res
+      },
+      checkGetElementById() : boolean {
+        const page = this.$page
+        const element = page.getElementById('dialog1-go-next-page')
+        let res = element != null
+        // #ifndef APP-ANDROID
+        if (res) {
+          const elPage = element!.getPage()
+          console.log('elPage', elPage)
+          res = elPage === page
+        }
+        // #endif
+        console.log('check getElementById', res)
+        uni.showToast(res ? { title: 'check success' } : { title: 'check fail', icon: 'error' })
+        return res
+      },
+      toggleBackgroundColor() {
+        this.backgroundColorContent = this.backgroundColorContent == 'transparent' ? 'rgb(0, 122, 255)' : 'transparent'
+        this.$page.setPageStyle({
+          backgroundColorContent: this.backgroundColorContent
+        })
+      },
       back() {
         uni.navigateBack()
       }
@@ -164,4 +216,4 @@
   .mt-10 {
     margin-top: 10px;
   }
-</style>
+</style>

pages/API/dialog-page/dialog-page.test.js

 jest.setTimeout(20000)
 
 const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
-const isWeb = platformInfo.startsWith('web')
+const isWeb = platformInfo.startsWith('web')
 const isAndroid = platformInfo.startsWith('android')
 const FIRST_PAGE_PATH = '/pages/API/dialog-page/dialog-page'
 const NEXT_PAGE_PATH = '/pages/API/dialog-page/next-page'
 
 describe('dialog page', () => {
   if (process.env.UNI_AUTOMATOR_APP_WEBVIEW == 'true') {
-		it('skip app-webview', () => {
-			expect(1).toBe(1)
-		})
-		return
-	}
+    it('skip app-webview', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
 
   let page;
   let initLifeCycleNum;
@@ -24,8 +24,8 @@ describe('dialog page', () => {
     await page.callMethod('setLifeCycleNum', 0)
     lifecycleNum = await page.callMethod('getLifeCycleNum')
     expect(lifecycleNum).toBe(0)
-  });
-
+  });
+
   it('open dialog1', async () => {
     await page.callMethod('openDialog1');
     // 无法通过获取 dom 元素来判断是否打开了 dialogPage
@@ -48,6 +48,18 @@ describe('dialog page', () => {
     expect(lifecycleNum).toBe(7)
     await page.callMethod('setLifeCycleNum', 0)
   });
+  it('check dialogPage methods', async () => {
+    expect(await page.callMethod('dialogPageCheckGetDialogPages')).toBe(true)
+    let dialogPageStyle = await page.callMethod('dialogPageGetPageStyle')
+    expect(dialogPageStyle.backgroundColorContent).not.toBe('red')
+    await page.callMethod('dialogPageSetPageStyle')
+    dialogPageStyle = await page.callMethod('dialogPageGetPageStyle')
+    expect(dialogPageStyle.backgroundColorContent).toBe('red')
+    expect(await page.callMethod('dialogPageCheckGetElementById')).toBe(true)
+    expect(await page.callMethod('dialogCheckGetAndroidView')).toBe(isAndroid)
+    expect(await page.callMethod('dialogCheckGetIOSView')).toBe(false)
+    expect(await page.callMethod('dialogCheckGetHTMLElement')).toBe(isWeb)
+  })
 
   it('closeDialogPage', async () => {
     await page.callMethod('closeDialog');
@@ -281,51 +293,54 @@ describe('dialog page', () => {
     lifecycleNum = await page.callMethod('getLifeCycleNum')
     expect(lifecycleNum).toBe(2)
   })
-
-
-  it('input-hold-keyboard in dialog', async () => {
-    await page.callMethod('jest_OpenDialog1')
-    await page.waitFor(2000);
-    await page.callMethod('jest_getTapPoint')
-    const point_x = await page.data('jest_click_x');
-    const point_y = await page.data('jest_click_y');
-    if (isAndroid){
-      await program.adbCommand("input tap" + " " + point_x + " " + point_y)
-      console.log("input tap" + " " + point_x + " " + point_y);
-    } else {
-      await program.tap({x: point_x, y: point_y})
-    }
-
-    await page.waitFor(1000);
-    const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-        }
-    })
-    expect(image).toSaveImageSnapshot()
-    await page.waitFor(2000);
-    await page.callMethod('jest_CloseDialog1')
-  })
-
-  it('dialogPage hideStatusBar hideBottomNavigationIndicator', async () => {
-    if (isAndroid) {
-      await page.callMethod('openDialog2ForTest');
-      await page.waitFor(1000);
-      await page.callMethod('setPageStyleForTest', {
-        hideStatusBar: true,
-        hideBottomNavigationIndicator: true
-      });
-      await page.waitFor(2000);
-      const image = await program.screenshot({
-        deviceShot: true
-      });
-      expect(image).toSaveImageSnapshot();
-      await page.waitFor(2000);
-      await page.callMethod('closeDialog2ForTest');
-    }
-  });
+
+
+  it('input-hold-keyboard in dialog', async () => {
+    await page.callMethod('jest_OpenDialog1')
+    await page.waitFor(2000);
+    await page.callMethod('jest_getTapPoint')
+    const point_x = await page.data('jest_click_x');
+    const point_y = await page.data('jest_click_y');
+    if (isAndroid) {
+      await program.adbCommand("input tap" + " " + point_x + " " + point_y)
+      console.log("input tap" + " " + point_x + " " + point_y);
+    } else {
+      await program.tap({
+        x: point_x,
+        y: point_y
+      })
+    }
+
+    await page.waitFor(1000);
+    const image = await program.screenshot({
+      deviceShot: true,
+      area: {
+        x: 0,
+        y: 200,
+      }
+    })
+    expect(image).toSaveImageSnapshot()
+    await page.waitFor(2000);
+    await page.callMethod('jest_CloseDialog1')
+  })
+
+  it('dialogPage hideStatusBar hideBottomNavigationIndicator', async () => {
+    if (isAndroid) {
+      await page.callMethod('openDialog2ForTest');
+      await page.waitFor(1000);
+      await page.callMethod('setPageStyleForTest', {
+        hideStatusBar: true,
+        hideBottomNavigationIndicator: true
+      });
+      await page.waitFor(2000);
+      const image = await program.screenshot({
+        deviceShot: true
+      });
+      expect(image).toSaveImageSnapshot();
+      await page.waitFor(2000);
+      await page.callMethod('closeDialog2ForTest');
+    }
+  });
 
   afterAll(async () => {
     await page.callMethod('setLifeCycleNum', initLifeCycleNum)

pages/API/dialog-page/dialog-page.uvue

@@ -15,12 +15,12 @@
     setLifeCycleNum
   } from '@/store/index.uts'
 
-  export default {
-    data() {
-      return {
-        jest_click_x: -1,
-        jest_click_y: -1
-      }
+  export default {
+    data() {
+      return {
+        jest_click_x: -1,
+        jest_click_y: -1
+      }
     },
     onLoad() {
       console.log('dialogPage parent onLoad')
@@ -176,36 +176,87 @@
       },
       getLifeCycleNum(): number {
         return state.lifeCycleNum
-      },
-      jest_OpenDialog1(){
-        uni.openDialogPage({
-          url: '/pages/API/dialog-page/dialog-1?name=dialog1'
-        })
-      },
-      jest_CloseDialog1(){
-        uni.closeDialogPage({})
-      },
-      jest_getTapPoint(){
-        const systemInfo = uni.getSystemInfoSync()
-        let ratio = 1
-        if (systemInfo.platform == 'android'){
-          ratio = systemInfo.devicePixelRatio
-        }
-        this.jest_click_x = systemInfo.screenWidth / 2 * ratio
-        this.jest_click_y = systemInfo.statusBarHeight * ratio + 10
-      },
-      openDialog2ForTest() {
-        uni.openDialogPage({
-          url: '/pages/API/dialog-page/dialog-2'
-        });
-      },
-      closeDialog2ForTest() {
-        uni.closeDialogPage({});
-      },
-      setPageStyleForTest(style : UTSJSONObject) {
-        const pages = this.$page.getDialogPages();
-        if (pages.length > 0) pages[pages.length - 1].setPageStyle(style);
-      }
+      },
+      jest_OpenDialog1() {
+        uni.openDialogPage({
+          url: '/pages/API/dialog-page/dialog-1?name=dialog1'
+        })
+      },
+      jest_CloseDialog1() {
+        uni.closeDialogPage({})
+      },
+      jest_getTapPoint() {
+        const systemInfo = uni.getSystemInfoSync()
+        let ratio = 1
+        if (systemInfo.platform == 'android') {
+          ratio = systemInfo.devicePixelRatio
+        }
+        this.jest_click_x = systemInfo.screenWidth / 2 * ratio
+        this.jest_click_y = systemInfo.statusBarHeight * ratio + 10
+      },
+      openDialog2ForTest() {
+        uni.openDialogPage({
+          url: '/pages/API/dialog-page/dialog-2'
+        });
+      },
+      closeDialog2ForTest() {
+        uni.closeDialogPage({});
+      },
+      setPageStyleForTest(style: UTSJSONObject) {
+        const pages = this.$page.getDialogPages();
+        if (pages.length > 0) pages[pages.length - 1].setPageStyle(style);
+      },
+      getDialogPage(): UniPage | null {
+        const dialogPages = this.$page.getDialogPages()
+        return dialogPages.length > 0 ? dialogPages[0] : null
+      },
+      dialogPageCheckGetDialogPages(): boolean {
+        const dialogPage = this.getDialogPage() !
+        const dialogPages = dialogPage.getDialogPages()
+        const res = dialogPages.length == 0
+        return res
+      },
+      dialogPageGetPageStyle(): UTSJSONObject {
+        const dialogPage = this.getDialogPage() !
+        return dialogPage.getPageStyle()
+      },
+      dialogPageSetPageStyle() {
+        const dialogPage = this.getDialogPage() !
+        dialogPage.setPageStyle({
+          backgroundColorContent: 'red'
+        })
+      },
+      dialogPageCheckGetElementById(): boolean {
+        const dialogPage = this.getDialogPage() !
+        const element = dialogPage.getElementById('dialog1-go-next-page')
+        let res = element != null
+        // #ifndef APP-ANDROID
+        if (res) {
+          const elPage = element!.getPage()
+          console.log('elPage', elPage)
+          res = elPage === dialogPage
+        }
+        // #endif
+        return res
+      },
+      dialogCheckGetAndroidView(): boolean {
+        const dialogPage = this.getDialogPage() !
+        const androidView = dialogPage.getAndroidView()
+        const res = androidView != null
+        return res
+      },
+      dialogCheckGetIOSView(): boolean {
+        const dialogPage = this.getDialogPage() !
+        const IOSView = dialogPage.getIOSView()
+        const res = IOSView != null
+        return res
+      },
+      dialogCheckGetHTMLElement(): boolean {
+        const dialogPage = this.getDialogPage() !
+        const HTMLView = dialogPage.getHTMLElement()
+        const res = HTMLView != null
+        return res
+      },
     }
   }
 </script>