benyuanzhang
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test(file-upload): [file-upload] update file-upload E2E test (#960)

This commit is contained in:
chenxi-20 2023-12-05 17:08:37 +08:00 committed by GitHub
parent 364e0ce5b9
commit d2cd75a587
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 119 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
examples/sites/demos/pc/app/file-upload/abort-quest.spec.ts
View File

@ -4,8 +4,8 @@ test('手动取消上传请求', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('file-upload#abort-quest')
const upload = page.locator('.tiny-upload')
const lists = page.locator('.tiny-upload-list__item')
const upload = page.getByRole('button', { name: '点击上传' })
const item = page.locator('.tiny-upload-list__li').nth(0)
const modal = page.locator('.tiny-modal')
const button = page.locator('button').filter({ hasText: '取消上传' })
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
@ -13,9 +13,10 @@ test('手动取消上传请求', async ({ page }) => {
const path = require('node:path')
const currentPath = path.resolve(__dirname, '测试.jpg')
await button.click()
await expect(modal).toHaveText('手动取消上传')
await fileChooser.setFiles(currentPath)
await item.isVisible()
await button.click()
await expect(modal.nth(1)).toHaveText('手动取消上传')
await item.isHidden()
await expect(fileChooser.isMultiple()).toBe(false)
await expect(lists).toHaveCount(1)
})

13
examples/sites/demos/pc/app/file-upload/accept-file-image.spec.ts
View File

@ -1,21 +1,26 @@
import { test, expect } from '@playwright/test'
test('只能上传的图片文件类型', async ({ page }) => {
test('限制文件类型', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('file-upload#accept-file-image')
const upload = page.getByRole('button', { name: '点击上传' })
const lists = page.locator('.tiny-upload-list__item')
const lists = page.locator('.tiny-upload-list__li')
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')
const path4 = path.resolve(__dirname, '测试.txt')
await fileChooser.setFiles(path1)
await fileChooser.setFiles(path2)
await fileChooser.setFiles(path3)
await expect(lists).toHaveCount(3)
await expect(lists).toHaveText([/测试.jpg/, /测试.svg/, /测试.png/])
await fileChooser.setFiles(path4)
await page.getByText('格式（.txt）暂不支持').isVisible()
await page.getByText('测试.jpg').isVisible()
await page.getByText('测试.svg').isVisible()
await page.getByText('测试.png').isVisible()
})

2
examples/sites/demos/pc/app/file-upload/custom-trigger.spec.ts
View File

@ -1,6 +1,6 @@
import { test, expect } from '@playwright/test'
test('自定义触发文件选项框', async ({ page }) => {
test('触发源插槽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('file-upload#custom-trigger')

9
examples/sites/demos/pc/app/file-upload/disabled.spec.ts
View File

@ -1,11 +1,10 @@
import { test, expect } from '@playwright/test'
test('基本用法', async ({ page }) => {
test('禁用', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/file-upload/disabled')
await page.goto('file-upload#disabled')
const upload = page.getByRole('button', { name: '点击上传' })
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
const upload = page.locator('.tiny-upload')
await expect(fileChooser).toBeUndefined()
await expect(upload).toHaveClass(/is-disabled/)
})

2
examples/sites/demos/pc/app/file-upload/drag-upload.spec.ts
View File

@ -15,6 +15,6 @@ test('是否可以拖拽上传', async ({ page }) => {
await expect(drag).toHaveCSS('width', '360px')
await expect(drag).toHaveCSS('height', '180px')
await fileChooser.setFiles(currentPath)
await expect(lists).toHaveText(/测试.jpg/)
await expect(lists.nth(0)).toHaveText(/测试.jpg/)
await expect(input).toHaveAttribute('accept', '.png,.jpeg,.jpg')
})

13
examples/sites/demos/pc/app/file-upload/file-picture-card.spec.ts
View File

@ -1,17 +1,17 @@
import { test, expect } from '@playwright/test'
test('文件缩略图', async ({ page, context }) => {
test('照片墙的预览、下载与删除', async ({ page, context }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('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 prevPic = page.locator('#file-picture-card 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 dowPic = page.locator('#file-picture-card svg').nth(1)
const delbutton = page.locator('#file-picture-card svg').nth(2)
const path = require('node:path')
const currentPath = path.resolve(__dirname, '测试.jpg')
@ -19,17 +19,18 @@ test('文件缩略图', async ({ page, context }) => {
await expect(lists).toHaveCount(0)
await fileChooser.setFiles(currentPath)
await expect(lists).toHaveCount(1)
await lists.first().hover()
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 lists.first().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 lists.first().hover()
await delbutton.click()
await expect(lists).toHaveCount(0)
})

4
examples/sites/demos/pc/app/file-upload/form-validation.spec.ts
View File

@ -2,9 +2,9 @@ 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/form-validation')
await page.goto('file-upload#form-validation')
const button = page.locator('.tiny-button')
const button = page.locator('button').filter({ hasText: '提交' })
const tip = page.locator('.tiny-form-item__validate-message')
await button.click()

4
examples/sites/demos/pc/app/file-upload/image-size.spec.ts
View File

@ -1,6 +1,6 @@
import { test, expect } from '@playwright/test'
test('获取上传的片的原始尺寸', async ({ page }) => {
test('获取图片的原始尺寸', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('file-upload#image-size')
@ -12,5 +12,5 @@ test('获取上传的片的原始尺寸', async ({ page }) => {
const currentPath = path.resolve(__dirname, '测试.jpg')
await fileChooser.setFiles(currentPath)
await expect(modal).toHaveText(/宽：\d+ 高：\d+/)
await expect(modal.nth(1)).toHaveText(/宽：\d+ 高：\d+/)
})

12
examples/sites/demos/pc/app/file-upload/max-file-count.spec.ts
View File

@ -1,21 +1,21 @@
import { test, expect } from '@playwright/test'
test('最大上传文件数', async ({ page }) => {
test('最大上传数', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('file-upload#max-file-count')
const upload = page.getByRole('button', { name: '点击上传' })
const lists = page.locator('.tiny-upload-list__item')
const lists = page.locator('.tiny-upload-list__li')
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
const modal = page.locator('.tiny-modal')
const modal = page.locator('.tiny-modal').getByText(/文件数不能超过/)
const path = require('node:path')
const path1 = path.resolve(__dirname, '测试.jpg')
const path2 = path.resolve(__dirname, '测试.png')
await fileChooser.setFiles([path1, path2])
await modal.isVisible()
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 })
await upload.isHidden()
})

21
examples/sites/demos/pc/app/file-upload/paste-upload.spec.ts
View File

@ -1,10 +1,27 @@
import { test, expect } from '@playwright/test'
test('文件多选', async ({ page }) => {
test('粘贴上传', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/file-upload/paste-upload')
await page.goto('file-upload#paste-upload')
const drag = page.locator('.tiny-upload-dragger')
await expect(drag).toHaveCSS('width', '360px')
await expect(drag).toHaveCSS('height', '180px')
const path = require('node:path')
const pathJpg = path.resolve(__dirname, '测试.jpg')
await page.goto(pathJpg)
await page.keyboard.down('Control')
await page.keyboard.press('KeyC')
await page.keyboard.up('Control')
await page.goto('file-upload#paste-upload')
await page.focus('div.tiny-upload-dragger')
await page.keyboard.down('Control')
await page.keyboard.press('KeyV')
await page.keyboard.up('Control')
})

11
examples/sites/demos/pc/app/file-upload/picture-card.spec.ts
View File

@ -5,8 +5,9 @@ test('照片墙', async ({ page }) => {
await page.goto('file-upload#picture-card')
const upload = page.locator('.tiny-upload')
const lists = page.locator('.tiny-upload-list__item')
const first = lists.nth(0)
const li = page.locator('.tiny-upload-list__li')
const items = li.locator('.tiny-upload-list__item')
const first = items.nth(0)
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
const delButton = page
.getByRole('listitem')
@ -24,14 +25,14 @@ test('照片墙', async ({ page }) => {
await expect(width).toEqual(148)
await expect(height).toEqual(148)
await expect(lists).toHaveCount(1)
await expect(li).toHaveCount(1)
await fileChooser.setFiles(currentPath)
await expect(lists).toHaveCount(2)
await expect(li).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(1)
await expect(items).toHaveCount(1)
})

5
examples/sites/demos/pc/app/file-upload/picture-list.spec.ts
View File

@ -7,7 +7,6 @@ test('图片列表缩略图', async ({ page }) => {
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')
@ -16,8 +15,8 @@ test('图片列表缩略图', async ({ page }) => {
const path = require('node:path')
const currentPath = path.resolve(__dirname, '测试.jpg')
await expect(width).toEqual(771)
await expect(height).toEqual(56)
await expect(width).toBeGreaterThanOrEqual(708)
await expect(height).toBeGreaterThanOrEqual(56)
await expect(lists).toHaveCount(2)
await fileChooser.setFiles(currentPath)
await expect(images.nth(0)).toHaveCSS('width', '56px')

2
examples/sites/demos/pc/app/file-upload/prevent-delete-file.spec.ts
View File

@ -13,7 +13,7 @@ test('阻止删除文件', async ({ page }) => {
await expect(lists).toHaveText(/test1/)
await lists.hover()
await close.click()
await modal.waitFor({ state: 'attached', timeout: 100 })
await modal.nth(1).waitFor({ state: 'attached', timeout: 100 })
await modalCancel.click()
await expect(lists).toHaveCount(1)
await expect(lists).toHaveText(/test1/)

2
examples/sites/demos/pc/app/file-upload/prevent-upload-file.spec.ts
View File

@ -5,7 +5,7 @@ test('阻止上传文件', async ({ page }) => {
await page.goto('file-upload#prevent-upload-file')
const upload = page.getByRole('button', { name: '选取文件' })
const modal = page.locator('.tiny-modal')
const modal = page.locator('.tiny-modal').nth(1)
const modalCancel = page.getByRole('button', { name: '取消' })
const lists = page.locator('.tiny-upload-list__item')
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])

10
examples/sites/demos/pc/app/file-upload/upload-events.spec.ts
View File

@ -18,12 +18,14 @@ test('事件', async ({ page }) => {
const currentPath = path.resolve(__dirname, '测试.jpg')
await fileChooser.setFiles(currentPath)
await expect(modals).toHaveCount(3)
await expect(modals).toHaveText(['触发上传文件改变回调事件', '文件上传失败回调', '触发上传文件改变回调事件'])
await page.getByText('文件上传失败回调').isVisible()
await expect(page.getByText('触发上传文件改变回调事件')).toHaveCount(2)
await page.waitForTimeout(100)
await lists.nth(0).hover()
await delButton.click()
await expect(modals.nth(3)).toHaveText('触发删除文件回调事件')
await page.getByText('触发删除文件回调事件').isVisible()
await fileChooser.setFiles([currentPath, currentPath, currentPath, currentPath])
await expect(modals.nth(3)).toHaveText('触发文件超出个数限制回调事件')
await page.getByText('触发文件超出个数限制回调事件').isVisible()
})

18
examples/sites/demos/pc/app/file-upload/upload-file-list-slot.spec.ts Normal file
View File

@ -0,0 +1,18 @@
import { test, expect } from '@playwright/test'
test('定义文件列表', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('file-upload#upload-file-list-slot')
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 expect(lists).toHaveCount(2)
await expect(lists).toHaveText([/test1/, /test2/])
await fileChooser.setFiles(currentPath)
await page.getByText('测试.jpg').isVisible()
})

7
examples/sites/demos/pc/app/file-upload/upload-file-list-thumb-composition-api.vue
View File

@ -23,9 +23,10 @@ const options = ref({
showDel: true,
showTooltip: false,
popperClass: 'my-thumb-name',
downloadFile: (file) => {
console.log('file', file)
},
// 取消以下注释自定义下载
// downloadFile: (file) => {
// console.log('file', file)
// },
icon: iconEditorListNum()
})
const fileList = ref([

4
examples/sites/demos/pc/app/file-upload/upload-file-list-thumb.spec.ts
View File

@ -1,6 +1,6 @@
import { test, expect } from '@playwright/test'
test('上传的文件列表弹出显示', async ({ page }) => {
test('列表弹窗显示', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('file-upload#upload-file-list-thumb')
@ -12,7 +12,7 @@ test('上传的文件列表弹出显示', async ({ page }) => {
await expect(thumb).toHaveText('2')
await thumb.hover()
await popList.isVisible()
await delItem1.locator('svg').dblclick()
await delItem1.locator('svg').click()
await expect(thumb).toHaveText('1')
const page3Promise = page.waitForEvent('popup')
await downloadItem2.locator('svg').click()

7
examples/sites/demos/pc/app/file-upload/upload-file-list-thumb.vue
View File

@ -29,9 +29,10 @@ export default {
showDel: true,
showTooltip: false,
popperClass: 'my-thumb-name',
downloadFile: (file) => {
console.log('file', file)
},
// 取消以下注释自定义下载
// downloadFile: (file) => {
// console.log('file', file)
// },
icon: iconEditorListNum()
},
fileList: [

18
examples/sites/demos/pc/app/file-upload/upload-file-list.spec.ts
View File

@ -1,22 +1,22 @@
import { test, expect } from '@playwright/test'
test('上传的文件列表', async ({ page }) => {
test('文件列表', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('file-upload#upload-file-list')
const upload = page.getByRole('button', { name: '点击上传' })
const lists = page.locator('.tiny-upload-list__item')
const items = page.locator('.tiny-upload-list__item')
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
const { width, height } = await lists.nth(0).boundingBox()
const { width, height } = await items.nth(0).boundingBox()
const path = require('node:path')
const currentPath = path.resolve(__dirname, '测试.jpg')
await expect(width).toEqual(771)
await expect(height).toBeCloseTo(25, 0)
await expect(lists).toHaveCount(2)
await expect(lists).toHaveText([/test1/, /test2/])
await expect(width).toBeGreaterThanOrEqual(708)
await expect(height).toBeGreaterThanOrEqual(25, 0)
await expect(items).toHaveCount(2)
await expect(items).toHaveText([/test1/, /test2/])
await fileChooser.setFiles(currentPath)
await expect(lists).toHaveCount(3)
await expect(lists).toHaveText([/test1/, /test2/, /测试.jpg/])
await page.getByText('测试.jpg').isVisible()
await expect(items).toHaveText([/test1/, /test2/])
})

13
examples/sites/demos/pc/app/file-upload/upload-limit.spec.ts
View File

@ -1,6 +1,6 @@
import { test, expect } from '@playwright/test'
test('最大上传限制', async ({ page }) => {
test('上传前限制', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('file-upload#upload-limit')
@ -13,11 +13,8 @@ test('最大上传限制', async ({ page }) => {
const path2 = path.resolve(__dirname, '测试.svg')
const path3 = path.resolve(__dirname, '测试.png')
await fileChooser.setFiles(path1)
await expect(lists).toHaveCount(1)
await fileChooser.setFiles(path2)
await expect(lists).toHaveCount(1)
await fileChooser.setFiles(path3)
await expect(lists).toHaveCount(1)
await expect(lists).toHaveText(/测试.jpg/)
fileChooser.setFiles(path1)
fileChooser.setFiles(path2)
fileChooser.setFiles(path3)
await expect(lists).toHaveCount(0)
})

2
examples/sites/demos/pc/app/file-upload/upload-request.spec.ts
View File

@ -16,7 +16,7 @@ test.describe('设置上传请求', () => {
test('支持发送 cookie 凭证信息', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('file-upload#upload-request1')
await page.goto('file-upload#upload-request')
const upload = page.getByRole('button', { name: '选取文件' })
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])

2
examples/sites/demos/pc/app/file-upload/upload-user-head.spec.ts
View File

@ -5,7 +5,7 @@ test('用户头像上传', async ({ page }) => {
await page.goto('file-upload#upload-user-head')
const upload = page.locator('.tiny-upload')
const addIcon = page.locator('#preview svg').nth(1)
const addIcon = page.locator('#upload-user-head svg')
await expect(upload).toHaveCSS('width', '87px')
await expect(upload).toHaveCSS('height', '87px')

1
examples/sites/demos/pc/app/file-upload/测试.txt Normal file
View File

@ -0,0 +1 @@
测试txt文件

2
package.json
View File

@ -238,4 +238,4 @@
"> 1%",
"last 2 versions"
]
}
}