@opentiny/vue-docs 1.0.3 → 1.0.4

package/resources/pc/demo/popeditor/single-select-radio.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('PopEditor 树模式单选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/pop-editor/single-select-radio')
+
+  const preview = page.locator('#preview')
+  const textBox = preview.getByRole('textbox')
+  const dialogBox = page.locator('.tiny-dialog-box')
+  const tree = dialogBox.locator('.tiny-tree')
+  const treeNode = tree.locator('label')
+
+  // 单选tree模式
+  await textBox.click()
+  await expect(dialogBox).toBeVisible()
+  await expect(tree).toBeVisible()
+  await expect(treeNode.locator('.is-checked')).toHaveCount(1)
+})

package/resources/pc/demo/popeditor/size.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('PopEditor 编辑框大小', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/pop-editor/size')
+
+  const preview = page.locator('#preview')
+  const textBox = preview.locator('.tiny-popeditor')
+
+  await expect(textBox).toHaveCSS('height', '40px')
+})

package/resources/pc/demo/popeditor/slot.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('PopEditor 组件查询条件插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/pop-editor/slot')
+
+  const preview = page.locator('#preview')
+  const textBox = preview.getByRole('textbox')
+  const searchWrap = page.locator('.tiny-dialog-box__body > .tiny-popeditor-top')
+  const defaultSearch = searchWrap.locator('.tiny-popeditor__search-lists')
+  const slotItem = searchWrap.locator('.item')
+
+  await textBox.click()
+  await expect(defaultSearch).toHaveCount(0)
+  await expect(slotItem).toHaveCount(3)
+})

package/resources/pc/demo/popeditor/suggest.vue

@@ -0,0 +1,141 @@
+<template>
+  value值：{{ value }}
+  <tiny-popeditor
+    v-model="value"
+    :show-clear-btn="true"
+    :grid-op="gridOp"
+    text-field="name"
+    value-field="name"
+    :remote-search="remoteSearch"
+    suggest
+    :conditions="conditions"
+  ></tiny-popeditor>
+</template>
+
+<script lang="jsx">
+import { Popeditor } from '@opentiny/vue'
+const dataset = [
+  {
+    id: '1',
+    name: 'GFD科技YX公司',
+    city: '福州',
+    province: '福建'
+  },
+  {
+    id: '2',
+    name: 'WWW科技YX公司',
+    city: '深圳',
+    province: '广东'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    city: '中山',
+    province: '广东'
+  },
+  {
+    id: '4',
+    name: 'TGB科技YX公司',
+    city: '龙岩',
+    province: '福建'
+  },
+  {
+    id: '5',
+    name: 'YHN科技YX公司',
+    city: '韶关',
+    province: '广东'
+  },
+  {
+    id: '6',
+    name: 'WSX科技YX公司',
+    city: '黄冈',
+    province: '武汉'
+  },
+  {
+    id: '7',
+    name: 'KBG物业YX公司',
+    city: '赤壁',
+    province: '武汉'
+  },
+  {
+    id: '8',
+    name: '深圳市福德宝网络技术YX公司',
+    province: '广东',
+    city: '深圳'
+  },
+  {
+    id: '9',
+    name: 'KBG物业YX公司',
+    city: '赤壁',
+    province: '武汉'
+  },
+  {
+    id: '10',
+    name: '深圳市福德宝网络技术YX公司',
+    province: '广东',
+    city: '深圳'
+  }
+]
+
+export default {
+  components: {
+    TinyPopeditor: Popeditor
+  },
+  data() {
+    return {
+      value: '',
+      conditions: [
+        { label: '公司名', field: 'name' },
+        { label: '城市', field: 'city' }
+      ],
+      gridOp: {
+        columns: [
+          {
+            field: 'id',
+            title: 'ID',
+            width: 40
+          },
+          {
+            field: 'name',
+            title: '名称'
+          },
+          {
+            field: 'province',
+            title: '省份',
+            width: 80
+          },
+          {
+            field: 'city',
+            title: '城市',
+            width: 80
+          }
+        ],
+        data: []
+      }
+    }
+  },
+  methods: {
+    remoteSearch({ page, conditions, query }) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          if (!conditions) {
+            // 联想查询
+            resolve({
+              data: dataset.filter((i) => i.name.indexOf(query) > -1).slice(0, 20)
+            })
+          } else {
+            // 表单查询
+            const data = dataset.filter(
+              (i) => i.name.indexOf(conditions.name) > -1 && i.city.indexOf(conditions.city) > -1
+            )
+            resolve({
+              data: data.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize),
+              total: data.length
+            })
+          }
+        }, 500)
+      })
+    }
+  }
+}
+</script>

package/resources/pc/demo/popeditor/tabindex.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('PopEditor 输入框的 tabindex', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/pop-editor/tabindex')
+
+  const preview = page.locator('#preview')
+  const textBox = preview.getByRole('textbox')
+
+  await expect(textBox).toHaveCount(2)
+  await textBox.nth(0).click()
+  await textBox.nth(0).press('Tab')
+  await expect(textBox.nth(1)).toBeFocused()
+})

package/resources/pc/demo/popeditor/textField.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('PopEditor 显示字段映射', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/pop-editor/textField')
+
+  const preview = page.locator('#preview')
+  const textBox = preview.getByRole('textbox')
+  const dialogBox = page.locator('.tiny-dialog-box')
+  const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
+  const seletItem = dialogBox.getByRole('row', { name: '1 GFD科技YX公司 福建 福州' }).locator('span')
+  
+  // 显示城市的字段映射
+  await textBox.click()
+  await expect(dialogBox).toBeVisible()
+  await seletItem.nth(0).check()
+  await confirmBtn.click()
+  await expect(textBox).toHaveValue('福州')
+
+})

package/resources/pc/demo/popeditor/title.spec.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('PopEditor 自定义标题和提交字段映射', () => {
+  test('PopEditor 自定义标题', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('http://localhost:7130/pc/pop-editor/title')
+
+    const preview = page.locator('#preview')
+    const textBox = preview.getByRole('textbox')
+    const dialogBox = page.locator('.tiny-dialog-box')
+    const customTitle = dialogBox.getByText('自定义弹窗标题')
+
+    // 自定义标题
+    await textBox.click()
+    await expect(dialogBox).toBeVisible()
+    await expect(customTitle).toBeVisible()
+
+  })
+
+  test('PopEditor 提交字段映射', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('http://localhost:7130/pc/pop-editor/title1')
+
+    const preview = page.locator('#preview')
+    const textBox = preview.getByRole('textbox')
+    const dialogBox = page.locator('.tiny-dialog-box')
+    const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
+    const seletItem = dialogBox.getByRole('row', { name: '1 GFD科技YX公司 福建 福州' }).locator('span')
+
+    // 显示公司的字段映射
+    await textBox.click()
+    await expect(dialogBox).toBeVisible()
+    await seletItem.nth(0).check()
+    await confirmBtn.click()
+    await expect(textBox).toHaveValue('GFD科技YX公司')
+  })
+})

package/resources/pc/demo/popeditor/tree.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('PopEditor 开启树模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/pop-editor/tree')
+
+  const preview = page.locator('#preview')
+  const textBox = preview.getByRole('textbox')
+  const dialogBox = page.locator('.tiny-dialog-box')
+  const tree = dialogBox.locator('.tiny-tree')
+
+  // tree模式
+  await textBox.click()
+  await expect(dialogBox).toBeVisible()
+  await expect(tree).toBeVisible()
+
+
+})

package/resources/pc/demo/popeditor/trigger.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test('PopEditor 单选时触发勾选的方式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/pop-editor/trigger')
+
+  const preview = page.locator('#preview')
+  const textBox = preview.getByRole('textbox')
+  const dialogBox = page.locator('.tiny-dialog-box')
+  const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
+  const row = dialogBox.locator('.tiny-grid-body__row').nth(1)
+
+  // 点击行中任意位置进行勾选
+  await textBox.click()
+  await expect(dialogBox).toBeVisible()
+  await row.click()
+  await confirmBtn.click()
+  await expect(dialogBox).not.toBeVisible()
+  await expect(textBox).toHaveValue('WWW科技YX公司')
+
+
+})

package/resources/pc/demo/popeditor/width.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('PopEditor 弹窗宽度', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/pop-editor/width')
+
+  const preview = page.locator('#preview')
+  const textBox = preview.getByRole('textbox')
+  const dialogBox = page.locator('.tiny-dialog-box')
+
+  await textBox.click()
+  await expect(dialogBox).toBeVisible()
+  await expect(dialogBox).toHaveCSS('width', '800px')
+})

package/resources/pc/demo/progress/basic-usage.spec.ts

@@ -1,20 +1,18 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('progress 基本用法', () => {
-  test('正常显示', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-    await page.goto('http://127.0.0.1:7130/pc/progress/basic-usage')
+test('正常显示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://127.0.0.1:7130/pc/progress/basic-usage')
 
-    const progress = page.getByRole('progressbar')
-    const outer = progress.locator('div.tiny-progress-bar__outer')
-    const inner = progress.locator('div.tiny-progress-bar__inner')
+  const progress = page.getByRole('progressbar')
+  const outer = progress.locator('div.tiny-progress-bar__outer')
+  const inner = progress.locator('div.tiny-progress-bar__inner')
 
-    await expect(outer).toBeVisible()
-    await expect(outer).toHaveCSS('height', '6px')
-    await expect(inner).toBeVisible()
-    await expect(inner).toHaveCSS('border-radius', '3px')
-    await expect(page.getByText('50%')).toBeVisible()
-    await expect(progress).toHaveAttribute('aria-valuemin', '0')
-    await expect(progress).toHaveAttribute('aria-valuemax', '100')
-  })
+  await expect(outer).toBeVisible()
+  await expect(outer).toHaveCSS('height', '6px')
+  await expect(inner).toBeVisible()
+  await expect(inner).toHaveCSS('border-radius', '3px')
+  await expect(page.getByText('50%')).toBeVisible()
+  await expect(progress).toHaveAttribute('aria-valuemin', '0')
+  await expect(progress).toHaveAttribute('aria-valuemax', '100')
 })

package/resources/pc/demo/progress/custom-color.spec.ts

@@ -1,21 +1,19 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('自定义颜色', () => {
-  test('根据长度改变颜色', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-    await page.goto('http://localhost:7130/pc/progress/custom-color')
+test('根据长度改变颜色', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://localhost:7130/pc/progress/custom-color')
 
-    const progress = page.getByRole('progressbar')
-    const progress1 = progress.nth(0).locator('div.tiny-progress-bar__inner')
-    const progress2 = progress.nth(1).locator('div.tiny-progress-bar__inner')
-    const progress3 = progress.nth(2).locator('div.tiny-progress-bar__inner')
-    const button = page.getByRole('button', { name: '点击增加改变颜色' })
+  const progress = page.getByRole('progressbar')
+  const progress1 = progress.nth(0).locator('div.tiny-progress-bar__inner')
+  const progress2 = progress.nth(1).locator('div.tiny-progress-bar__inner')
+  const progress3 = progress.nth(2).locator('div.tiny-progress-bar__inner')
+  const button = page.getByRole('button', { name: '点击增加改变颜色' })
 
-    await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
-    await expect(progress2).toHaveCSS('background-color', 'rgb(230, 162, 60)')
-    await expect(progress3).toHaveCSS('background-color', 'rgb(92, 184, 122)')
-    await button.click()
-    await expect(progress2).toHaveCSS('background-color', 'rgb(103, 194, 58)')
-    await expect(progress3).toHaveCSS('background-color', 'rgb(25, 137, 250)')
-  })
+  await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
+  await expect(progress2).toHaveCSS('background-color', 'rgb(230, 162, 60)')
+  await expect(progress3).toHaveCSS('background-color', 'rgb(92, 184, 122)')
+  await button.click()
+  await expect(progress2).toHaveCSS('background-color', 'rgb(103, 194, 58)')
+  await expect(progress3).toHaveCSS('background-color', 'rgb(25, 137, 250)')
 })

package/resources/pc/demo/progress/dynamic-control-changes.spec.ts

@@ -1,16 +1,14 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('动态控制进度条变化', () => {
-  test('进度条长度变化', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-    await page.goto('http://localhost:7130/pc/progress/dynamic-control-changes')
+test('动态控制进度条变化', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://localhost:7130/pc/progress/dynamic-control-changes')
 
-    const progress = page.getByRole('progressbar')
+  const progress = page.getByRole('progressbar')
 
-    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).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')
 })

package/resources/pc/demo/progress/format-text.spec.ts

@@ -1,20 +1,18 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('自定义显示文字', () => {
-  test('文字内显和外显', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-    await page.goto('http://localhost:7130/pc/progress/format-text')
+test('文字内显和外显', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://localhost:7130/pc/progress/format-text')
 
-    const progress = page.getByRole('progressbar')
-    const innerText = progress.locator('.tiny-progress-bar >> .tiny-progress-bar__innerText')
-    const outerText = progress.locator('.tiny-progress__text')
-    const button1 = page.getByRole('button', { name: '外置文字' })
-    const button2 = page.getByRole('button', { name: '内置文字' })
+  const progress = page.getByRole('progressbar')
+  const innerText = progress.locator('.tiny-progress-bar >> .tiny-progress-bar__innerText')
+  const outerText = progress.locator('.tiny-progress__text')
+  const button1 = page.getByRole('button', { name: '外置文字' })
+  const button2 = page.getByRole('button', { name: '内置文字' })
 
-    await expect(innerText).toBeVisible()
-    await button1.click()
-    await expect(outerText).toBeVisible()
-    await button2.click()
-    await expect(innerText).toBeVisible()
-  })
+  await expect(innerText).toBeVisible()
+  await button1.click()
+  await expect(outerText).toBeVisible()
+  await button2.click()
+  await expect(innerText).toBeVisible()
 })

package/resources/pc/demo/progress/progress-status.spec.ts

@@ -1,20 +1,27 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('三种状态', () => {
-  test('三种状态是否正常显示', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-    await page.goto('http://127.0.0.1:7130/pc/progress/progress-status')
+test('三种状态是否正常显示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://127.0.0.1:7130/pc/progress/progress-status')
 
-    const progress = page.getByRole('progressbar')
-    const success = progress.filter({ hasText: '100%' })
-    const warning = progress.filter({ hasText: '80%' })
-    const exception = progress.filter({ hasText: '50%' })
+  const progress = page.getByRole('progressbar')
+  const success = progress.filter({ hasText: '100%' })
+  const warning = progress.filter({ hasText: '80%' })
+  const exception = progress.filter({ hasText: '50%' })
+  const button = page.getByRole('button', { name: '显示图标状态' })
+  const icons = page.locator('.tiny-progress__text svg')
 
-    await expect(success).toHaveAttribute('aria-valuenow', '100')
-    await expect(success).toHaveClass(/is-success/)
-    await expect(warning).toHaveAttribute('aria-valuenow', '80')
-    await expect(warning).toHaveClass(/is-warning/)
-    await expect(exception).toHaveAttribute('aria-valuenow', '50')
-    await expect(exception).toHaveClass(/is-exception/)
-  })
+  await expect(success).toHaveAttribute('aria-valuenow', '100')
+  await expect(success).toHaveClass(/is-success/)
+  await expect(warning).toHaveAttribute('aria-valuenow', '80')
+  await expect(warning).toHaveClass(/is-warning/)
+  await expect(exception).toHaveAttribute('aria-valuenow', '50')
+  await expect(exception).toHaveClass(/is-exception/)
+  await button.click()
+  await expect(icons).toHaveCount(3)
+  for (let i = 0; i < 3; i++) {
+    const { width, height } = await icons.nth(i).boundingBox()
+    await expect(width).toBeGreaterThanOrEqual(20)
+    await expect(height).toBeGreaterThanOrEqual(20)
+  }
 })

package/resources/pc/demo/progress/progress-status.vue

@@ -1,19 +1,49 @@
 <template>
   <div>
-    <tiny-progress class="progress" :text-inside="true" :stroke-width="24" :percentage="100" status="success"></tiny-progress>
+    <div>
+      <tiny-button @click="textInside = !textInside">
+        {{ textInside ? '显示图标状态' : '显示文字状态' }}
+      </tiny-button>
+    </div>
     <br />
-    <tiny-progress class="progress" :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></tiny-progress>
+    <tiny-progress
+      class="progress"
+      :text-inside="textInside"
+      :stroke-width="24"
+      :percentage="100"
+      status="success"
+    ></tiny-progress>
     <br />
-    <tiny-progress class="progress" :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></tiny-progress>
+    <tiny-progress
+      class="progress"
+      :text-inside="textInside"
+      :stroke-width="22"
+      :percentage="80"
+      status="warning"
+    ></tiny-progress>
+    <br />
+    <tiny-progress
+      class="progress"
+      :text-inside="textInside"
+      :stroke-width="20"
+      :percentage="50"
+      status="exception"
+    ></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 {
+      textInside: true
+    }
   }
 }
 </script>

package/resources/pc/demo/progress/progress-type-circle.spec.ts

@@ -6,8 +6,17 @@ test.describe('circle 类型', () => {
     await page.goto('http://127.0.0.1:7130/pc/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', '#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-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 }) => {
@@ -15,9 +24,12 @@ test.describe('circle 类型', () => {
     await page.goto('http://127.0.0.1:7130/pc/progress/progress-type-circle')
 
     const progress = page.getByRole('progressbar')
+    const cirlePath = progress.locator('.tiny-progress-circle__path')
 
     await expect(progress).toHaveAttribute('aria-valuenow', '10')
+    await expect(cirlePath).toHaveCSS('stroke-dasharray', '30.1593px, 301.593px')
     await page.getByRole('button', { name: '增加' }).click()
     await expect(progress).toHaveAttribute('aria-valuenow', '20')
+    await expect(cirlePath).toHaveCSS('stroke-dasharray', '60.3186px, 301.593px')
   })
 })

package/resources/pc/demo/progress/progress-type-dashboard.spec.ts

@@ -1,14 +1,22 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('dashboard类型', () => {
-  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')
+test('dashboard类型', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://127.0.0.1:7130/pc/progress/progress-type-dashboard')
 
-    const progress = page.getByRole('progressbar')
+  const progress = page.getByRole('progressbar')
+  const circleTrack = progress.locator('.tiny-progress-circle__track')
+  const cirlePath = progress.locator('.tiny-progress-circle__path')
 
-    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(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', '#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', '#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\")')
+  await expect(cirlePath).toHaveCSS('stroke-dasharray', '46.1814px, 307.876px')
 })

package/resources/pc/demo/progress/progress-type.spec.ts

@@ -1,16 +1,14 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('line 类型', () => {
-  test('line类型是否正常显示', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('http://127.0.0.1:7130/pc/progress/progress-type')
-    const progress = page.getByRole('progressbar')
+test('line类型是否正常显示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://127.0.0.1:7130/pc/progress/progress-type')
+  const progress = page.getByRole('progressbar')
 
-    await expect(progress).toHaveClass(/tiny-progress--line/)
-    await expect(progress.locator('div.tiny-progress-bar__outer')).toBeVisible()
-    await expect(progress.locator('div.tiny-progress-bar__inner')).toBeVisible()
-    await expect(page.getByText('50%')).toBeVisible()
-    await expect(progress).toHaveAttribute('aria-valuemin', '0')
-    await expect(progress).toHaveAttribute('aria-valuemax', '100')
-  })
+  await expect(progress).toHaveClass(/tiny-progress--line/)
+  await expect(progress.locator('div.tiny-progress-bar__outer')).toBeVisible()
+  await expect(progress.locator('div.tiny-progress-bar__inner')).toBeVisible()
+  await expect(page.getByText('50%')).toBeVisible()
+  await expect(progress).toHaveAttribute('aria-valuemin', '0')
+  await expect(progress).toHaveAttribute('aria-valuemax', '100')
 })