form组件：补充详细的自动化测试

pages/component/form/form.test.js

 const PAGE_PATH = '/pages/component/form/form'
 
-const DEFAULT_NICK_NAME = 'hello'
+const DEFAULT_NICK_NAME = ''
 const DEFAULT_GENDER = '0'
+const DEFAULT_LOVES = ['0']
 const DEFAULT_AGE = 18
 const DEFAULT_SWITCH = true
 
 const CHANGE_NICK_NAME = 'hello'
-const CHANGE_GENDER = '0'
+const CHANGE_GENDER = '1'
+const CHANGE_LOVES = ['0', '1']
 const CHANGE_AGE = 50
 const CHANGE_SWITCH = false
 
@@ -17,14 +19,9 @@ describe('form', () => {
     await page.waitFor(500)
   })
   it('submit', async () => {
-    await page.setData({
-      nickname: CHANGE_NICK_NAME,
-      age: CHANGE_AGE,
-      switch: CHANGE_SWITCH
-    })
-    await page.waitFor(200)
+    await changeData(page)
 
-    const btnSubmit = await page.$('.btn-l')
+    const btnSubmit = await page.$('.btn-submit')
     await btnSubmit.tap()
     await page.waitFor(200)
 
@@ -34,31 +31,41 @@ describe('form', () => {
 
     expect(formData['nickname']).toBe(CHANGE_NICK_NAME)
     expect(formData['gender']).toBe(CHANGE_GENDER)
-    expect(formData['loves'][0]).toBe('1')
+    expect(formData['loves'][0]).toBe(CHANGE_LOVES[0])
+    expect(formData['loves'][1]).toBe(CHANGE_LOVES[1])
     expect(formData['age']).toBe(CHANGE_AGE)
     expect(formData['switch']).toBe(CHANGE_SWITCH)
   })
   it('reset', async () => {
-    await page.setData({
-      nickname: CHANGE_NICK_NAME,
-      age: CHANGE_AGE,
-      switch: CHANGE_SWITCH
-    })
-    await page.waitFor(100)
+    await changeData(page)
 
-    const btnReset = await page.$('.btn-r')
+    const btnReset = await page.$('.btn-reset')
     await btnReset.tap()
     await page.waitFor(100)
 
+    const btnSubmit = await page.$('.btn-submit')
+    await btnSubmit.tap()
+    await page.waitFor(100)
+
     const {
       formData
     } = await page.data()
 
-    // TODO
-    // expect(formData['nickname']).toBe(DEFAULT_NICK_NAME)
-    // expect(formData['gender']).toBe(undefined)
-    // expect(formData['loves'][0]).toBe(undefined)
-    // expect(formData['age']).toBe(undefined)
-    // expect(formData['switch']).toBe(undefined)
+    expect(formData['nickname']).toBe(DEFAULT_NICK_NAME)
+    expect(formData['gender']).toBe(DEFAULT_GENDER)
+    expect(formData['loves'][0]).toBe(DEFAULT_LOVES[0])
+    expect(formData['age']).toBe(DEFAULT_AGE)
+    expect(formData['switch']).toBe(DEFAULT_SWITCH)
   })
 })
+
+async function changeData(page) {
+  await page.setData({
+    nickname: CHANGE_NICK_NAME,
+    gender: CHANGE_GENDER,
+    loves: CHANGE_LOVES,
+    age: CHANGE_AGE,
+    switch: CHANGE_SWITCH
+  })
+  await page.waitFor(100)
+}

pages/component/form/form.uvue

@@ -11,10 +11,10 @@
         <view class="title">性别</view>
         <radio-group name="gender" class="flex-row">
           <view class="group-item">
-            <radio value="0" :checked="gender=='0'" /><text>男</text>
+            <radio :value="0" :checked="gender==0" /><text>男</text>
           </view>
           <view class="group-item">
-            <radio value="1" :checked="gender=='1'" /><text>女</text>
+            <radio :value="1" :checked="gender==1" /><text>女</text>
           </view>
         </radio-group>
       </view>
@@ -22,10 +22,10 @@
         <view class="title">爱好</view>
         <checkbox-group name="loves" class="flex-row">
           <view class="group-item">
-            <checkbox value="0" /><text>读书</text>
+            <checkbox value="0" :checked="loves.indexOf('0')>-1" /><text>读书</text>
           </view>
           <view class="group-item">
-            <checkbox value="1" :checked="true" /><text>写字</text>
+            <checkbox value="1" :checked="loves.indexOf('1')>-1" /><text>写字</text>
           </view>
         </checkbox-group>
       </view>
@@ -40,8 +40,8 @@
         </view>
       </view>
       <view class="uni-btn-v flex-row">
-        <button class="btn btn-l" form-type="submit" type="primary">Submit</button>
-        <button class="btn btn-r" type="default" form-type="reset">Reset</button>
+        <button class="btn btn-submit" form-type="submit" type="primary">Submit</button>
+        <button class="btn btn-reset" type="default" form-type="reset">Reset</button>
       </view>
     </form>
     <view class="result">提交的表单数据</view>
@@ -56,8 +56,9 @@
     data() {
       return {
         nickname: '',
-        gender: '0',
+        gender: 0,
         age: 18,
+        loves: ['0'],
         switch: true,
         formData: {} as UTSJSONObject
       }
@@ -105,11 +106,11 @@
     flex: 1;
   }
 
-  .btn-l {
+  .btn-submit {
     margin-right: 5px;
   }
 
-  .btn-r {
+  .btn-reset {
     margin-left: 5px;
   }