From d59fc4d47e6bab77f8a59b61baddaa787395628e Mon Sep 17 00:00:00 2001 From: MomoPoppy <125256456+MomoPoppy@users.noreply.github.com> Date: Mon, 18 Dec 2023 16:11:11 +0800 Subject: [PATCH] test(tree-menu): [tree-menu] Complete the missing e2e test case for the treeMenu component (#1166) --- .../pc/app/tree-menu/custom-icon.spec.ts | 1 + .../app/tree-menu/only-check-children.spec.ts | 26 ++++++++- .../demos/pc/app/tree-menu/props.spec.ts | 24 +++++++- .../pc/app/tree-menu/show-expand.spec.ts | 40 +++++++++++-- .../pc/app/tree-menu/show-filter.spec.ts | 57 ++++++++++++++++++- .../pc/app/tree-menu/show-number.spec.ts | 15 ++++- 6 files changed, 151 insertions(+), 12 deletions(-) diff --git a/examples/sites/demos/pc/app/tree-menu/custom-icon.spec.ts b/examples/sites/demos/pc/app/tree-menu/custom-icon.spec.ts index b1a7a54b6..397ed6e10 100644 --- a/examples/sites/demos/pc/app/tree-menu/custom-icon.spec.ts +++ b/examples/sites/demos/pc/app/tree-menu/custom-icon.spec.ts @@ -16,4 +16,5 @@ test('自定义前置图标', async ({ page }) => { const wrap = page.locator('#custom-icon') const treeMenu = wrap.locator('.tiny-tree-menu') + // TINY-TODO : 补充前置图标后再补充此测试用例 }) diff --git a/examples/sites/demos/pc/app/tree-menu/only-check-children.spec.ts b/examples/sites/demos/pc/app/tree-menu/only-check-children.spec.ts index 8e2ef524f..078b16be3 100644 --- a/examples/sites/demos/pc/app/tree-menu/only-check-children.spec.ts +++ b/examples/sites/demos/pc/app/tree-menu/only-check-children.spec.ts @@ -1,5 +1,27 @@ import { test, expect } from '@playwright/test' test('父级只展开不跳转', async ({ page }) => { - -}) \ No newline at end of file + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('tree-menu#only-check-children') + + const wrap = page.locator('#only-check-children') + const treeMenu = wrap.locator('.tiny-tree-menu') + const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node') + const treeNodeContent = treeNode.locator('> .tiny-tree-node__content') + + await treeNodeContent.filter({ hasText: /^指南$/ }).click() + await expect(treeNode.filter({ hasText: /^指南/ })).toHaveClass(/is-expanded/) + // TINY-TODO: 补充修复 onlyCheckChildren 属性功能后打开 + // await expect(treeNode.filter({ hasText: /^指南/ })).not.toHaveClass(/is-current/) + // await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-body')).not.toHaveCSS( + // 'color', + // '#1476ff' + // ) + // await treeNodeContent.filter({ hasText: /^后端适配器$/ }).click() + // await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toHaveClass(/is-current/) + // await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-body')).toHaveCSS('color', '#1476ff') + // await expect(treeNodeContent.filter({ hasText: /^后端适配器$/ }).locator('.tree-node-body')).toHaveCSS( + // 'color', + // '#1476ff' + // ) +}) diff --git a/examples/sites/demos/pc/app/tree-menu/props.spec.ts b/examples/sites/demos/pc/app/tree-menu/props.spec.ts index 6ead9e06f..34adbe038 100644 --- a/examples/sites/demos/pc/app/tree-menu/props.spec.ts +++ b/examples/sites/demos/pc/app/tree-menu/props.spec.ts @@ -1,6 +1,26 @@ import { test, expect } from '@playwright/test' - test('字段映射', async ({ page }) => { - + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('tree-menu#props') + + const wrap = page.locator('#props') + const treeMenu = wrap.locator('.tiny-tree-menu') + const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node') + const treeNodeContent = treeNode.locator('> .tiny-tree-node__content') + + await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toBeHidden() + await treeNodeContent.filter({ hasText: /^指南$/ }).click() + await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toBeVisible() + await treeNode.filter({ hasText: /^后端适配器$/ }).click() + await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toHaveClass(/is-current/) + await treeNodeContent.filter({ hasText: /^指南$/ }).click() + await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toBeHidden() + + // 过滤功能 + await treeMenu.locator('.tiny-input__inner').fill('添加标签页') + await expect(page.getByTitle('添加标签页')).toBeVisible() + await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeHidden() + await treeMenu.locator('.tiny-input__inner').clear() + await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeVisible() }) diff --git a/examples/sites/demos/pc/app/tree-menu/show-expand.spec.ts b/examples/sites/demos/pc/app/tree-menu/show-expand.spec.ts index 89311eb94..4facdb247 100644 --- a/examples/sites/demos/pc/app/tree-menu/show-expand.spec.ts +++ b/examples/sites/demos/pc/app/tree-menu/show-expand.spec.ts @@ -1,10 +1,42 @@ import { test, expect } from '@playwright/test' - test('底部一键展开', async ({ page }) => { - + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('tree-menu#show-expand') + + const wrap = page.locator('#show-expand') + const treeMenu = wrap.locator('.tiny-tree-menu') + const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node') + const treeNodeContent = treeNode.locator('> .tiny-tree-node__content') + const expandButton = treeMenu.locator('.tiny-tree-menu__expand .tiny-svg') + + await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible() + // TINY-TODO: showExpand 功能补全后打开 + /* await expect(expandButton).toBeVisible() + // 点击收起 + await expandButton.click() + await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible() + await expect(treeMenu).toHaveClass(/tiny-tree-menu__collapse/) + await expect(treeMenu).toHaveCSS('overflow', 'hidden') + await expect(treeMenu).toHaveCSS('width', '48px') + await expect(treeMenu).toHaveCSS('padding-right', '0') + await expect(expandButton).toBeVisible() + // 点击展开 + await expandButton.click() + await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible() + await expect(treeMenu).not.toHaveClass(/tiny-tree-menu__collapse/) + await expect(expandButton).toBeVisible() */ }) test('自定义节点图标', async ({ page }) => { - -}) \ No newline at end of file + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('tree-menu#show-expand') + + const wrap = page.locator('#show-expand') + const treeMenu = wrap.locator('.tiny-tree-menu') + const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node') + const treeNodeContent = treeNode.locator('> .tiny-tree-node__content') + + await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible() + await expect(treeNodeContent.filter({ hasText: /^首页$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible() +}) diff --git a/examples/sites/demos/pc/app/tree-menu/show-filter.spec.ts b/examples/sites/demos/pc/app/tree-menu/show-filter.spec.ts index 28161229d..d9813a100 100644 --- a/examples/sites/demos/pc/app/tree-menu/show-filter.spec.ts +++ b/examples/sites/demos/pc/app/tree-menu/show-filter.spec.ts @@ -1,6 +1,57 @@ import { test, expect } from '@playwright/test' -test('不可搜索不显示 title', async ({ page }) => { +test('默认可搜索 + 显示 title', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) - -}) \ No newline at end of file + await page.goto('tree-menu#show-filter') + + const wrap = page.locator('#show-filter') + const treeMenu = wrap.locator('.tiny-tree-menu').nth(0) + const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node') + const treeNodeContent = treeNode.locator('> .tiny-tree-node__content') + + // 显示输入框 + await expect(treeMenu).toHaveClass(/tiny-tree-menu__show-filter/) + await expect(treeMenu.locator('.tiny-input__inner')).toBeVisible() + await expect(treeNodeContent.filter({ hasText: /^首页$/ })).toBeVisible() + await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeVisible() + await treeMenu.locator('.tiny-input__inner').fill('首页') + await treeMenu.locator('.tiny-input__inner').press('Enter') + await expect(treeNodeContent.filter({ hasText: /^首页$/ })).toBeVisible() + await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeHidden() + await treeMenu.locator('.tiny-input__inner').fill('') + await treeMenu.locator('.tiny-input__inner').press('Enter') + + // 有 title 属性 + await expect(treeNodeContent.filter({ hasText: /^首页$/ }).locator('.tree-node-body')).toHaveAttribute( + 'title', + '首页' + ) + await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-body')).toHaveAttribute( + 'title', + '指南' + ) +}) + +test('不可搜索 + 不显示 title', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('tree-menu#show-filter') + + const wrap = page.locator('#show-filter') + const treeMenu = wrap.locator('.tiny-tree-menu').nth(1) + const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node') + const treeNodeContent = treeNode.locator('> .tiny-tree-node__content') + + // 显示输入框 + await expect(treeMenu).not.toHaveClass(/tiny-tree-menu__show-filter/) + await expect(treeMenu.locator('.tiny-input__inner')).not.toBeVisible() + + // 有 title 属性 + await expect(treeNodeContent.filter({ hasText: /^首页$/ }).locator('.tree-node-body')).not.toHaveAttribute( + 'title', + '首页' + ) + await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-body')).not.toHaveAttribute( + 'title', + '指南' + ) +}) diff --git a/examples/sites/demos/pc/app/tree-menu/show-number.spec.ts b/examples/sites/demos/pc/app/tree-menu/show-number.spec.ts index 6f36a3d91..46dc1f6c3 100644 --- a/examples/sites/demos/pc/app/tree-menu/show-number.spec.ts +++ b/examples/sites/demos/pc/app/tree-menu/show-number.spec.ts @@ -1,4 +1,17 @@ import { test, expect } from '@playwright/test' test('显示数字', async ({ page }) => { -}) \ No newline at end of file + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('tree-menu#show-number') + + const wrap = page.locator('#show-number') + const treeMenu = wrap.locator('.tiny-tree-menu') + const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node') + const treeNodeContent = treeNode.locator('> .tiny-tree-node__content') + + await expect(treeNodeContent.filter({ hasText: /首页$/ }).locator('.tree-node-number')).toHaveText('0') + await expect(treeNodeContent.filter({ hasText: /指南$/ }).locator('.tree-node-number')).toHaveText('9999') + await expect(treeNodeContent.filter({ hasText: /按需引入$/ }).locator('.tree-node-number')).toHaveText('9.9k') + await expect(treeNodeContent.filter({ hasText: /完整引入$/ }).locator('.tree-node-number')).toHaveText('1') + await expect(treeNodeContent.filter({ hasText: /后端适配器$/ }).locator('.tree-node-number')).toHaveText('0') +})