test(progress): [progress] update progress E2E test (#974)

examples/sites/demos/pc/app/progress/basic-usage-composition-api.vue

@@ -17,7 +17,7 @@ import { ref } from 'vue'
 import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
 import { iconMinus, iconPlus } from '@opentiny/vue-icon'
 
-const percentage = ref(20)
+const percentage = ref(90)
 const IconMinus = iconMinus()
 const IconPlus = iconPlus()
 

examples/sites/demos/pc/app/progress/basic-usage.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('基础用法，是否可动态控制进度条', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-  await page.goto('http://127.0.0.1:7130/pc/progress/basic-usage')
+  await page.goto('progress#basic-usage')
 
   const progress = page.getByRole('progressbar')
   const progress1 = progress.nth(0).locator('.tiny-progress-bar__outer')
@@ -12,12 +12,18 @@ test('基础用法，是否可动态控制进度条', async ({ page }) => {
   await expect(progress2).toBeVisible()
   await expect(progress1).toHaveCSS('height', '4px')
   await expect(progress2).toHaveCSS('height', '24px')
+  await expect(progress1).toHaveCSS('border-radius', '2px')
   await expect(progress2).toHaveCSS('border-radius', '12px')
-  await expect(page.getByText('50%')).toBeVisible()
+  await expect(page.getByText('90%')).toHaveCount(2)
+  await expect(page.getByText('努力加载中，请稍后...')).toBeVisible()
 
-  await expect(progress).toHaveAttribute('aria-valuenow', '20')
-  await page.locator('button').nth(3).click()
-  await expect(progress).toHaveAttribute('aria-valuenow', '10')
-  await page.locator('button').nth(4).click()
-  await expect(progress).toHaveAttribute('aria-valuenow', '20')
+  await expect(progress.nth(0)).toHaveAttribute('aria-valuenow', '90')
+  await expect(progress.nth(1)).toHaveAttribute('aria-valuenow', '90')
+  await page.getByRole('button').nth(2).click()
+  await expect(page.getByText('努力加载中，请稍后...')).not.toBeVisible()
+  await expect(progress.nth(0)).toHaveAttribute('aria-valuenow', '100')
+  await expect(progress.nth(1)).toHaveAttribute('aria-valuenow', '100')
+  await page.getByRole('button').nth(1).click()
+  await expect(progress.nth(0)).toHaveAttribute('aria-valuenow', '90')
+  await expect(progress.nth(1)).toHaveAttribute('aria-valuenow', '90')
 })

examples/sites/demos/pc/app/progress/basic-usage.vue

@@ -23,7 +23,7 @@ export default {
   },
   data() {
     return {
-      percentage: 20,
+      percentage: 90,
       IconMinus: iconMinus(),
       IconPlus: iconPlus()
     }

examples/sites/demos/pc/app/progress/custom-status.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义状态场景', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('progress#custom-status')
+
+  for (let i = 0; i < 10; i++) {
+    await page.getByText(i * 10 + '%').isVisible()
+    await page.getByText(i * 10 + 5 + '%').isVisible()
+  }
+})

examples/sites/demos/pc/app/progress/format-text.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('文字内显和外显', async ({ page }) => {
+test('文字的显隐和位置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('progress#format-text')
 
@@ -15,4 +15,12 @@ test('文字内显和外显', async ({ page }) => {
   await expect(outerText).toBeVisible()
   await button2.click()
   await expect(innerText).toBeVisible()
+
+  const text = page.getByText('自定义文字内容 60%')
+
+  await expect(text).toBeVisible()
+  await page.getByRole('button', { name: '隐藏文字' }).click()
+  await expect(text).not.toBeVisible()
+  await page.getByRole('button', { name: '显示文字' }).click()
+  await expect(text).toBeVisible()
 })

examples/sites/demos/pc/app/progress/progress-status.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('三种状态是否正常显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-  await page.goto('http://127.0.0.1:7130/pc/progress/progress-status')
+  await page.goto('progress#progress-status')
 
   const progress = page.getByRole('progressbar')
   const success = progress.filter({ hasText: '100%' })

examples/sites/demos/pc/app/progress/progress-type-circle.spec.ts

@@ -1,27 +1,27 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('circle 类型', () => {
+test.describe('全封闭环形', () => {
   test('是否circle 类型', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-    await page.goto('http://127.0.0.1:7130/pc/progress/progress-type-circle')
+    await page.goto('progress#progress-type-circle')
 
     const progress = page.getByRole('progressbar')
     const circleTrack = progress.locator('.tiny-progress-circle__track')
     const cirlePath = progress.locator('.tiny-progress-circle__path')
 
     await expect(progress.locator('div.tiny-progress-circle')).toBeVisible()
-    await expect(circleTrack).toHaveAttribute('stroke-width', '4.0')
+    await expect(circleTrack).toHaveAttribute('stroke-width', '4')
     await expect(circleTrack).toHaveAttribute('stroke', '#e5e9f2')
     await expect(circleTrack).toHaveCSS('d', 'path("M 50 50 M 50 2 A 48 48 0 1 1 50 98 A 48 48 0 1 1 50 2")')
-    await expect(cirlePath).toHaveAttribute('stroke-width', '4.0')
-    await expect(cirlePath).toHaveAttribute('stroke', '#ff4949')
+    await expect(cirlePath).toHaveAttribute('stroke-width', '4')
+    await expect(cirlePath).toHaveAttribute('stroke', '#eb171f')
     await expect(cirlePath).toHaveAttribute('stroke-linecap', 'round')
     await expect(cirlePath).toHaveCSS('d', 'path("M 50 50 M 50 2 A 48 48 0 1 1 50 98 A 48 48 0 1 1 50 2")')
   })
 
   test('点击值增加', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-    await page.goto('http://127.0.0.1:7130/pc/progress/progress-type-circle')
+    await page.goto('progress#progress-type-circle')
 
     const progress = page.getByRole('progressbar')
     const cirlePath = progress.locator('.tiny-progress-circle__path')

examples/sites/demos/pc/app/progress/progress-type-dashboard-composition-api.vue

@@ -1,10 +1,13 @@
 <template>
-  <tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
+  <div>
+    <tiny-button @click="add">增加</tiny-button>
+    <tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
+  </div>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Progress as TinyProgress } from '@opentiny/vue'
+import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
 
 const percentage = ref(20)
 const customColor = ref('#409eff')
@@ -25,4 +28,8 @@ function customColorMethod(percentage) {
     return '#67c23a'
   }
 }
+
+function add() {
+  percentage.value += 10
+}
 </script>

examples/sites/demos/pc/app/progress/progress-type-dashboard.spec.ts

@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('dashboard类型', async ({ page }) => {
+test('非全封闭环形', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-  await page.goto('http://127.0.0.1:7130/pc/progress/progress-type-dashboard')
+  await page.goto('progress#progress-type-dashboard')
 
   const progress = page.getByRole('progressbar')
   const circleTrack = progress.locator('.tiny-progress-circle__track')
@@ -11,10 +11,10 @@ test('dashboard类型', async ({ page }) => {
   await expect(progress).toHaveClass(/tiny-progress--dashboard/)
   await expect(progress.locator('div.tiny-progress-circle')).toBeVisible()
   await expect(progress.locator('div.tiny-progress__text')).toBeVisible()
-  await expect(circleTrack).toHaveAttribute('stroke-width', '2.0')
+  await expect(circleTrack).toHaveAttribute('stroke-width', '2')
   await expect(circleTrack).toHaveAttribute('stroke', '#e5e9f2')
   await expect(circleTrack).toHaveCSS('d', 'path("M 50 50 M 50 99 A 49 49 0 1 1 50 1 A 49 49 0 1 1 50 99")')
-  await expect(cirlePath).toHaveAttribute('stroke-width', '2.0')
+  await expect(cirlePath).toHaveAttribute('stroke-width', '2')
   await expect(cirlePath).toHaveAttribute('stroke', '#e6a23c')
   await expect(cirlePath).toHaveAttribute('stroke-linecap', 'round')
   await expect(cirlePath).toHaveCSS('d', 'path("M 50 50 M 50 99 A 49 49 0 1 1 50 1 A 49 49 0 1 1 50 99")')

examples/sites/demos/pc/app/progress/progress-type-dashboard.vue

@@ -1,13 +1,17 @@
 <template>
-  <tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
+  <div>
+    <tiny-button @click="add">增加</tiny-button>
+    <tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
+  </div>
 </template>
 
 <script lang="jsx">
-import { Progress } from '@opentiny/vue'
+import { Progress, Button } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress: Progress,
+    TinyButton: Button
   },
   data() {
     return {
@@ -31,6 +35,9 @@ export default {
       } else {
         return '#67c23a'
       }
+    },
+    add() {
+      this.percentage += 10
     }
   }
 }

examples/sites/demos/pc/app/progress/text-inside-or-no-text.spec.ts

@@ -1,14 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('显示或隐藏文字', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-  await page.goto('http://127.0.0.1:7130/pc/progress/text-inside-or-no-text')
-
-  const text = page.getByText('50%')
-
-  await expect(text).toBeVisible()
-  await page.getByRole('button', { name: '隐藏文字' }).click()
-  await expect(text).not.toBeVisible()
-  await page.getByRole('button', { name: '显示文字' }).click()
-  await expect(text).toBeVisible()
-})