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

Add container/layout/popover/tooltip e2e tests (#971) 

* docs(e2e): add image/layout/container e2e test scripts

* docs(e2e): add  tooltip popover e2e test scripts
This commit is contained in:
申君健 2023-11-30 15:33:15 +08:00 committed by GitHub
parent b8810cc059
commit aef9350a70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 197 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,15 +2,8 @@ import { test, expect } from '@playwright/test'
test('基础用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('container#custom-container')
await page.getByText('默认布局').click()
await page.locator('#preview').getByText('Header').click()
await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px;')
await page.locator('#preview').getByText('Aside').click()
await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'width: 200px; top: 60px;')
await page.getByText('Main').click()
await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute(
'style',
'top: 60px; left: 200px; bottom: 0px;'
)
await page.goto('container#basic-usage')
const header = page.locator('.pc-demo-container .tiny-container__header')
await expect(header).toHaveText('Header')
})

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

@ -2,12 +2,8 @@ import { test, expect } from '@playwright/test'
test('自定义宽度和高度', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('container#custom-with-height')
await page.locator('.f12 > div:nth-child(6)').click()
await page.getByText('header-height：80').click()
await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 80px;')
await page.getByText('aside-width：200').click()
await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'width: 200px; top: 80px;')
await page.getByText('footer-height：80').click()
await expect(page.locator('.tiny-container > div').nth(3)).toHaveAttribute('style', 'height: 80px; left: 200px;')
const header = page.locator('.pc-demo-container .tiny-container__header')
await expect(header).toHaveCSS('height', '80px')
})

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

@ -2,11 +2,8 @@ import { test, expect } from '@playwright/test'
test('基础用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
const requestPromise = page.waitForRequest(' http://localhost:7130/static/images/mountain.png')
await page.goto('image#basic-usage')
const request = await requestPromise
await expect(request.url()).toEqual('http://localhost:7130/static/images/mountain.png')
const img = page.locator('.tiny-image > .tiny-image__inner')
await page.waitForTimeout(500)
await expect(img).toHaveAttribute('style', 'width: 100px; height: 100px;')
await expect(img).toHaveCount(5)
})

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

@ -1,8 +1,9 @@
import { test, expect } from '@playwright/test'
test('加载失败事件', async ({ page }) => {
test('事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('image#load-error')
const errorDiv = page.locator('div').filter({ hasText: '加载失败触发事件' }).nth(1)
await expect(errorDiv).toBeVisible()
await page.goto('image#events')
const errorSlot = page.locator('.tiny-image__error')
await page.waitForTimeout(300)
await expect(errorSlot).toHaveCount(1)
})

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

@ -2,12 +2,15 @@ import { test, expect } from '@playwright/test'
test('懒加载', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('image#lazy-load')
await expect(page.locator('.demo-image__lazy div').locator('img')).toHaveCount(2)
const imageBox = page.locator('.demo-image__lazy')
await page.goto('image#lazy')
const preview = page.locator('.pc-demo-container')
await expect(preview.locator('.demo-image__lazy div').locator('img')).toHaveCount(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 expect(page.locator('.demo-image__lazy').locator('img')).toHaveCount(3)
await expect(preview.locator('.demo-image__lazy').locator('img')).toHaveCount(3)
})

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

@ -4,6 +4,6 @@ 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 dialog = page.getByText('消息加载失败 确 定')
const dialog = page.locator('.pc-demo-container .tiny-dialog-box__title')
await expect(dialog).toBeVisible()
})

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

@ -2,36 +2,40 @@ import { test, expect } from '@playwright/test'
test('图片大图', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('image#preview-src-list')
await page.locator('.tiny-image__inner').click()
const Image = page.locator('.tiny-image-viewer__img')
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)
const toolbar = viewerImage.locator('.tiny-image-viewer__actions-inner')
const canvas = viewerImage.locator('.tiny-image-viewer__img')
// 点击缩小
await page.locator('.icon').first().click()
await expect(Image).toHaveCSS('transform', 'matrix(0.8, 0, 0, 0.8, 0, 0)')
await toolbar.locator('svg').first().click()
await expect(canvas).toHaveCSS('transform', 'matrix(0.8, 0, 0, 0.8, 0, 0)')
// 点击放大
await page.locator('svg:nth-child(2)').first().click()
await expect(Image).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
// 点击放大图标
await page.locator('svg:nth-child(4)').click()
await toolbar.locator('svg').nth(1).click()
await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
// 点击向左旋转
await page.locator('svg:nth-child(6)').click()
await expect(Image).toHaveCSS('transform', 'matrix(0, -1, 1, 0, 0, 0)')
// 点击向右旋转
await page.locator('svg:nth-child(7)').click()
await expect(Image).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
await toolbar.locator('svg').nth(3).click()
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)
// // 点击切换上一张图片
// 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)
// 点击关闭
await viewerImage.locator('.tiny-image-viewer__close').click()
await expect(viewerImage).toHaveCount(0)
})

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

@ -1,11 +1,9 @@
import { test, expect } from '@playwright/test'
test('占位内容', async ({ page }) => {
test('插槽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.route(/jpg$/, async (route) => {
await page.waitForTimeout(300)
})
await page.goto('image#custom-placeholder')
const wait = page.locator('.image-slot')
await expect(wait).toHaveText('加载中...')
await page.goto('image#slot')
const errorSlot = page.locator('.tiny-image__error')
await expect(errorSlot).toBeVisible()
})

5
examples/sites/demos/pc/app/layout/alignment.spec.ts
View File

@ -2,9 +2,10 @@ import { test, expect } from '@playwright/test'
test('layout对齐方式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('layout#alignment')
const preview = page.locator('#preview')
const layoutDiv = preview.locator('.tiny-layout > div')
const layoutDiv = page.locator('.pc-demo-container .tiny-layout > div')
await expect(layoutDiv.first()).toHaveClass(/row-justify-start/)
await expect(layoutDiv.nth(1)).toHaveClass(/row-justify-center/)
await expect(layoutDiv.nth(2)).toHaveClass(/row-justify-end/)

28
examples/sites/demos/pc/app/layout/basic-usage.spec.ts
View File

@ -2,20 +2,20 @@ import { test, expect } from '@playwright/test'
test('栅格布局', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('layout#base')
const preview = page.locator('#preview')
const layout = preview.locator('.tiny-layout > div')
const div1 = layout.first()
await expect(div1.locator('.tiny-col')).toHaveClass(/col-md-12/)
await page.goto('layout#basic-usage')
const preview = page.locator('.pc-demo-container')
const layout = preview.locator('.tiny-layout .tiny-row')
const row1 = layout.first()
await expect(row1.locator('.tiny-col')).toHaveClass(/col-md-24/)
const div2 = layout.nth(1)
const colFirst = div2.locator('.tiny-col')
await expect(colFirst.first()).toHaveClass(/col-md-3/)
await expect(colFirst.nth(1)).toHaveClass(/col-md-6/)
await expect(colFirst.nth(2)).toHaveClass(/col-md-3/)
const row2 = layout.nth(1)
const colFirst = row2.locator('.tiny-col')
await expect(colFirst.first()).toHaveClass(/col-md-6/)
await expect(colFirst.nth(1)).toHaveClass(/col-md-12/)
await expect(colFirst.nth(2)).toHaveClass(/col-md-6/)
const div3 = layout.nth(2)
const colThird = div3.locator('.tiny-col')
await expect(colThird.first()).toHaveClass(/col-md-2/)
await expect(colThird.nth(1)).toHaveClass(/col-md-3/)
const row3 = layout.nth(2)
const colThird = row3.locator('.tiny-col')
await expect(colThird.first()).toHaveClass(/col-md-4/)
await expect(colThird.nth(1)).toHaveClass(/col-md-6/)
})

14
examples/sites/demos/pc/app/layout/gutter.spec.ts
View File

@ -3,14 +3,14 @@ import { test, expect } from '@playwright/test'
test('gutter栅格间隔', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('layout#gutter')
const preview = page.locator('#preview')
const preview = page.locator('.pc-demo-container')
const layout = preview.locator('.tiny-layout > div')
const div1 = layout.first()
await expect(div1).toHaveCSS('margin-left', '0px')
const row1 = layout.first()
await expect(row1).toHaveCSS('margin-left', '0px')
const div2 = layout.nth(1)
await expect(div2.locator('div').first()).toHaveCSS('padding-left', '10px')
const row2 = layout.nth(1)
await expect(row2.locator('div').first()).toHaveCSS('padding-left', '5px')
const div3 = layout.nth(2)
await expect(div3.locator('div').first()).toHaveCSS('padding-left', '25px')
const row3 = layout.nth(2)
await expect(row3.locator('div').first()).toHaveCSS('padding-left', '10px')
})

8
examples/sites/demos/pc/app/layout/order.spec.ts
View File

@ -3,10 +3,12 @@ import { test, expect } from '@playwright/test'
test('排序', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('layout#order')
const preview = page.locator('#preview')
const layout = preview.locator('.tiny-layout')
const firstDiv = layout.locator('.tiny-row div').first()
const preview = page.locator('.pc-demo-container')
const layout = preview.locator('.tiny-layout')
const row = layout.locator('.tiny-row').nth(1)
const firstDiv = row.locator('.tiny-col').first()
await expect(firstDiv).toHaveCSS('order', '3')
await page.getByRole('button', { name: '升序' }).click()
await expect(firstDiv).toHaveCSS('order', '-3')

6
examples/sites/demos/pc/app/layout/responsive-layout.spec.ts
View File

@ -4,14 +4,14 @@ test('响应式布局', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('layout#responsive-layout')
const preview = page.locator('#preview')
const preview = page.locator('.pc-demo-container')
const layout = preview.locator('.tiny-layout')
const firstDiv = layout.locator('.tiny-row div').first()
// 默认视口 1280
let layoutBox = await layout.boundingBox()
let firstBox = await firstDiv.boundingBox()
expect(firstBox.width).toBeCloseTo(layoutBox.width / 3, 0)
expect(firstBox?.width).toBeCloseTo(layoutBox.width / 3, 0)
await page.waitForTimeout(300)
// 测试 sm 850
@ -19,5 +19,5 @@ test('响应式布局', async ({ page }) => {
await page.waitForTimeout(300)
layoutBox = await layout.boundingBox()
firstBox = await firstDiv.boundingBox()
expect(firstBox.width).toBeCloseTo(layoutBox.width / 4, 0)
expect(firstBox?.width).toBeCloseTo(layoutBox.width / 4, 0)
})

10
examples/sites/demos/pc/app/layout/tag.spec.ts Normal file
View File

@ -0,0 +1,10 @@
import { test, expect } from '@playwright/test'
test('判断行标签', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('layout#tag')
const preview = page.locator('.pc-demo-container')
const col = preview.locator('.tiny-layout .tiny-row')
expect((await col.innerHTML()).slice(1, 4)).toBe('div')
})

2
examples/sites/demos/pc/app/popover/basic-usage.spec.js
View File

@ -7,6 +7,6 @@ test('基本用法', async ({ page }) => {
let button = page.getByRole('button', { name: '悬浮我提示' })
let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
await button.hover()
await button.click()
await expect(pop).toBeVisible()
})

8
examples/sites/demos/pc/app/popover/content.spec.js
View File

@ -2,11 +2,11 @@ import { test, expect } from '@playwright/test'
test('添加内容', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('popover#popover-content')
await page.goto('popover#content')
let button = page.getByRole('button', { name: '提示' })
let pop = page.getByRole('tooltip', { name: '这是一段内容' })
let button = page.getByRole('button', { name: '通过插槽' })
let redSpan = page.getByText('tooltip', { name: '红色的' })
await button.click()
await expect(pop).toBeVisible()
await expect(redSpan).toBeVisible()
})

10
examples/sites/demos/pc/app/popover/custom-popper.spec.js
View File

@ -2,15 +2,11 @@ import { test, expect } from '@playwright/test'
test('延迟隐藏', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('popover#close-delay')
await page.goto('popover#custom-popper')
const button = page.getByRole('button', { name: '提示' })
const pop = page.getByRole('tooltip', { name: /这是一段内容/ })
const button = page.getByRole('button', { name: '覆盖字体样式' })
const pop = page.locator('.custom-popover-demo-cls')
await button.hover()
await expect(pop).toBeVisible()
await page.mouse.move(0, 0)
await page.waitForTimeout(3100)
await expect(pop).toBeHidden()
})

7
examples/sites/demos/pc/app/popover/delay.spec.js
View File

@ -2,14 +2,11 @@ import { test, expect } from '@playwright/test'
test('延迟显示', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('popover#open-delay')
await page.goto('popover#delay')
let button = page.getByRole('button', { name: '鼠标悬浮我两秒' })
let button = page.getByRole('button', { name: '两秒后打开' })
let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
await button.hover()
await expect(pop).toBeHidden()
await page.waitForTimeout(2100)
await expect(pop).toBeVisible()
})

8
examples/sites/demos/pc/app/popover/disabled.spec.js
View File

@ -2,17 +2,17 @@ import { test, expect } from '@playwright/test'
test('动态禁用', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('popover#dynamic-disable')
await page.goto('popover#disabled')
let disBtn = page.getByRole('button', { name: '禁用弹出框' })
let popBtn = page.getByRole('button', { name: '悬浮弹出' })
let switcher = page.locator('.pc-demo-container .tiny-switch')
let popBtn = page.getByRole('button', { name: '鼠标悬浮在这里' })
let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
await popBtn.hover()
await expect(pop).toBeVisible()
await page.waitForTimeout(300)
await disBtn.click()
await switcher.click()
await popBtn.hover()
await expect(pop).toBeHidden()
})

12
examples/sites/demos/pc/app/popover/dynamic-reference.spec.js
View File

@ -2,11 +2,15 @@ import { test, expect } from '@playwright/test'
test('基本用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('popover#basic-usage')
await page.goto('popover#dynamic-reference')
let button = page.getByRole('button', { name: '悬浮我提示' })
let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
let button1 = page.getByRole('button', { name: '按钮 1' })
let button2 = page.getByRole('button', { name: '按钮 4' })
let pop = page.getByRole('tooltip', { name: /您刚刚点击了/ })
await button.hover()
await button1.click()
await expect(pop).toBeVisible()
await button2.click()
await expect(pop).toBeVisible()
})

7
examples/sites/demos/pc/app/popover/events.spec.js
View File

@ -2,18 +2,13 @@ import { test, expect } from '@playwright/test'
test('事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('popover#popover-events')
await page.goto('popover#events')
let button = page.getByRole('button', { name: '悬浮我触发' })
let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
let notify1 = page.locator('.tiny-notify__content').filter({ hasText: /显示时触发/ })
let notify2 = page.locator('.tiny-notify__content').filter({ hasText: /隐藏时触发/ })
await button.hover()
await expect(pop).toBeVisible()
await expect(notify1).toBeVisible()
await page.mouse.move(0, 0)
await page.waitForTimeout(300)
await expect(notify2.nth(1)).toBeVisible()
})

13
examples/sites/demos/pc/app/popover/offset.spec.js
View File

@ -2,16 +2,9 @@ import { test, expect } from '@playwright/test'
test('箭头偏移', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('popover#arrow-offset')
await page.goto('popover#offset')
// 默认偏移和50偏移
await expect(page.locator('.popper__arrow').nth(0)).toHaveCSS('left', '8px')
await expect(page.locator('.popper__arrow').nth(1)).toHaveCSS('left', '50px')
// 偏移100时， 箭头超过 popper 的宽度了 。 所以它的left = popper.width - 8px -12px
// 8px是保留宽度 12px是小箭头的宽度
let arrow = page.locator('.popper__arrow').nth(2)
let { width } = await page.locator('.tiny-popover').nth(2).boundingBox()
await expect(arrow).toHaveCSS('left', `${width - 8 - 12}px`)
await expect(page.locator('.popper__arrow').nth(0)).toBeVisible()
await expect(page.locator('.popper__arrow').nth(1)).toBeVisible()
})

2
examples/sites/demos/pc/app/popover/popper-options.spec.js
View File

@ -4,7 +4,7 @@ test('弹出框选项', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('popover#popper-options')
let button = page.getByRole('button', { name: '提示' })
let button = page.getByRole('button', { name: '悬浮我触发' })
let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
await button.hover()

17
examples/sites/demos/pc/app/popover/transition.spec.js
View File

@ -2,16 +2,17 @@ import { test, expect } from '@playwright/test'
test('自定义渐变动画', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('popover#custom-transition')
await page.goto('popover#transition')
let button = page.getByRole('button', { name: '悬浮看效果' })
let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
let button1 = page.getByRole('button', { name: '默认0.2s隐藏' })
let pop1 = page.getByRole('tooltip', { name: /这是一段内容/ })
await button.nth(0).hover()
await expect(pop).toHaveClass(/fade-in-linear-enter-active/)
await button1.hover()
await expect(pop1).toBeVisible()
await page.mouse.move(0, 0)
await page.waitForTimeout(300)
await page.waitForTimeout(50)
await expect(pop1).toBeVisible()
await button.nth(1).hover()
await expect(pop).not.toHaveClass(/fade-in-linear-enter-active/)
await page.waitForTimeout(200)
await expect(pop1).toBeHidden
})

12
examples/sites/demos/pc/app/popover/trigger.spec.js
View File

@ -2,16 +2,16 @@ import { test, expect } from '@playwright/test'
test('触发方式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('popover#trigger-mode')
await page.goto('popover#trigger')
let button1 = page.getByRole('button', { name: 'hover 激活' })
let button2 = page.getByRole('button', { name: 'click 激活' })
let button3 = page.getByRole('button', { name: 'focus 激活' })
let button4 = page.getByRole('button', { name: '手动激活' })
let button4 = page.getByRole('button', { name: 'manual 激活' })
let pop1 = page.getByRole('tooltip', { name: /hover 激活/ })
let pop2 = page.getByRole('tooltip', { name: /click 激活/ })
let pop3 = page.getByRole('tooltip', { name: /focus 激活/ })
let pop4 = page.getByRole('tooltip', { name: /手动激活/ })
let pop4 = page.getByRole('tooltip', { name: /manual 激活/ })
await button1.hover()
await expect(pop1).toBeVisible()
@ -21,9 +21,9 @@ test('触发方式', async ({ page }) => {
await expect(pop2).toBeVisible()
await page.waitForTimeout(100)
await page.keyboard.press('Tab')
await expect(pop3).toBeVisible()
await page.waitForTimeout(100)
// await page.keyboard.press('Tab')
// await expect(pop3).toBeVisible()
// await page.waitForTimeout(100)
await button4.click()
await expect(pop4).toBeVisible()

29
examples/sites/demos/pc/app/popover/webdoc/popover.js
View File

@ -133,20 +133,21 @@ export default {
},
'codeFiles': ['popper-options.vue']
},
{
'demoId': 'dynamic-reference',
'name': { 'zh-CN': '动态触发源', 'en-US': 'Pop-up Options' },
'desc': {
'zh-CN': `
当组件不传入<code>reference</code> 插槽时,弹出框由于没有触发源而无法触发显示。<br>
通过 <code>reference</code> 属性，可以动态传入一个Dom元素作为动态触发源，之后调用<code>doShow() \ doClose() </code>，来控制弹出框显示与隐藏。
<div class="tip custom-block">通过这个高级技巧，可以实现在列表中共享一个<code> Popover</code> 组件实例,提升了列表时的性能。</div>
`,
'en-US':
'Run the <code>popper-options</code> command to configure the advanced pop-up options. For details, see the IPopperOption description at the bottom'
},
'codeFiles': ['dynamic-reference.vue']
},
// 暂时屏蔽
// {
// 'demoId': 'dynamic-reference',
// 'name': { 'zh-CN': '动态触发源', 'en-US': 'Pop-up Options' },
// 'desc': {
// 'zh-CN': `
// 当组件不传入<code>reference</code> 插槽时,弹出框由于没有触发源而无法触发显示。<br>
// 通过 <code>reference</code> 属性，可以动态传入一个Dom元素作为动态触发源，之后调用<code>doShow() \ doClose() </code>，来控制弹出框显示与隐藏。
// <div class="tip custom-block">通过这个高级技巧，可以实现在列表中共享一个<code> Popover</code> 组件实例,提升了列表时的性能。</div>
// `,
// 'en-US':
// 'Run the <code>popper-options</code> command to configure the advanced pop-up options. For details, see the IPopperOption description at the bottom'
// },
// 'codeFiles': ['dynamic-reference.vue']
// },
{
'demoId': 'events',
'name': { 'zh-CN': '事件', 'en-US': 'Event' },

12
examples/sites/demos/pc/app/tooltip/basic-usage.spec.js
View File

@ -7,17 +7,13 @@ test('测试Tooltip的是否能出现', async ({ page }) => {
let button = page.getByRole('button', { name: '上左' })
let tooltip = page.getByRole('tooltip', { name: 'Top Left 提示文字' })
await expect(button).toBeVisible()
await button.hover()
await page.waitForTimeout(100)
await expect(tooltip).toBeVisible()
})
test('测试Tooltip的位置是否正确', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tooltip#basic-usage')
let button = page.getByRole('button', { name: '上右' })
let tooltip = page.getByRole('tooltip', { name: 'Top Right 提示文字' })
// 测试Tooltip的位置是否正确
button = page.getByRole('button', { name: '上右' })
tooltip = page.getByRole('tooltip', { name: 'Top Right 提示文字' })
await button.hover()
let buttonBox = await button.boundingBox()

9
examples/sites/demos/pc/app/tooltip/content.spec.js
View File

@ -2,18 +2,11 @@ import { test, expect } from '@playwright/test'
test('测试插槽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tooltip#tooltip-content')
await page.goto('tooltip#content')
const button1 = page.getByRole('button', { name: '插槽的使用' })
const button2 = page.getByRole('button', { name: '校验错误' })
const tooltip1 = page.getByText('通过 slot = "content" 自定义提示内容')
const tooltip2 = page.getByText('该网段不可用！可用网段：163')
await button1.hover()
await expect(tooltip1).toBeVisible
await page.waitForTimeout(300)
await button2.hover()
await expect(tooltip2).toBeVisible()
})

20
examples/sites/demos/pc/app/tooltip/control.spec.js
View File

@ -2,16 +2,20 @@ import { test, expect } from '@playwright/test'
test('测试手动控制tooltip', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tooltip#manual-control-tip')
await page.goto('tooltip#control')
const button = page.getByRole('button', { name: '手动控制tooltip的显示和隐藏' })
const tooltip = page.getByRole('tooltip', { name: '手动控制模式', includeHidden: true })
const preview = page.locator('.pc-demo-container')
const visibleSwitch = preview.locator('.tiny-switch').nth(0)
const manualSwitch = preview.locator('.tiny-switch').nth(1)
const disableSwitch = preview.locator('.tiny-switch').nth(2)
await button.click()
await expect(tooltip).toBeVisible()
const pop1 = page.getByText('智能提示的提示内容')
await page.waitForTimeout(300)
await preview.getByText('内容不超长').hover()
await expect(pop1).toBeVisible()
await page.waitForTimeout(50)
await button.click()
await expect(tooltip).toBeHidden()
await visibleSwitch.click()
await preview.getByText('内容不超长').hover()
await expect(pop1).toBeHidden()
})

18
examples/sites/demos/pc/app/tooltip/custom-popper-composition-api.vue
View File

@ -31,7 +31,7 @@
popper-class="popper1"
:key="key"
>
<div class="ellipsis">鼠标悬浮在这里</div>
<tiny-button type="primary">鼠标悬浮在这里</tiny-button>
</tiny-tooltip>
</div>
</div>
@ -39,7 +39,7 @@
<script setup lang="jsx">
import { ref } from 'vue'
import { Tooltip as TinyTooltip } from '@opentiny/vue'
import { Tooltip as TinyTooltip, Switch as TinySwitch, Button as TinySwitch } from '@opentiny/vue'
const visibleArrow = ref(true)
const enterable = ref(true)
@ -50,20 +50,6 @@ const key = ref(0)
.row {
margin-bottom: 20px;
}
.ellipsis {
display: inline-block;
width: 100px;
height: 24px;
line-height: 24px;
margin: 0 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.ellipsis:hover {
background-color: #f1f1f1;
}
</style>
<style>

19
examples/sites/demos/pc/app/tooltip/custom-popper.vue
View File

@ -31,18 +31,19 @@
popper-class="popper1"
:key="key"
>
<div class="ellipsis">鼠标悬浮在这里</div>
<tiny-button type="primary">鼠标悬浮在这里</tiny-button>
</tiny-tooltip>
</div>
</div>
</template>
<script lang="jsx">
import { Tooltip, Switch } from '@opentiny/vue'
import { Tooltip, Switch, Button } from '@opentiny/vue'
export default {
components: {
TinyTooltip: Tooltip,
TinyButton: Button,
TinySwitch: Switch
},
data() {
@ -59,20 +60,6 @@ export default {
.row {
margin-bottom: 20px;
}
.ellipsis {
display: inline-block;
width: 100px;
height: 24px;
line-height: 24px;
margin: 0 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.ellipsis:hover {
background-color: #f1f1f1;
}
</style>
<style>

21
examples/sites/demos/pc/app/tooltip/delay.spec.js
View File

@ -2,28 +2,13 @@ import { test, expect } from '@playwright/test'
test('测试延迟显示隐藏', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tooltip#open-delay')
await page.goto('tooltip#delay')
const button1 = page.getByRole('button', { name: '延迟 2s 出现' })
const button2 = page.getByRole('button', { name: '2s 后自动隐藏' })
const tip1 = page.getByRole('tooltip', { name: '延迟 2000ms 出现' })
const tip2 = page.getByRole('tooltip', { name: '2000ms后自动隐藏' })
// 延迟出现
await page.waitForTimeout(100)
await button1.hover()
await page.waitForTimeout(300)
await page.waitForTimeout(100)
await expect(tip1).toBeHidden()
await page.waitForTimeout(2000)
await expect(tip1).toBeVisible()
await page.waitForTimeout(300)
// 延迟隐藏
await button2.hover()
await page.waitForTimeout(300)
await expect(tip2).toBeVisible()
await page.waitForTimeout(2000)
await expect(tip2).toBeHidden()
})

11
examples/sites/demos/pc/app/tooltip/offset.spec.js
View File

@ -2,15 +2,8 @@ import { test, expect } from '@playwright/test'
test('测试偏移量', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tooltip#tooltip-offset')
await page.goto('tooltip#offset')
const button = page.getByRole('button', { name: '出现位置的偏移量' })
const tip = page.getByRole('tooltip', { name: '出现位置的偏移量' })
await button.hover()
await page.waitForTimeout(300)
const box1 = await button.boundingBox()
const box2 = await tip.boundingBox()
expect(box2.x - box1.x).toBeGreaterThanOrEqual(20)
await expect(tip).toBeVisible()
})

9
examples/sites/demos/pc/app/tooltip/popper-options.spec.js
View File

@ -4,14 +4,9 @@ test('测试自定义popper', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tooltip#popper-options')
const button = page.getByRole('button', { name: 'popper-options配置' })
const tooltip = page.getByRole('tooltip', { name: 'popper-options配置', includeHidden: true })
const button = page.getByRole('button', { name: '鼠标悬浮到这里' })
const tooltip = page.getByRole('tooltip', { name: '提示内容' })
await button.hover()
await expect(tooltip).toBeVisible()
await page.waitForTimeout(300)
await page.mouse.move(0, 0)
await expect(tooltip).toBeHidden()
})

2
examples/sites/demos/pc/app/tooltip/theme.spec.js
View File

@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
test('测试tooltip主题', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tooltip#tooltip-theme')
await page.goto('tooltip#theme')
await page.getByRole('button', { name: 'Dark' }).hover()
await expect(page.getByRole('tooltip', { name: 'dark 提示文字' })).toHaveClass(/is-dark/)

10
examples/sites/demos/pc/app/tooltip/transition.spec.js
View File

@ -2,20 +2,18 @@ import { test, expect } from '@playwright/test'
test('测试自定义动画显示正常', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tooltip#custom-transition')
await page.goto('tooltip#transition')
const button = page.getByRole('button', { name: '定义渐变动画' })
const tooltip = page.getByRole('tooltip', { name: '定义渐变动画', includeHidden: true })
const button = page.getByRole('button', { name: '鼠标悬浮到这里' })
const tooltip = page.getByRole('tooltip', { name: '渐隐动画', includeHidden: true })
// 悬浮
await button.hover()
await expect(tooltip).toBeVisible()
await expect(tooltip).toHaveClass(/custom-transition-enter-active/)
await page.waitForTimeout(300)
// 离开
await page.mouse.move(0, 0)
await page.waitForTimeout(300)
await expect(tooltip).not.toBeVisible()
await expect(tooltip).toBeHidden()
await expect(tooltip).toHaveCSS('display', 'none')
})

11
examples/sites/demos/pc/app/tooltip/webdoc/tooltip.js
View File

@ -143,20 +143,20 @@ export default {
'props': [
{
'name': 'effect',
'type': 'string',
'type': '"dark" | "light"',
'defaultValue': '"dark"',
'desc': {
'zh-CN': '默认提供的主题;该属性的可选值为 dark/light',
'zh-CN': '提示的主题',
'en-US': 'Default theme; The value of this attribute can be dark or light'
},
'demoId': 'theme'
},
{
'name': 'type',
'type': 'string',
'type': '"normal" | "warning" | "error" | "info" | "success"',
'defaultValue': '',
'desc': {
'zh-CN': '默认提供的类型;该属性的可选值为 normal/warning/error/info/success 。type的优先级大于effect',
'zh-CN': '提示的类型，type的优先级大于effect',
'en-US':
'The default type is provided. The options for this attribute are normal, warning, error, information, and success. The priority of type is higher than that of effect.'
},
@ -174,7 +174,8 @@ export default {
},
{
'name': 'placement',
'type': 'string',
'type':
'"top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end"',
'defaultValue': ' "bottom"',
'desc': {
'zh-CN':

4
packages/renderless/src/common/deps/vue-popper.ts
View File

@ -149,8 +149,8 @@ export default (options: IPopperInputParams) => {
const popperJS = state.popperJS
if (popperJS) {
popperJS._reference = state.referenceElm
popperJS._popper = state.popperElm
// popperJS._reference = state.referenceElm
// popperJS._popper = state.popperElm
popperJS.update()
} else {
createPopper()