From 2d71724678998dec348a0897d3a3c695020bdb77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com> Date: Thu, 7 Dec 2023 20:23:49 +0800 Subject: [PATCH] docs(image): add container/image's e2e test (#1058) --- .../pc/app/container/basic-usage.spec.js | 49 ++++++++++++++++++- .../app/container/custom-with-height.spec.js | 12 ++++- .../demos/pc/app/image/basic-usage.spec.ts | 11 ++++- .../sites/demos/pc/app/image/events.spec.ts | 4 +- .../pc/app/image/lazy-composition-api.vue | 4 +- .../sites/demos/pc/app/image/lazy.spec.ts | 11 +++-- examples/sites/demos/pc/app/image/lazy.vue | 4 +- .../pc/app/image/preview-in-dialog.spec.ts | 16 +++++- .../sites/demos/pc/app/image/preview.spec.ts | 41 +++++++++++----- .../sites/demos/pc/app/image/slot.spec.ts | 3 ++ 10 files changed, 126 insertions(+), 29 deletions(-) diff --git a/examples/sites/demos/pc/app/container/basic-usage.spec.js b/examples/sites/demos/pc/app/container/basic-usage.spec.js index a71752b5d..a54c1d193 100644 --- a/examples/sites/demos/pc/app/container/basic-usage.spec.js +++ b/examples/sites/demos/pc/app/container/basic-usage.spec.js @@ -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') }) diff --git a/examples/sites/demos/pc/app/container/custom-with-height.spec.js b/examples/sites/demos/pc/app/container/custom-with-height.spec.js index 254465b57..f62c68c0d 100644 --- a/examples/sites/demos/pc/app/container/custom-with-height.spec.js +++ b/examples/sites/demos/pc/app/container/custom-with-height.spec.js @@ -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') }) diff --git a/examples/sites/demos/pc/app/image/basic-usage.spec.ts b/examples/sites/demos/pc/app/image/basic-usage.spec.ts index ad6f58ee3..ec3c37bdf 100644 --- a/examples/sites/demos/pc/app/image/basic-usage.spec.ts +++ b/examples/sites/demos/pc/app/image/basic-usage.spec.ts @@ -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') }) diff --git a/examples/sites/demos/pc/app/image/events.spec.ts b/examples/sites/demos/pc/app/image/events.spec.ts index 25cfc4755..8f6b9da50 100644 --- a/examples/sites/demos/pc/app/image/events.spec.ts +++ b/examples/sites/demos/pc/app/image/events.spec.ts @@ -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) }) diff --git a/examples/sites/demos/pc/app/image/lazy-composition-api.vue b/examples/sites/demos/pc/app/image/lazy-composition-api.vue index 0f2ada76b..900058176 100644 --- a/examples/sites/demos/pc/app/image/lazy-composition-api.vue +++ b/examples/sites/demos/pc/app/image/lazy-composition-api.vue @@ -2,7 +2,7 @@
滚动下面的容器，通过开发者工具中的观察网络请求：
- +
@@ -21,6 +21,6 @@ const srcList = ref([ diff --git a/examples/sites/demos/pc/app/image/lazy.spec.ts b/examples/sites/demos/pc/app/image/lazy.spec.ts index 99725eef3..40911e4c9 100644 --- a/examples/sites/demos/pc/app/image/lazy.spec.ts +++ b/examples/sites/demos/pc/app/image/lazy.spec.ts @@ -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) }) diff --git a/examples/sites/demos/pc/app/image/lazy.vue b/examples/sites/demos/pc/app/image/lazy.vue index 229e52663..cea317ddb 100644 --- a/examples/sites/demos/pc/app/image/lazy.vue +++ b/examples/sites/demos/pc/app/image/lazy.vue @@ -2,7 +2,7 @@
滚动下面的容器，通过开发者工具中的观察网络请求：
- +
@@ -29,6 +29,6 @@ export default { diff --git a/examples/sites/demos/pc/app/image/preview-in-dialog.spec.ts b/examples/sites/demos/pc/app/image/preview-in-dialog.spec.ts index 0346379c7..a610b6a76 100644 --- a/examples/sites/demos/pc/app/image/preview-in-dialog.spec.ts +++ b/examples/sites/demos/pc/app/image/preview-in-dialog.spec.ts @@ -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() }) diff --git a/examples/sites/demos/pc/app/image/preview.spec.ts b/examples/sites/demos/pc/app/image/preview.spec.ts index 57bfe6462..f7246b9b9 100644 --- a/examples/sites/demos/pc/app/image/preview.spec.ts +++ b/examples/sites/demos/pc/app/image/preview.spec.ts @@ -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() diff --git a/examples/sites/demos/pc/app/image/slot.spec.ts b/examples/sites/demos/pc/app/image/slot.spec.ts index d58081c66..b78c0c0a0 100644 --- a/examples/sites/demos/pc/app/image/slot.spec.ts +++ b/examples/sites/demos/pc/app/image/slot.spec.ts @@ -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() })