opentiny
/
tiny-vue
2
0
Fork 29
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

docs(image): add container/image's e2e test (#1058)

This commit is contained in:
申君健 2023-12-07 20:23:49 +08:00 committed by GitHub
parent 1080a9122b
commit 2d71724678
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 126 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
examples/sites/demos/pc/app/container/basic-usage.spec.js
View File

@ -2,8 +2,53 @@ import { test, expect } from '@playwright/test'
test('基础用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('container#basic-usage')
const header = page.locator('.pc-demo-container .tiny-container__header')
const preview = page.locator('.pc-demo-container')
const header = preview.locator('.tiny-container__header')
const aside = preview.locator('.tiny-container__aside')
const main = preview.locator('.tiny-container__main')
const footer = preview.locator('.tiny-container__footer')
const btnCalssic = preview.getByText('经典')
const btnSimple = preview.getByText('简约')
const btnfashion = preview.getByText('时尚')
const btnlegend = preview.getByText('传奇')
// 默认显示
await expect(header).toHaveText('Header')
await expect(main).toHaveCSS('top', '60px')
await expect(main).toHaveCSS('left', '200px')
await page.waitForTimeout(20)
// 经典模式
await btnCalssic.click()
await expect(footer).toHaveText('Footer')
await expect(main).toHaveCSS('top', '60px')
await expect(main).toHaveCSS('bottom', '60px')
await expect(main).toHaveCSS('left', '0px')
await page.waitForTimeout(20)
// 简约
await btnSimple.click()
await expect(header).toHaveCount(0)
await expect(main).toHaveCSS('top', '0px')
await expect(main).toHaveCSS('left', '200px')
await page.waitForTimeout(20)
// 时尚
await btnfashion.click()
await expect(header).toHaveCount(1)
await expect(header).toHaveCSS('top', '0px')
await expect(header).toHaveCSS('left', '200px')
await expect(main).toHaveCSS('top', '60px')
await expect(main).toHaveCSS('left', '200px')
await page.waitForTimeout(20)
// 传奇
await btnlegend.click()
await expect(header).toHaveCount(1)
await expect(main).toHaveCSS('top', '60px')
await expect(main).toHaveCSS('left', '200px')
await expect(aside).toHaveCSS('top', '60px')
await expect(footer).toHaveCSS('left', '200px')
})

12
examples/sites/demos/pc/app/container/custom-with-height.spec.js
View File

@ -2,8 +2,16 @@ import { test, expect } from '@playwright/test'
test('自定义宽度和高度', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('container#custom-with-height')
const header = page.locator('.pc-demo-container .tiny-container__header')
const preview = page.locator('.pc-demo-container')
const header = preview.locator('.tiny-container__header')
const aside = preview.locator('.tiny-container__aside')
const main = preview.locator('.tiny-container__main')
const footer = preview.locator('.tiny-container__footer')
await expect(header).toHaveCSS('height', '80px')
await expect(aside).toHaveCSS('width', '200px')
await expect(main).toHaveCSS('top', '80px')
await expect(footer).toHaveCSS('height', '80px')
})

11
examples/sites/demos/pc/app/image/basic-usage.spec.ts
View File

@ -4,6 +4,13 @@ test('基础用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('image#basic-usage')
const img = page.locator('.tiny-image > .tiny-image__inner')
await expect(img).toHaveCount(5)
const preview = page.locator('.pc-demo-container')
const imgs = preview.locator('.tiny-image > .tiny-image__inner')
await expect(imgs).toHaveCount(5)
await expect(imgs.nth(0)).toHaveCSS('object-fit', 'fill')
await expect(imgs.nth(1)).toHaveCSS('object-fit', 'contain')
await expect(imgs.nth(2)).toHaveCSS('object-fit', 'cover')
await expect(imgs.nth(3)).toHaveCSS('object-fit', 'none')
await expect(imgs.nth(4)).toHaveCSS('object-fit', 'scale-down')
})

4
examples/sites/demos/pc/app/image/events.spec.ts
View File

@ -4,6 +4,8 @@ test('事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('image#events')
const errorSlot = page.locator('.tiny-image__error')
await page.waitForTimeout(300)
const eventMsg = page.getByText('加载失败触发事件')
await expect(errorSlot).toHaveCount(1)
await expect(eventMsg).toHaveCount(1)
})

4
examples/sites/demos/pc/app/image/lazy-composition-api.vue
View File

@ -2,7 +2,7 @@
<div>
<div style="margin: 12px">滚动下面的容器，通过开发者工具中的观察网络请求：</div>
<div class="demo-image__lazy" style="height: 300px; overflow-y: auto">
<tiny-image v-for="url in srcList" :key="url" :src="url" lazy></tiny-image>
<tiny-image v-for="url in srcList" :key="url" :src="url" lazy fit="fill"></tiny-image>
</div>
</div>
</template>
@ -21,6 +21,6 @@ const srcList = ref([
<style scoped>
.demo-image__lazy .tiny-image {
display: block;
min-height: 200px;
min-height: 500px;
}
</style>

11
examples/sites/demos/pc/app/image/lazy.spec.ts
View File

@ -5,12 +5,15 @@ test('懒加载', async ({ page }) => {
await page.goto('image#lazy')
const preview = page.locator('.pc-demo-container')
await expect(preview.locator('.demo-image__lazy div').locator('img')).toHaveCount(2)
await expect(preview.locator('.demo-image__lazy div').locator('img')).toHaveCount(1)
// 滚动2次，触发下面2张加载
const imageBox = preview.locator('.demo-image__lazy')
await imageBox.hover()
await page.mouse.wheel(0, 2000)
await page.waitForTimeout(300)
await page.mouse.wheel(0, 1000)
await page.mouse.wheel(0, 300)
await page.waitForTimeout(100)
await page.mouse.wheel(0, 500)
await page.waitForTimeout(30)
await expect(preview.locator('.demo-image__lazy').locator('img')).toHaveCount(3)
})

4
examples/sites/demos/pc/app/image/lazy.vue
View File

@ -2,7 +2,7 @@
<div>
<div style="margin: 12px">滚动下面的容器，通过开发者工具中的观察网络请求：</div>
<div class="demo-image__lazy" style="height: 300px; overflow-y: auto">
<tiny-image v-for="url in srcList" :key="url" :src="url" lazy></tiny-image>
<tiny-image v-for="url in srcList" :key="url" :src="url" lazy fit="fill"></tiny-image>
</div>
</div>
</template>
@ -29,6 +29,6 @@ export default {
<style scoped>
.demo-image__lazy .tiny-image {
display: block;
min-height: 200px;
min-height: 500px;
}
</style>

16
examples/sites/demos/pc/app/image/preview-in-dialog.spec.ts
View File

@ -3,7 +3,21 @@ import { test, expect } from '@playwright/test'
test('对话框中预览图片', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('image#preview-in-dialog')
await page.getByRole('button', { name: '弹出Dialog' }).click()
const preview = page.locator('.pc-demo-container')
const viewerImage = page.locator('.tiny-image-viewer')
const btn = preview.getByRole('button', { name: '弹出Dialog' })
const dialog = page.locator('.pc-demo-container .tiny-dialog-box__title')
const image = preview.locator('.tiny-image__inner')
// 打开对话框
await btn.click()
await page.waitForTimeout(50)
await expect(dialog).toBeVisible()
await expect(image).toBeVisible()
// 打开预览
await image.click()
await page.waitForTimeout(50)
await expect(viewerImage).toBeVisible()
})

41
examples/sites/demos/pc/app/image/preview.spec.ts
View File

@ -5,35 +5,50 @@ test('图片大图', async ({ page }) => {
await page.goto('image#preview')
const preview = page.locator('.pc-demo-container')
await preview.locator('.tiny-image__inner').click()
const viewerImage = page.locator('.tiny-image-viewer')
await expect(viewerImage).toHaveCount(1)
await page.waitForTimeout(50)
// viewerImage 是插入到body末尾的。
const viewerImage = page.locator('.tiny-image-viewer')
const mask = viewerImage.locator('.tiny-image-viewer__mask')
const toolbar = viewerImage.locator('.tiny-image-viewer__actions-inner')
const canvas = viewerImage.locator('.tiny-image-viewer__img')
// 验证出现
await expect(viewerImage).toHaveCount(1)
await expect(canvas).toHaveCount(1)
await expect(mask).toHaveCSS('position', 'absolute')
await expect(mask).toHaveCSS('opacity', '0.5')
await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
// 点击缩小
await toolbar.locator('svg').first().click()
await page.waitForTimeout(20)
await expect(canvas).toHaveCSS('transform', 'matrix(0.8, 0, 0, 0.8, 0, 0)')
// 点击放大
await toolbar.locator('svg').nth(1).click()
await page.waitForTimeout(20)
await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
// 点击向左旋转
await toolbar.locator('svg').nth(3).click()
await page.waitForTimeout(20)
await expect(canvas).toHaveCSS('transform', 'matrix(0, -1, 1, 0, 0, 0)')
// // 点击切换上一张图片
// let preImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
// await page.locator('span:nth-child(3) > .tiny-svg').click()
// let currentImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
// await expect(preImageSrc).not.toEqual(currentImageSrc)
// // 点击切换下一张图片
// preImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
// await page.locator('span:nth-child(4) > .tiny-svg').click()
// currentImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
// await expect(preImageSrc).not.toEqual(currentImageSrc)
const prev = viewerImage.locator('.tiny-image-viewer__prev')
const next = viewerImage.locator('.tiny-image-viewer__next')
// // 点击切换
await next.click()
await page.waitForTimeout(20)
await expect(canvas).toHaveAttribute('src', /house\.jpg/)
await prev.click()
await page.waitForTimeout(20)
await prev.click()
await page.waitForTimeout(20)
await expect(canvas).toHaveAttribute('src', /bridge\.jpg/)
// 点击关闭
await viewerImage.locator('.tiny-image-viewer__close').click()

3
examples/sites/demos/pc/app/image/slot.spec.ts
View File

@ -5,5 +5,8 @@ test('插槽', async ({ page }) => {
await page.goto('image#slot')
const errorSlot = page.locator('.tiny-image__error')
const customLost = page.getByText('图片已丢失')
await expect(errorSlot).toBeVisible()
await expect(customLost).toBeVisible()
})