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

test(tree-menu): [tree-menu] Complete the missing e2e test case for the treeMenu component (#1166)

This commit is contained in:
MomoPoppy 2023-12-18 16:11:11 +08:00 committed by GitHub
parent 4672ad9245
commit d59fc4d47e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 151 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/sites/demos/pc/app/tree-menu/custom-icon.spec.ts
View File

@ -16,4 +16,5 @@ test('自定义前置图标', async ({ page }) => {
const wrap = page.locator('#custom-icon')
const treeMenu = wrap.locator('.tiny-tree-menu')
// TINY-TODO : 补充前置图标后再补充此测试用例
})

26
examples/sites/demos/pc/app/tree-menu/only-check-children.spec.ts
View File

@ -1,5 +1,27 @@
import { test, expect } from '@playwright/test'
test('父级只展开不跳转', async ({ page }) => {
})
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree-menu#only-check-children')
const wrap = page.locator('#only-check-children')
const treeMenu = wrap.locator('.tiny-tree-menu')
const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
await treeNodeContent.filter({ hasText: /^指南$/ }).click()
await expect(treeNode.filter({ hasText: /^指南/ })).toHaveClass(/is-expanded/)
// TINY-TODO: 补充修复 onlyCheckChildren 属性功能后打开
// await expect(treeNode.filter({ hasText: /^指南/ })).not.toHaveClass(/is-current/)
// await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-body')).not.toHaveCSS(
// 'color',
// '#1476ff'
// )
// await treeNodeContent.filter({ hasText: /^后端适配器$/ }).click()
// await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toHaveClass(/is-current/)
// await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-body')).toHaveCSS('color', '#1476ff')
// await expect(treeNodeContent.filter({ hasText: /^后端适配器$/ }).locator('.tree-node-body')).toHaveCSS(
// 'color',
// '#1476ff'
// )
})

24
examples/sites/demos/pc/app/tree-menu/props.spec.ts
View File

@ -1,6 +1,26 @@
import { test, expect } from '@playwright/test'
test('字段映射', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree-menu#props')
const wrap = page.locator('#props')
const treeMenu = wrap.locator('.tiny-tree-menu')
const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toBeHidden()
await treeNodeContent.filter({ hasText: /^指南$/ }).click()
await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toBeVisible()
await treeNode.filter({ hasText: /^后端适配器$/ }).click()
await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toHaveClass(/is-current/)
await treeNodeContent.filter({ hasText: /^指南$/ }).click()
await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toBeHidden()
// 过滤功能
await treeMenu.locator('.tiny-input__inner').fill('添加标签页')
await expect(page.getByTitle('添加标签页')).toBeVisible()
await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeHidden()
await treeMenu.locator('.tiny-input__inner').clear()
await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeVisible()
})

40
examples/sites/demos/pc/app/tree-menu/show-expand.spec.ts
View File

@ -1,10 +1,42 @@
import { test, expect } from '@playwright/test'
test('底部一键展开', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree-menu#show-expand')
const wrap = page.locator('#show-expand')
const treeMenu = wrap.locator('.tiny-tree-menu')
const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
const expandButton = treeMenu.locator('.tiny-tree-menu__expand .tiny-svg')
await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible()
// TINY-TODO: showExpand 功能补全后打开
/* await expect(expandButton).toBeVisible()
// 点击收起
await expandButton.click()
await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible()
await expect(treeMenu).toHaveClass(/tiny-tree-menu__collapse/)
await expect(treeMenu).toHaveCSS('overflow', 'hidden')
await expect(treeMenu).toHaveCSS('width', '48px')
await expect(treeMenu).toHaveCSS('padding-right', '0')
await expect(expandButton).toBeVisible()
// 点击展开
await expandButton.click()
await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible()
await expect(treeMenu).not.toHaveClass(/tiny-tree-menu__collapse/)
await expect(expandButton).toBeVisible() */
})
test('自定义节点图标', async ({ page }) => {
})
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree-menu#show-expand')
const wrap = page.locator('#show-expand')
const treeMenu = wrap.locator('.tiny-tree-menu')
const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible()
await expect(treeNodeContent.filter({ hasText: /^首页$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible()
})

57
examples/sites/demos/pc/app/tree-menu/show-filter.spec.ts
View File

@ -1,6 +1,57 @@
import { test, expect } from '@playwright/test'
test('不可搜索不显示 title', async ({ page }) => {
test('默认可搜索 + 显示 title', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
})
await page.goto('tree-menu#show-filter')
const wrap = page.locator('#show-filter')
const treeMenu = wrap.locator('.tiny-tree-menu').nth(0)
const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
// 显示输入框
await expect(treeMenu).toHaveClass(/tiny-tree-menu__show-filter/)
await expect(treeMenu.locator('.tiny-input__inner')).toBeVisible()
await expect(treeNodeContent.filter({ hasText: /^首页$/ })).toBeVisible()
await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeVisible()
await treeMenu.locator('.tiny-input__inner').fill('首页')
await treeMenu.locator('.tiny-input__inner').press('Enter')
await expect(treeNodeContent.filter({ hasText: /^首页$/ })).toBeVisible()
await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeHidden()
await treeMenu.locator('.tiny-input__inner').fill('')
await treeMenu.locator('.tiny-input__inner').press('Enter')
// 有 title 属性
await expect(treeNodeContent.filter({ hasText: /^首页$/ }).locator('.tree-node-body')).toHaveAttribute(
'title',
'首页'
)
await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-body')).toHaveAttribute(
'title',
'指南'
)
})
test('不可搜索 + 不显示 title', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree-menu#show-filter')
const wrap = page.locator('#show-filter')
const treeMenu = wrap.locator('.tiny-tree-menu').nth(1)
const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
// 显示输入框
await expect(treeMenu).not.toHaveClass(/tiny-tree-menu__show-filter/)
await expect(treeMenu.locator('.tiny-input__inner')).not.toBeVisible()
// 有 title 属性
await expect(treeNodeContent.filter({ hasText: /^首页$/ }).locator('.tree-node-body')).not.toHaveAttribute(
'title',
'首页'
)
await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-body')).not.toHaveAttribute(
'title',
'指南'
)
})

15
examples/sites/demos/pc/app/tree-menu/show-number.spec.ts
View File

@ -1,4 +1,17 @@
import { test, expect } from '@playwright/test'
test('显示数字', async ({ page }) => {
})
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree-menu#show-number')
const wrap = page.locator('#show-number')
const treeMenu = wrap.locator('.tiny-tree-menu')
const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
await expect(treeNodeContent.filter({ hasText: /首页$/ }).locator('.tree-node-number')).toHaveText('0')
await expect(treeNodeContent.filter({ hasText: /指南$/ }).locator('.tree-node-number')).toHaveText('9999')
await expect(treeNodeContent.filter({ hasText: /按需引入$/ }).locator('.tree-node-number')).toHaveText('9.9k')
await expect(treeNodeContent.filter({ hasText: /完整引入$/ }).locator('.tree-node-number')).toHaveText('1')
await expect(treeNodeContent.filter({ hasText: /后端适配器$/ }).locator('.tree-node-number')).toHaveText('0')
})