feat(actionSheet): 补充自定义 titleColor cancelText cancelColor backgroundColor 示例及测试

pages/API/show-action-sheet/show-action-sheet.test.js

-// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
+const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
+const isAndroid = platformInfo.startsWith('android')
+const isIos = platformInfo.startsWith('ios')
+const isApp = isAndroid || isIos
+const isWeb = platformInfo.startsWith('web')
 
-describe('API-loading', () => {
 
+describe('API-loading', () => {
   let page;
-  const isApp = process.env.UNI_OS_NAME === "android" || process.env.UNI_OS_NAME === "ios";
+  let screenShotOptions = {};
+  async function showActionSheet(page) {
+    const btn = await page.$('#btn-action-sheet-show')
+    await btn.tap()
+    await page.waitFor(1000);
+  }
+
+  async function screenshot() {
+    const image = await program.screenshot(screenShotOptions);
+    expect(image).toSaveImageSnapshot();
+  }
 
   beforeAll(async () => {
     page = await program.reLaunch('/pages/API/show-action-sheet/show-action-sheet')
-    await page.waitFor(500);
-  });
-
-
-  it("onload-action-sheet-test", async () => {
+    await page.waitFor('view');
     if (isApp) {
-      await page.waitFor(500);
       const res = await page.callMethod('jest_getWindowInfo')
       const windowHeight = res.windowHeight * res.pixelRatio;
       const windowWidth = res.windowWidth * res.pixelRatio;
-      const image = await program.screenshot({
+      screenShotOptions = {
         deviceShot: true,
         area: {
           x: 0,
           y: 200,
-          height: windowHeight - 100,
-          width:windowWidth
+          height: windowHeight + (isAndroid ? 30 : 70),
+          width: windowWidth
         },
-      });
-
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
+      }
+    } else if (isWeb){
+      screenShotOptions = {
         fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
+      }
     }
-  })
-
-
-  it("action-sheet-test-current-0", async () => {
-
-    const res = await page.callMethod('jest_getWindowInfo')
-    const windowHeight = res.windowHeight * res.pixelRatio;
-    const windowWidth = res.windowWidth * res.pixelRatio;
-
-
-    await page.setData({
-      showErrorToast:false,
-      current: 0,
-      itemContentLarge:false,
-      itemNumLargeSelect:false,
-      itemColorCustom:false,
-    })
-
-    const btnToastDurationButton = await page.$('#btn-action-sheet-show')
-    await btnToastDurationButton.tap()
-    await page.waitFor(500);
-
-    if (isApp) {
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 100,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
-
+  });
 
+  it("onload showActionSheet", async () => {
+    await page.waitFor(isWeb ? 3000 : 1000);
+    await screenshot();
   })
 
-
-  it("action-sheet-test-current-0-largeContent", async () => {
-
-    const res = await page.callMethod('jest_getWindowInfo')
-    const windowHeight = res.windowHeight * res.pixelRatio;
-    const windowWidth = res.windowWidth * res.pixelRatio;
-
-
+  it("有标题", async () => {
     await page.setData({
       showErrorToast:false,
       current: 0,
-      itemContentLarge:true,
-      itemNumLargeSelect:false,
-      itemColorCustom:false,
     })
 
-    const btnToastDurationButton = await page.$('#btn-action-sheet-show')
-    await btnToastDurationButton.tap()
-    await page.waitFor(500);
-
-    if (isApp) {
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 100,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
-
+    await showActionSheet(page);
 
+    await screenshot();
   })
 
-
-  it("action-sheet-test-current-0-largeContent-largeNum", async () => {
-
-    const res = await page.callMethod('jest_getWindowInfo')
-    const windowHeight = res.windowHeight * res.pixelRatio;
-    const windowWidth = res.windowWidth * res.pixelRatio;
-
+  it("有标题 长内容", async () => {
     await page.setData({
-      showErrorToast:false,
-      current: 0,
       itemContentLarge:true,
-      itemNumLargeSelect:true,
-      itemColorCustom:false,
     })
 
-    const btnToastDurationButton = await page.$('#btn-action-sheet-show')
-    await btnToastDurationButton.tap()
-    await page.waitFor(500);
-
-    if (isApp) {
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 100,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
-
-
-  })
-
+    await showActionSheet(page);
 
-  it("action-sheet-test-current-0-largeContent-largeNum-customColor", async () => {
-
-    const res = await page.callMethod('jest_getWindowInfo')
-    const windowHeight = res.windowHeight * res.pixelRatio;
-    const windowWidth = res.windowWidth * res.pixelRatio;
-
-    await page.setData({
-      showErrorToast:false,
-      current: 0,
-      itemContentLarge:true,
-      itemNumLargeSelect:true,
-      itemColorCustom:true,
-    })
+    await screenshot();
 
-    const btnToastDurationButton = await page.$('#btn-action-sheet-show')
-    await btnToastDurationButton.tap()
-    await page.waitFor(500);
-
-    if (isApp) {
-      // add since 2024-04-22 app 不再截图，避免跨平台对比失败
-      // const image = await program.screenshot({
-      //   deviceShot: true,
-      //   area: {
-      //     x: 0,
-      //     y: 200,
-      //     height: windowHeight - 100,
-      //     width:windowWidth
-      //   },
-      // });
-      // expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
 
   })
 
-
-
-  it("action-sheet-test-current-1", async () => {
-
-    const res = await page.callMethod('jest_getWindowInfo')
-    const windowHeight = res.windowHeight * res.pixelRatio;
-    const windowWidth = res.windowWidth * res.pixelRatio;
-
-
+  it("有标题 超过6个item", async () => {
     await page.setData({
-      current: 1,
       itemContentLarge:false,
-      itemNumLargeSelect:false,
-      itemColorCustom:false,
-    })
-
-    const btnToastDurationButton = await page.$('#btn-action-sheet-show')
-    await btnToastDurationButton.tap()
-    await page.waitFor(500);
-
-    if (isApp) {
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 100,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
-
-
-
-  })
-
-
-
-  it("action-sheet-test-current-1-largeContent", async () => {
-
-    const res = await page.callMethod('jest_getWindowInfo')
-    const windowHeight = res.windowHeight * res.pixelRatio;
-    const windowWidth = res.windowWidth * res.pixelRatio;
-
-
-    await page.setData({
-      showErrorToast:false,
-      current: 1,
-      itemContentLarge:true,
-      itemNumLargeSelect:false,
-      itemColorCustom:false,
-    })
-
-    const btnToastDurationButton = await page.$('#btn-action-sheet-show')
-    await btnToastDurationButton.tap()
-    await page.waitFor(500);
-
-    if (isApp) {
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 100,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
-
-
-  })
-
-
-  it("action-sheet-test-current-1-largeContent-largeNum", async () => {
-
-    const res = await page.callMethod('jest_getWindowInfo')
-    const windowHeight = res.windowHeight * res.pixelRatio;
-    const windowWidth = res.windowWidth * res.pixelRatio;
-
-    await page.setData({
-      showErrorToast:false,
-      current: 1,
-      itemContentLarge:true,
       itemNumLargeSelect:true,
-      itemColorCustom:false,
     })
 
-    const btnToastDurationButton = await page.$('#btn-action-sheet-show')
-    await btnToastDurationButton.tap()
-    await page.waitFor(500);
+    await showActionSheet(page);
 
-    if (isApp) {
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 100,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
+    await screenshot();
 
 
   })
 
-
-  it("action-sheet-test-current-1-largeContent-largeNum-customColor", async () => {
-
-    const res = await page.callMethod('jest_getWindowInfo')
-    const windowHeight = res.windowHeight * res.pixelRatio;
-    const windowWidth = res.windowWidth * res.pixelRatio;
-
+  it("有标题 长内容 自定义 itemColor", async () => {
     await page.setData({
-      showErrorToast:false,
-      current: 1,
-      itemContentLarge:true,
-      itemNumLargeSelect:true,
-      itemColorCustom:true,
+      itemContentLarge: true,
+      itemNumLargeSelect: false,
+      itemColorCustom: true,
     })
 
-    const btnToastDurationButton = await page.$('#btn-action-sheet-show')
-    await btnToastDurationButton.tap()
-    await page.waitFor(500);
-
-    if (isApp) {
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 100,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
+    await showActionSheet(page);
 
+    await screenshot();
   })
 
-
-
-  it("action-sheet-test-current-2", async () => {
-
-    const res = await page.callMethod('jest_getWindowInfo')
-    const windowHeight = res.windowHeight * res.pixelRatio;
-    const windowWidth = res.windowWidth * res.pixelRatio;
-
-
+  it("无标题", async () => {
     await page.setData({
-      current: 2,
+      current: 1,
       itemContentLarge:false,
-      itemNumLargeSelect:false,
       itemColorCustom:false,
     })
 
-    const btnToastDurationButton = await page.$('#btn-action-sheet-show')
-    await btnToastDurationButton.tap()
-    await page.waitFor(500);
-
-    if (isApp) {
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 100,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
-
+    await showActionSheet(page);
 
+    await screenshot();
   })
 
-
-  it("action-sheet-test-current-2-largeContent", async () => {
-
-    const res = await page.callMethod('jest_getWindowInfo')
-    const windowHeight = res.windowHeight * res.pixelRatio;
-    const windowWidth = res.windowWidth * res.pixelRatio;
-
-
+  it("长标题", async () => {
     await page.setData({
-      showErrorToast:false,
       current: 2,
-      itemContentLarge:true,
-      itemNumLargeSelect:false,
-      itemColorCustom:false,
     })
 
-    const btnToastDurationButton = await page.$('#btn-action-sheet-show')
-    await btnToastDurationButton.tap()
-    await page.waitFor(500);
-
-    if (isApp) {
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 100,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
-
+    await showActionSheet(page);
 
+    await screenshot();
   })
 
-
-  it("action-sheet-test-current-2-largeContent-largeNum", async () => {
-
-    const res = await page.callMethod('jest_getWindowInfo')
-    const windowHeight = res.windowHeight * res.pixelRatio;
-    const windowWidth = res.windowWidth * res.pixelRatio;
-
+  it("custom titleColor cancelText cancelColor backgroundColor", async () => {
     await page.setData({
-      showErrorToast:false,
-      current: 2,
-      itemContentLarge:true,
-      itemNumLargeSelect:true,
-      itemColorCustom:false,
+      titleColorCustom: true,
+      cancelTextCustom: true,
+      cancelColorCustom: true,
+      backgroundColorCustom: true,
     })
+    await showActionSheet(page);
 
-    const btnToastDurationButton = await page.$('#btn-action-sheet-show')
-    await btnToastDurationButton.tap()
-    await page.waitFor(500);
-
-    if (isApp) {
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 100,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
-
-
+    await screenshot();
   })
+  it("hideActionSheet", async () => {
+    await page.callMethod('hideActionSheet')
+    await page.waitFor(1000);
 
-
-  it("action-sheet-test-current-2-largeContent-largeNum-customColor", async () => {
-
-    const res = await page.callMethod('jest_getWindowInfo')
-    const windowHeight = res.windowHeight * res.pixelRatio;
-    const windowWidth = res.windowWidth * res.pixelRatio;
-
-    await page.setData({
-      showErrorToast:false,
-      current: 2,
-      itemContentLarge:true,
-      itemNumLargeSelect:true,
-      itemColorCustom:true,
-    })
-
-    const btnToastDurationButton = await page.$('#btn-action-sheet-show')
-    await btnToastDurationButton.tap()
-    await page.waitFor(500);
-
-    if (isApp) {
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 100,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
-
+    await screenshot();
   })
-
-
-
 });

pages/API/show-action-sheet/show-action-sheet.uvue

-<template>
-  <!-- #ifdef APP -->
-  <scroll-view style="flex: 1;">
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1;">
   <!-- #endif -->
   <view>
     <page-head :title="title"></page-head>
@@ -14,27 +14,43 @@
     </view>
     <view class="uni-list">
       <view class="uni-list-cell uni-list-cell-pd">
-        <view class="uni-list-cell-db">自定义itemColor</view>
+        <view class="uni-list-cell-db">自定义 titleColor</view>
+        <switch :checked="titleColorCustom" @change="titleColorChange" />
+      </view>
+      <view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell-db">自定义 itemColor</view>
         <switch :checked="itemColorCustom" @change="itemColorChange" />
       </view>
       <view class="uni-list-cell uni-list-cell-pd">
-        <view class="uni-list-cell-db">超长文本和空文本item</view>
+        <view class="uni-list-cell-db">超长文本和空文本 item</view>
         <switch :checked="itemContentLarge" @change="itemContentLargeChange" />
       </view>
       <view class="uni-list-cell uni-list-cell-pd">
-        <view class="uni-list-cell-db">超过6个item</view>
+        <view class="uni-list-cell-db">超过6个 item</view>
         <switch :checked="itemNumLargeSelect" @change="itemNumLargeChange" />
       </view>
+      <view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell-db">自定义 cancelText</view>
+        <switch :checked="cancelTextCustom" @change="cancelTextChange" />
+      </view>
+      <view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell-db">自定义 cancelColor</view>
+        <switch :checked="cancelColorCustom" @change="cancelColorChange" />
+      </view>
+      <view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell-db">自定义 backgroundColor</view>
+        <switch :checked="backgroundColorCustom" @change="backgroundColorChange" />
+      </view>
     </view>
     <view class="uni-padding-wrap">
       <view class="uni-btn-v">
-        <button class="uni-btn-v" type="default" @tap="actionSheetTap" id="btn-action-sheet-show">弹出action
+        <button class="uni-btn-v" type="default" @tap="showActionSheet" id="btn-action-sheet-show">弹出action
           sheet</button>
       </view>
     </view>
-  </view>
-  <!-- #ifdef APP -->
-  </scroll-view>
+  </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
   <!-- #endif -->
 </template>
 <script lang="uts">
@@ -46,9 +62,13 @@
     data() {
       return {
         title: 'action-sheet',
+        titleColorCustom: false,
         itemColorCustom: false,
         itemContentLarge: false,
         itemNumLargeSelect: false,
+        cancelTextCustom: false,
+        cancelColorCustom: false,
+        backgroundColorCustom: false,
         showErrorToast: true,
         items: [{
           value: '标题',
@@ -85,6 +105,9 @@
           }
         }
       },
+      titleColorChange(e : UniSwitchChangeEvent) {
+        this.titleColorCustom = e.detail.value
+      },
       itemContentLargeChange: function (e : UniSwitchChangeEvent) {
         this.itemContentLarge = e.detail.value
       },
@@ -94,68 +117,68 @@
       itemNumLargeChange: function (e : UniSwitchChangeEvent) {
         this.itemNumLargeSelect = e.detail.value
       },
-      actionSheetTap() {
-
-        let itemInfo = ['item1', 'item2', 'item3', 'item4']
-
+      cancelTextChange: function (e : UniSwitchChangeEvent) {
+        this.cancelTextCustom = e.detail.value
+      },
+      cancelColorChange: function (e : UniSwitchChangeEvent) {
+        this.cancelColorCustom = e.detail.value
+      },
+      backgroundColorChange: function (e : UniSwitchChangeEvent) {
+        this.backgroundColorCustom = e.detail.value
+      },
+      showActionSheet() {
+        const options: ShowActionSheetOptions = {
+          title: this.items[this.current].value,
+          itemList: ['item1', 'item2', 'item3', 'item4'],
+          success: (res) => {
+            console.log(res.tapIndex);
+            uni.showToast({
+              title: "点击了第" + res.tapIndex + "个选项",
+              icon: "none"
+            })
+          },
+          fail: (error) => {
+            if (this.showErrorToast) {
+              uni.showToast({
+                title: error.errMsg,
+                icon: "none"
+              })
+            }
+            console.log(error);
+          }
+        }
         if (this.itemContentLarge) {
-          itemInfo = ['两个黄鹂鸣翠柳，一行白鹭上青天。窗含西岭千秋雪，门泊东吴万里船', '水光潋滟晴方好,山色空蒙雨亦奇。 欲把西湖比西子,淡妆浓抹总相宜', '']
+          options.itemList = ['两个黄鹂鸣翠柳，一行白鹭上青天。窗含西岭千秋雪，门泊东吴万里船', '水光潋滟晴方好,山色空蒙雨亦奇。 欲把西湖比西子,淡妆浓抹总相宜', '']
         }
-
         if (this.itemNumLargeSelect) {
           // 大量选项测试,不能超过6个元素 https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet
-          itemInfo = []
-          for (var i = 1; i <= 10; i++) {
-            itemInfo.push('两个黄鹂鸣翠柳，一行白鹭上青天');
+          const arr: string[] = []
+          for(let i = 0; i < 10; i++){
+            arr.push(`两个黄鹂鸣翠柳，一行白鹭上青天 ${i+1}`)
           }
+          options.itemList = arr
         }
-
-        const that = this
-        if (this.itemColorCustom) {
-          uni.showActionSheet({
-            title: this.items[this.current].value,
-            itemList: itemInfo,
-            itemColor: "#ff00ff",
-            success: (e) => {
-              console.log(e.tapIndex);
-              uni.showToast({
-                title: "点击了第" + e.tapIndex + "个选项",
-                icon: "none"
-              })
-            },
-            fail: (e) => {
-              if (this.showErrorToast) {
-                uni.showToast({
-                  title: e.errMsg,
-                  icon: "none"
-                })
-              }
-              console.log(e);
-            }
-          })
-        } else {
-          uni.showActionSheet({
-            title: this.items[this.current].value,
-            itemList: itemInfo,
-            success: (e) => {
-              console.log(e.tapIndex);
-              uni.showToast({
-                title: "点击了第" + e.tapIndex + "个选项",
-                icon: "none"
-              })
-            },
-            fail: (e) => {
-              console.log(e);
-              if (this.showErrorToast) {
-                uni.showToast({
-                  title: e.errMsg,
-                  icon: "none"
-                })
-              }
-            }
-          })
+        if(this.titleColorCustom){
+          options.titleColor = '#007AFF'
+        }
+        if(this.itemColorCustom){
+          options.itemColor = '#ff00ff'
+        }
+        if(this.cancelTextCustom){
+          options.cancelText = 'custom cancel'
         }
+        if(this.cancelColorCustom){
+          options.cancelColor = '#007AFF'
+        }
+        if(this.backgroundColorCustom){
+          options.backgroundColor = '#ccc'
+        }
+        uni.showActionSheet(options)
       },
+      // 自动化测试
+      hideActionSheet(){
+        uni.hideActionSheet()
+      }
     }
   }
-</script>
+</script>