feat(progress): add test

pages/component/progress/progress.test.js

+function getData(key = '') {
+    return new Promise(async (resolve, reject) => {
+        const data = await page.data()
+        resolve(key ? data[key] : data)
+    })
+}
+
+let page
+beforeAll(async () => {
+    page = await program.reLaunch('/pages/component/progress/progress')
+    await page.waitFor(1000)
+})
+
+describe('Progress.uvue', () => {
+    it('percent', async () => {
+        const p = await page.$('.p')
+        const p1 = await page.$('.p1')
+        const p2 = await page.$('.p2')
+        const p3 = await page.$('.p3')
+        page.callMethod('setProgress')
+        await page.waitFor(1000)
+        expect(await p.property('percent')).toEqual(20)
+        expect(await p1.property('percent')).toEqual(40)
+        expect(await p2.property('percent')).toEqual(60)
+        expect(await p3.property('percent')).toEqual(80)
+        expect(await getData('curPercent')).toEqual(20)
+        page.callMethod('clearProgress')
+        await page.waitFor(1000)
+        expect(await p.property('percent')).toEqual(0)
+        expect(await p1.property('percent')).toEqual(0)
+        expect(await p2.property('percent')).toEqual(0)
+        expect(await p3.property('percent')).toEqual(0)
+        expect(await getData('curPercent')).toEqual(0)
+    })
+    it('length', async () => {
+        const elements = await page.$$('.progress')
+        expect(elements.length).toBe(4)
+    })
+    it('show-info', async () => {
+        const el = await page.$('.p')
+        expect(await el.property('show-info')).toEqual(true)
+        await page.setData({
+            showInfo: false
+        })
+        await page.waitFor(500)
+        expect(await el.property('show-info')).toEqual(false)
+    })
+    it('border-radius', async () => {
+        const el = await page.$('.p')
+        expect(await el.property('border-radius')).toEqual(0)
+        await page.setData({
+            borderRadius: 5
+        })
+        await page.waitFor(500)
+        expect(await el.property('border-radius')).toEqual(5)
+    })
+    it('font-size', async () => {
+        const el = await page.$('.p')
+        expect(await el.property('font-size')).toEqual(16)
+        await page.setData({
+            fontSize: 18
+        })
+        await page.waitFor(500)
+        expect(await el.property('font-size')).toEqual(18)
+    })
+    it('stroke-width', async () => {
+        const el = await page.$('.p')
+        expect(await el.property('stroke-width')).toEqual(3)
+        await page.setData({
+            strokeWidth: 6
+        })
+        await page.waitFor(500)
+        expect(await el.property('stroke-width')).toEqual(6)
+    })
+    it('backgroundColor', async () => {
+        const el = await page.$('.p')
+        expect(await el.property('background-color')).toEqual('#EBEBEB')
+        await page.setData({
+            backgroundColor: "#007aff"
+        })
+        await page.waitFor(500)
+        expect(await el.property('background-color')).toEqual('#007aff')
+    })
+})
\ No newline at end of file

pages/component/progress/progress.uvue

@@ -3,16 +3,18 @@
         <page-head :title="title"></page-head>
         <view class="uni-padding-wrap uni-common-mt">
             <view class="progress-box">
-                <progress :percent="pgList[0]" :show-info="true" :stroke-width="3" />
+                <progress :percent="pgList[0]" :active="true" :border-radius="borderRadius" :show-info="showInfo"
+                    :font-size="fontSize" :stroke-width="strokeWidth" :background-color="backgroundColor"
+                    class="progress p" @activeend="activeend" />
             </view>
             <view class="progress-box">
-                <progress :percent="pgList[1]" :stroke-width="3" />
+                <progress :percent="pgList[1]" :stroke-width="3" class="progress p1" />
             </view>
             <view class="progress-box">
-                <progress :percent="pgList[2]" :stroke-width="3" />
+                <progress :percent="pgList[2]" :stroke-width="3" class="progress p2" />
             </view>
             <view class="progress-box">
-                <progress :percent="pgList[3]" activeColor="#10AEFF" :stroke-width="3" />
+                <progress :percent="pgList[3]" activeColor="#10AEFF" :stroke-width="3" class="progress p3" />
             </view>
             <view class="progress-control">
                 <button type="primary" @click="setProgress" class="button">设置进度</button>
@@ -26,7 +28,14 @@
         data() {
             return {
                 title: 'progress',
-                pgList: [0, 0, 0, 0] as number[]
+                pgList: [0, 0, 0, 0] as number[],
+
+                curPercent: 0,
+                showInfo: true,
+                borderRadius: 0,
+                fontSize: 16,
+                strokeWidth: 3,
+                backgroundColor: '#EBEBEB'
             }
         },
         methods: {
@@ -35,6 +44,10 @@
             },
             clearProgress() {
                 this.pgList = [0, 0, 0, 0] as number[]
+            },
+            activeend(e : ProgressActiveendEvent) {
+                // TODO e.detail.curPercent
+                this.curPercent = e.curPercent
             }
         }
     }