test: add time-line UI e2e test #47
Conversation
WalkthroughA new test file, Changes
Possibly related PRs
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
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: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (2)
tests/time-line/xdesign.spec.ts-snapshots/shape-chromium-win32.pngis excluded by!**/*.pngtests/time-line/xdesign.spec.ts-snapshots/status-chromium-win32.pngis excluded by!**/*.png
Files selected for processing (1)
- tests/time-line/xdesign.spec.ts (1 hunks)
Additional comments not posted (1)
tests/time-line/xdesign.spec.ts (1)
4-10: LGTM!The test follows a clear structure and includes good practices such as checking for page errors and ensuring the demo element is in the viewport before capturing the screenshot. The screenshot name aligns with the test name, making it easy to identify.
| test('圆点外观 --UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('time-line#shape') | ||
| const demo = page.locator('#shape .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('shape.png') | ||
| }) |
There was a problem hiding this comment.
LGTM, but consider refactoring to reduce code duplication.
The test follows the same good practices as the previous test, and the screenshot name aligns with the test name.
However, the test code is almost identical to the previous test, with only the page URL and screenshot name being different. Consider refactoring the common logic into a helper function to reduce code duplication and make the test suite easier to maintain.
Here's a suggested refactor:
async function testUIScreenshot(page, url, selector, screenshotName) {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto(url)
const demo = page.locator(selector)
await expect(demo).toBeInViewport()
await expect(demo).toHaveScreenshot(screenshotName)
}
test.describe('tabs 组件xdesign规范', () => {
test('节点状态 --UI截图', async ({ page }) => {
await testUIScreenshot(page, 'time-line#status', '#status .pc-demo', 'status.png')
})
test('圆点外观 --UI截图', async ({ page }) => {
await testUIScreenshot(page, 'time-line#shape', '#shape .pc-demo', 'shape.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