From 53a0cf020abc7c9a7cfe2e0ba7a87a5f152c94b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com> Date: Wed, 6 Dec 2023 16:26:52 +0800 Subject: [PATCH] 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 --- .../demos/pc/app/tooltip/content.spec.js | 2 +- .../pc/app/tooltip/custom-popper.spec.js | 8 +- .../demos/pc/app/transfer/basic-usage.spec.ts | 27 ++-- .../demos/pc/app/transfer/custom-btns.spec.ts | 30 ++--- .../pc/app/transfer/custom-filter.spec.ts | 10 +- .../pc/app/transfer/custom-footer.spec.ts | 3 +- .../pc/app/transfer/custom-render.spec.ts | 12 +- .../pc/app/transfer/custom-titles.spec.ts | 8 +- .../pc/app/transfer/default-checked.spec.ts | 14 +-- .../demos/pc/app/transfer/drop-config.spec.ts | 37 +++--- .../app/transfer/manual-clear-query.spec.ts | 4 +- .../pc/app/transfer/nested-table.spec.ts | 47 ++----- .../demos/pc/app/transfer/nested-tree.spec.ts | 33 +---- .../pc/app/transfer/target-order.spec.ts | 3 +- .../pc/app/transfer/transfer-events.spec.ts | 3 +- .../demos/pc/app/tree/basic-usage.spec.ts | 42 ++++--- .../sites/demos/pc/app/tree/check-op.spec.ts | 54 +++++--- .../sites/demos/pc/app/tree/checkbox.spec.ts | 41 +++--- .../demos/pc/app/tree/contextmenu.spec.ts | 17 +-- examples/sites/demos/pc/app/tree/drag.spec.ts | 28 ++--- examples/sites/demos/pc/app/tree/edit.spec.ts | 119 +++--------------- .../demos/pc/app/tree/expand-control.spec.ts | 40 +++--- .../demos/pc/app/tree/filter-view.spec.ts | 34 +++-- .../sites/demos/pc/app/tree/icons.spec.ts | 38 +++--- examples/sites/demos/pc/app/tree/lazy.spec.ts | 28 ++--- .../sites/demos/pc/app/tree/node-hl.spec.ts | 45 ++++--- .../pc/app/tree/node-op-composition-api.vue | 18 ++- .../sites/demos/pc/app/tree/node-op.spec.ts | 49 +++++--- .../sites/demos/pc/app/tree/other.spec.ts | 23 +--- .../sites/demos/pc/app/tree/props.spec.ts | 25 ++-- .../sites/demos/pc/app/tree/radio.spec.ts | 28 ++--- examples/sites/demos/pc/app/tree/slot.spec.ts | 30 ++--- 32 files changed, 385 insertions(+), 515 deletions(-) diff --git a/examples/sites/demos/pc/app/tooltip/content.spec.js b/examples/sites/demos/pc/app/tooltip/content.spec.js index 6e45e31b0..5d4a9aeca 100644 --- a/examples/sites/demos/pc/app/tooltip/content.spec.js +++ b/examples/sites/demos/pc/app/tooltip/content.spec.js @@ -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() diff --git a/examples/sites/demos/pc/app/tooltip/custom-popper.spec.js b/examples/sites/demos/pc/app/tooltip/custom-popper.spec.js index 3ed7aac71..c8bf2aa75 100644 --- a/examples/sites/demos/pc/app/tooltip/custom-popper.spec.js +++ b/examples/sites/demos/pc/app/tooltip/custom-popper.spec.js @@ -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) }) diff --git a/examples/sites/demos/pc/app/transfer/basic-usage.spec.ts b/examples/sites/demos/pc/app/transfer/basic-usage.spec.ts index c5e8cf3c1..88857c3a4 100644 --- a/examples/sites/demos/pc/app/transfer/basic-usage.spec.ts +++ b/examples/sites/demos/pc/app/transfer/basic-usage.spec.ts @@ -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 diff --git a/examples/sites/demos/pc/app/transfer/custom-btns.spec.ts b/examples/sites/demos/pc/app/transfer/custom-btns.spec.ts index 5db8020b6..8f30a69ab 100644 --- a/examples/sites/demos/pc/app/transfer/custom-btns.spec.ts +++ b/examples/sites/demos/pc/app/transfer/custom-btns.spec.ts @@ -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() diff --git a/examples/sites/demos/pc/app/transfer/custom-filter.spec.ts b/examples/sites/demos/pc/app/transfer/custom-filter.spec.ts index 04a7a51fd..3f8151828 100644 --- a/examples/sites/demos/pc/app/transfer/custom-filter.spec.ts +++ b/examples/sites/demos/pc/app/transfer/custom-filter.spec.ts @@ -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() diff --git a/examples/sites/demos/pc/app/transfer/custom-footer.spec.ts b/examples/sites/demos/pc/app/transfer/custom-footer.spec.ts index 05ea2813c..b6c9a392f 100644 --- a/examples/sites/demos/pc/app/transfer/custom-footer.spec.ts +++ b/examples/sites/demos/pc/app/transfer/custom-footer.spec.ts @@ -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) }) diff --git a/examples/sites/demos/pc/app/transfer/custom-render.spec.ts b/examples/sites/demos/pc/app/transfer/custom-render.spec.ts index b88a79260..0f2a791bf 100644 --- a/examples/sites/demos/pc/app/transfer/custom-render.spec.ts +++ b/examples/sites/demos/pc/app/transfer/custom-render.spec.ts @@ -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) }) diff --git a/examples/sites/demos/pc/app/transfer/custom-titles.spec.ts b/examples/sites/demos/pc/app/transfer/custom-titles.spec.ts index 36a4f460a..84fa68c4e 100644 --- a/examples/sites/demos/pc/app/transfer/custom-titles.spec.ts +++ b/examples/sites/demos/pc/app/transfer/custom-titles.spec.ts @@ -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(/已选数据列表/) }) diff --git a/examples/sites/demos/pc/app/transfer/default-checked.spec.ts b/examples/sites/demos/pc/app/transfer/default-checked.spec.ts index 9baac332c..149540245 100644 --- a/examples/sites/demos/pc/app/transfer/default-checked.spec.ts +++ b/examples/sites/demos/pc/app/transfer/default-checked.spec.ts @@ -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() }) diff --git a/examples/sites/demos/pc/app/transfer/drop-config.spec.ts b/examples/sites/demos/pc/app/transfer/drop-config.spec.ts index 1635f02cc..a9d89aef1 100644 --- a/examples/sites/demos/pc/app/transfer/drop-config.spec.ts +++ b/examples/sites/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) }) diff --git a/examples/sites/demos/pc/app/transfer/manual-clear-query.spec.ts b/examples/sites/demos/pc/app/transfer/manual-clear-query.spec.ts index e72d891aa..1481fa6fd 100644 --- a/examples/sites/demos/pc/app/transfer/manual-clear-query.spec.ts +++ b/examples/sites/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() diff --git a/examples/sites/demos/pc/app/transfer/nested-table.spec.ts b/examples/sites/demos/pc/app/transfer/nested-table.spec.ts index ed75cc168..3f5925343 100644 --- a/examples/sites/demos/pc/app/transfer/nested-table.spec.ts +++ b/examples/sites/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) -}) diff --git a/examples/sites/demos/pc/app/transfer/nested-tree.spec.ts b/examples/sites/demos/pc/app/transfer/nested-tree.spec.ts index 95647cc30..08cab4a54 100644 --- a/examples/sites/demos/pc/app/transfer/nested-tree.spec.ts +++ b/examples/sites/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) }) diff --git a/examples/sites/demos/pc/app/transfer/target-order.spec.ts b/examples/sites/demos/pc/app/transfer/target-order.spec.ts index dd92bf314..ec38e8bfa 100644 --- a/examples/sites/demos/pc/app/transfer/target-order.spec.ts +++ b/examples/sites/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() diff --git a/examples/sites/demos/pc/app/transfer/transfer-events.spec.ts b/examples/sites/demos/pc/app/transfer/transfer-events.spec.ts index eaea1defd..e61853296 100644 --- a/examples/sites/demos/pc/app/transfer/transfer-events.spec.ts +++ b/examples/sites/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() diff --git a/examples/sites/demos/pc/app/tree/basic-usage.spec.ts b/examples/sites/demos/pc/app/tree/basic-usage.spec.ts index 4f0eb05f9..c2a8afced 100644 --- a/examples/sites/demos/pc/app/tree/basic-usage.spec.ts +++ b/examples/sites/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') }) diff --git a/examples/sites/demos/pc/app/tree/check-op.spec.ts b/examples/sites/demos/pc/app/tree/check-op.spec.ts index 4f0eb05f9..63fd10908 100644 --- a/examples/sites/demos/pc/app/tree/check-op.spec.ts +++ b/examples/sites/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') + 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() }) diff --git a/examples/sites/demos/pc/app/tree/checkbox.spec.ts b/examples/sites/demos/pc/app/tree/checkbox.spec.ts index 4f0eb05f9..fbc62d788 100644 --- a/examples/sites/demos/pc/app/tree/checkbox.spec.ts +++ b/examples/sites/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) }) diff --git a/examples/sites/demos/pc/app/tree/contextmenu.spec.ts b/examples/sites/demos/pc/app/tree/contextmenu.spec.ts index 678ed6683..b809d2bc0 100644 --- a/examples/sites/demos/pc/app/tree/contextmenu.spec.ts +++ b/examples/sites/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) }) diff --git a/examples/sites/demos/pc/app/tree/drag.spec.ts b/examples/sites/demos/pc/app/tree/drag.spec.ts index 4f0eb05f9..0c7a06f80 100644 --- a/examples/sites/demos/pc/app/tree/drag.spec.ts +++ b/examples/sites/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) }) diff --git a/examples/sites/demos/pc/app/tree/edit.spec.ts b/examples/sites/demos/pc/app/tree/edit.spec.ts index e28cba5dd..0ef473df4 100644 --- a/examples/sites/demos/pc/app/tree/edit.spec.ts +++ b/examples/sites/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') +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') }) diff --git a/examples/sites/demos/pc/app/tree/expand-control.spec.ts b/examples/sites/demos/pc/app/tree/expand-control.spec.ts index 4f0eb05f9..e12dfb721 100644 --- a/examples/sites/demos/pc/app/tree/expand-control.spec.ts +++ b/examples/sites/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) }) diff --git a/examples/sites/demos/pc/app/tree/filter-view.spec.ts b/examples/sites/demos/pc/app/tree/filter-view.spec.ts index 4f0eb05f9..6975b9a8c 100644 --- a/examples/sites/demos/pc/app/tree/filter-view.spec.ts +++ b/examples/sites/demos/pc/app/tree/filter-view.spec.ts @@ -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) }) diff --git a/examples/sites/demos/pc/app/tree/icons.spec.ts b/examples/sites/demos/pc/app/tree/icons.spec.ts index 4f0eb05f9..304ce7f12 100644 --- a/examples/sites/demos/pc/app/tree/icons.spec.ts +++ b/examples/sites/demos/pc/app/tree/icons.spec.ts @@ -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)') }) diff --git a/examples/sites/demos/pc/app/tree/lazy.spec.ts b/examples/sites/demos/pc/app/tree/lazy.spec.ts index 4f0eb05f9..9b62663db 100644 --- a/examples/sites/demos/pc/app/tree/lazy.spec.ts +++ b/examples/sites/demos/pc/app/tree/lazy.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#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) }) diff --git a/examples/sites/demos/pc/app/tree/node-hl.spec.ts b/examples/sites/demos/pc/app/tree/node-hl.spec.ts index 4f0eb05f9..7667b825f 100644 --- a/examples/sites/demos/pc/app/tree/node-hl.spec.ts +++ b/examples/sites/demos/pc/app/tree/node-hl.spec.ts @@ -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) }) diff --git a/examples/sites/demos/pc/app/tree/node-op-composition-api.vue b/examples/sites/demos/pc/app/tree/node-op-composition-api.vue index f7bbd0597..8f47dfa05 100644 --- a/examples/sites/demos/pc/app/tree/node-op-composition-api.vue +++ b/examples/sites/demos/pc/app/tree/node-op-composition-api.vue @@ -7,7 +7,13 @@ 更新子节点 删除当前节点 - + @@ -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() { diff --git a/examples/sites/demos/pc/app/tree/node-op.spec.ts b/examples/sites/demos/pc/app/tree/node-op.spec.ts index 4f0eb05f9..c9f740942 100644 --- a/examples/sites/demos/pc/app/tree/node-op.spec.ts +++ b/examples/sites/demos/pc/app/tree/node-op.spec.ts @@ -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) }) diff --git a/examples/sites/demos/pc/app/tree/other.spec.ts b/examples/sites/demos/pc/app/tree/other.spec.ts index 4f0eb05f9..e80708ff0 100644 --- a/examples/sites/demos/pc/app/tree/other.spec.ts +++ b/examples/sites/demos/pc/app/tree/other.spec.ts @@ -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) }) diff --git a/examples/sites/demos/pc/app/tree/props.spec.ts b/examples/sites/demos/pc/app/tree/props.spec.ts index 4f0eb05f9..37638dbfc 100644 --- a/examples/sites/demos/pc/app/tree/props.spec.ts +++ b/examples/sites/demos/pc/app/tree/props.spec.ts @@ -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)') }) diff --git a/examples/sites/demos/pc/app/tree/radio.spec.ts b/examples/sites/demos/pc/app/tree/radio.spec.ts index 4f0eb05f9..c30866a9b 100644 --- a/examples/sites/demos/pc/app/tree/radio.spec.ts +++ b/examples/sites/demos/pc/app/tree/radio.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#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() }) diff --git a/examples/sites/demos/pc/app/tree/slot.spec.ts b/examples/sites/demos/pc/app/tree/slot.spec.ts index 4f0eb05f9..9f316e55f 100644 --- a/examples/sites/demos/pc/app/tree/slot.spec.ts +++ b/examples/sites/demos/pc/app/tree/slot.spec.ts @@ -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) })