新增web端map、label、picker测试例

pages/API/map/map.test.js

+const PAGE_PATH = '/pages/API/map/map'
+let page;
+describe('web-map', () => {
+  console.log("uniTestPlatformInfo",process.env.uniTestPlatformInfo)
+  if (!process.env.uniTestPlatformInfo.startsWith('web')) {
+    it('app', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view');
+    // 等待地图加载完成
+    await page.waitFor(4000);
+    await page.setData({autoTest:true})
+  });
+
+  it('Check MapMethods', async () => {
+    const mapMethods = ['changeScale', 'addMarkers', 'addPolyline', 'addPolygons', 'addCircles',
+      'includePoint', 'handleTranslateMarker'
+    ]
+    for (var i = 0; i < mapMethods.length; i++) {
+      await page.callMethod(mapMethods[i])
+      if (mapMethods[i] == 'handleTranslateMarker') {
+        await page.waitFor(2000);
+      } else {
+        await page.waitFor(500);
+      }
+      expect(await program.screenshot()).toSaveImageSnapshot();
+      await page.waitFor(500);
+    }
+  });
+  it('handleGetCenterLocation', async () => {
+    await page.callMethod('handleGetCenterLocation')
+    await page.waitFor(500);
+    const centerLocationRes = await page.data('getCenterLocationTest')
+    expect(centerLocationRes.latitude).not.toBeNull();
+    expect(centerLocationRes.longitude).not.toBeNull();
+  });
+  it('handleGetRegion', async () => {
+    await page.callMethod('handleGetRegion')
+    await page.waitFor(500);
+    const regionRes = await page.data('getRegionTest')
+    const getRegionExpected = {
+      southwest: { latitude: 39.88334279187766, longitude: 116.31050146728515 },
+      northeast: { latitude: 40.0149408585477, longitude: 116.56799353271484 },
+      errMsg: 'getRegion:ok'
+    }
+    expect(regionRes).toEqual(expect.objectContaining(getRegionExpected));
+  });
+});

pages/API/map/map.uvue

@@ -304,7 +304,11 @@
         includePoints: [] as Points[],
         rotate: 0,
         skew: 0,
-        map: null as MapContext | null
+        map: null as MapContext | null,
+        // 自动化测试
+        autoTest: false,
+        getCenterLocationTest:{},
+        getRegionTest:{},
       }
     },
     onReady() {
@@ -359,9 +363,12 @@
         this.map!.getCenterLocation({
           success: ret => {
             console.log(JSON.stringify(ret));
-            uni.showModal({
-              content: JSON.stringify(ret)
-            })
+            this.getCenterLocationTest = ret
+            if(!this.autoTest){
+              uni.showModal({
+                content: JSON.stringify(ret)
+              })
+            }
           }
         })
       },
@@ -369,9 +376,12 @@
         this.map!.getRegion({
           success: ret => {
             console.log(JSON.stringify(ret));
-            uni.showModal({
-              content: JSON.stringify(ret)
-            })
+            this.getRegionTest = ret
+            if(!this.autoTest){
+              uni.showModal({
+                content: JSON.stringify(ret)
+              })
+            }
           }
         })
       },

pages/component/label/label.test.js

+let page;
+describe('label.uvue', () => {
+  console.log(process.env.uniTestPlatformInfo,process.env.uniTestPlatformInfo.startsWith('web'))
+  if (!process.env.uniTestPlatformInfo.startsWith('web')) {
+    it('app', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/component/label/label')
+    await page.waitFor('view');
+  });
+  afterEach(async() => {
+    await page.setData({
+      checkboxValue: [],
+      radioValue:''
+    })
+  });
+  function getData(key = '') {
+    return new Promise(async (resolve, reject) => {
+      const data = await page.data()
+      resolve(key ? data[key] : data)
+    })
+  }
+  it('表单组件在label内', async () => {
+    expect(await getData('checkboxValue')).toEqual([])
+    const checkboxItems = await page.$$('.checkboxItemsTest')
+    await checkboxItems[0].tap()
+    expect(await getData('checkboxValue')).toEqual(['USA', 'CHN'])
+  })
+  it('label用for标识表单组件', async () => {
+    const radioItems = await page.$$('.label-2-text')
+    await radioItems[0].tap()
+    expect(await getData('radioValue')).toEqual('USA')
+    await radioItems[1].tap()
+    expect(await getData('radioValue')).toEqual('CHN')
+  })
+  it('label内有多个时选中第一个', async () => {
+    const labelText = await page.$('.uni-center')
+    await labelText.tap()
+    expect(await getData('checkboxValue')).toEqual([''])
+  })
+})

pages/component/label/label.uvue

@@ -5,7 +5,7 @@
       <view class="uni-form-item uni-column">
         <view class="title">表单组件在label内</view>
         <checkbox-group class="uni-list" @change="checkboxChange">
-          <label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name">
+          <label class="uni-list-cell uni-list-cell-pd checkboxItemsTest" v-for="item in checkboxItems" :key="item.name">
             <view>
               <checkbox :value="item.name" :checked="item.checked"></checkbox>
             </view>
@@ -70,17 +70,19 @@
           checked: 'true'
         }
         ],
-        hidden: false
+        hidden: false,
+        checkboxValue: [] as string[],
+        radioValue:''
       }
     },
     methods: {
-      checkboxChange: function (e) {
-        var checked = e.detail.value
-        console.log(checked)
+      checkboxChange: function (e : UniCheckboxGroupChangeEvent) {
+        console.log(e.detail.value)
+        this.checkboxValue = e.detail.value
       },
-      radioChange: function (e) {
-        var checked = e.detail.value
-        console.log(checked)
+      radioChange: function (e : UniRadioGroupChangeEvent) {
+        console.log(e.detail.value)
+        this.radioValue = e.detail.value
       }
     }
   }

pages/component/picker/picker.test.js

+describe('Picker.uvue', () => {
+  console.log(process.env.uniTestPlatformInfo)
+  if (!process.env.uniTestPlatformInfo.startsWith('web')) {
+    it('app', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/component/picker/picker')
+    await page.waitFor('view');
+  });
+  function getData(key = '') {
+    return new Promise(async (resolve, reject) => {
+      const data = await page.data()
+      resolve(key ? data[key] : data)
+    })
+  }
+  function getValue(className,propertyValue='value') {
+    return new Promise(async (resolve, reject) => {
+      const el = await page.$(className)
+      const value = await el.property(propertyValue)
+      resolve(value)
+    })
+  }
+
+  it('普通选择器', async () => {
+    expect(await getValue('.picker')).toBe(await getData('index'))
+    await page.setData({index:1})
+    const pickerValueEl = await page.$('.pickerValue')
+    expect(await pickerValueEl.text()).toBe('美国')
+  })
+
+  it('多列选择器', async () => {
+    expect(await getValue('.pickerMulti')).toEqual(await getData('multiIndex'))
+    const pickerMultiValueEl = await page.$('.pickerMultiValue')
+    expect(await pickerMultiValueEl.text()).toStrictEqual('亚洲，中国，北京')
+    await page.setData({multiIndex:[0, 0, 2]})
+    const pickerMultiValueEl2 = await page.$('.pickerMultiValue')
+    expect(await pickerMultiValueEl2.text()).toStrictEqual('亚洲，中国，广州')
+  })
+
+  it('时间选择器', async () => {
+    expect(await getValue('.pickerTime')).toBe(await getData('time'))
+    await page.setData({time:'15:30'})
+    expect(await getValue('.pickerTime')).toEqual('15:30')
+  })
+
+  it('日期选择器', async () => {
+    expect(await getValue('.pickerDate')).toBe(await getData('date'))
+    await page.setData({date:'2028-05-20'})
+    expect(await getValue('.pickerDate')).toEqual('2028-05-20')
+    expect(await getValue('.pickerDate','start')).toStrictEqual(await getData('startDate'))
+    expect(await getValue('.pickerDate','end')).toStrictEqual(await getData('endDate'))
+  })
+
+})

pages/component/picker/picker.uvue

@@ -8,8 +8,8 @@
 					当前选择
 				</view>
 				<view class="uni-list-cell-db">
-					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
-						<view class="uni-input">{{array[index].name}}</view>
+					<picker class="picker" @change="bindPickerChange" :value="index" :range="array" range-key="name">
+						<view class="uni-input pickerValue">{{array[index].name}}</view>
 					</picker>
 				</view>
 			</view>
@@ -22,8 +22,8 @@
 					当前选择
 				</view>
 				<view class="uni-list-cell-db">
-					<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
-						<view class="uni-input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
+					<picker class="pickerMulti" mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
+						<view class="uni-input pickerMultiValue">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
 					</picker>
 				</view>
 			</view>
@@ -36,7 +36,7 @@
 					当前选择
 				</view>
 				<view class="uni-list-cell-db">
-					<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
+					<picker class="pickerTime" mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
 						<view class="uni-input">{{time}}</view>
 					</picker>
 				</view>
@@ -53,7 +53,7 @@
 					当前选择
 				</view>
 				<view class="uni-list-cell-db">
-					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
+					<picker class="pickerDate" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
 						<view class="uni-input">{{date}}</view>
 					</picker>
 				</view>