test(action-menu): Add test cases for the action-menu component #58
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { expect, test } from '@playwright/test' | ||
|
|
||
| test.describe('action-menu 组件xdesign规范', () => { | ||
| test('默认--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('action-menu#basic-usage') | ||
|
|
||
| const demo = page.locator('#basic-usage .pc-demo') | ||
| const actionMenu = demo.locator('.tiny-action-menu') | ||
| const dropdown = actionMenu.locator('.tiny-dropdown') | ||
| const wrap = page.locator('.docs-tabs-wrap') | ||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||
|
|
||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('basic-usage.png') | ||
|
|
||
| await dropdown.locator('.tiny-dropdown__suffix-inner ').hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-item').nth(2).hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(0).hover() | ||
|
|
||
| await expect(wrap).toHaveScreenshot('hover.png') | ||
| }) | ||
| }) | ||
|
Comment on lines
+23
to
+25
There was a problem hiding this comment. 🛠️ Refactor suggestion Improve final screenshot naming and consider additional assertions. Capturing the final state is good practice. However, consider the following improvements:
Suggested change for screenshot naming: -await expect(wrap).toHaveScreenshot('hover.png')
+await expect(wrap).toHaveScreenshot('action-menu-hover-state.png')Consider adding assertions to verify the menu state, for example: await expect(menu.locator('.tiny-dropdown-item').nth(0)).toHaveClass(/hover/); |
||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { expect, test } from '@playwright/test' | ||
|
|
||
| test.describe('action-menu 组件xdesign规范', () => { | ||
| test('卡片模式 --UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('action-menu#card-mode') | ||
|
|
||
| const demo = page.locator('#card-mode .pc-demo') | ||
| const actionMenu = demo.locator('.tiny-action-menu') | ||
| const dropdown = actionMenu.nth(0).locator('.tiny-dropdown') | ||
| const wrap = page.locator('.docs-tabs-wrap') | ||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||
|
|
||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('default.png') | ||
|
|
||
| await dropdown.locator('.tiny-dropdown__suffix-inner').hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-item').nth(1).hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(1).hover() | ||
|
|
||
|
Comment on lines
+17
to
+22
There was a problem hiding this comment. 🛠️ Refactor suggestion Improve test reliability and clarity.
Consider refactoring the code as follows: // Hover over the dropdown suffix to open the menu
await dropdown.locator('.tiny-dropdown__suffix-inner').hover();
await menu.waitFor({ state: 'visible' });
// Hover over the second item in the main menu
await menu.locator('.tiny-dropdown-item').nth(1).hover();
await menu.locator('.tiny-dropdown-menu').waitFor({ state: 'visible' });
// Hover over the second item in the submenu
await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(1).hover();This approach uses Playwright's |
||
| await expect(wrap).toHaveScreenshot('hover.png') | ||
| }) | ||
| }) | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,25 @@ | ||||||||||||||||||||||||||||||||||||
| import { expect, test } from '@playwright/test' | ||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||
| test.describe('action-menu 组件xdesign规范', () => { | ||||||||||||||||||||||||||||||||||||
| test('禁用 --UI截图', async ({ page }) => { | ||||||||||||||||||||||||||||||||||||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||||||||||||||||||||||||||||||||||||
| await page.goto('action-menu#disabled') | ||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||
| const demo = page.locator('#disabled .pc-demo') | ||||||||||||||||||||||||||||||||||||
| const actionMenu = demo.locator('.tiny-action-menu') | ||||||||||||||||||||||||||||||||||||
| const dropdown = actionMenu.locator('.tiny-dropdown') | ||||||||||||||||||||||||||||||||||||
| const wrap = page.locator('.docs-tabs-wrap') | ||||||||||||||||||||||||||||||||||||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||
| await expect(demo).toBeInViewport() | ||||||||||||||||||||||||||||||||||||
| await expect(demo).toHaveScreenshot('default.png') | ||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||
| await dropdown.locator('.tiny-dropdown__suffix-inner ').hover() | ||||||||||||||||||||||||||||||||||||
| await page.waitForTimeout(100) | ||||||||||||||||||||||||||||||||||||
| await menu.locator('.tiny-dropdown-item').nth(2).hover() | ||||||||||||||||||||||||||||||||||||
| await page.waitForTimeout(100) | ||||||||||||||||||||||||||||||||||||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(1).hover() | ||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||
| await expect(wrap).toHaveScreenshot('hover.png') | ||||||||||||||||||||||||||||||||||||
| }) | ||||||||||||||||||||||||||||||||||||
|
Comment on lines
+17
to
+24
There was a problem hiding this comment. Improve test reliability by replacing fixed timeouts. The hover interactions and final screenshot are good for testing the disabled state. However, using fixed timeouts can lead to flaky tests. Consider replacing the fixed timeouts with Playwright's built-in waiting mechanisms: await dropdown.locator('.tiny-dropdown__suffix-inner ').hover()
-await page.waitForTimeout(100)
+await page.waitForSelector('.tiny-dropdown-menu', { state: 'visible' })
await menu.locator('.tiny-dropdown-item').nth(2).hover()
-await page.waitForTimeout(100)
+await page.waitForSelector('.tiny-dropdown-item:hover')
await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(1).hover()
+await page.waitForSelector('.tiny-dropdown-menu .tiny-dropdown-item:hover')
await expect(wrap).toHaveScreenshot('hover.png')These changes will make the test more reliable by waiting for specific conditions rather than arbitrary timeouts. Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||||||||
| }) | ||||||||||||||||||||||||||||||||||||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { expect, test } from '@playwright/test' | ||
|
|
||
| test.describe('action-menu 组件xdesign规范', () => { | ||
| test('事件 --UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('action-menu#events') | ||
|
Comment on lines
+1
to
+6
There was a problem hiding this comment. 🛠️ Refactor suggestion Enhance error handling and navigation setup. The test setup is good, but consider the following improvements:
Here's a suggested refactor: import { expect, test } from '@playwright/test'
const BASE_URL = 'http://your-base-url.com/'
test.describe('action-menu 组件xdesign规范', () => {
test.beforeEach(async ({ page }) => {
page.on('pageerror', (error) => {
console.error(`Page error: ${error.message}`)
expect(error).toBeNull()
})
await page.goto(`${BASE_URL}action-menu#events`)
})
test('事件 --UI截图', async ({ page }) => {
// Test code here
})
})This refactoring improves maintainability and provides more informative error messages. |
||
|
|
||
| const demo = page.locator('#events .pc-demo') | ||
| const body = page.locator('body') | ||
| const actionMenu = demo.locator('.tiny-action-menu') | ||
| const dropdown = actionMenu.nth(0).locator('.tiny-dropdown') | ||
| const wrap = page.locator('.docs-tabs-wrap') | ||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||
|
|
||
| await dropdown.locator('.tiny-dropdown__suffix-inner').click() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-item').nth(2).hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(0).click() | ||
| await page.waitForTimeout(100) | ||
|
Comment on lines
+8
to
+20
There was a problem hiding this comment. 🛠️ Refactor suggestion Improve element selection and interaction readability. The element selection and interaction steps are correct, but we can enhance readability and maintainability:
Here's a suggested refactor: const SELECTORS = {
demo: '#events .pc-demo',
actionMenu: '.tiny-action-menu',
dropdown: '.tiny-dropdown',
dropdownSuffix: '.tiny-dropdown__suffix-inner',
dropdownMenu: 'body > .tiny-dropdown-menu',
dropdownItem: '.tiny-dropdown-item'
}
const clickAndWait = async (page, selector) => {
await page.click(selector)
await page.waitForChanges()
}
test('事件 --UI截图', async ({ page }) => {
const demo = page.locator(SELECTORS.demo)
const actionMenu = demo.locator(SELECTORS.actionMenu)
const dropdown = actionMenu.first().locator(SELECTORS.dropdown)
const menu = page.locator(SELECTORS.dropdownMenu).first()
await clickAndWait(page, `${SELECTORS.dropdown} ${SELECTORS.dropdownSuffix}`)
await menu.locator(SELECTORS.dropdownItem).nth(2).hover()
await clickAndWait(page, `${SELECTORS.dropdownMenu} ${SELECTORS.dropdownItem}`)
// Rest of the test...
})This refactoring improves readability, maintainability, and removes arbitrary timeouts. |
||
|
|
||
| await expect(body).toBeInViewport() | ||
| await expect(body).toHaveScreenshot('events.png') | ||
|
Comment on lines
+22
to
+23
There was a problem hiding this comment. 🛠️ Refactor suggestion Enhance assertions and screenshot capture. The current assertions and screenshot capture are good, but consider the following improvements:
Here's a suggested refactor: // Add these assertions before capturing the screenshot
await expect(menu).toBeVisible()
await expect(menu.locator(SELECTORS.dropdownItem).first()).toHaveClass(/is-active/)
// Capture a screenshot of the specific component
await expect(actionMenu).toHaveScreenshot('action-menu-after-interaction.png')These changes will make the test more robust and focused on the action-menu component. |
||
| }) | ||
| }) | ||
|
Comment on lines
+3
to
+25
There was a problem hiding this comment. 🛠️ Refactor suggestion Expand test coverage and improve test structure. The current test provides a good starting point, but consider the following improvements to enhance overall test coverage and structure:
Here's a suggested structure for improved test coverage: import { expect, test } from '@playwright/test'
test.describe.parallel('Action Menu Component', () => {
test.beforeEach(async ({ page }) => {
// Common setup code
})
test.describe('UI Tests', () => {
test('renders correctly and captures screenshot', async ({ page }) => {
// Existing test code
})
test('displays correct styles on hover and focus', async ({ page }) => {
// New test for styling
})
})
test.describe('Functional Tests', () => {
test('opens dropdown on click', async ({ page }) => {
// Test dropdown opening
})
test('selects item correctly', async ({ page }) => {
// Test item selection
})
test('handles keyboard navigation', async ({ page }) => {
// Test keyboard accessibility
})
})
test.describe('Accessibility Tests', () => {
test('meets accessibility standards', async ({ page }) => {
// Use Playwright's accessibility testing features
const accessibilityReport = await page.accessibility.snapshot()
expect(accessibilityReport).toHaveNoViolations()
})
})
})This structure provides a more comprehensive test suite for the action-menu component, covering various aspects of its functionality and accessibility. |
||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import { expect, test } from '@playwright/test' | ||
|
|
||
| test.describe('action-menu 组件xdesign规范', () => { | ||
| test('自定义图标 --UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('action-menu#icon') | ||
|
|
||
| const demo = page.locator('#icon .pc-demo') | ||
| const actionMenu = demo.locator('.tiny-action-menu') | ||
| const dropdown = actionMenu.nth(0).locator('.tiny-dropdown') | ||
| const wrap = page.locator('.docs-tabs-wrap') | ||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||
|
|
||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('default.png') | ||
|
|
||
| await dropdown.locator('.tiny-dropdown__suffix-inner').hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-item').nth(1).hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(1).hover() | ||
|
|
||
| await expect(wrap).toHaveScreenshot('hover.png') | ||
| }) | ||
|
|
||
| test('自定义图标(蓝色) --UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('action-menu#icon') | ||
|
|
||
| const demo = page.locator('#icon .pc-demo') | ||
| const actionMenu = demo.locator('.tiny-action-menu') | ||
| const dropdown = actionMenu.nth(1).locator('.tiny-dropdown') | ||
| const wrap = page.locator('.docs-tabs-wrap') | ||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||
|
|
||
| await dropdown.locator('.tiny-dropdown__suffix-inner').hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-item').nth(1).hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(1).hover() | ||
|
|
||
| await expect(wrap).toHaveScreenshot('icon-hover.png') | ||
| }) | ||
|
|
||
| test('只显示文字 --UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('action-menu#icon') | ||
|
|
||
| const demo = page.locator('#icon .pc-demo') | ||
| const actionMenu = demo.locator('.tiny-action-menu') | ||
| const dropdown = actionMenu.nth(2).locator('.tiny-dropdown') | ||
| const wrap = page.locator('.docs-tabs-wrap') | ||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||
|
|
||
| await dropdown.locator('.tiny-dropdown__trigger').hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-item').nth(1).hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(1).hover() | ||
|
|
||
| await expect(wrap).toHaveScreenshot('text.png') | ||
| }) | ||
| }) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { expect, test } from '@playwright/test' | ||
|
|
||
| test.describe('action-menu 组件xdesign规范', () => { | ||
| test('个数限制 --UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('action-menu#max-show-num') | ||
|
|
||
| const demo = page.locator('#max-show-num .pc-demo') | ||
| const actionMenu = demo.locator('.tiny-action-menu') | ||
| const dropdown = actionMenu.nth(0).locator('.tiny-dropdown') | ||
| const wrap = page.locator('.docs-tabs-wrap') | ||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||
|
|
||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('default.png') | ||
|
|
||
| await dropdown.locator('.tiny-dropdown__suffix-inner').hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-item').nth(3).hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(0).hover() | ||
|
|
||
| await expect(wrap).toHaveScreenshot('hover.png') | ||
|
Comment on lines
+14
to
+23
There was a problem hiding this comment. 🛠️ Refactor suggestion Improve test reliability and add explicit assertions. The visual regression testing approach is good, but there are a few areas for improvement:
Here's a suggested refactor: await expect(demo).toBeInViewport()
await expect(demo).toHaveScreenshot('default.png')
await dropdown.locator('.tiny-dropdown__suffix-inner').hover()
-await page.waitForTimeout(100)
+await menu.waitFor({ state: 'visible' })
await menu.locator('.tiny-dropdown-item').nth(3).hover()
-await page.waitForTimeout(100)
+await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').first().waitFor({ state: 'visible' })
await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(0).hover()
+// Add explicit assertions for "max show num" functionality
+const visibleItems = await menu.locator('.tiny-dropdown-item').count()
+expect(visibleItems).toBeLessThanOrEqual(10) // Adjust the number based on your actual max show num
await expect(wrap).toHaveScreenshot('hover.png')This refactor improves test reliability by using
|
||
| }) | ||
| }) | ||
|
Comment on lines
+1
to
+25
There was a problem hiding this comment. 🛠️ Refactor suggestion Enhance test coverage with additional test cases. While the current visual regression test is valuable, consider adding more test cases to improve coverage of the "max show num" functionality:
Here's an example of how you might structure these additional tests: test.describe('action-menu component xdesign specification', () => {
test('Item limit - UI screenshot', async ({ page }) => {
// Existing test case
})
test('Correctly applies item limit', async ({ page }) => {
// Setup code...
const visibleItems = await menu.locator('.tiny-dropdown-item').count()
expect(visibleItems).toBe(10) // Adjust based on your actual limit
})
test('Scrolling works with more items than limit', async ({ page }) => {
// Setup code...
const lastItem = menu.locator('.tiny-dropdown-item').last()
await lastItem.scrollIntoViewIfNeeded()
await expect(lastItem).toBeVisible()
})
test('All items are accessible', async ({ page }) => {
// Setup code...
const allItems = await menu.locator('.tiny-dropdown-item').all()
for (const item of allItems) {
await item.scrollIntoViewIfNeeded()
await expect(item).toBeVisible()
}
})
})These additional test cases will provide more comprehensive coverage of the "max show num" functionality. |
||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { expect, test } from '@playwright/test' | ||
|
|
||
| test.describe('action-menu 组件xdesign规范', () => { | ||
| test('自定义下拉文本 --UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('action-menu#more-text') | ||
|
|
||
| const demo = page.locator('#more-text .pc-demo') | ||
| const actionMenu = demo.locator('.tiny-action-menu') | ||
| const dropdown = actionMenu.locator('.tiny-dropdown') | ||
| const wrap = page.locator('.docs-tabs-wrap') | ||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||
|
|
||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('default.png') | ||
|
|
||
| await dropdown.locator('.tiny-dropdown__suffix-inner').hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-item').nth(2).hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(1).hover() | ||
|
|
||
| await expect(wrap).toHaveScreenshot('hover.png') | ||
| }) | ||
| }) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { expect, test } from '@playwright/test' | ||
|
|
||
| test.describe('action-menu 组件xdesign规范', () => { | ||
| test('弹框样式 --UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('action-menu#popper-class') | ||
|
|
||
| const demo = page.locator('#popper-class .pc-demo') | ||
| const actionMenu = demo.locator('.tiny-action-menu') | ||
| const dropdown = actionMenu.nth(0).locator('.tiny-dropdown') | ||
| const wrap = page.locator('.docs-tabs-wrap') | ||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||
|
|
||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('default.png') | ||
|
|
||
| await dropdown.locator('.tiny-dropdown__suffix-inner').hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-item').nth(2).hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(0).hover() | ||
|
|
||
| await expect(wrap).toHaveScreenshot('hover.png') | ||
|
Comment on lines
+17
to
+23
There was a problem hiding this comment. 🛠️ Refactor suggestion Consider using waitForSelector instead of fixed timeouts. While the current implementation works, using fixed timeouts can lead to flaky tests if the UI takes longer to update due to varying system performance or network conditions. Consider using await dropdown.locator('.tiny-dropdown__suffix-inner').hover();
await page.waitForSelector('.tiny-dropdown-menu', { state: 'visible' });
await menu.locator('.tiny-dropdown-item').nth(2).hover();
await page.waitForSelector('.tiny-dropdown-item:hover');
await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(0).hover();
await page.waitForSelector('.tiny-dropdown-menu .tiny-dropdown-item:hover'); |
||
| }) | ||
| }) | ||
|
Comment on lines
+1
to
+25
There was a problem hiding this comment. 🛠️ Refactor suggestion Suggest additional test cases for improved coverage. The current test case provides good coverage for the basic functionality of the action-menu component. To further improve the test suite, consider adding the following test cases:
These additional test cases will help ensure the component behaves correctly in various scenarios and improve overall test coverage. |
||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { expect, test } from '@playwright/test' | ||
|
|
||
| test.describe('action-menu 组件xdesign规范', () => { | ||
| test('item插槽 --UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('action-menu#slot-item') | ||
|
|
||
| const demo = page.locator('#slot-item .pc-demo') | ||
| const actionMenu = demo.locator('.tiny-action-menu') | ||
| const dropdown = actionMenu.nth(0).locator('.tiny-dropdown') | ||
| const wrap = page.locator('.docs-tabs-wrap') | ||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||
|
|
||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('default.png') | ||
|
|
||
| await dropdown.locator('.tiny-dropdown__suffix-inner').hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-item').nth(2).hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(0).hover() | ||
|
|
||
|
Comment on lines
+17
to
+22
There was a problem hiding this comment. 🛠️ Refactor suggestion Replace fixed timeouts with more reliable waiting mechanisms. Using fixed timeouts ( Here's a suggested refactor: await dropdown.locator('.tiny-dropdown__suffix-inner').hover()
-await page.waitForTimeout(100)
+await page.waitForSelector('.tiny-dropdown-menu', { state: 'visible' })
await menu.locator('.tiny-dropdown-item').nth(2).hover()
-await page.waitForTimeout(100)
+await page.waitForSelector('.tiny-dropdown-menu .tiny-dropdown-item', { state: 'visible' })
await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(0).hover()
+await page.waitForSelector('.tiny-dropdown-menu .tiny-dropdown-item:hover', { state: 'visible' })This change will make the test wait for specific elements to be visible after each interaction, which is more reliable than fixed timeouts.
|
||
| await expect(wrap).toHaveScreenshot('hover.png') | ||
| }) | ||
| }) | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { expect, test } from '@playwright/test' | ||
|
|
||
| test.describe('action-menu 组件xdesign规范', () => { | ||
| test('默认间距 --UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('action-menu#spacing') | ||
|
|
||
| const demo = page.locator('#spacing .pc-demo') | ||
| const actionMenu = demo.locator('.tiny-action-menu') | ||
| const dropdown = actionMenu.nth(0).locator('.tiny-dropdown') | ||
| const wrap = page.locator('.docs-tabs-wrap') | ||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||
|
|
||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('default.png') | ||
|
|
||
| await dropdown.locator('.tiny-dropdown__suffix-inner').hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-item').nth(2).hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(1).hover() | ||
|
|
||
| await expect(wrap).toHaveScreenshot('hover.png') | ||
| }) | ||
|
|
||
| test('自定义间距 --UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('action-menu#spacing') | ||
|
|
||
| const demo = page.locator('#spacing .pc-demo') | ||
| const actionMenu = demo.locator('.tiny-action-menu') | ||
| const dropdown = actionMenu.nth(1).locator('.tiny-dropdown') | ||
| const wrap = page.locator('.docs-tabs-wrap') | ||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||
|
|
||
| await dropdown.nth(0).locator('.tiny-dropdown__suffix-inner').hover() | ||
| await page.waitForTimeout(1000) | ||
| await menu.locator('.tiny-dropdown-item').nth(2).hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(1).hover() | ||
|
|
||
| await expect(wrap).toHaveScreenshot('spacing-hover.png') | ||
| }) | ||
| }) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { expect, test } from '@playwright/test' | ||
|
|
||
| test.describe('action-menu 组件xdesign规范', () => { | ||
| test('字段映射 --UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('action-menu#text-field') | ||
|
Comment on lines
+4
to
+6
There was a problem hiding this comment. 🛠️ Refactor suggestion Improve test case description and URL handling.
Here's a suggested change for the test case description: -test('字段映射 --UI截图', async ({ page }) => {
+test('Field mapping - UI screenshot', async ({ page }) => {For the URL, consider using a base URL configuration: // In your playwright.config.ts
use: {
baseURL: 'http://your-base-url.com/',
}
// Then in your test
await page.goto('/action-menu#text-field') |
||
|
|
||
| const demo = page.locator('#text-field .pc-demo') | ||
| const actionMenu = demo.locator('.tiny-action-menu') | ||
| const dropdown = actionMenu.locator('.tiny-dropdown') | ||
| const wrap = page.locator('.docs-tabs-wrap') | ||
| const menu = page.locator('body > .tiny-dropdown-menu').nth(0) | ||
|
|
||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('default.png') | ||
|
Comment on lines
+8
to
+15
There was a problem hiding this comment. 🛠️ Refactor suggestion Enhance element selection robustness. The current element selection uses class names and IDs, which might be brittle if the UI structure changes. Consider using Here's an example of how you could refactor some of the selectors: const demo = page.locator('[data-testid="text-field-demo"]')
const actionMenu = demo.locator('[data-testid="action-menu"]')
const dropdown = actionMenu.locator('[data-testid="dropdown"]')Then update your HTML to include these attributes: <div id="text-field" class="pc-demo" data-testid="text-field-demo">
<div class="tiny-action-menu" data-testid="action-menu">
<div class="tiny-dropdown" data-testid="dropdown">
<!-- ... -->
</div>
</div>
</div>This approach makes your tests less dependent on the specific structure and styling of your components. |
||
|
|
||
| await dropdown.locator('.tiny-dropdown__suffix-inner').hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-item').nth(2).hover() | ||
| await page.waitForTimeout(100) | ||
| await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(1).hover() | ||
|
|
||
| await expect(wrap).toHaveScreenshot('hover.png') | ||
|
Comment on lines
+17
to
+23
There was a problem hiding this comment. 🛠️ Refactor suggestion Replace fixed timeouts with Playwright's waiting mechanisms. Using fixed timeouts ( Consider replacing the timeouts with Playwright's await dropdown.locator('.tiny-dropdown__suffix-inner').hover()
await menu.waitForSelector('.tiny-dropdown-item:nth-child(3)')
await menu.locator('.tiny-dropdown-item').nth(2).hover()
await menu.waitForSelector('.tiny-dropdown-menu .tiny-dropdown-item:nth-child(2)')
await menu.locator('.tiny-dropdown-menu .tiny-dropdown-item').nth(1).hover()This approach ensures that the test waits for elements to be available before interacting with them, making the test more robust and less likely to fail due to timing issues. |
||
| }) | ||
| }) | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Replace
waitForTimeout()with more robust waiting mechanisms.While the interaction simulation is good, using
page.waitForTimeout()is generally discouraged as it can lead to flaky tests. Instead, consider waiting for specific events or state changes.Replace
waitForTimeout()calls with more specific waits. For example:await dropdown.locator('.tiny-dropdown__suffix-inner ').hover() -await page.waitForTimeout(100) +await page.waitForSelector('.tiny-dropdown-menu', { state: 'visible' }) await menu.locator('.tiny-dropdown-item').nth(2).hover() -await page.waitForTimeout(100) +await page.waitForSelector('.tiny-dropdown-item:hover', { state: 'visible' })This change will make the test more reliable and less dependent on arbitrary timing.