@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/pc/app/transfer/drop-config.spec.ts

@@ -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)
 })

package/demos/pc/app/transfer/manual-clear-query.spec.ts

@@ -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()

package/demos/pc/app/transfer/nested-table.spec.ts

@@ -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)
-})

package/demos/pc/app/transfer/nested-tree.spec.ts

@@ -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)
 })

package/demos/pc/app/transfer/target-order.spec.ts

@@ -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()

package/demos/pc/app/transfer/transfer-events.spec.ts

@@ -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()

package/demos/pc/app/tree/basic-usage.spec.ts

@@ -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')
 })

package/demos/pc/app/tree/check-op.spec.ts

@@ -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')
-
-  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()
+  await page.goto('tree#check-op')
+
+  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()
 })

package/demos/pc/app/tree/checkbox.spec.ts

@@ -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)
 })

package/demos/pc/app/tree/contextmenu.spec.ts

@@ -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)
 })

package/demos/pc/app/tree/drag.spec.ts

@@ -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)
 })

package/demos/pc/app/tree/edit.spec.ts

@@ -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')
-
-    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 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')
-  })
-
-  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 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')
-  })
+test('编辑', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree#edit')
+
+  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 expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
+  await btn1.click()
+  await expect(editIcons).toHaveCount(8)
+  await page.waitForTimeout(20)
+
+  await btn2.click()
+  await expect(editIcons).toHaveCount(0)
+  await page.waitForTimeout(20)
+
+  await btn3.click()
+  await expect(input).toHaveCount(1)
+  input.fill('123')
 })

package/demos/pc/app/tree/expand-control.spec.ts

@@ -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)
 })