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

feat(float-button) : [float-button] add e2e (#1508) 

* feat(float-button): [float-button] add e2e

* fix(float-button):[float-button] fix e2e bug

* fix(float-button): [float-button] nothing to do

* fix(float-button): [float-button] reduction file
This commit is contained in:
张烟铃 2024-03-26 14:30:27 +08:00 committed by GitHub
parent f844712a66
commit 243058109c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 122 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
examples/sites/demos/apis/float-button.js
View File

@ -1,21 +1,21 @@
export default {
mode: ['pc'],
apis: [
{
'name': 'button',
'name': 'float-button',
'type': 'component',
'props': [
{
'name': 'type',
'type': 'IButtonType',
'typeAnchorName': 'IButtonType',
'type': 'IFloatButtonType',
'defaultValue': '--',
'desc': {
'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
'en-US': 'Display different states of buttons, set to text to display as text buttons'
},
mode: ['pc'],
pcDemo: 'basic-usage'
'pcDemo': 'basic-usage'
},
{
'name': 'description',
@ -26,7 +26,7 @@ export default {
'en-US': 'Set the text displayed by the button'
},
mode: ['pc'],
pcDemo: 'basic-usage'
'pcDemo': 'basic-usage'
},
{
'name': 'icon',
@ -37,7 +37,7 @@ export default {
'en-US': 'The icon displayed by the button is received as an Icon component'
},
mode: ['pc'],
pcDemo: 'icon'
'pcDemo': 'icon'
},
{
'name': 'reset-time',
@ -48,7 +48,7 @@ export default {
'en-US': 'Set the button disable time, in milliseconds, to prevent repeated submission'
},
mode: ['pc'],
pcDemo: 'reset-time'
'pcDemo': 'reset-time'
},
{
'name': 'trigger',
@ -59,7 +59,7 @@ export default {
'en-US': 'Set the menu trigger mode.'
},
mode: ['pc'],
pcDemo: 'trigger'
'pcDemo': 'trigger'
},
{
'name': 'open',
@ -70,7 +70,7 @@ export default {
'en-US': 'Whether the settings menu opens.'
},
mode: ['pc'],
pcDemo: 'trigger'
'pcDemo': 'trigger'
},
{
'name': 'shape',
@ -81,7 +81,7 @@ export default {
'en-US': 'Set Button shape.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
'pcDemo': 'basic-usage'
},
{
'name': 'backTop',
@ -92,7 +92,7 @@ export default {
'en-US': 'Set whether it is a back-to-top button.'
},
mode: ['pc'],
pcDemo: 'backTop'
'pcDemo': 'backTop'
},
{
@ -104,7 +104,7 @@ export default {
'en-US': 'When backTop is set to true, this property sets the scrolling element.'
},
mode: ['pc'],
pcDemo: 'backTop'
'pcDemo': 'backTop'
},
{
'name': 'top',
@ -115,7 +115,7 @@ export default {
'en-US': 'The distance of the button from the top.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
'pcDemo': 'basic-usage'
},
{
'name': 'bottom',
@ -126,7 +126,7 @@ export default {
'en-US': 'The distance of the button from the bottom.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
'pcDemo': 'basic-usage'
},
{
'name': 'left',
@ -137,7 +137,7 @@ export default {
'en-US': 'The distance of the button from the left.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
'pcDemo': 'basic-usage'
},
{
'name': 'right',
@ -148,7 +148,7 @@ export default {
'en-US': 'The distance of the button from the right.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
'pcDemo': 'basic-usage'
},
{
'name': 'href',
@ -159,7 +159,7 @@ export default {
'en-US': 'button to jump to the page.'
},
mode: ['pc'],
pcDemo: 'jump'
'pcDemo': 'jump'
},
{
'name': 'target',
@ -170,7 +170,7 @@ export default {
'en-US': 'The target attribute equivalent to the A tag, which takes effect when the href exists.'
},
mode: ['pc'],
pcDemo: 'jump'
'pcDemo': 'jump'
}
],
'events': [
@ -183,7 +183,7 @@ export default {
'en-US': 'Sets the callback function triggered when a button is clicked'
},
mode: ['pc'],
pcDemo: 'click'
'pcDemo': 'click'
}
],
'slots': [
@ -196,16 +196,16 @@ export default {
'en-US': 'Default slot, customize what the button is when expanded'
},
mode: ['pc'],
pcDemo: 'open'
'pcDemo': 'open'
}
]
}
],
types: [
{
name: 'IButtonType',
name: 'IFloatButtonType',
type: 'interface',
code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
code: `type IFloatButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
}
]
}

14
examples/sites/demos/pc/app/float-button/backTop.spec.ts Normal file
View File

@ -0,0 +1,14 @@
import { test, expect } from '@playwright/test'
test('测试按钮回到顶部', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('float-button#backTop')
const parent = await page.locator('.parent')
await parent.evaluate((el) => {
el.scrollTop = el.scrollHeight
})
await expect(page.locator('.tiny-float-button')).toBeVisible()
await page.locator('.tiny-float-button').click()
await page.waitForTimeout(1000)
await expect(page.locator('.tiny-float-button')).not.toBeVisible()
})

34
examples/sites/demos/pc/app/float-button/basic-usage.spec.ts Normal file
View File

@ -0,0 +1,34 @@
import { test, expect } from '@playwright/test'
test('测试按钮类型', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('float-button#basic-usage')
await expect(page.locator('.tiny-float-button').first()).toHaveClass(/tiny-float-button--default/)
await expect(page.locator('.tiny-float-button').nth(1)).toHaveClass(
/tiny-float-button tiny-float-button--primary is-only-icon is-square/
)
await expect(page.locator('.tiny-float-button').nth(2)).toHaveClass(
/tiny-float-button tiny-float-button--info is-only-icon is-circle/
)
await expect(page.locator('.tiny-float-button').nth(3)).toHaveClass(
/tiny-float-button tiny-float-button--warning is-only-icon is-circle/
)
await expect(page.locator('.tiny-float-button').nth(4)).toHaveClass(
/tiny-float-button tiny-float-button--danger is-only-icon is-circle/
)
})
test('测试是否是圆形按钮', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('float-button#basic-usage')
await expect(page.locator('.tiny-float-button').first()).toHaveClass(/is-circle/)
await expect(page.locator('.tiny-float-button').nth(2)).toHaveClass(/is-circle/)
await expect(page.locator('.tiny-float-button').nth(3)).toHaveClass(/is-circle/)
await expect(page.locator('.tiny-float-button').nth(4)).toHaveClass(/is-circle/)
})
test('测试是否是正方形按钮', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('float-button#basic-usage')
await expect(page.locator('.tiny-float-button').nth(1)).toHaveClass(/is-square/)
})

10
examples/sites/demos/pc/app/float-button/icon.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('float-button#icon')
const demo = page.locator('#icon')
const button = demo.locator('.tiny-float-button')
await expect(button.first().locator('svg')).not.toBeNull()
})

8
examples/sites/demos/pc/app/float-button/jump.spec.ts Normal file
View File

@ -0,0 +1,8 @@
import { test, expect } from '@playwright/test'
test('测试按钮跳转', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('float-button#jump')
const button = page.locator('.tiny-float-button').first()
await button.click()
})

18
examples/sites/demos/pc/app/float-button/reset-time.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('float-button#reset-time')
const demo = page.locator('#reset-time')
const defalutDisabled = demo.getByRole('button', { name: '点' })
// 默认禁用1S
await defalutDisabled.click()
await expect(page.locator('.tiny-float-button')).toHaveClass(
/tiny-float-button tiny-float-button--success is-disabled is-circle/
)
await page.waitForTimeout(1000)
await expect(page.locator('.tiny-float-button')).toHaveClass(/tiny-float-button tiny-float-button--success is-circle/)
})

16
examples/sites/demos/pc/app/float-button/trigger.spec.ts Normal file
View File

@ -0,0 +1,16 @@
import { test, expect } from '@playwright/test'
test('测试按钮菜单模式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('float-button#trigger')
const firstButton = page.locator('.tiny-float-button').first()
const secondButton = page.locator('.tiny-float-button').nth(1)
const thirdButton = page.locator('.tiny-float-button').nth(2)
await firstButton.click()
await page.waitForTimeout(1000)
expect(firstButton.locator('.tiny-float-button--open')).not.toBeNull()
await secondButton.hover()
await page.waitForTimeout(1000)
expect(secondButton.locator('.tiny-float-button--open')).not.toBeNull()
expect(thirdButton.locator('.tiny-float-button--open')).not.toBeNull()
})