@opentiny/vue-docs 1.0.2 → 1.0.3

package/resources/pc/demo/fall-menu/custom-slider-icon.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义左、右侧图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/fall-menu/custom-slider-icon')
+  const preview = page.locator('#preview')
+  // 右侧插槽图标
+  const rightSlotIcon = preview.locator('.icon-slot-right')
+  // 父菜单列表
+  const fallMenuList = preview.locator('.tiny-fall-menu__list')
+  // 是否是默认图标
+  await expect(rightSlotIcon.locator('svg path').getAttribute('d')).not.toContain(
+    'M7 21c.2 0 .5-.1.6-.2l9.9-8c.2-.2.4-.5.4-.8'
+  )
+  // 点击右侧更多切换图标
+  await rightSlotIcon.click()
+  // 向左移动
+  await expect(fallMenuList).toHaveCSS('left', /^-\d+px/)
+  // 左侧插槽图标
+  const leftSlotIcon = preview.locator('.icon-slot-left')
+  await expect(leftSlotIcon.locator('svg path').getAttribute('d')).not.toContain(
+    'M17 21c-.2 0-.5-.1-.6-.2l-9.9-8c-.4-.2-.5-.5-.5-.8'
+  )
+  // 点击左侧更多切换图标
+  await leftSlotIcon.click()
+  // 向右移动
+  await expect(fallMenuList).toHaveCSS('left', '0px')
+})

package/resources/pc/demo/fall-menu/data-resource.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+// 以下2个测试将覆盖2个demo：基本用法、数据源
+test('基础用法、数据源', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/fall-menu/data-resource')
+  const preview = page.locator('#preview')
+  await preview.getByRole('link', { name: '指南' }).hover()
+  const fallMenuBox = preview.locator('.tiny-fall-menu__box')
+  // 父菜单列表
+  const fallMenuList = preview.locator('.tiny-fall-menu__list')
+  // 菜单列表应该可见
+  await expect(fallMenuBox).toBeVisible()
+  await preview.getByRole('link', { name: '规范' }).hover()
+  // 菜单列表应该不可见
+  await expect(fallMenuBox).toBeHidden()
+  // 点击右侧更多切换图标
+  await preview.getByRole('img').nth(1).click()
+  // 向左移动
+  await expect(fallMenuList).toHaveCSS('left', /^-\d+px/)
+  // 点击左侧更多切换图标
+  await preview.getByRole('img').nth(1).click()
+  // 向右移动
+  await expect(fallMenuList).toHaveCSS('left', '0px')
+})

package/resources/pc/demo/file-upload/abort-quest.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('手动取消上传请求', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/abort-quest')
+
+  const upload = page.locator('.tiny-upload')
+  const lists = page.locator('.tiny-upload-list__item')
+  const modal = page.locator('.tiny-modal')
+  const button = page.locator('button').filter({ hasText: '取消上传' })
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await button.click()
+  await expect(modal).toHaveText('手动取消上传')
+  await fileChooser.setFiles(currentPath)
+  await expect(fileChooser.isMultiple()).toBe(false)
+  await expect(lists).toHaveCount(1)
+})

package/resources/pc/demo/file-upload/abort-quest.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="content">
     <tiny-file-upload ref="upload" :action="action">
-      <tiny-button size="small" type="primary">点击上传</tiny-button>
+      <tiny-button size="small" type="primary"> 点击上传 </tiny-button>
     </tiny-file-upload>
     <br />
-    <tiny-button @click="cancelUpload">取消上传</tiny-button>
+    <tiny-button @click="cancelUpload"> 取消上传 </tiny-button>
   </div>
 </template>
 
 <script lang="jsx">
 import { FileUpload, Button } from '@opentiny/vue'
+import { message } from '@opentiny/vue-modal'
 
 export default {
   components: {
@@ -23,6 +24,7 @@ export default {
   },
   methods: {
     cancelUpload() {
+      message('手动取消上传')
       this.$refs.upload.abort()
     }
   }

package/resources/pc/demo/file-upload/accept-file-image.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('只能上传的图片文件类型', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/accept-file-image')
+
+  const upload = page.getByRole('button', { name: '点击上传' })
+  const lists = page.locator('.tiny-upload-list__item')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+
+  const path = require('node:path')
+  const path1 = path.resolve(__dirname, '测试.jpg')
+  const path2 = path.resolve(__dirname, '测试.svg')
+  const path3 = path.resolve(__dirname, '测试.png')
+
+  await fileChooser.setFiles(path1)
+  await fileChooser.setFiles(path2)
+  await fileChooser.setFiles(path3)
+  await expect(lists).toHaveCount(3)
+  await expect(lists).toHaveText([/测试.jpg/, /测试.svg/, /测试.png/])
+})

package/resources/pc/demo/file-upload/basic-usage.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/basic-usage')
+
+  const upload = page.getByRole('button', { name: '点击上传' })
+  const lists = page.locator('.tiny-upload-list__item')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await fileChooser.setFiles(currentPath)
+  await expect(lists).toHaveCount(1)
+  await expect(lists).toHaveText('测试.jpg按 delete 键可删除')
+})

package/resources/pc/demo/file-upload/clear-files.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('手动清空已上传文件列表', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/clear-files')
+
+  const lists = page.locator('.tiny-upload-list__item')
+  const clear = page.getByRole('button', { name: '点击清空上传列表' })
+
+  await expect(lists).toHaveCount(2)
+  await clear.click()
+  await expect(lists).toHaveCount(0)
+})

package/resources/pc/demo/file-upload/custom-prefix.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test'
+
+test('钩子函数', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/custom-prefix')
+
+  const upload = page.getByRole('button', { name: '点击上传' })
+  const lists = page.locator('.tiny-upload-list__item')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+  const modal = page.locator('.tiny-modal')
+  const delButton = page
+    .getByRole('listitem')
+    .filter({ hasText: 'test1按 delete 键可删除' })
+    .getByTitle('删除文件')
+    .locator('svg')
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await fileChooser.setFiles(currentPath)
+  await expect(lists).toHaveCount(3)
+  await modal.waitFor({ state: 'attached', timeout: 100 })
+  await lists.nth(0).hover()
+  await delButton.click()
+  await expect(lists).toHaveCount(2)
+  await expect(modal).toHaveCount(2)
+})

package/resources/pc/demo/file-upload/custom-trigger.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义触发文件选项框', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/custom-trigger')
+
+  const upload = page.locator('.tiny-upload')
+
+  await expect(upload).toHaveText('我是触发源')
+})

package/resources/pc/demo/file-upload/custom-upload-request.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义上传请求', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/custom-upload-request')
+
+  const upload = page.getByRole('button', { name: '选取文件' })
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  const [request] = await Promise.all([page.waitForEvent('requestfailed'), fileChooser.setFiles(currentPath)])
+  const { authorization } = await request.headers()
+
+  await expect(request.headers()).not.toBeNull()
+  await expect(authorization).toEqual('Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==')
+})

package/resources/pc/demo/file-upload/custom-upload-tip.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义上传提示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/custom-upload-tip')
+
+  const tip = page.locator('.tiny-upload__tip')
+
+  await expect(tip).toHaveText('只能上传jpg/png文件，且不超过500kb')
+})

package/resources/pc/demo/file-upload/drag-select-file.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test'
+
+test('拖拽上传', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/drag-select-file')
+
+  const drag = page.locator('.tiny-upload-dragger')
+  const lists = page.locator('.tiny-upload-list__item')
+  const input = page.locator('.tiny-upload__input')
+  const server = page.getByRole('button', { name: '上传到服务器' })
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), drag.click()])
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await expect(drag).toHaveCSS('width', '360px')
+  await expect(drag).toHaveCSS('height', '180px')
+  await fileChooser.setFiles(currentPath)
+  await expect(lists).toHaveText(/测试.jpg/)
+  await input.isVisible()
+  await server.click()
+  await lists.waitFor({ state: 'hidden', timeout: 3000 })
+  await expect(lists).toHaveCount(0)
+})

package/resources/pc/demo/file-upload/drag-upload.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('是否可以拖拽上传', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/drag-upload')
+
+  const drag = page.locator('.tiny-upload-dragger')
+  const lists = page.locator('.tiny-upload-list__item')
+  const input = page.locator('.tiny-upload__input')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), drag.click()])
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await expect(drag).toHaveCSS('width', '360px')
+  await expect(drag).toHaveCSS('height', '180px')
+  await fileChooser.setFiles(currentPath)
+  await expect(lists).toHaveText(/测试.jpg/)
+  await expect(input).toHaveAttribute('accept', '.png,.jpeg,.jpg')
+})

package/resources/pc/demo/file-upload/file-picture-card.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test'
+
+test('文件缩略图', async ({ page, context }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/file-picture-card')
+
+  const upload = page.locator('.tiny-upload')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+  const lists = page.locator('.tiny-upload-list__item')
+  const prevPic = page.locator('#preview').getByRole('listitem').locator('svg').first()
+  const prevImg = page.locator('.tiny-dialog-box__body > img')
+  const dialogClose = page.getByRole('button', { name: 'Close' })
+  const dowPic = page.locator('#preview').getByRole('listitem').locator('svg').nth(1)
+  const delbutton = page.locator('#preview').getByRole('listitem').locator('svg').nth(2)
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await expect(lists).toHaveCount(0)
+  await fileChooser.setFiles(currentPath)
+  await expect(lists).toHaveCount(1)
+  const [newPage] = await Promise.all([context.waitForEvent('page'), dowPic.click()])
+  await expect(newPage.url()).toContain('blob:http://localhost:')
+  await newPage.close()
+  await lists.hover()
+  await prevPic.click()
+  await prevImg.isVisible()
+  const { width, height } = await lists.boundingBox()
+  await expect(width).toEqual(148)
+  await expect(height).toEqual(148)
+  await dialogClose.click()
+  await lists.hover()
+  await delbutton.click()
+  await expect(lists).toHaveCount(0)
+})

package/resources/pc/demo/file-upload/http-request.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('覆盖默认请求', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/http-request')
+
+  const upload = page.getByRole('button', { name: '点击上传' })
+  const lists = page.locator('.tiny-upload-list__item')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+  const modal = page.locator('.tiny-modal')
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await fileChooser.setFiles(currentPath)
+  await modal.waitFor({ state: 'attached', timeout: 600 })
+  await expect(lists).toHaveCount(1)
+  await expect(lists).toHaveText(/测试.jpg/)
+})

package/resources/pc/demo/file-upload/image-size.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('获取上传的片的原始尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/image-size')
+
+  const upload = page.getByRole('button', { name: '选取文件' })
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+  const modal = page.locator('.tiny-modal')
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await fileChooser.setFiles(currentPath)
+  await expect(modal).toHaveText(/宽：\d+ 高：\d+/)
+})

package/resources/pc/demo/file-upload/manual-upload.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('手动上传', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/manual-upload')
+
+  const upload = page.getByRole('button', { name: '选取文件' })
+  const server = page.getByRole('button', { name: '上传到服务器' })
+  const lists = page.locator('.tiny-upload-list__item')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await fileChooser.setFiles(currentPath)
+  await expect(lists).toHaveText(/测试.jpg/)
+  await server.click()
+  await lists.waitFor({ state: 'hidden', timeout: 3000 })
+  await expect(lists).toHaveCount(0)
+})

package/resources/pc/demo/file-upload/max-file-count.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('最大上传文件数', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/max-file-count')
+
+  const upload = page.getByRole('button', { name: '点击上传' })
+  const lists = page.locator('.tiny-upload-list__item')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+  const modal = page.locator('.tiny-modal')
+
+  const path = require('node:path')
+  const path1 = path.resolve(__dirname, '测试.jpg')
+  const path2 = path.resolve(__dirname, '测试.png')
+
+  await fileChooser.setFiles(path1)
+  await expect(lists).toHaveCount(1)
+  await fileChooser.setFiles(path2)
+  await expect(lists).toHaveCount(1)
+  await modal.waitFor({ state: 'attached', timeout: 100 })
+})

package/resources/pc/demo/file-upload/mini-mode.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('mini模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/mini-mode')
+
+  const upload = page.locator('.tiny-file-upload')
+
+  await expect(upload).toHaveAttribute('minimode', 'true')
+})

package/resources/pc/demo/file-upload/multiple-file.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('文件多选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/multiple-file')
+
+  const upload = page.getByRole('button', { name: '选取文件' })
+  const lists = page.locator('.tiny-upload-list__item')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+  const input = page.locator('.tiny-upload__input')
+
+  const path = require('node:path')
+  const path1 = path.resolve(__dirname, '测试.jpg')
+  const path2 = path.resolve(__dirname, '测试.svg')
+  const path3 = path.resolve(__dirname, '测试.png')
+
+  await expect(fileChooser.isMultiple()).toBe(true)
+  await fileChooser.setFiles([path1, path2, path3])
+  await expect(lists).toHaveCount(3)
+  await expect(input).toHaveAttribute('multiple', '')
+})

package/resources/pc/demo/file-upload/picture-card.spec.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test'
+
+test('照片墙', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/picture-card')
+
+  const upload = page.locator('.tiny-upload')
+  const lists = page.locator('.tiny-upload-list__item')
+  const first = lists.nth(0)
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+  const delButton = page
+    .getByRole('listitem')
+    .filter({ hasText: 'fruit按 delete 键可删除' })
+    .locator('svg')
+    .nth(4)
+    .first()
+  const prevPic = page.getByTitle('预览文件').first()
+  const prevImg = page.locator('.tiny-dialog-box__body > img')
+  const dialogClose = page.getByRole('button', { name: 'Close' })
+  const { width, height } = await first.boundingBox()
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await expect(width).toEqual(148)
+  await expect(height).toEqual(148)
+  await expect(lists).toHaveCount(1)
+  await fileChooser.setFiles(currentPath)
+  await expect(lists).toHaveCount(2)
+  await first.hover()
+  await prevPic.click()
+  await expect(prevImg).toHaveAttribute('src', 'static/images/fruit.jpg')
+  await dialogClose.click()
+  await first.hover()
+  await delButton.click()
+  await expect(lists).toHaveCount(0)
+})

package/resources/pc/demo/file-upload/picture-list.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test'
+
+test('图片列表缩略图', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/picture-list')
+
+  const upload = page.locator('.tiny-upload')
+  const lists = page.locator('.tiny-upload-list__item')
+  const item1 = page.getByText('test1按 delete 键可删除')
+  const item2 = page.getByText('test2按 delete 键可删除')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+  const { width, height } = await item1.boundingBox()
+  const images = page.locator('.tiny-upload-list__item-thumbnail')
+  const triangles = page.locator('.tiny-upload-list__item-status-label')
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await expect(width).toEqual(771)
+  await expect(height).toEqual(56)
+  await expect(lists).toHaveCount(2)
+  await fileChooser.setFiles(currentPath)
+  await expect(images.nth(0)).toHaveCSS('width', '56px')
+  await expect(images.nth(0)).toHaveCSS('height', '56px')
+  await expect(images.nth(0)).toHaveAttribute('src', 'static/images/fruit.jpg')
+  await expect(images.nth(1)).toHaveAttribute('src', 'static/images/book.jpg')
+  await expect(triangles.nth(0)).toHaveCSS('transform', 'matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)')
+})

package/resources/pc/demo/file-upload/prevent-delete-file.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('阻止删除文件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/prevent-delete-file')
+
+  const lists = page.locator('.tiny-upload-list__item')
+  const close = page.getByTitle('删除文件').locator('svg')
+  const modal = page.locator('.tiny-modal')
+  const modalCancel = page.getByRole('button', { name: '取消' })
+
+  await expect(lists).toHaveCount(1)
+  await expect(lists).toHaveText(/test1/)
+  await lists.hover()
+  await close.click()
+  await modal.waitFor({ state: 'attached', timeout: 100 })
+  await modalCancel.click()
+  await expect(lists).toHaveCount(1)
+  await expect(lists).toHaveText(/test1/)
+})

package/resources/pc/demo/file-upload/prevent-upload-file.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('阻止上传文件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/prevent-upload-file')
+
+  const upload = page.getByRole('button', { name: '选取文件' })
+  const modal = page.locator('.tiny-modal')
+  const modalCancel = page.getByRole('button', { name: '取消' })
+  const lists = page.locator('.tiny-upload-list__item')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await expect(lists).toHaveCount(1)
+  await expect(lists).toHaveText(/test1/)
+  await fileChooser.setFiles(currentPath)
+  await modal.waitFor({ state: 'attached', timeout: 100 })
+  await modalCancel.click()
+  await expect(lists).toHaveCount(1)
+  await expect(lists).toHaveText(/test1/)
+})

package/resources/pc/demo/file-upload/size.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('设置组件大小', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/size')
+
+  const upload = page.locator('.tiny-file-upload').getByRole('button', { name: '上传' })
+  const { width, height } = await upload.boundingBox()
+
+  await expect(upload).toHaveClass(/tiny-button--medium/)
+  await expect(width).toEqual(88)
+  await expect(height).toEqual(40)
+})

package/resources/pc/demo/file-upload/upload-events.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test'
+
+test('事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/upload-events')
+
+  const upload = page.getByRole('button', { name: '点击上传' })
+  const lists = page.locator('.tiny-upload-list__item')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+  const modals = page.locator('.tiny-modal')
+  const delButton = page
+    .getByRole('listitem')
+    .filter({ hasText: 'test1按 delete 键可删除' })
+    .getByTitle('删除文件')
+    .locator('svg')
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await fileChooser.setFiles(currentPath)
+  await expect(modals).toHaveCount(3)
+  await expect(modals).toHaveText(['触发上传文件改变回调事件', '文件上传失败回调', '触发上传文件改变回调事件'])
+  await lists.nth(0).hover()
+  await delButton.click()
+  await expect(modals.nth(3)).toHaveText('触发删除文件回调事件')
+
+  await fileChooser.setFiles([currentPath, currentPath, currentPath, currentPath])
+  await expect(modals.nth(3)).toHaveText('触发文件超出个数限制回调事件')
+})

package/resources/pc/demo/file-upload/upload-file-list-thumb.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('上传的文件列表弹出显示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/file-upload/upload-file-list-thumb')
+
+  const thumb = page.locator('.tiny-upload--thumb__head')
+  const popList = page.getByRole('tooltip', { name: 'test1 下载文件 删除文件 test2 下载文件 删除文件' })
+  const delItem1 = page.locator('span').filter({ hasText: 'test1test1' }).getByTitle('删除文件')
+  const downloadItem2 = page.locator('span').filter({ hasText: 'test2test2' }).getByTitle('下载文件')
+
+  await expect(thumb).toHaveText('2')
+  await thumb.hover()
+  await popList.isVisible()
+  await delItem1.locator('svg').click()
+  await expect(thumb).toHaveText('1')
+  const page3Promise = page.waitForEvent('popup')
+  await downloadItem2.locator('svg').click()
+  await page3Promise
+})

package/resources/pc/demo/file-upload/upload-file-list-thumb.vue

@@ -1,5 +1,6 @@
 <template>
   <tiny-file-upload
+    action="/"
     name="fileName"
     show-file-list
     :file-list="fileList"
@@ -7,7 +8,7 @@
     :open-download-file="true"
     :thumb-option="options"
   >
-    <tiny-button type="primary">点击上传</tiny-button>
+    <tiny-button type="primary"> 点击上传 </tiny-button>
   </tiny-file-upload>
 </template>