test(e2e): add guide UI e2e test #70
Conversation
WalkthroughA new test suite has been added for the Changes
Possibly related PRs
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: 0
🧹 Outside diff range and nitpick comments (3)
tests/guide/xdesign.spec.ts (3)
1-3: Consider using English for test descriptionsThe test suite description is currently in Chinese. For better international collaboration and maintainability, consider using English for all test descriptions and comments.
-test.describe('guide组件xdesign规范', () => { +test.describe('Guide component xdesign specifications', () => {
4-24: Good test coverage, with some suggestions for improvementThe test case covers important interactions and visual states of the guide component, which is great. Here are some suggestions to enhance the test:
- Add a cleanup step at the end of the test to close the guide.
- Use constants for repeated selectors to improve maintainability.
- Add comments in English to explain the purpose of each section.
Here's a refactored version of the test incorporating these suggestions:
test('Default--UI screenshot', async ({ page }) => { // Constants for selectors const GUIDE_SELECTOR = '.tiny-guide.shepherd-element'; const CLOSE_ICON_SELECTOR = '.shepherd-cancel-icon span'; // Error handling page.on('pageerror', (exception) => expect(exception).toBeNull()); // Navigate to the basic usage example await page.goto('guide#basic-usage'); const demo = page.locator('#basic-usage .pc-demo'); // Start the guide await demo.getByRole('button', { name: '开始引导' }).click(); const guide = page.locator(GUIDE_SELECTOR); // Check basic usage state await expect(guide).toBeInViewport(); await expect(guide).toHaveScreenshot('basic-usage.png'); // Check close button hover state const closeIcon = guide.locator(CLOSE_ICON_SELECTOR); await closeIcon.hover(); await expect(guide).toBeInViewport(); await expect(guide).toHaveScreenshot('hover-icon.png'); // Check next button hover state const nextBtn = guide.getByRole('button', { name: '下一步' }); await nextBtn.hover(); await expect(guide).toBeInViewport(); await expect(guide).toHaveScreenshot('hover-btn.png'); // Cleanup: Close the guide await closeIcon.click(); await expect(guide).not.toBeVisible(); });This refactored version improves readability, maintainability, and adds a cleanup step.
1-25: Summary: Good addition of e2e tests with room for improvementThis new file adds valuable end-to-end tests for the guide UI component, which aligns well with the PR objectives. The test covers basic functionality and visual states, enhancing the overall test coverage of the project.
However, to fully comply with the project's contribution guidelines, please ensure that:
- The commit message is properly formatted.
- Any necessary documentation updates are made.
- The PR description is updated with more details about the changes and their impact.
Additionally, consider implementing the suggested improvements to enhance the test's readability, maintainability, and robustness.
To further improve the testing architecture:
- Consider creating a separate configuration file for test constants and selectors.
- Implement helper functions for common operations like starting and closing the guide.
- If more tests are added in the future, consider organizing them into separate files based on functionality.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (3)
tests/guide/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.pngis excluded by!**/*.pngtests/guide/xdesign.spec.ts-snapshots/hover-btn-chromium-win32.pngis excluded by!**/*.pngtests/guide/xdesign.spec.ts-snapshots/hover-icon-chromium-win32.pngis excluded by!**/*.png
📒 Files selected for processing (1)
- tests/guide/xdesign.spec.ts (1 hunks)
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