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

2023-11-30 16:26:49 +08:00 · 2023-11-30 16:26:49 +08:00 · 162a267728
parent 5f1a16afd5
commit 162a267728
11 changed files with 65 additions and 40 deletions
--- a/examples/sites/demos/pc/app/progress/basic-usage-composition-api.vue
+++ b/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()

--- a/examples/sites/demos/pc/app/progress/basic-usage.spec.ts
+++ b/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')
 })
--- a/examples/sites/demos/pc/app/progress/basic-usage.vue
+++ b/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()
    }
--- a/examples/sites/demos/pc/app/progress/custom-status.spec.ts
+++ b/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()
+  }
+})
--- a/examples/sites/demos/pc/app/progress/format-text.spec.ts
+++ b/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()
 })
--- a/examples/sites/demos/pc/app/progress/progress-status.spec.ts
+++ b/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%' })
--- a/examples/sites/demos/pc/app/progress/progress-type-circle.spec.ts
+++ b/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')
--- a/examples/sites/demos/pc/app/progress/progress-type-dashboard-composition-api.vue
+++ b/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>
--- a/examples/sites/demos/pc/app/progress/progress-type-dashboard.spec.ts
+++ b/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")')
--- a/examples/sites/demos/pc/app/progress/progress-type-dashboard.vue
+++ b/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
    }
  }
 }
--- a/examples/sites/demos/pc/app/progress/text-inside-or-no-text.spec.ts
+++ b/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()
-})