更新showToast示例

pages/API/show-toast/show-toast.test.js

 // uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
 
 describe('API-toast', () => {
-
   let page;
   const isApp = process.env.UNI_OS_NAME === "android" || process.env.UNI_OS_NAME === "ios";
-
-
   beforeAll(async () => {
     page = await program.reLaunch('/pages/API/show-toast/show-toast')
-    await page.waitFor(600);
+    await page.waitFor("view");
   });
 
-
-
-  it("onload-toast-test", async () => {
-
-
+  async function toScreenshot(imgName) {
     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({
         deviceShot: true,
         area: {
@@ -31,163 +23,53 @@ describe('API-toast', () => {
           width:windowWidth
         },
       });
-      expect(image).toSaveImageSnapshot();
+      expect(image).toSaveImageSnapshot({customSnapshotIdentifier() {
+        return imgName
+      }})
     }else{
       const image = await program.screenshot({
         deviceShot: true,
         fullPage: true
       });
-      expect(image).toSaveImageSnapshot()
+      expect(image).toSaveImageSnapshot({customSnapshotIdentifier() {
+        return imgName
+      }})
     }
-  })
-
-
-
-  it("btn-toast-default-1", async () => {
-    const btnToastDefaultButton = await page.$('#btn-toast-default')
-    await btnToastDefaultButton.tap()
-    await page.waitFor(200)
-    if (isApp) {
-
-      const res = await page.callMethod('jest_getWindowInfo')
-      const windowHeight = res.windowHeight * res.pixelRatio;
-      const windowWidth = res.windowWidth * res.pixelRatio;
-
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 200,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
+    await page.waitFor(500);
   }
-  })
-
 
-
-  it("btn-toast-duration-1", async () => {
-    const btnToastDurationButton = await page.$('#btn-toast-duration')
-    await btnToastDurationButton.tap()
-    await page.waitFor(2000)
-    if (isApp) {
-      const res = await page.callMethod('jest_getWindowInfo')
-      const windowHeight = res.windowHeight * res.pixelRatio;
-      const windowWidth = res.windowWidth * res.pixelRatio;
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 200,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
+  it("onload-toast-test", async () => {
+    await toScreenshot('toast-onload')
   })
 
-  it("btn-toast-errorIcon-1", async () => {
-    const btnToastErrorIconButton = await page.$('#btn-toast-errorIcon')
-    await btnToastErrorIconButton.tap()
-    await page.waitFor(200)
-    if (isApp) {
-      const res = await page.callMethod('jest_getWindowInfo')
-      const windowHeight = res.windowHeight * res.pixelRatio;
-      const windowWidth = res.windowWidth * res.pixelRatio;
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 200,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
+  it("icon-toast-test", async () => {
+    const icons = await page.$$('.radio-icon')
+    for (let i = 0; i < icons.length; i++) {
+      await icons[i].tap()
+      const iconText = await icons[i].text()
+      await page.callMethod('toast1Tap')
+      await page.waitFor(100);
+      await toScreenshot(`${iconText}`)
     }
   })
 
-
-  it("btn-toast-loading-1", async () => {
-    const btnToastLoadingButton = await page.$('#btn-toast-loading')
-    await btnToastLoadingButton.tap()
-    await page.waitFor(200)
-
-    const btnToastHideButton = await page.$('#btn-toast-hide')
-    await btnToastHideButton.tap()
-    await page.waitFor(1000)
-
-    if (isApp) {
-      const res = await page.callMethod('jest_getWindowInfo')
-      const windowHeight = res.windowHeight * res.pixelRatio;
-      const windowWidth = res.windowWidth * res.pixelRatio;
-      const image = await program.screenshot({
-        deviceShot: true,
-        area: {
-          x: 0,
-          y: 200,
-          height: windowHeight - 200,
-          width:windowWidth
-        },
-      });
-      expect(image).toSaveImageSnapshot();
-    }else{
-      const image = await program.screenshot({
-        deviceShot: true,
-        fullPage: true
-      });
-      expect(image).toSaveImageSnapshot()
-    }
+  it("image-toast-test", async () => {
+    await page.setData({imageSelect: true})
+    await page.waitFor(300);
+    await page.callMethod('toast1Tap')
+    await page.waitFor(300);
+    await toScreenshot('toast-image')
   })
 
-
-  // it("btn-toast-postion-bottom-1", async () => {
-  //   const btnToastButton = await page.$('#btn-toast-postion-bottom')
-  //   await btnToastButton.tap()
-  //   await page.waitFor(200)
-  //   if (isApp) {
-  //     const windowHeight = uni.getWindowInfo().windowHeight;
-  //     const windowWidth = uni.getWindowInfo().windowWidth;
-  //     const image = await program.screenshot({
-  //       deviceShot: true,
-  //       area: {
-  //         x: 0,
-  //         y: 200,
-  //         height: windowHeight,
-  //         width:windowWidth
-  //       },
-  //     });
-  //     expect(image).toSaveImageSnapshot();
-  //   }else{
-  //     const image = await program.screenshot({
-  //       deviceShot: true,
-  //       fullPage: true
-  //     });
-  //     expect(image).toSaveImageSnapshot()
-  //   }
-  // })
-
-
+  it("duration-toast-test", async () => {
+    await page.setData({intervalSelect: 4000})
+    await page.callMethod('toast1Tap')
+    await page.waitFor(2000);
+    await toScreenshot('toast-duration-2000')
+    await page.waitFor(1000);
+    await page.callMethod('hideToast')
+    await page.waitFor(300);
+    await toScreenshot('toast-duration-end')
+  })
 
 });

pages/API/show-toast/show-toast.uvue

 <template>
-  <view>
+  <!-- #ifdef APP -->
+  <scroll-view direction="vertical" style="flex:1">
+  <!-- #endif -->
     <page-head :title="title"></page-head>
     <view class="uni-padding-wrap">
+      <view class="uni-padding-wrap">
+        <text class="uni-title-text uni-common-mb">设置icon</text>
+      </view>
+      <view class="uni-list uni-common-pl">
+        <radio-group @change="radioChangeIcon">
+          <radio class="uni-list-cell uni-list-cell-pd radio-icon" v-for="(icon, index) in icon_enum" :key="icon.value"
+            :class="index < icon_enum.length - 1 ? 'uni-list-cell-line' : ''" :value="icon.value"
+            :checked="index === icon_current">{{icon.name}}</radio>
+        </radio-group>
+      </view>
+      <view class="uni-list-cell uni-list-cell-padding">
+        <view class="uni-list-cell-db">是否显示自定义图标</view>
+        <switch :checked="imageSelect" @change="change_image_boolean" />
+      </view>
+      <view class="uni-list-cell uni-list-cell-padding">
+        <view class="uni-list-cell-db">是否显示透明蒙层-屏蔽点击事件</view>
+        <switch :checked="maskSelect" @change="change_mask_boolean" />
+      </view>
+      <view class="uni-title uni-list-cell-padding">提示的延迟时间，默认：1500（单位毫秒）</view>
+      <view class="uni-list-cell-padding">
+        <slider @change="sliderChange" foreColor="#007AFF" :value="intervalSelect" :min="1500" :max="5000" :show-value="true" />
+      </view>
       <view class="uni-btn-v">
-        <button class="uni-btn-v" type="default" @tap="toast1Tap" id="btn-toast-default" >点击弹出默认toast</button>
-        <button class="uni-btn-v" type="default" @tap="toastTapIconError" id="btn-toast-errorIcon">点击弹出设置icon的toast</button>
-        <button class="uni-btn-v" type="default" @tap="toast2Tap" id="btn-toast-duration">点击弹出设置duration的toast</button>
-        <button class="uni-btn-v" type="default" @tap="toast3Tap" id="btn-toast-loading">点击弹出显示loading的toast</button>
-        <!-- #ifndef MP-ALIPAY -->
-        <button class="uni-btn-v" type="default" @tap="toast4Tap">点击弹出显示自定义图片的toast</button>
-        <!-- #endif -->
-        <!-- #ifdef APP -->
-        <button class="uni-btn-v" type="default" @tap="toast5Tap" id="btn-toast-postion-bottom">点击显示无图标的居底toast</button>
-        <!-- #endif -->
+        <button class="uni-btn-v" type="default" @tap="toast1Tap" id="btn-toast-default">点击弹出toast</button>
         <button class="uni-btn-v" type="default" @tap="hideToast" id="btn-toast-hide">点击隐藏toast</button>
       </view>
-      <text>{{exeRet}}</text>
+      <!-- #ifdef APP -->
+      <view class="uni-padding-wrap uni-common-mt">
+        <text class="uni-title-text uni-common-mb"> 设置position，仅App生效 </text>
+      </view>
+      <view class="uni-list uni-common-pl">
+         <radio-group @change="radioChangePosition">
+           <radio class="uni-list-cell uni-list-cell-pd radio-position" v-for="(position, index) in position_enum" :key="position.value"
+             :class="index < position_enum.length - 1 ? 'uni-list-cell-line' : ''" :value="position.value"
+             :checked="index === position_current">{{position.name}}</radio>
+         </radio-group>
       </view>
+      <button class="uni-btn uni-btn-v uni-common-mb" type="default" @tap="toast2Tap">点击弹出设置position的toast</button>
+      <!-- #endif -->
+      <text>{{exeRet}}</text>
     </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
-<script>
+<script lang="uts">
+  type IconItemType = {
+    value : "success" | "error" | "fail" | "exception" | "loading" | "none";
+    name : string
+  }
+  type PositionItemType = {
+    value : "top" | "center" | "bottom";
+    name : string
+  }
   export default {
     data() {
       return {
         title: 'toast',
-        exeRet: ''
+        exeRet: '',
+        imageSelect:false,
+        maskSelect: false,
+        intervalSelect: 1500,
+        position_current:0,
+        position_enum: [
+          { "value": "top", "name": "top: 居上显示" },
+          { "value": "center", "name": "center: 居中显示" },
+          { "value": "bottom", "name": "bottom: 居底显示" },
+        ] as PositionItemType[],
+        icon_current:0,
+        icon_enum: [
+          {
+            value: 'success',
+            name: '显示成功图标',
+          },
+          {
+            value: 'error',
+            name: '显示错误图标',
+          },
+          // {
+          //   value: 'fail',
+          //   name: '显示错误图标',
+          // },
+          // {
+          //   value: 'exception',
+          //   name: '显示异常图标，此时title文本无长度显示',
+          // },
+          {
+            value: 'loading',
+            name: '显示加载图标',
+          },
+          {
+            value: 'none',
+            name: '不显示图标',
+          },
+        ] as IconItemType[],
       }
     },
     onLoad() {
@@ -41,59 +115,40 @@
       jest_getWindowInfo() : GetWindowInfoResult {
         return uni.getWindowInfo();
       },
-      toast1Tap: function () {
-        uni.showToast({
-          title: "默认",
-          success: (res) => {
-            this.exeRet = "success:" + JSON.stringify(res)
-          },
-          fail: (res) => {
-            this.exeRet = "fail:" + JSON.stringify(res)
-          },
-        })
-      },
-      toastTapIconError: function () {
-        uni.showToast({
-          title: "默认",
-          icon: 'error',
-          success: (res) => {
-            this.exeRet = "success:" + JSON.stringify(res)
-          },
-          fail: (res) => {
-            this.exeRet = "fail:" + JSON.stringify(res)
-          },
-        })
-      },
-      toast2Tap: function () {
-        uni.showToast({
-          title: "duration 3000",
-          duration: 3000,
-          success: (res) => {
-            this.exeRet = "success:" + JSON.stringify(res)
-          },
-          fail: (res) => {
-            this.exeRet = "fail:" + JSON.stringify(res)
+      radioChangeIcon(e : UniRadioGroupChangeEvent) {
+        for (let i = 0; i < this.icon_enum.length; i++) {
+          if (this.icon_enum[i].value === e.detail.value) {
+            this.icon_current = i;
+            break;
+          }
+        }
       },
-        })
+      change_image_boolean: function (e : UniSwitchChangeEvent) {
+        this.imageSelect = e.detail.value
       },
-      toast3Tap: function () {
-        uni.showToast({
-          title: "loading",
-          icon: "loading",
-          duration: 5000,
-          success: (res) => {
-            this.exeRet = "success:" + JSON.stringify(res)
+      change_mask_boolean: function (e : UniSwitchChangeEvent) {
+        this.maskSelect = e.detail.value
       },
-          fail: (res) => {
-            this.exeRet = "fail:" + JSON.stringify(res)
+      sliderChange(e : UniSliderChangeEvent) {
+        this.intervalSelect = e.detail.value
       },
-        })
+      radioChangePosition(e : UniRadioGroupChangeEvent) {
+        for (let i = 0; i < this.position_enum.length; i++) {
+          if (this.position_enum[i].value === e.detail.value) {
+            this.position_current = i;
+            break;
+          }
+        }
       },
-      toast4Tap: function () {
+      toast1Tap: function () {
         uni.showToast({
-          title: "logo",
-          image: "/static/uni.png",
+          title: "默认",
+          icon: this.icon_enum[this.icon_current].value,
+          duration: this.intervalSelect,
+          image: this.imageSelect? "/static/uni.png" : null ,
+          mask: this.maskSelect,
           success: (res) => {
+            console.log('success:',res)
             this.exeRet = "success:" + JSON.stringify(res)
           },
           fail: (res) => {
@@ -102,10 +157,11 @@
         })
       },
       // #ifdef APP
-      toast5Tap: function () {
+      toast2Tap: function () {
+        let positionValue = this.position_enum[this.position_current].value
         uni.showToast({
-          title: "显示一段轻提示",
-          position: 'bottom',
+          title: "显示一段轻提示,position:" + positionValue,
+          position: positionValue,
           success: (res) => {
             this.exeRet = "success:" + JSON.stringify(res)
           },
@@ -121,3 +177,4 @@
     }
   }
 </script>
+