@opentiny/vue-docs 1.0.2 → 1.0.3

package/resources/pc/demo/transfer/show-all-btn.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test';
+
+test('判断按钮是否可用', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/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();
+})
+
+test('全部移动到右侧', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/transfer/show-all-btn');
+    const preview = page.locator('#preview');
+    const buttons = preview.getByRole('button');
+    const transferPanels = preview.locator('.tiny-transfer-panel');
+    const rightPanel = transferPanels.nth(1);
+    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('http://localhost:7130/pc/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();
+    await expect(buttons.nth(3)).toBeDisabled();
+})

package/resources/pc/demo/transfer/target-order.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test('判断交换左侧备选项后是否位于右侧面板首位', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/transfer/target-order');
+    const preview = page.locator('#preview');
+    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();
+    await buttons.first().click();
+    await expect(rightPanel.locator('label').filter({ hasText: '备选项 3' })).toHaveCount(1);
+})

package/resources/pc/demo/transfer/transfer-events.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+
+test('判断是否触发了不同事件', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/transfer/transfer-events');
+    const preview = page.locator('#preview');
+    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/resources/pc/demo/tree/accordion-mode.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+test('手风琴模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/accordion-mode')
+
+  await expect(page.getByRole('treeitem', { name: '二级 1-1' })).toBeVisible()
+  await expect(page.getByRole('treeitem', { name: '二级 2-1' })).not.toBeVisible()
+  await expect(page.getByRole('treeitem', { name: '二级 3-1' })).not.toBeVisible()
+  await page.getByText('一级 2').click()
+  await expect(page.getByRole('treeitem', { name: '三级 2-1-1' })).toBeVisible()
+  await expect(page.getByRole('treeitem', { name: '三级 2-2-1' })).not.toBeVisible()
+});

package/resources/pc/demo/tree/allow-drag.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+
+test('自定义节点能否被拖拽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/allow-drag')
+
+  const draggedDom = page.getByRole('treeitem', { name: '三级 1-1-2' })
+  // 获取拖拽元素位置
+  const { x, y } = await draggedDom.boundingBox()
+
+  // 开始拖拽
+  await page.mouse.move(x, y)
+  await page.mouse.down()
+  await page.mouse.move(x, y + 55)
+  await page.mouse.up()
+
+  // 拖拽完成, 判断不可拖拽节点位置是否没变化
+  const { x: finalX, y: finalY } = await draggedDom.boundingBox()
+  await expect(x).toEqual(finalX)
+  await expect(y).toEqual(finalY)
+});

package/resources/pc/demo/tree/allow-drop.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test('自定义节点能否被拖拽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/allow-drop')
+
+  const draggedDom = page.getByRole('treeitem', { name: '二级 3-2' })
+  // 获取拖拽元素位置
+  const { x, y } = await draggedDom.boundingBox()
+
+  // 拖拽到不可放置子节点的元素上
+  await page.mouse.move(x, y)
+  await page.mouse.down()
+  await page.mouse.move(x, y - 55)
+  await page.mouse.up()
+
+  // 拖拽完成判断目标节点有没有增加子节点
+  await expect(page.getByRole('treeitem', { name: '二级 3-1' }).locator('.tiny-tree-node__children .tiny-tree-node')).toHaveCount(0)
+});

package/resources/pc/demo/tree/auto-expand-parent.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test('展开子节点的时候是否自动展开父节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/auto-expand-parent');
+
+  const expandNode = page.getByRole('treeitem', { name: '二级 1-1' })
+  await expect(expandNode).toHaveCount(0)
+  await page.getByText('一级 1').first().click()
+  await expect(expandNode).toHaveCount(1)
+});

package/resources/pc/demo/tree/basic-usage.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+
+test('tree组件基本使用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/basic-usage');
+  await page.getByRole('treeitem', { name: '一级 1' }).locator('div').click();
+  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]/div')).toHaveClass(/is-current/);
+  await page.getByText('二级 1-1').click();
+  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]/div/div[2]/div/div')).toHaveClass(/is-current/);
+  await page.getByRole('treeitem', { name: '三级 1-1-1' }).locator('div').click();
+  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]/div/div[2]/div/div/div[2]/div/div')).toHaveClass(/is-current/);
+  await page.getByRole('treeitem', { name: '一级 3' }).getByRole('img').click();
+  await page.getByRole('treeitem', { name: '一级 1' }).locator('div').filter({ hasText: '一级 1' }).click();
+  await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden(0)
+  await page.locator('.tiny-modal__box').first().click();
+});

package/resources/pc/demo/tree/check-on-click-node.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+test('点击节点时选中', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/check-on-click-node');
+
+  const checkedClass = /is-checked/
+  const someCheckedClass = /is-indeterminate/
+  const leafNode = page.getByRole('treeitem', { name: '三级 1-1-1' }).locator('span').nth(1)
+  const mediumNode = page.getByRole('treeitem', { name: '二级 1-1' }).locator('span').nth(1)
+  const rootNode = page.getByRole('treeitem', { name: '一级 1' }).locator('span').nth(1)
+
+  // 点击时选中
+  await leafNode.click()
+  await expect(leafNode).toHaveClass(checkedClass)
+  await expect(mediumNode).toHaveClass(someCheckedClass)
+  await expect(rootNode).toHaveClass(someCheckedClass)
+  await mediumNode.click()
+  await expect(mediumNode).toHaveClass(checkedClass)
+
+  // 已选中的点击取消选中
+  await rootNode.click()
+  await expect(rootNode).not.toHaveClass(checkedClass)
+  await expect(mediumNode).not.toHaveClass(checkedClass)
+  await expect(leafNode).not.toHaveClass(checkedClass)
+  await rootNode.click()
+  await leafNode.click()
+  await expect(leafNode).not.toHaveClass(checkedClass)
+});

package/resources/pc/demo/tree/check-strictly.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test';
+
+test('父子节点互不关联', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/check-strictly');
+
+  const checkedClass = /is-checked/
+  const parantNode1 = page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]/div/div[2]/div/div/div[1]/label')
+  const childNodes1 = [page.getByRole('treeitem', { name: '三级 1-1-1' }).locator('span').nth(1), page.getByRole('treeitem', { name: '三级 1-1-2' }).locator('span').nth(1)]
+  const parantNode2 = page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]/div/div[1]/label')
+  const childNodes2 = [page.getByRole('treeitem', { name: '二级 2-1' }).locator('span').nth(1), page.getByRole('treeitem', { name: '二级 2-2' }).locator('span').nth(1)]
+  const parantNode3 = page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[3]/div/div[1]/label')
+  const childNodes3 = [page.getByRole('treeitem', { name: '二级 3-1' }).locator('span').nth(1)]
+
+  // 子节点选中不影响父节点
+  await childNodes1[0].click();
+  await childNodes1[1].click();
+  await expect(parantNode1).not.toHaveClass(checkedClass)
+
+  // 子节点取消选中, 不影响父节点
+  await parantNode1.click();
+  await childNodes1[0].click();
+  await childNodes1[1].click();
+  await expect(parantNode1).toHaveClass(checkedClass)
+
+  // 父节点选中, 子节点不变
+  await parantNode2.click();
+  await expect(childNodes2[0]).not.toHaveClass(checkedClass);
+  await expect(childNodes2[1]).not.toHaveClass(checkedClass);
+  await childNodes3[0].click();
+  await parantNode3.click();
+  await expect(childNodes3[0]).toHaveClass(checkedClass)
+
+  // 父节点取消选中, 子节点不变
+  await childNodes1[0].click();
+  await childNodes1[1].click();
+  await parantNode1.click()
+  await expect(childNodes1[0]).toHaveClass(checkedClass)
+  await expect(childNodes1[1]).toHaveClass(checkedClass)
+});

package/resources/pc/demo/tree/contextmenu.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+test('可自定义右键菜单内容', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/contextmenu')
+
+  await page.getByRole('treeitem', { name: '三级 1-1-1' }).click({
+    button: 'right'
+  })
+  const menu = page.locator('#preview .tiny-tree-node__menu')
+  await expect(menu).toBeVisible()
+  await page.getByText('新增 三级 1-1-1删除 { "label": "三级 1-1-1" }更新 三级 1-1-1').click()
+});

package/resources/pc/demo/tree/current-node-key.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test('当前选中节点标志', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/current-node-key')
+
+  const selectedNodeClass = /is-current/
+  await expect(page.getByRole('treeitem', { name: '一级 2' })).toHaveClass(selectedNodeClass)
+  await expect(page.getByRole('treeitem', { name: '一级 1' })).not.toHaveClass(selectedNodeClass)
+  await expect(page.getByRole('treeitem', { name: '二级 2-1' })).not.toHaveClass(selectedNodeClass)
+  await expect(page.getByRole('treeitem', { name: '二级 3-2' })).not.toHaveClass(selectedNodeClass)
+});

package/resources/pc/demo/tree/custom-empty-text.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('自定义空数据文本', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/custom-empty-text')
+
+  const emptyText = '没有提供有效数据'
+  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]')).toHaveText(emptyText)
+});

package/resources/pc/demo/tree/custom-node-icon.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('自定义展开折叠图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/custom-node-icon')
+
+  await expect(page.getByRole('treeitem', { name: '二级 1-1' }).locator('.tree-node-icon .expanded').first()).toBeVisible()
+  await page.locator('div').filter({ hasText: /^一级 2$/ }).click()
+  await expect(page.getByRole('treeitem', { name: '一级 2' }).locator('.tree-node-icon').first()).not.toHaveClass(/expanded/)
+});

package/resources/pc/demo/tree/data-source.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test('测试数据源是否正常显示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/data-source');
+  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]/div')).toHaveText('一级 1')
+  await page.getByRole('treeitem', { name: '一级 1' }).click();
+  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]/div/div[2]/div/div/div[1]')).toHaveText('二级 1-1')
+  await page.getByRole('treeitem', { name: '二级 1-1' }).locator('div').click();
+  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]/div/div[2]/div/div/div[2]/div[1]/div')).toHaveText('三级 1-1-1')
+  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[3]/div')).toHaveText('一级 3')
+});

package/resources/pc/demo/tree/default-checked-keys.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test('默认勾选的节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/default-checked-keys');
+
+  const checkedClass = /is-checked/
+  await expect(page.getByRole('treeitem', { name: '三级 1-1-1' }).locator('span').nth(1)).toHaveClass(checkedClass)
+  await expect(page.getByRole('treeitem', { name: '一级 2' }).locator('span').nth(1)).toHaveClass(checkedClass)
+  await expect(page.getByRole('treeitem', { name: '二级 2-1' }).locator('span').nth(1)).toHaveClass(checkedClass)
+  await expect(page.getByRole('treeitem', { name: '二级 2-2' }).locator('span').nth(1)).toHaveClass(checkedClass)
+
+  await expect(page.getByRole('treeitem', { name: '三级 1-1-2' }).locator('span').nth(1)).not.toHaveClass(checkedClass)
+  await expect(page.getByRole('treeitem', { name: '二级 3-1' }).locator('span').nth(1)).not.toHaveClass(checkedClass)
+  await expect(page.getByRole('treeitem', { name: '二级 3-2' }).locator('span').nth(1)).not.toHaveClass(checkedClass)
+
+});

package/resources/pc/demo/tree/default-expand-all.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+test('初始化展开所有节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/default-expand-all');
+
+  const expandClass = /is-expanded/
+  await expect(page.getByRole('treeitem', { name: '一级 1' })).toHaveClass(expandClass)
+  await expect(page.getByRole('treeitem', { name: '二级 1-1' })).toHaveClass(expandClass)
+  await expect(page.getByRole('treeitem', { name: '三级 1-1-1' })).toHaveClass(expandClass)
+  await expect(page.getByRole('treeitem', { name: '二级 2-1' })).toHaveClass(expandClass)
+  await expect(page.getByRole('treeitem', { name: '二级 1-1' })).toHaveClass(expandClass)
+});

package/resources/pc/demo/tree/default-expended-keys.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+
+test('默认展开指定节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/default-expanded-keys')
+
+  const expandClass = /is-expanded/
+  await expect(page.getByRole('treeitem', { name: '一级 1' })).toHaveClass(expandClass)
+  await expect(page.getByRole('treeitem', { name: '二级 1-1' })).toHaveClass(expandClass)
+  await expect(page.getByRole('treeitem', { name: '一级 2' })).not.toHaveClass(expandClass)
+  await expect(page.getByRole('treeitem', { name: '一级 3' })).not.toHaveClass(expandClass)
+  await expect(page.getByRole('treeitem', { name: '三级 1-1-1' })).toHaveCount(1)
+  await expect(page.getByRole('treeitem', { name: '二级 2-1' })).toHaveCount(0)
+  await expect(page.getByRole('treeitem', { name: '二级 3-1' })).toHaveCount(0)
+});

package/resources/pc/demo/tree/disable-node.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test';
+
+test('树节点禁用状态', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/disable-node');
+
+  const checkboxDisabled = page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]/div/div[2]/div/div/div[2]/div[1]/div/div[1]/label')
+  const parentNodeCheckbox = page.locator('div').filter({ hasText: /^一级 2$/ }).locator('span').nth(1)
+  const childNodeCheckbox = page.getByRole('treeitem', { name: '二级 2-1' }).locator('span').nth(1)
+  const parentNodeCheckbox2 = page.locator('div').filter({ hasText: /^二级 1-1$/ }).locator('span').nth(1)
+
+  // 禁用节点复选框是否不能选中
+  await expect(checkboxDisabled).toHaveClass(/is-disabled/)
+  await expect(checkboxDisabled).not.toHaveClass(/is-checked/)
+
+  // 选中父节点, 子节点中除禁用的都可以选中
+  await parentNodeCheckbox.click()
+  await expect(parentNodeCheckbox).toHaveClass(/is-indeterminate/)
+  await expect(childNodeCheckbox).toHaveClass(/is-checked/)
+
+  // 子节点都禁用的情况下, 父节点不可选中
+  await parentNodeCheckbox2.click()
+  expect(parentNodeCheckbox2).not.toHaveClass(/is-checked|is-indeterminate/)
+
+  // 非禁用节点可点击选中
+  await page.getByRole('treeitem', { name: '二级 3-1' }).locator('span').nth(2).click();
+  await page.locator('div').filter({ hasText: /^一级 3$/ }).getByRole('checkbox').click();
+});

package/resources/pc/demo/tree/drag-events.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+
+test('拖拽节点事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/drag-events')
+
+  const draggedDom = page.getByRole('treeitem', { name: '三级 1-1-2' })
+  // 获取拖拽元素位置
+  const { x, y } = await draggedDom.boundingBox()
+
+  await page.mouse.move(x, y)
+  await page.mouse.down()
+  await page.mouse.move(x, y - 15)
+  await page.mouse.move(x, y - 15)
+  await page.mouse.move(x, y - 15)
+  await expect(page.getByText('拖拽节点开始时触发的事件').first()).toBeVisible()
+  await expect(page.getByText('拖拽节点时触发的事件').first()).toBeVisible()
+  await expect(page.getByText('拖拽离开节点时触发的事件').first()).toBeVisible()
+  await expect(page.getByText('拖拽进入其他节点时触发的事件').first()).toBeVisible()
+  await page.mouse.up()
+  await expect(page.getByText('拖拽结束时触发的事件').first()).toBeVisible()
+});

package/resources/pc/demo/tree/expand-on-click-node.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+
+test('点击节点展开收缩', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/expand-on-click-node');
+
+  const expandedClass = /is-expanded/
+  const rootNode = page.locator('div').filter({ hasText: /^一级 1$/ })
+  const mediumNode = page.getByRole('treeitem', { name: '二级 1-1' })
+  const leafNode = page.getByRole('treeitem', { name: '三级 1-1-1' })
+
+  // 点击收缩
+  await rootNode.click();
+  await expect(mediumNode).toBeHidden(0)
+  await expect(leafNode).toBeHidden(0)
+
+  // 点击展开
+  await rootNode.click();
+  await expect(mediumNode).toHaveClass(expandedClass)
+  await expect(leafNode).toHaveClass(expandedClass)
+});

package/resources/pc/demo/tree/filter-node.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test('节点过滤', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/filter-node')
+
+  await page.getByPlaceholder('输入关键字进行过滤').click()
+  await page.getByPlaceholder('输入关键字进行过滤').fill('1')
+  const validNodeCount = await page.locator('#preview .tiny-tree-node').filter({ hasText: '1' }).count()
+  await expect(validNodeCount).toBeGreaterThan(0)
+  await expect(page.getByRole('treeitem', { name: '二级 2-2' })).not.toBeVisible()
+});

package/resources/pc/demo/tree/highlight-current.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('高亮当前选中节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/highlight-current')
+
+  const node = page.getByRole('treeitem', { name: '三级 1-1-1' }).locator('.tiny-tree-node__content')
+  await node.click()
+  await expect(page.locator('#preview .tiny-tree')).toHaveClass(/tiny-tree--highlight-current/)
+})

package/resources/pc/demo/tree/indent.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test('水平缩进', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/indent')
+
+  const childNode1 = page.locator('#preview .tiny-tree-node__content').filter({ hasText: /^二级 1-1$/ })
+  await expect(childNode1).toHaveCSS('padding-left', '50px')
+  const childNode2 = page.locator('#preview .tiny-tree-node__content').filter({ hasText: /^三级 1-1-1$/ })
+  await expect(childNode2).toHaveCSS('padding-left', '100px')
+});

package/resources/pc/demo/tree/lazy-load-node.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test('懒加载节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/lazy-load-node')
+
+  const parentNode = page.getByRole('treeitem', { name: '一级 3' }).locator('div')
+  const childNode1 = page.getByRole('treeitem', { name: '一级 1' })
+  const childNode2 = page.getByRole('treeitem', { name: '一级 2' })
+
+  // 初始没渲染子节点
+  await expect(childNode1).not.toBeVisible()
+  await expect(childNode2).not.toBeVisible()
+
+  // 展开父元素后才渲染子节点
+  await parentNode.click()
+  await expect(childNode1).toBeVisible()
+  await expect(childNode2).toBeVisible()
+});

package/resources/pc/demo/tree/node-contextmenu.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test('鼠标右键点击节点事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/node-contextmenu')
+
+  const node = page.getByRole('treeitem', { name: '三级 1-1-1' })
+  await node.click({ button: 'right' })
+  await expect(page.getByText('当节点被鼠标右键点击时会触发该事件').first()).toBeVisible()
+  await node.click()
+  await expect(page.getByText('点击节点时触发的事件').first()).toBeVisible()
+});

package/resources/pc/demo/tree/node-draggable.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+test('可拖拽节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/node-draggable');
+
+  const draggedDom = page.getByRole('treeitem', { name: '三级 1-1-1' })
+  // 获取拖拽元素位置
+  const { x, y } = await draggedDom.boundingBox()
+
+  // 1. 兄弟节点之间交换位置
+  await page.mouse.move(x, y)
+  await page.mouse.down()
+  await page.mouse.move(x, y + 55)
+  await page.mouse.up()
+  // 拖拽完成判断位置是否变化
+  await expect(page.getByRole('treeitem', { name: '二级 1-1' }).locator('.tiny-tree-node__content').nth(1)).toContainText('1-1-2')
+
+  // 2. 拖拽兄弟节点跨层级
+  await page.mouse.move(x, y)
+  await page.mouse.down()
+  await page.mouse.move(x, y + 30)
+  await page.mouse.up()
+  // 判断新的子节点和父节点的位置
+  await expect(page.getByRole('treeitem', { name: '三级 1-1-1' }).locator('.tiny-tree-node__children .tiny-tree-node')).toHaveCount(1)
+});

package/resources/pc/demo/tree/node-events.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test('勾选节点事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/node-events')
+
+  const nodeCheckbox = page.getByRole('treeitem', { name: '三级 1-1-1' }).locator('span').nth(2)
+  await nodeCheckbox.click()
+  await expect(page.getByText('勾选节点后的事件').first()).toBeVisible()
+  await expect(page.getByText('节点选中状态发生变化时触发的事件').first()).toBeVisible()
+});

package/resources/pc/demo/tree/node-key.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test('唯一标识', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/node-key');
+
+  await page.getByRole('button', { name: '设置当前选中的节点的 key' }).click()
+  await expect(page.getByRole('treeitem', { name: '二级 2-1' })).toHaveClass(/is-current/)
+
+  await page.getByRole('button', { name: '设置当前选中的节点', exact: true }).click();
+  await expect(page.getByRole('treeitem', { name: '三级 1-1-2' })).toHaveClass(/is-current/)
+
+  await page.getByText('三级 1-1-1').click();
+  await page.getByRole('button', { name: '获取当前被选中节点的 key' }).click();
+  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]/div[1]')).toContainText('9')
+
+  await page.getByRole('button', { name: '获得当前选中的节点' }).click();
+  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]/div[2]')).toContainText('"id": 9')
+
+  const newNode1 = page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[5]/div[1]/div/div[2]/div/div/div[2]/div[3]/div')
+  await expect(newNode1).toHaveCount(0)
+  await page.getByRole('button', { name: '为 Tree 中的一个节点追加一个子节点' }).click();
+  await expect(newNode1).toHaveCount(1)
+
+  const newNode2 = page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[5]/div[4]/div')
+  await expect(newNode2).toHaveCount(0)
+  await page.getByRole('button', { name: '根据节点数据在父节点下插入一个子节点' }).click();
+  await expect(newNode2).toHaveCount(1)
+
+  const newNode3 = page.getByRole('treeitem', { name: '一级 5' })
+  await expect(newNode3).toHaveCount(0)
+  await page.getByRole('button', { name: '为 Tree 的一个节点的前面增加一个节点' }).click();
+  await expect(newNode3).toHaveCount(1)
+
+  const node = page.locator('div').filter({ hasText: /^一级 2$/ })
+  await expect(node).toHaveCount(1)
+  await page.getByRole('button', { name: '删除节点' }).click();
+  await expect(node).toHaveCount(0)
+});

package/resources/pc/demo/tree/node-props-config.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('数据节点属性配置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/node-props-config');
+
+  await expect(page.locator('#preview .tiny-tree-node__content').first()).toHaveText('一级 1')
+  const childCount = await page.getByRole('treeitem', { name: '一级 1' }).locator('.tiny-tree-node__children .tiny-tree-node__content').count()
+  await expect(childCount).toBeGreaterThan(0)
+});

package/resources/pc/demo/tree/render-after-expand.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('展开后渲染', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/render-after-expand');
+
+  // 非展开渲染, 子节点存在dom中, 被隐藏
+  const childNode = page.getByRole('treeitem', { name: '二级 1-1', includeHidden: true })
+  await expect(childNode).toBeHidden(0)
+});

package/resources/pc/demo/tree/render-content.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+
+test('自定义内容区渲染', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/render-content');
+
+  const node = page.getByRole('treeitem', { name: '三级 1-1-1' })
+  const customContent1 = node.getByText('Append')
+  const customContent2 = node.getByText('Delete')
+  const customContent3 = page.locator('span').filter({ hasText: '二级 1-1AppendDelete' }).getByRole('button', { name: 'Append' }).nth(0)
+  const customContent4 = page.getByRole('treeitem', { name: '一级 1 Append Delete' }).getByRole('button', { name: 'Append' }).nth(0)
+  const appendedNode = page.getByRole('treeitem', { name: 'testtest' })
+  for (const item of [customContent1, customContent2, customContent3, customContent4]) {
+    await expect(item).toHaveCount(1)
+  }
+
+  await customContent1.click()
+  await expect(appendedNode).toHaveCount(1)
+  await appendedNode.getByRole('button', { name: 'Delete' }).click();
+  await expect(appendedNode).toHaveCount(0)
+});