test(button-group): add button-group e2e UI test #60
Conversation
WalkthroughThe pull request introduces a new file Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Outside diff range and nitpick comments (2)
tests/button-group/xdesign.spec.ts (2)
84-96: Well-implemented test for buttons with corner marksThe test case effectively captures the visual appearance of buttons with corner marks (sup) in both default and hover states. This is important for ensuring correct styling of these specialized buttons.
Consider adding a test for the interaction between the corner mark and the button:
const buttonWithSup = demo.getByRole('button', { name: '图标' }).first(); await buttonWithSup.click(); // Add assertions to verify any expected behavior when a button with a corner mark is clicked await expect(demo).toHaveScreenshot('sup-clicked.png');
1-97: Comprehensive and well-structured test suite for button-group componentThis test suite provides excellent coverage of the button-group component's visual aspects, utilizing Playwright effectively for visual regression testing. The consistent structure across test cases enhances maintainability.
To further improve the test suite:
- Consider adding more interaction-based tests, especially for functional elements like the "show more" and "edit" buttons.
- Implement assertions to verify state changes or DOM modifications after interactions.
- Add tests for keyboard navigation and accessibility features of the button group.
To implement these improvements, you could:
- Use
toHaveAttributeortoHaveClassto verify state changes after interactions.- Utilize Playwright's keyboard actions to test keyboard navigation.
- Incorporate accessibility testing using Playwright's built-in accessibility testing features or by integrating with tools like axe-core.
Example:
// Keyboard navigation test await page.keyboard.press('Tab'); const focusedButton = await page.evaluate(() => document.activeElement.textContent); expect(focusedButton).toBe('Expected Button Text'); // Accessibility test const accessibilityScanResults = await page.accessibility.snapshot(); expect(accessibilityScanResults.violations).toHaveLength(0);
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (13)
tests/button-group/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.pngis excluded by!**/*.pngtests/button-group/xdesign.spec.ts-snapshots/button-group-multiple-chromium-win32.pngis excluded by!**/*.pngtests/button-group/xdesign.spec.ts-snapshots/disabled-chromium-win32.pngis excluded by!**/*.pngtests/button-group/xdesign.spec.ts-snapshots/hover-chromium-win32.pngis excluded by!**/*.pngtests/button-group/xdesign.spec.ts-snapshots/multiple-hover-chromium-win32.pngis excluded by!**/*.pngtests/button-group/xdesign.spec.ts-snapshots/plain-chromium-win32.pngis excluded by!**/*.pngtests/button-group/xdesign.spec.ts-snapshots/plain-hover-chromium-win32.pngis excluded by!**/*.pngtests/button-group/xdesign.spec.ts-snapshots/show-edit-chromium-win32.pngis excluded by!**/*.pngtests/button-group/xdesign.spec.ts-snapshots/show-more-chromium-win32.pngis excluded by!**/*.pngtests/button-group/xdesign.spec.ts-snapshots/size-chromium-win32.pngis excluded by!**/*.pngtests/button-group/xdesign.spec.ts-snapshots/size-hover-chromium-win32.pngis excluded by!**/*.pngtests/button-group/xdesign.spec.ts-snapshots/sup-chromium-win32.pngis excluded by!**/*.pngtests/button-group/xdesign.spec.ts-snapshots/sup-hover-chromium-win32.pngis excluded by!**/*.png
Files selected for processing (1)
- tests/button-group/xdesign.spec.ts (1 hunks)
Additional comments not posted (3)
tests/button-group/xdesign.spec.ts (3)
4-16: Well-structured test case for default button-group UIThe test case effectively captures screenshots for both default and hover states, which is excellent for visual regression testing. Good use of Playwright methods and error handling.
40-52: Well-implemented test for plain buttonsThe test case effectively captures the visual appearance of plain buttons in both default and hover states. This is crucial for ensuring the correct styling of plain buttons.
70-82: Comprehensive test for multi-line button groupsThe test case effectively captures the visual appearance of multi-line button groups in both default and hover states. This is crucial for ensuring correct layout and styling of complex button group arrangements.
| test('组件尺寸大小--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('button-group#size') | ||
| const demo = page.locator('#size .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('size.png') | ||
|
|
||
| // hover 时截图 | ||
| const button = demo.getByRole('button', { name: 'Button2' }).first() | ||
| await button.hover() | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('size-hover.png') | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider expanding size variation testing
The test case effectively captures screenshots for different button-group sizes. However, to ensure comprehensive coverage:
Consider capturing hover states for buttons in each size category. This would provide a more thorough visual regression test for all size variations. For example:
const sizes = ['small', 'medium', 'large'];
for (const size of sizes) {
const button = demo.getByRole('button', { name: 'Button2' }).filter({ hasText: size });
await button.hover();
await expect(demo).toHaveScreenshot(`size-${size}-hover.png`);
}| test('禁用状态--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('button-group#disabled') | ||
| const demo = page.locator('#disabled .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('disabled.png') | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance disabled state testing
The test case captures the visual appearance of disabled buttons, which is good. To improve test coverage:
Consider adding an interaction test to ensure that disabled buttons don't respond to clicks. For example:
const disabledButton = demo.getByRole('button', { name: 'Disabled', disabled: true });
await expect(disabledButton).toBeDisabled();
await disabledButton.click({ force: true });
// Add an assertion here to verify that no action was performed| test('显示更多按钮--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('button-group#show-more') | ||
| const demo = page.locator('#show-more .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('show-more.png') | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Expand testing for show more button functionality
While the test captures the visual appearance of the show more button, it doesn't verify its functionality.
Consider adding an interaction test to ensure the show more button works correctly:
const showMoreButton = demo.getByRole('button', { name: 'Show More' });
await showMoreButton.click();
// Add assertions to verify that additional content is displayed
await expect(demo).toHaveScreenshot('show-more-expanded.png');| test('编辑按钮--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('button-group#show-edit') | ||
| const demo = page.locator('#show-edit .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('show-edit.png') | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance edit button testing
The test case captures the visual appearance of the edit button, which is good. To improve test coverage:
- Add a hover state test:
const editButton = demo.getByRole('button', { name: 'Edit' });
await editButton.hover();
await expect(demo).toHaveScreenshot('show-edit-hover.png');- Consider adding an interaction test to verify the edit functionality:
await editButton.click();
// Add assertions to verify that the edit mode is activated
await expect(demo).toHaveScreenshot('show-edit-active.png');
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Bug Fixes