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

docs(e2e): [tree ,transfer] Add tree /transfer e2e tests (#986) 

* docs(e2e): Add tree /transfer e2e tests

* docs(e2e): fix nested-tree.spec.ts

* docs(tree):  add tree e2e test

* docs(tree): add e2e
This commit is contained in:
申君健 2023-12-06 16:26:52 +08:00 committed by GitHub
parent 3cd6f6b7e7
commit 53a0cf020a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 385 additions and 515 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@ test('测试插槽', async ({ page }) => {
await page.goto('tooltip#content')
const button2 = page.getByRole('button', { name: '校验错误' })
const tooltip2 = page.getByText('该网段不可用！可用网段：163')
const tooltip2 = page.getByText('该网段不可用')
await button2.hover()
await expect(tooltip2).toBeVisible()

8
examples/sites/demos/pc/app/tooltip/custom-popper.spec.js
View File

@ -2,12 +2,12 @@ import { test, expect } from '@playwright/test'
test('测试是否显示箭头', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tooltip#visible-arrow')
await page.goto('tooltip#custom-popper')
const button = page.getByRole('button', { name: '不显示 Tooltip 箭头' })
const tip = page.getByRole('tooltip', { name: '不显示 Tooltip 箭头', includeHidden: true })
const button = page.getByRole('button', { name: '鼠标悬浮在这里' })
const tip = page.getByText('我是提示内容')
const arrow = tip.locator('div.popper__arrow')
await button.hover()
await expect(arrow).toHaveCount(0)
await expect(arrow).toHaveCount(1)
})

27
examples/sites/demos/pc/app/transfer/basic-usage.spec.ts
View File

@ -1,20 +1,9 @@
import { test, expect } from '@playwright/test'
test('默认状态下交换按钮是否禁用', async ({ page }) => {
test('基本用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#basic-usage')
const preview = page.locator('#preview')
const buttons = preview.getByRole('button')
// 向左交换按钮应该为禁用状态
await expect(buttons.first()).toBeDisabled()
// 向右交换按钮应该为禁用状态
await expect(buttons.nth(1)).toBeDisabled()
})
test('多选', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#basic-usage')
const preview = page.locator('#preview')
const preview = page.locator('.pc-demo-container')
// 穿梭框按钮
const buttons = preview.getByRole('button')
// 穿梭框面板
@ -24,6 +13,11 @@ test('多选', async ({ page }) => {
// 右侧面板
const rightPanel = transferPanels.nth(1)
// 向左交换按钮应该为禁用状态
await expect(buttons.first()).toBeDisabled()
// 向右交换按钮应该为禁用状态
await expect(buttons.nth(1)).toBeDisabled()
// 从左侧面板选择多个备用项，交换至右侧面板
let labels = leftPanel.locator('label').filter({ hasText: '备选项 2' }).locator('span')
// 选中"备选项2"
@ -89,14 +83,7 @@ test('多选', async ({ page }) => {
await expect(buttons.first()).toBeDisabled()
// 向右侧交换的按钮应该为不可用状态
await expect(buttons.nth(1)).toBeDisabled()
})
test('全选', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#basic-usage')
const preview = page.locator('#preview')
const transferPanels = preview.locator('.tiny-transfer-panel')
const leftPanel = transferPanels.first()
// 全选
await leftPanel.locator('.tiny-checkbox__input').first().click()
// 显示的选中数量应该为 11

30
examples/sites/demos/pc/app/transfer/custom-btns.spec.ts
View File

@ -1,34 +1,26 @@
import { test, expect } from '@playwright/test'
test('判断按钮是否可用', async ({ page }) => {
test('自定义按钮测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#show-all-btn')
const preview = page.locator('#preview')
const buttons = preview.getByRole('button')
await expect(buttons.first()).toBeEnabled()
await expect(buttons.nth(3)).toBeEnabled()
})
await page.goto('transfer#custom-btns')
test('全部移动到右侧', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#show-all-btn')
const preview = page.locator('#preview')
const preview = page.locator('.pc-demo-container .tiny-transfer')
const buttons = preview.getByRole('button')
const transferPanels = preview.locator('.tiny-transfer-panel')
const leftPanel = transferPanels.first()
const rightPanel = transferPanels.nth(1)
// 判断按钮是否可用
await expect(buttons.first()).toBeEnabled()
await expect(buttons.nth(3)).toBeEnabled()
//全部移动到右侧
await buttons.first().click()
await expect(rightPanel.locator('label').filter({ hasText: '列表 2 0 / 13' })).toHaveCount(1)
await expect(buttons.first()).toBeDisabled()
await expect(buttons.nth(3)).toBeEnabled()
})
test('全部移动到左侧', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#show-all-btn')
const preview = page.locator('#preview')
const buttons = preview.getByRole('button')
const transferPanels = preview.locator('.tiny-transfer-panel')
const leftPanel = transferPanels.first()
// 全部移动到左侧
await buttons.nth(3).click()
await expect(leftPanel.locator('label').filter({ hasText: '列表 1 0 / 15' })).toHaveCount(1)
await expect(buttons.first()).toBeEnabled()

10
examples/sites/demos/pc/app/transfer/custom-filter.spec.ts
View File

@ -2,14 +2,16 @@ import { test, expect } from '@playwright/test'
test('自定义过滤方法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#custom-filter-method')
const preview = page.locator('#preview')
await page.goto('transfer#custom-filter')
const preview = page.locator('.pc-demo-container')
const transferPanels = preview.locator('div.tiny-transfer-panel')
const leftPanel = transferPanels.first()
const input = preview.getByPlaceholder('请输入城市拼音').first()
const input = preview.getByPlaceholder('请输入城市拼音').first().locator('input')
const items = leftPanel.locator('div.tiny-transfer-panel__list > label')
await input.click()
await input.fill('xi')
const items = leftPanel.locator('div.tiny-transfer-panel__list > label')
await expect(items).toHaveCount(1)
// 判断删除搜索关键字后是否正常显示列表
await input.click()

3
examples/sites/demos/pc/app/transfer/custom-footer.spec.ts
View File

@ -3,6 +3,5 @@ import { test, expect } from '@playwright/test'
test('自定义列表底部', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#custom-footer')
await page.getByRole('button', { name: '操作' }).first().click()
await page.getByRole('button', { name: '操作' }).nth(1).click()
await expect(page.getByRole('button', { name: '操作' })).toHaveCount(2)
})

12
examples/sites/demos/pc/app/transfer/custom-render.spec.ts
View File

@ -2,9 +2,11 @@ import { test, expect } from '@playwright/test'
test('判断是否可以选中自定义数据项', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#custom-render-content')
await page.locator('label').filter({ hasText: '2 - 备选项 2' }).locator('span').nth(1).click()
await expect(page.locator('label').filter({ hasText: '2 - 备选项 2' }).locator('span').first()).toHaveClass(
/is-checked/
)
await page.goto('transfer#custom-render')
const preview = page.locator('.pc-demo-container')
const jsxNode = preview.getByText('备选项 2 -by jsx')
const slotNode = preview.getByText('备选项 2 - by slot')
await expect(jsxNode).toHaveCount(1)
await expect(slotNode).toHaveCount(1)
})

8
examples/sites/demos/pc/app/transfer/custom-titles.spec.ts
View File

@ -2,11 +2,13 @@ import { test, expect } from '@playwright/test'
test('自定义列表标题', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#custom-transfer-titles')
const preview = page.locator('#preview')
await page.goto('transfer#custom-titles')
const preview = page.locator('.pc-demo-container')
const transferPanels = preview.locator('.tiny-transfer-panel')
const leftPanel = transferPanels.first()
await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/所有数据列表/)
const rightPanel = transferPanels.nth(1)
await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/所有数据列表/)
await expect(rightPanel.locator('.tiny-checkbox__label').first()).toHaveText(/已选数据列表/)
})

14
examples/sites/demos/pc/app/transfer/default-checked.spec.ts
View File

@ -1,22 +1,18 @@
import { test, expect } from '@playwright/test'
test('判断左侧面板是否有默认勾选项', async ({ page }) => {
test('判断面板是否有默认勾选项', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#default-checked')
const preview = page.locator('#preview')
const preview = page.locator('.pc-demo-container')
const transferPanels = preview.locator('.tiny-transfer-panel')
const leftPanel = transferPanels.first()
const rightPanel = transferPanels.nth(1)
await expect(leftPanel.locator('label').filter({ hasText: '备选项 2' }).first()).toHaveClass(/is-checked/)
await expect(leftPanel.locator('label').filter({ hasText: '备选项 6' }).first()).toHaveClass(/is-checked/)
await expect(preview.getByRole('button').first()).toBeEnabled()
})
test('判断右侧面板是否有默认勾选项', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#default-checked')
const preview = page.locator('#preview')
const transferPanels = preview.locator('.tiny-transfer-panel')
const rightPanel = transferPanels.nth(1)
await expect(rightPanel.locator('label').filter({ hasText: '备选项 1' }).first()).toHaveClass(/is-checked/)
await expect(preview.getByRole('button').nth(1)).toBeEnabled()
})

37
examples/sites/demos/pc/app/transfer/drop-config.spec.ts
View File

@ -1,33 +1,38 @@
import { test, expect } from '@playwright/test'
test('尝试拖拽左侧某一项至右侧面板', async ({ page }) => {
test('尝试拖拽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#drop-config')
const preview = page.locator('#preview')
const preview = page.locator('.pc-demo-container')
const transferPanels = preview.locator('.tiny-transfer-panel')
const leftPanel = transferPanels.first()
const rightPanel = transferPanels.nth(1)
const dragDiv = leftPanel.locator('label:nth-child(2)').first()
await dragDiv.hover()
const dragDiv1 = leftPanel.locator('label:nth-child(2)').first()
// 尝试拖拽左侧某一项至右侧面板
await page.waitForTimeout(100)
await dragDiv1.hover()
await page.waitForTimeout(100)
await page.mouse.down()
await page.waitForTimeout(100)
await rightPanel.hover()
await page.waitForTimeout(100)
await page.mouse.up()
await page.waitForTimeout(100)
await expect(rightPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 2 0 / 5' })).toHaveCount(1)
await expect(leftPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 1 0 / 11' })).toHaveCount(1)
})
test('尝试拖拽右侧某一项至左侧面板', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#drop-config')
const preview = page.locator('#preview')
const transferPanels = preview.locator('.tiny-transfer-panel')
const leftPanel = transferPanels.first()
const rightPanel = transferPanels.nth(1)
const dragDiv = rightPanel.locator('label').filter({ hasText: '备选项 3' })
await dragDiv.hover()
//尝试拖拽右侧某一项至左侧面板
const dragDiv2 = rightPanel.locator('label').filter({ hasText: '备选项 3' })
await page.waitForTimeout(100)
await dragDiv2.hover()
await page.waitForTimeout(100)
await page.mouse.down()
await page.waitForTimeout(100)
await leftPanel.hover()
await page.waitForTimeout(100)
await page.mouse.up()
await expect(leftPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 1 0 / 13' })).toHaveCount(1)
await expect(rightPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 2 0 / 3' })).toHaveCount(1)
await page.waitForTimeout(100)
await expect(leftPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 1 0 / 12' })).toHaveCount(1)
await expect(rightPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 2 0 / 4' })).toHaveCount(1)
})

4
examples/sites/demos/pc/app/transfer/manual-clear-query.spec.ts
View File

@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
test('判断是否可以清除搜索内容', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#manual-clear-query')
const preview = page.locator('#preview')
const input = preview.getByPlaceholder('请输入搜索内容').first()
const preview = page.locator('.pc-demo-container')
const input = preview.locator('.tiny-input-display-only input').first()
await input.click()
await input.fill('1')
await preview.getByRole('button', { name: '重置查询' }).click()

47
examples/sites/demos/pc/app/transfer/nested-table.spec.ts
View File

@ -1,48 +1,25 @@
import { test, expect } from '@playwright/test'
test('判断是否可以将左侧数据交换到右侧面板', async ({ page }) => {
test('判断数据交换', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#nested-table')
const preview = page.locator('#preview')
const preview = page.locator('.pc-demo-container')
const transferPanels = preview.locator('.tiny-transfer-panel')
const leftPanel = transferPanels.first()
const rightPanel = transferPanels.nth(1)
await preview.locator('.tiny-button').first().click()
const toRightBtn = preview.locator('.tiny-button').first()
// 判断是否可以将左侧数据交换到右侧面板
await toRightBtn.click()
await expect(rightPanel.getByText('列表 2 1 / 8')).toHaveCount(1)
})
await page.waitForTimeout(50)
test('判断是否可以将右侧数据交换到左侧面板', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#nested-table')
const preview = page.locator('#preview')
const transferPanels = preview.locator('.tiny-transfer-panel')
const leftPanel = transferPanels.first()
//判断是否可以将右侧数据交换到左侧面板
await preview.locator('.defaultButton > button:nth-child(2)').click()
await expect(leftPanel.getByText('列表 1 1 / 14')).toHaveCount(1)
})
await expect(leftPanel.getByText('列表 1 0 / 13')).toHaveCount(1)
await page.waitForTimeout(50)
test('判断是否可以切换分页页码', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#nested-table')
const preview = page.locator('#preview')
const transferPanels = preview.locator('.tiny-transfer-panel')
const leftPanel = transferPanels.first()
// 判断是否可以切换分页页码
await preview.getByRole('listitem').filter({ hasText: '2' }).click()
await expect(leftPanel.getByRole('table').locator('tbody > tr')).toHaveCount(3)
})
test('判断搜索功能是否正常', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#nested-table')
const preview = page.locator('#preview')
const transferPanels = preview.locator('.tiny-transfer-panel')
const leftPanel = transferPanels.first()
const input = preview.getByPlaceholder('请输入城市拼音')
await input.first().click()
await input.first().fill('1')
const count = leftPanel.getByRole('table').locator('tbody > tr')
await expect(count).toHaveCount(7)
// 清空搜索内容
await input.first().click()
await input.first().fill('')
await expect(count).toHaveCount(10)
})

33
examples/sites/demos/pc/app/transfer/nested-tree.spec.ts
View File

@ -1,39 +1,12 @@
import { test, expect } from '@playwright/test'
test('判断是否可以将左侧数据交换至右侧面板', async ({ page }) => {
test('嵌套树', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#nested-tree')
const preview = page.locator('#preview')
const preview = page.locator('.pc-demo-container')
await preview.getByRole('treeitem', { name: '一级 1' }).locator('svg').first().click()
await preview.getByRole('treeitem', { name: '一级 1' }).getByText('二级 1-1').click()
await preview.getByRole('treeitem', { name: '三级 1-1-1' }).locator('span').nth(2).click()
await preview.getByRole('button').first().click()
const transferPanels = preview.locator('.tiny-transfer-panel')
const rightPanel = transferPanels.nth(1)
await expect(
rightPanel.locator(
'div:nth-child(3) > div:nth-child(4) > .tiny-tree-node > .tiny-tree-node__content > span.tiny-tree-node__label'
)
).toHaveText('三级 1-1-1')
})
test('置顶和置底功能', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#nested-tree')
const preview = page.locator('#preview')
const buttons = await preview.getByRole('paragraph').filter({ hasText: '列表 2 1 / 3' }).locator('div')
await buttons.nth(1).click()
const transferPanels = preview.locator('.tiny-transfer-panel')
const rightPanel = transferPanels.nth(1)
await expect(
rightPanel.locator(
'div:nth-child(3) > div:nth-child(1) > .tiny-tree-node > .tiny-tree-node__content > span.tiny-tree-node__label'
)
).toHaveText('二级 2-1')
await buttons.nth(2).click()
await expect(
rightPanel.locator(
'div:nth-child(3) > div:nth-child(3) > .tiny-tree-node > .tiny-tree-node__content > span.tiny-tree-node__label'
)
).toHaveText('二级 2-1')
await expect(preview.getByText('三级 1-1-1')).toHaveCount(1)
})

3
examples/sites/demos/pc/app/transfer/target-order.spec.ts
View File

@ -3,12 +3,13 @@ import { test, expect } from '@playwright/test'
test('判断交换左侧备选项后是否位于右侧面板首位', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#target-order')
const preview = page.locator('#preview')
const preview = page.locator('.pc-demo-container')
const buttons = preview.getByRole('button')
const transferPanels = preview.locator('.tiny-transfer-panel')
const leftPanel = transferPanels.first()
await leftPanel.locator('label').filter({ hasText: '备选项 2' }).click()
await buttons.first().click()
const rightPanel = transferPanels.nth(1)
await expect(rightPanel.locator('label').filter({ hasText: '备选项 2' })).toHaveCount(1)
await leftPanel.locator('label').filter({ hasText: '备选项 3' }).click()

3
examples/sites/demos/pc/app/transfer/transfer-events.spec.ts
View File

@ -3,13 +3,14 @@ import { test, expect } from '@playwright/test'
test('判断是否触发了不同事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('transfer#transfer-events')
const preview = page.locator('#preview')
const preview = page.locator('.pc-demo-container')
const transferPanels = preview.locator('.tiny-transfer-panel')
const leftPanel = transferPanels.first()
await leftPanel.locator('label').filter({ hasText: '备选项 2' }).click()
await expect(page.getByText(/^left-check-change 事件/)).toBeVisible()
await preview.getByRole('button').first().click()
await expect(page.getByText(/^change 事件/)).toBeVisible()
const rightPanel = transferPanels.nth(1)
await rightPanel.locator('label').first().click()
await expect(page.getByText(/^right-check-change 事件/)).toBeVisible()

42
examples/sites/demos/pc/app/tree/basic-usage.spec.ts
View File

@ -4,20 +4,30 @@ test('tree组件基本使用', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const preview = page.locator('.pc-demo-container')
const tree = preview.locator('.tiny-tree')
const showLineBtn = preview.locator('.tiny-radio').nth(0)
const miniBtn = preview.locator('.tiny-radio').nth(2)
const offsetBtn = preview.locator('.tiny-radio').nth(6)
const indentSpan = preview.locator('.tiny-tree-node__content-indent').nth(1)
// 测试渲染出数据
await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
// 测试连接线 有连线时，show-line
await showLineBtn.click()
await page.waitForTimeout(20)
expect(await tree.locator('.show-line').count()).toBeGreaterThan(1)
// 测试字体
await expect(tree.getByText('数据 1-1-1')).toHaveCSS('font-size', '14px')
await miniBtn.click()
await page.waitForTimeout(20)
await expect(tree.getByText('数据 1-1-1')).toHaveCSS('font-size', '12px')
// 测试偏移 18px + 8 padding
await expect(indentSpan).toHaveCSS('width', '26px')
await offsetBtn.click()
await page.waitForTimeout(20)
await expect(indentSpan).toHaveCSS('width', '46px')
})

54
examples/sites/demos/pc/app/tree/check-op.spec.ts
View File

@ -1,23 +1,41 @@
import { test, expect } from '@playwright/test'
test('tree组件基本使用', async ({ page }) => {
test('多选的勾选 ', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
await page.goto('tree#check-op')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const preview = page.locator('.pc-demo-container')
const tree = preview.locator('.tiny-tree').nth(0)
const treeChecked = tree.locator('label.is-checked')
const btn1 = preview.getByText('查询勾选状态')
const btn2 = preview.getByText('清除全部勾选')
const btn3 = preview.getByText('根据节点数据勾选')
const btn4 = preview.getByText('根据node-key勾选')
const btn5 = preview.getByText('根据node-key,多值勾选')
const btn6 = preview.getByText('根据node,多值勾选')
await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
await expect(treeChecked).toHaveCount(0)
await btn3.click()
await expect(treeChecked).toHaveCount(4)
await page.waitForTimeout(20)
await btn4.click()
await expect(treeChecked).toHaveCount(1)
await page.waitForTimeout(20)
await btn5.click()
await expect(treeChecked).toHaveCount(6)
await page.waitForTimeout(20)
await btn6.click()
await expect(treeChecked).toHaveCount(3)
await page.waitForTimeout(20)
await btn2.click()
await expect(treeChecked).toHaveCount(0)
await page.waitForTimeout(20)
await btn1.click()
})

41
examples/sites/demos/pc/app/tree/checkbox.spec.ts
View File

@ -1,23 +1,28 @@
import { test, expect } from '@playwright/test'
test('tree组件基本使用', async ({ page }) => {
test('多选功能', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
await page.goto('tree#checkbox')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const preview = page.locator('.pc-demo-container')
const tree1 = preview.locator('.tiny-tree').nth(0)
const tree2 = preview.locator('.tiny-tree').nth(1)
const tree1Checked = tree1.locator('label.is-checked')
const tree2Checked = tree2.locator('label.is-checked')
await expect(tree1.getByText('数据 1-1-1')).toHaveCount(1)
await page.waitForTimeout(50)
// 测试左树
await expect(tree1Checked).toHaveCount(3)
await tree1.getByText('数据 3').nth(0).click()
await page.waitForTimeout(50)
await expect(tree1Checked).toHaveCount(5)
// 测试右树
await expect(tree2Checked).toHaveCount(1)
await tree2.locator('.tiny-checkbox__inner').nth(5).click()
await page.waitForTimeout(50)
await expect(tree2Checked).toHaveCount(2)
})

17
examples/sites/demos/pc/app/tree/contextmenu.spec.ts
View File

@ -1,14 +1,15 @@
import { test, expect } from '@playwright/test'
test('可自定义右键菜单内容', async ({ page }) => {
test('右键菜单', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#contextmenu')
await page.getByText('三级 1-1-1').first().click({
button: 'right'
})
const menu = page.locator('#preview .tiny-tree-node__menu')
await expect(menu).toBeVisible()
await page.locator('.context-menu li').first().click()
await expect(menu).not.toBeVisible()
const preview = page.locator('.pc-demo-container')
const tree = preview.locator('.tiny-tree').nth(0)
const node = tree.getByText('数据 1-1-1')
await expect(node).toHaveCount(1)
await node.click({ button: 'right' })
await page.waitForTimeout(20)
await expect(tree.getByText('更新')).toHaveCount(1)
})

28
examples/sites/demos/pc/app/tree/drag.spec.ts
View File

@ -1,23 +1,15 @@
import { test, expect } from '@playwright/test'
test('tree组件基本使用', async ({ page }) => {
test('右键菜单', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
await page.goto('tree#drag')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const preview = page.locator('.pc-demo-container')
const tree = preview.locator('.tiny-tree').nth(0)
await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
await tree.getByText('数据 2-1').dragTo(tree.getByText('数据 1-1-1'))
await page.waitForTimeout(100)
await tree.getByText('数据 1-1-1').dragTo(tree.getByText('数据 2-2'))
await page.waitForTimeout(100)
})

119
examples/sites/demos/pc/app/tree/edit.spec.ts
View File

@ -1,106 +1,27 @@
import { test, expect } from '@playwright/test'
test.describe('节点编辑', () => {
test('编辑节点内容', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#edit')
test('编辑', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#edit')
const tree = page.locator('#preview .tiny-tree')
const node = tree.locator('.tiny-tree-node').first()
const nodeLeft = node.locator('.tiny-tree-node__content-left').first()
const nodeRight = node.locator('.tiny-tree-node__content-right').first()
const preview = page.locator('.pc-demo-container')
const tree = preview.locator('.tiny-tree').nth(0)
const btn1 = preview.getByText('进入编辑')
const btn2 = preview.getByText('取消编辑')
const btn3 = preview.getByText('新建子节点')
const editIcons = tree.locator('[title="编辑"]')
const input = tree.locator('.tiny-input input')
await page.getByRole('button', { name: '进入编辑' }).click()
await expect(nodeRight.getByTitle('编辑')).toBeVisible()
await nodeRight.getByTitle('编辑').click()
await expect(nodeLeft.locator('.tiny-input')).toBeVisible()
await expect(nodeLeft.locator('.tiny-input input')).toHaveValue('一级 1')
await nodeLeft.locator('.tiny-input input').fill('aaa')
await nodeLeft.locator('.tiny-input input').blur()
await expect(node.locator('.tiny-tree-node__label').first()).toHaveText('aaa')
})
await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
await btn1.click()
await expect(editIcons).toHaveCount(8)
await page.waitForTimeout(20)
test('进入编辑状态后删除节点', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#edit')
await btn2.click()
await expect(editIcons).toHaveCount(0)
await page.waitForTimeout(20)
const tree = page.locator('#preview .tiny-tree')
const node = tree.locator('.tiny-tree-node').first()
const delBtn = node.locator('.tiny-tree-node__content-right > span:nth-child(2) > .tiny-svg').first()
const delPopover = page.locator('.tiny-tree__del-popover').nth(1)
await page.getByRole('button', { name: '进入编辑' }).click()
await delBtn.click()
await expect(delPopover).toBeVisible()
// 连同子孙节点一起删除
await delPopover.getByRole('button', { name: '确定' }).click()
await expect(node).not.toContainText('一级 1')
await expect(tree.locator('.tiny-tree-node')).toHaveCount(2)
// 保留子孙节点
await delBtn.click()
await delPopover.locator('.tiny-checkbox').click()
await delPopover.getByRole('button', { name: '确定' }).click()
await expect(node.locator('.tiny-tree-node__label')).toHaveText('一级 3')
await expect(tree.locator('.tiny-tree-node')).toHaveCount(3)
})
test('进入编辑状态后新增子节点', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#edit')
const tree = page.locator('#preview .tiny-tree')
const nodes = tree.locator('.tiny-tree-node')
const node = nodes.first()
const newNode = nodes.filter({ hasText: 'aaa' }).first()
await page.getByRole('button', { name: '进入编辑' }).click()
await node.getByTitle('新增下级').first().click()
await node.getByRole('textbox').fill('aaa')
await node.getByRole('textbox').blur()
await expect(newNode).toBeVisible()
})
test('取消编辑', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#edit')
const tree = page.locator('#preview .tiny-tree')
const nodes = tree.locator('.tiny-tree-node')
const node = nodes.first()
const delBtn = node.locator('.tiny-tree-node__content-right > span:nth-child(2) > .tiny-svg').first()
const delPopover = page.locator('.tiny-tree__del-popover').nth(1)
await expect(nodes).toHaveCount(6)
// 删除一些节点
await page.getByRole('button', { name: '进入编辑' }).click()
await delBtn.click()
await delPopover.getByRole('button', { name: '确定' }).click()
await expect(nodes).toHaveCount(2)
// 取消编辑后已删除节点重新恢复
await page.getByRole('button', { name: '取消编辑' }).click()
await expect(nodes).toHaveCount(6)
})
test('保存编辑', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#edit')
const tree = page.locator('#preview .tiny-tree')
const node = tree.locator('.tiny-tree-node').first()
const nodeLeft = node.locator('.tiny-tree-node__content-left').first()
const nodeRight = node.locator('.tiny-tree-node__content-right').first()
// 编辑节点内容
await page.getByRole('button', { name: '进入编辑' }).click()
await nodeRight.getByTitle('编辑').click()
await nodeLeft.locator('.tiny-input input').fill('aaa')
await nodeLeft.locator('.tiny-input input').blur()
// 保存编辑, 检查是否正确保存
await page.getByRole('button', { name: '保存编辑' }).click()
await expect(node.locator('.tiny-tree-node__label').first()).toHaveText('aaa')
})
await btn3.click()
await expect(input).toHaveCount(1)
input.fill('123')
})

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

@ -1,23 +1,27 @@
import { test, expect } from '@playwright/test'
test('tree组件基本使用', async ({ page }) => {
test('节点的展开', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
await page.goto('tree#expand-control')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const preview = page.locator('.pc-demo-container')
const tree1 = preview.locator('.tiny-tree').nth(0)
const tree2 = preview.locator('.tiny-tree').nth(1)
const allBtn = preview.getByText('切换全部展开收起')
const openBtn = preview.getByText('展开高亮')
const closeBtn = preview.getByText('收起高亮')
// 测试全部收起
await expect(tree1.locator('.is-expanded')).toHaveCount(8) // 叶子节点也有这个类
await allBtn.click()
await expect(tree1.locator('.is-expanded')).toHaveCount(0)
// 测试收起/展开
await page.waitForTimeout(50)
await expect(tree2.locator('.is-expanded')).toHaveCount(1)
await closeBtn.click()
await expect(tree2.locator('.is-expanded')).toHaveCount(0)
await page.waitForTimeout(50)
await openBtn.click()
await expect(tree2.locator('.is-expanded')).toHaveCount(1)
})

34
examples/sites/demos/pc/app/tree/filter-view.spec.ts
View File

@ -1,23 +1,21 @@
import { test, expect } from '@playwright/test'
test('tree组件基本使用', async ({ page }) => {
test('过滤视图', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
await page.goto('tree#filter-view')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const preview = page.locator('.pc-demo-container')
const tree = preview.locator('.tiny-tree').nth(0)
const btnPlain = preview.getByText('平铺视图 plain')
const checkboxs = tree.locator('.tiny-tree__plain-node .tiny-checkbox')
const input = preview.locator('.tiny-input input')
await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
await btnPlain.click()
await expect(checkboxs).toHaveCount(8)
await page.waitForTimeout(20)
await input.fill('1-1')
await expect(checkboxs).toHaveCount(3)
})

38
examples/sites/demos/pc/app/tree/icons.spec.ts
View File

@ -1,23 +1,25 @@
import { test, expect } from '@playwright/test'
test('tree组件基本使用', async ({ page }) => {
test('自定义图标', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
await page.goto('tree#icons')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const preview = page.locator('.pc-demo-container')
const tree1 = preview.locator('.tiny-tree').nth(0)
const tree2 = preview.locator('.tiny-tree').nth(1)
const icon1 = tree1.locator('svg path').nth(0)
const icon2 = tree2.locator('svg path').nth(0)
// 测试tree1
await expect(tree1.getByText('数据 2')).toHaveCount(1)
await expect(icon1).toHaveAttribute('d', 'm6 2 13 10L6 22V2zm2 4v12l8-6.1L8 6z')
// 测试tree2
await expect(tree2.getByText('数据 2')).toHaveCount(1)
await expect(icon2).toHaveAttribute(
'd',
'M13 11h4c.6 0 1 .4 1 1s-.4 1-1 1h-4v4c0 .6-.4 1-1 1s-1-.4-1-1v-4H7c-.6 0-1-.4-1-1s.4-1 1-1h4V7c0-.6.4-1 1-1s1 .4 1 1v4zM3 1h18c.9 0 2 1.1 2 2v18c0 .9-1 2-2 2H3c-.9 0-2-1.1-2-2V3c0-.9 1.1-2 2-2zm0 2v18h18V3H3z'
)
await expect(icon2).toHaveCSS('fill', 'rgb(255, 0, 0)')
})

28
examples/sites/demos/pc/app/tree/lazy.spec.ts
View File

@ -1,23 +1,15 @@
import { test, expect } from '@playwright/test'
test('tree组件基本使用', async ({ page }) => {
test('懒加载', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
await page.goto('tree#lazy')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const preview = page.locator('.pc-demo-container')
const tree = preview.locator('.tiny-tree').nth(0)
const node2 = tree.getByText('#数据 2')
await expect(node2).toHaveCount(1)
await node2.click()
await page.waitForTimeout(20)
await expect(node2).toHaveCount(6)
})

45
examples/sites/demos/pc/app/tree/node-hl.spec.ts
View File

@ -1,23 +1,32 @@
import { test, expect } from '@playwright/test'
test('tree组件基本使用', async ({ page }) => {
test('节点选择与高亮', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
await page.goto('tree#node-hl')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const preview = page.locator('.pc-demo-container')
const tree = preview.locator('.tiny-tree')
const node = tree.getByText('数据 1-1-1')
const currNode = tree.locator('.is-current')
const button = preview.getByText('手动高亮节点')
await expect(node).toHaveCount(1)
// 测试点击后，打印事件
const values = [] as string[]
page.on('console', async (msg) => {
for (const arg of msg.args()) {
values.push(await arg.jsonValue())
}
})
await node.click()
await page.waitForTimeout(50)
expect(values.length).toBe(2)
expect(values[0].startsWith('当前高亮节点')).toBeTruthy()
// 测试自动点击
await button.click()
await page.waitForTimeout(50)
await expect(currNode.getByText('数据 2-1')).toHaveCount(1)
})

18
examples/sites/demos/pc/app/tree/node-op-composition-api.vue
View File

@ -7,7 +7,13 @@
<tiny-button @click="updateKeyChildren">更新子节点</tiny-button>
<tiny-button @click="remove">删除当前节点</tiny-button>
</div>
<tiny-tree ref="treeRef" :data="data" node-key="id" default-expand-all></tiny-tree>
<tiny-tree
ref="treeRef"
:data="data"
node-key="id"
default-expand-all
:current-node-key="currentNodeKey"
></tiny-tree>
</div>
</template>
@ -37,29 +43,29 @@ const data = ref([
children: [{ id: '3-1', label: '数据 3-1' }]
}
])
const currentNodeKey = ref('1-1')
function insertBefore() {
const currentKey = treeRef.value.getCurrentKey()
treeRef.value.insertBefore({ id: id, label: 'insertBefore ' + id }, currentKey)
treeRef.value.insertBefore({ id, label: 'insertBefore ' + id }, currentKey)
id++
}
function insertAfter() {
const currentKey = treeRef.value.getCurrentKey()
treeRef.value.insertAfter({ id: id, label: 'insertAfter ' + id }, currentKey)
treeRef.value.insertAfter({ id, label: 'insertAfter ' + id }, currentKey)
id++
}
function append() {
const currentKey = treeRef.value.getCurrentKey()
treeRef.value.append({ id: id, label: 'append ' + id }, currentKey)
treeRef.value.append({ id, label: 'append ' + id }, currentKey)
id++
}
function updateKeyChildren() {
const currentKey = treeRef.value.getCurrentKey()
treeRef.value.updateKeyChildren(currentKey, [{ id: id, label: 'update ' + id }])
treeRef.value.updateKeyChildren(currentKey, [{ id, label: 'update ' + id }])
id++
}
function remove() {

49
examples/sites/demos/pc/app/tree/node-op.spec.ts
View File

@ -1,23 +1,36 @@
import { test, expect } from '@playwright/test'
test('tree组件基本使用', async ({ page }) => {
test('节点操作', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
await page.goto('tree#node-op')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const preview = page.locator('.pc-demo-container')
const tree = preview.locator('.tiny-tree')
const insertBefore = preview.getByText('添加前节点')
const insertAfter = preview.getByText('添加后节点')
const append = preview.getByText('添加子节点')
const updateKeyChildren = preview.getByText('更新子节点')
const remove = preview.getByText('删除当前节点')
await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
await insertBefore.click()
await expect(tree.getByText('insertBefore 1000')).toHaveCount(1)
await page.waitForTimeout(20)
await insertAfter.click()
await expect(tree.getByText('insertAfter 1001')).toHaveCount(1)
await page.waitForTimeout(20)
await append.click()
await expect(tree.getByText('append 1002')).toHaveCount(1)
await page.waitForTimeout(20)
await updateKeyChildren.click()
await expect(tree.getByText('update 1003')).toHaveCount(1)
await page.waitForTimeout(20)
await remove.click()
await expect(tree.getByText('数据 1-1')).toHaveCount(0)
})

23
examples/sites/demos/pc/app/tree/other.spec.ts
View File

@ -1,23 +1,10 @@
import { test, expect } from '@playwright/test'
test('tree组件基本使用', async ({ page }) => {
test('其它', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
await page.goto('tree#other')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const tree = page.locator('.pc-demo-container')
await expect(tree.getByText('数据 1')).toHaveCount(1)
await expect(tree.getByText('同时勾选下级')).toHaveCount(1)
})

25
examples/sites/demos/pc/app/tree/props.spec.ts
View File

@ -1,23 +1,12 @@
import { test, expect } from '@playwright/test'
test('tree组件基本使用', async ({ page }) => {
test('属性', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
await page.goto('tree#props')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const tree = page.locator('.pc-demo-container')
await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
// 测试disabled
await expect(tree.getByText('数据 2-2')).toHaveCSS('color', 'rgb(173, 176, 184)')
})

28
examples/sites/demos/pc/app/tree/radio.spec.ts
View File

@ -1,23 +1,15 @@
import { test, expect } from '@playwright/test'
test('tree组件基本使用', async ({ page }) => {
test('单选', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
await page.goto('tree#radio')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const preview = page.locator('.pc-demo-container')
const tree = preview.locator('.tiny-tree').nth(0)
const treeChecked = tree.locator('label.is-checked')
const btn = preview.getByText('勾选指定节点')
await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
await expect(treeChecked).toHaveCount(1)
await btn.click()
})

30
examples/sites/demos/pc/app/tree/slot.spec.ts
View File

@ -1,23 +1,17 @@
import { test, expect } from '@playwright/test'
test('tree组件基本使用', async ({ page }) => {
test('插槽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree#basic-usage')
await page.goto('tree#slot')
const tree = page.locator('#preview .tiny-tree')
await tree.getByText('一级 1').click()
await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
await page.getByText('二级 1-1').click()
await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
await page
.getByRole('treeitem', { name: '一级 1' })
.first()
.locator('div')
.filter({ hasText: '一级 1' })
.first()
.click()
await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
await page.locator('.tiny-modal__box').first().click()
const tree = page.locator('.pc-demo-container')
const button = page.getByRole('button', { name: '加载数据' })
// 测试无数据
await expect(tree.getByText('组件无数据')).toHaveCount(1)
// 测试有数据
await button.click()
await expect(tree.getByText('数据 1-1-1')).toHaveCount(2)
await expect(tree.getByText('新增')).toHaveCount(8)
})