test(navigator): page lifecycle

pages.json

@@ -148,15 +148,9 @@
       }
     },
     {
-      "path": "pages/API/navigator/new-page/new-uvue-page-1",
+      "path": "pages/API/navigator/new-page/new-page",
       "style": {
-        "navigationBarTitleText": "新UVUE页面1"
-      }
-    },
-    {
-      "path": "pages/API/navigator/new-page/new-uvue-page-2",
-      "style": {
-        "navigationBarTitleText": "新UVUE页面2"
+        "navigationBarTitleText": "新页面"
       }
     },
     {
@@ -597,14 +591,12 @@
       "style": {
         "navigationBarTitleText": ""
       }
-    }
-      ,{
-            "path" : "pages/API/get-battery-info/get-battery-info",
-            "style" :                                                                                    
+    },
     {
+      "path": "pages/API/get-battery-info/get-battery-info",
+      "style": {
         "navigationBarTitleText": "电量"
       }
-            
     }
   ],
   "globalStyle": {
@@ -621,7 +613,8 @@
     "selectedColor": "#007AFF",
     "borderStyle": "black",
     "backgroundColor": "#F8F8F8",
-    "list": [{
+    "list": [
+      {
         "pagePath": "pages/tabBar/component",
         "iconPath": "static/component.png",
         "selectedIconPath": "static/componentHL.png",
@@ -647,12 +640,15 @@
       }
     ]
   },
-  "condition": { //模式配置，仅开发期间生效
+  "condition": {
+    //模式配置，仅开发期间生效
     "current": 0, //当前激活的模式(list 的索引项)
-    "list": [{
+    "list": [
+      {
         "name": "", //模式名称
         "path": "", //启动页面，必选
         "query": "" //启动参数，在页面的onLoad函数里面得到
-    }]
+      }
+    ]
   }
 }

pages/API/navigator/navigator.uvue

@@ -2,31 +2,30 @@
   <view>
     <page-head title="navigate"></page-head>
     <view class="uni-padding-wrap uni-common-mt">
-      <view style="flex-direction: row">
-        <text style="width: 170px">onLoad触发时间戳：</text>
-        <text style="text-align: right">{{ onLoadTime }}</text>
+      <view class="direction-row">
+        <text class="label">onLoad触发时间戳:</text>
+        <text>{{ onLoadTime }}</text>
       </view>
-      <view style="flex-direction: row">
-        <text style="width: 170px">onReady触发时间戳：</text>
-        <text style="text-align: right">{{ onReadyTime }}</text>
+      <view class="direction-row">
+        <text class="label">onShow触发时间戳:</text>
+        <text>{{ onShowTime }}</text>
       </view>
-      <view style="flex-direction: row">
-        <text style="width: 170px">onUnload触发时间戳：</text>
-        <text style="text-align: right">见控制台</text>
+      <view class="direction-row">
+        <text class="label">onReady触发时间戳:</text>
+        <text>{{ onReadyTime }}</text>
       </view>
-      <view style="flex-direction: row">
-        <text style="width: 170px">onShow触发时间戳：</text>
-        <text style="text-align: right">{{ onShowTime }}</text>
+      <view class="direction-row">
+        <text class="label">onHide触发时间戳:</text>
+        <text>{{ onHideTime }}</text>
       </view>
-      <view style="flex-direction: row">
-        <text style="width: 170px">onHide触发时间戳：</text>
-        <text style="text-align: right">{{ onHideTime }}</text>
+      <view class="direction-row">
+        <text class="label">onBackPress触发时间戳:</text>
+        <text>见控制台</text>
+      </view>
+      <view class="direction-row">
+        <text class="label">onUnload触发时间戳:</text>
+        <text>见控制台</text>
       </view>
-      <text>onBackPress触发时间戳：见控制台</text>
-      <!-- <view style="flex-direction: row">
-				<text style="width: 170px">onBackPress触发时间戳：</text>
-				<text style="text-align: right">见控制台</text>
-			</view> -->
       <view class="uni-btn-v">
         <button @tap="navigateTo" class="uni-btn">
           跳转新页面，并传递数据
@@ -43,7 +42,7 @@
   </view>
 </template>
 <script lang="ts">
-import { setLifeCycleNum, state } from '@/store/index.uts'
+import { state, setLifeCycleNum } from '@/store/index.uts'
 export default {
   data() {
     return {
@@ -67,56 +66,110 @@ export default {
   },
   onHide() {
     this.onHideTime = Date.now()
-    console.log('onHide', Date.now())
+    console.log('onHide', this.onHideTime)
+  },
+  onBackPress(options: OnBackPressOptions): boolean | null {
+    console.log('onBackPress', Date.now())
+    console.log('onBackPress from', options.from)
+    return null
   },
   onUnload() {
-    console.log('onUnLoad', Date.now())
+    console.log('onUnload', Date.now())
   },
-  /* onBackPress() {
-			console.log('onBackPress', Date.now()) // 为何不生效？？？
-			// 要把event也打出来
-		}, */
   methods: {
     navigateTo() {
       uni.navigateTo({
-        url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello',
+        url: '/pages/API/navigator/new-page/new-page?data=Hello',
+        success(result) {
+          console.log('navigateTo success', result.errMsg)
+        },
+        fail(error) {
+          console.log('navigateTo fail', error.errMsg)
+        },
+        complete(result) {
+          console.log('navigateTo complete', result.errMsg)
+        },
       })
     },
     navigateBack() {
       uni.navigateBack({
-        delta: 1,
+        success(result) {
+          console.log('navigateBack success', result.errMsg)
+        },
+        fail(error) {
+          console.log('navigateBack fail', error.errMsg)
+        },
+        complete(result) {
+          console.log('navigateBack complete', result.errMsg)
+        },
       })
     },
     redirectTo() {
       uni.redirectTo({
-        url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello',
+        url: '/pages/API/navigator/new-page/new-page?data=Hello',
+        success(result) {
+          console.log('redirectTo success', result.errMsg)
+        },
+        fail(error) {
+          console.log('redirectTo fail', error.errMsg)
+        },
+        complete(result) {
+          console.log('redirectTo complete', result.errMsg)
+        },
       })
     },
     switchTab() {
       uni.switchTab({
         url: '/pages/tabBar/template',
+        success(result) {
+          console.log('switchTab success', result.errMsg)
+        },
+        fail(error) {
+          console.log('switchTab fail', error.errMsg)
+        },
+        complete(result) {
+          console.log('switchTab complete', result.errMsg)
+        },
       })
     },
     reLaunch() {
       uni.reLaunch({
         url: '/pages/tabBar/component',
+        success(result) {
+          console.log('reLaunch success', result.errMsg)
+        },
+        fail(error) {
+          console.log('reLaunch fail', error.errMsg)
+        },
+        complete(result) {
+          console.log('reLaunch complete', result.errMsg)
+        },
       })
     },
     customAnimation() {
       uni.navigateTo({
-        url: '/pages/API/navigator/new-page/new-uvue-page-1?data=使用自定义动画打开页面',
+        url: '/pages/API/navigator/new-page/new-page?data=自定义动画打开页面',
         animationType: 'slide-in-bottom',
         animationDuration: 200,
       })
     },
     // 自动化测试
-    setLifeCycleNum(num: number) {
-      setLifeCycleNum(num)
-    },
-		// 自动化测试
     getLifeCycleNum(): number {
       return state.lifeCycleNum
     },
+    // 自动化测试
+    setLifeCycleNum(num: number) {
+      setLifeCycleNum(num)
+    },
   },
 }
 </script>
+
+<style>
+.direction-row {
+  flex-direction: row;
+}
+.label {
+  width: 190px;
+}
+</style>

pages/API/navigator/new-page/new-page.test.js

+const PAGE_PATH = '/pages/API/navigator/new-page/new-page'
+const INTERMEDIATE_PAGE_PATH = '/pages/API/navigator/navigator'
+
+describe('page-lifecycle', () => {
+  let page
+  let lifeCycleNum
+  beforeAll(async () => {
+    page = await program.reLaunch(INTERMEDIATE_PAGE_PATH)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(1100)
+
+    const initLifecycleNum = 0
+    await page.callMethod('setLifeCycleNum', initLifecycleNum)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(initLifecycleNum)
+
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(1000)
+  })
+  it('onLoad onShow onReady', async () => {
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(120)
+  })
+  it('onHide', async () => {
+    page = await program.navigateTo(INTERMEDIATE_PAGE_PATH)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(110)
+    page = await program.navigateBack()
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(120)
+  })
+  it('onUnload', async () => {
+    page = await program.redirectTo(INTERMEDIATE_PAGE_PATH)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(20)
+  })
+  it('onBackPress', async () => {
+    page = await program.navigateTo(PAGE_PATH)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(140)
+    page = await program.navigateBack()
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(30)
+  })
+  it('onLastPageBackPress', async () => {
+    page = await program.navigateBack()
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(-970)
+
+    const resetLifecycleNum = 1100
+    await page.callMethod('setLifeCycleNum', resetLifecycleNum)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(resetLifecycleNum)
+  })
+})

pages/API/navigator/new-page/new-page.uvue

+<template>
+  <view class="uni-padding-wrap">
+    <text>onLoad 接收到参数</text>
+    <text>data: {{ data }}</text>
+  </view>
+</template>
+<script lang="ts">
+import { state, setLifeCycleNum } from '@/store/index.uts'
+export default {
+  data() {
+    return {
+      data: '',
+    }
+  },
+  onLoad(options: OnLoadOptions) {
+    console.log('new-page onLoad', options)
+    if(options.has('data')) {
+      this.data = options.get('data')!
+    }
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum + 100)
+  },
+  onShow() {
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum + 10)
+  },
+  onReady() {
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum + 10)
+  },
+  onHide() {
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum - 10)
+  },
+  onBackPress(_: OnBackPressOptions): boolean | null {
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum - 10)
+    return null
+  },
+  onUnload() {
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum - 100)
+  },
+  methods: {
+    // 自动化测试
+    getLifeCycleNum(): number {
+      return state.lifeCycleNum
+    },
+    // 自动化测试
+    setLifeCycleNum(num: number) {
+      setLifeCycleNum(num)
+    },
+  },
+}
+</script>

pages/API/navigator/new-page/new-uvue-page-1.uvue

-<template>
-    <view class="root">
-        <view class="page-body">
-            <view class="new-page__text-box">
-                <text class="new-page__text">从上个页面接收到参数：{{data}}</text>
-            </view>
-           <view class="new-page__color" @click="changeColor" :style="{backgroundColor:stateData.currentColor}">
-                <text class="new-page__color-text">点击改变颜色</text>
-            </view>
-            <view class="new-page__text-box">
-                <text class="new-page__text">点击上方色块在页面之间进行通讯</text>
-            </view>
-            <view class="new-page__button">
-                <button class="new-page__button-item" @click="navToUvue">跳转UVUE页面</button>
-                <button class="new-page__button-item" @click="navToVue">跳转VUE页面</button>
-            </view>
-        </view>
-    </view>
-</template>
-<script lang="ts">
-    import { State, state, setColorIndex } from '@/store/index.uts'
-    export default {
-        data() {
-            return {
-                data: '',
-                stateData: state as State
-            }
-        },
-        methods: {
-            changeColor() {
-                setColorIndex(state.colorIndex > 1 ? 0 : state.colorIndex + 1)
-            },
-            navToUvue() {
-                uni.navigateTo({
-                    url: 'pages/API/navigator/new-page/new-uvue-page-2'
-                })
-            },
-            navToVue() {
-                uni.showToast({
-                    icon: 'none',
-                    title: '暂不支持'
-                })
-                // uni.navigateTo({
-                //     url:'new-vue-page-2'
-                // })
-            }
-        },
-        onLoad(e: Map<string, string>) {
-            // TODO 类型后续会做调整
-            this.data = e['data']!
-        }
-    }
-</script>
-<style>
-    .new-page__text {
-        font-size: 14px;
-        color: #666666;
-    }
-
-    .root {
-        flex-direction: column;
-    }
-
-    .page-body {
-        flex: 1;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: center;
-        padding-top: 50px;
-    }
-
-    .new-page__text-box {
-        padding: 20px;
-    }
-
-    .new-page__color {
-        width: 200px;
-        height: 100px;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .new-page__color-text {
-        font-size: 14px;
-        color: #FFFFFF;
-        line-height: 30px;
-        text-align: center;
-    }
-
-    .new-page__button-item {
-        margin-top: 15px;
-        width: 300px;
-    }
-</style>
\ No newline at end of file

pages/API/navigator/new-page/new-uvue-page-2.uvue

-<template>
-    <view class="root">
-        <view class="page-body">
-            <view class="new-page__text-box">
-                <text class="new-page__text">新UVUE页面2</text>
-            </view>
-            <view class="new-page__color" @click="setColor" :style="{backgroundColor: stateData.currentColor}">
-                <text class="new-page__color-text">点击改变颜色</text>
-            </view>
-            <view class="new-page__text-box">
-                <text class="new-page__text">点击上方色块在页面之间进行通讯</text>
-            </view>
-        </view>
-    </view>
-</template>
-<script>
-    import {
-        State,
-        state,
-        setColorIndex
-    } from '@/store/index.uts'
-    export default {
-        data() {
-            return {
-                data: '',
-                stateData: state as State
-            }
-        },
-        methods: {
-            setColor() {
-                setColorIndex(state.colorIndex > 1 ? 0 : state.colorIndex + 1)
-            }
-        }
-    }
-</script>
-<style>
-    .new-page__text {
-        font-size: 14px;
-        color: #666666;
-    }
-
-    .root {
-        flex-direction: column;
-    }
-
-    .page-body {
-        flex: 1;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: center;
-        padding-top: 50px;
-    }
-
-    .new-page__text-box {
-        padding: 20px;
-    }
-
-    .new-page__color {
-        width: 200px;
-        height: 100px;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .new-page__color-text {
-        font-size: 14px;
-        color: #FFFFFF;
-        line-height: 30px;
-        text-align: center;
-    }
-
-    .new-page__button-item {
-        margin-top: 15px;
-        width: 300px;
-    }
-</style>
\ No newline at end of file