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

test(action-menu): [action-menu] Optimize action-menu component e2e test cases (#934)

This commit is contained in:
MomoPoppy 2023-11-28 15:52:56 +08:00 committed by GitHub
parent 4004ecd3b3
commit a0148bad21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 70 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
examples/sites/demos/pc/app/action-menu/basic-usage.spec.ts
View File

@ -1,23 +1,32 @@
import { test, expect } from '@playwright/test'
test('测试基本用法', async ({ page }) => {
test('基本用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('action-menu#basic-usage')
const preview = page.locator('#preview')
const actionMenu = preview.locator('.tiny-action-menu')
const menuItem = actionMenu.locator('.tiny-action-menu__item')
const wrap = page.locator('#basic-usage')
const actionMenu = wrap.locator('.tiny-action-menu')
const visibleItem = actionMenu.locator('.tiny-action-menu__item')
const dropDownMenu = page.locator('body > .tiny-dropdown-menu.tiny-popper')
const childMenu = page.locator('.tiny-dropdown-menu.tiny-dropdown-item--child')
const moreItem = menuItem.last().getByRole('button', { name: '更多' })
const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
const childMenu = dropDownMenuItem.locator('.tiny-dropdown-item--child')
const moreItem = visibleItem.last()
await expect(menuItem).toHaveCount(3)
await expect(menuItem.last()).toHaveText(/更多/)
await expect(moreItem.locator('svg path')).toHaveAttribute('d', 'M2 6h20L12 19z')
await expect(visibleItem).toHaveCount(3)
// 更多按钮
await expect(moreItem).toHaveText(/更多/)
// 图标显示
await expect(moreItem.locator('svg > path').nth(0)).toHaveAttribute('d', 'M2 6h20L12 19z')
// 分割线
await expect(actionMenu.locator('.tiny-action-menu__item-line')).toHaveCount(2)
// 图标旋转
await page.waitForTimeout(300)
await moreItem.hover()
await expect(moreItem.locator('svg')).toHaveCSS('transform', 'matrix(-1, 0, 0, -1, 0, 0)')
await expect(dropDownMenu).toBeVisible()
// 箭头是否变成向上
await page.waitForTimeout(300)
await expect(moreItem.locator('.tiny-dropdown--visible')).toHaveCSS('transform', 'matrix(1, 0, 0, -1, 0, 0)')
// 子节点展开
await dropDownMenu.locator('.tiny-dropdown-item').filter({ hasText: '网络设置' }).hover()
await expect(childMenu).toBeVisible()
})

6
examples/sites/demos/pc/app/action-menu/disabled.spec.ts
View File

@ -1,11 +1,11 @@
import { test, expect } from '@playwright/test'
test('禁用状态', async ({ page }) => {
test('禁用', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('action-menu#disabled')
const preview = page.locator('#preview')
const actionMenu = preview.locator('.tiny-action-menu')
const wrap = page.locator('#disabled')
const actionMenu = wrap.locator('.tiny-action-menu')
const disabledItem = actionMenu.locator('.tiny-dropdown-item.tiny-dropdown-menu__item').filter({ hasText: '开机' })
await expect(disabledItem).toHaveClass(/is-disabled/)

54
examples/sites/demos/pc/app/action-menu/events.spec.ts
View File

@ -2,52 +2,28 @@ import { test, expect } from '@playwright/test'
test('菜单项点击事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/action-menu/events')
await page.goto('action-menu#events')
const preview = page.locator('#preview')
const actionMenu = preview.locator('.tiny-action-menu')
const menuItem = actionMenu.locator('.tiny-action-menu__item')
const wrap = page.locator('#events')
const actionMenu = wrap.locator('.tiny-action-menu')
const visibleItem = actionMenu.locator('.tiny-action-menu__item')
const notify = page.locator('.tiny-notify')
const dropDownMenu = page.locator('body > .tiny-dropdown-menu.tiny-popper')
const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
await menuItem.filter({ hasText: '开机' }).click()
await visibleItem.nth(1).click()
await expect(notify.filter({ hasText: '{"label":"开机"}' })).toBeVisible()
await menuItem.filter({ hasText: '更多' }).hover()
await page.waitForTimeout(200)
await dropDownMenu.locator('.tiny-dropdown-item').filter({ hasText: '关机' }).click()
await expect(notify.filter({ hasText: '{"label":"关机"}' })).toBeVisible()
})
test('更多按钮点击事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/action-menu/events')
const preview = page.locator('#preview')
const actionMenu = preview.locator('.tiny-action-menu')
const menuItem = actionMenu.locator('.tiny-action-menu__item')
const notify = page.locator('.tiny-notify')
await menuItem.filter({ hasText: '开机' }).click()
await expect(notify).not.toBeVisible()
await menuItem.filter({ hasText: '更多' }).click()
await expect(notify.filter({ hasText: '触发 moreClick 事件' })).toBeVisible()
})
test('下拉面板显示事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/action-menu/events')
const preview = page.locator('#preview')
const actionMenu = preview.locator('.tiny-action-menu')
const menuItem = actionMenu.locator('.tiny-action-menu__item')
const dropDownMenu = page.locator('body > .tiny-dropdown-menu.tiny-popper')
const notify = page.locator('.tiny-notify')
await menuItem.last().hover()
await visibleItem.filter({ hasText: '更多' }).click()
await expect(dropDownMenu).toBeVisible()
// more-click 更多按钮点击事件
await expect(notify.filter({ hasText: '触发 moreClick 事件' })).toBeVisible()
// visible-change 下拉面板显示隐藏事件
await expect(notify.filter({ hasText: '触发 visible-change 事件,下拉状态为 true' })).toBeVisible()
await menuItem.first().click()
await expect(dropDownMenu).not.toBeVisible()
// item-click 菜单项点击事件
await dropDownMenuItem.filter({ hasText: '关机' }).click()
await expect(notify.filter({ hasText: '{"label":"关机"}' })).toBeVisible()
// visible-change 下拉面板显示隐藏事件
await expect(notify.filter({ hasText: '触发 visible-change 事件,下拉状态为 false' })).toBeVisible()
await expect(dropDownMenu).not.toBeVisible()
})

14
examples/sites/demos/pc/app/action-menu/max-show-num.spec.ts
View File

@ -4,14 +4,16 @@ test('显示个数', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('action-menu#max-show-num')
const preview = page.locator('#preview')
const actionMenu = preview.locator('.tiny-action-menu')
const menuItem = actionMenu.locator('.tiny-action-menu__item')
const wrap = page.locator('#max-show-num')
const actionMenu = wrap.locator('.tiny-action-menu')
const visibleItem = actionMenu.locator('.tiny-action-menu__item')
const dropDownMenu = page.locator('body > .tiny-dropdown-menu.tiny-popper')
const moreItem = menuItem.last().getByRole('button', { name: '更多' })
const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
const moreItem = visibleItem.last()
await expect(menuItem).toHaveCount(2)
await expect(visibleItem).toHaveCount(2)
await page.waitForTimeout(300)
await moreItem.hover()
await expect(dropDownMenu).toBeVisible()
await expect(page.locator('body > .tiny-dropdown-menu.tiny-popper >li.tiny-dropdown-item')).toHaveCount(4)
await expect(dropDownMenuItem).toHaveCount(6)
})

10
examples/sites/demos/pc/app/action-menu/more-text.spec.ts
View File

@ -1,12 +1,12 @@
import { test, expect } from '@playwright/test'
test('下拉按钮显示文本', async ({ page }) => {
test('下拉按钮文本', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('action-menu#more-text')
const preview = page.locator('#preview')
const actionMenu = preview.locator('.tiny-action-menu')
const menuItem = actionMenu.locator('.tiny-action-menu__item')
const wrap = page.locator('#more-text')
const actionMenu = wrap.locator('.tiny-action-menu')
const visibleItem = actionMenu.locator('.tiny-action-menu__item')
await expect(menuItem.last().locator('.tiny-dropdown__title')).toHaveText('自定义下拉文本')
await expect(visibleItem.last().locator('.tiny-dropdown__title')).toHaveText('自定义下拉文本')
})

12
examples/sites/demos/pc/app/action-menu/popper-class.spec.ts
View File

@ -1,14 +1,16 @@
import { test, expect } from '@playwright/test'
test('自定义下拉面板样式', async ({ page }) => {
test('弹框样式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('action-menu#popper-class')
const preview = page.locator('#preview')
const actionMenu = preview.locator('.tiny-action-menu')
const menuItem = actionMenu.locator('.tiny-action-menu__item')
const wrap = page.locator('#popper-class')
const actionMenu = wrap.locator('.tiny-action-menu')
const visibleItem = actionMenu.locator('.tiny-action-menu__item')
const dropDownMenu = page.locator('body > .tiny-dropdown-menu.tiny-popper')
await menuItem.last().hover()
await page.waitForTimeout(300)
await visibleItem.last().hover()
await expect(dropDownMenu).toHaveClass(/custom-action-menu/)
await expect(dropDownMenu).toHaveCSS('background-color', 'rgb(250, 235, 215)')
})

10
examples/sites/demos/pc/app/action-menu/slot-item.spec.ts
View File

@ -4,11 +4,11 @@ test('菜单项插槽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('action-menu#slot-item')
const preview = page.locator('#preview')
const actionMenu = preview.locator('.tiny-action-menu')
const menuItem = actionMenu.locator('.tiny-action-menu__item')
const wrap = page.locator('#slot-item')
const actionMenu = wrap.locator('.tiny-action-menu')
const visibleItem = actionMenu.locator('.tiny-action-menu__item')
const customIconReg = /^M6\.5 11C5\.7.+2\.2-2\.3c0-\.5\.4-\.9\.9-\.9z$/
await expect(menuItem.first().locator('svg > path').first()).toHaveAttribute('d', customIconReg)
await expect(menuItem.nth(1).locator('svg > path').first()).toHaveAttribute('d', customIconReg)
await expect(visibleItem.first().locator('svg > path').first()).toHaveAttribute('d', customIconReg)
await expect(visibleItem.nth(1).locator('svg > path').first()).toHaveAttribute('d', customIconReg)
})

4
examples/sites/demos/pc/app/action-menu/spacing.spec.ts
View File

@ -4,8 +4,8 @@ test('菜单项间距', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('action-menu#spacing')
const preview = page.locator('#preview')
const actionMenu = preview.locator('.tiny-action-menu')
const wrap = page.locator('#spacing')
const actionMenu = wrap.locator('.tiny-action-menu')
const getDivider = (parent) => parent.locator('.tiny-action-menu__item-line').first()
const tenPXSpacing = actionMenu.first()
const twentyPXSpacing = actionMenu.nth(1)

12
examples/sites/demos/pc/app/action-menu/text-field.spec.ts
View File

@ -1,13 +1,13 @@
import { test, expect } from '@playwright/test'
test('自定义显示文本text-field', async ({ page }) => {
test('映射字段', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('action-menu#text-field')
const preview = page.locator('#preview')
const actionMenu = preview.locator('.tiny-action-menu')
const menuItem = actionMenu.locator('.tiny-action-menu__item')
const wrap = page.locator('#text-field')
const actionMenu = wrap.locator('.tiny-action-menu')
const visibleItem = actionMenu.locator('.tiny-action-menu__item')
await expect(menuItem.first()).toHaveText('远程登陆')
await expect(menuItem.nth(1)).toHaveText('开机')
await expect(visibleItem.first()).toHaveText('远程登陆')
await expect(visibleItem.nth(1)).toHaveText('开机')
})