test(e2e): add statisic UI e2e test #78
Conversation
WalkthroughThis pull request introduces a new test suite for the Changes
Possibly related PRs
Suggested labels
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
🧹 Outside diff range and nitpick comments (4)
tests/statistic/xdesign.spec.ts (4)
1-3: Consider using English for the test suite name.The test suite name is currently in Chinese. For better internationalization and consistency across the codebase, consider using English for the test suite name.
Suggested change:
-test.describe('statistic组件xdesign规范', () => { +test.describe('Statistic Component XDesign Specification', () => {
4-10: Approve test structure and suggest using English for the test name.The test structure is well-organized and follows good practices. The error handler is a valuable addition to catch unexpected errors. However, consider using English for the test name to improve internationalization and consistency.
Suggested change:
- test('默认--UI截图', async ({ page }) => { + test('Default - UI Screenshot', async ({ page }) => {
12-18: Approve test structure and suggest using English for the test name.The test structure is consistent with the previous test, which is good for maintainability. However, consider using English for the test name to improve internationalization and consistency.
Suggested change:
- test('前后缀--UI截图', async ({ page }) => { + test('Prefix and Suffix - UI Screenshot', async ({ page }) => {
20-26: Approve test structure and suggest using English for the test name.The test structure remains consistent with the previous tests, which is good for maintainability. However, consider using English for the test name to improve internationalization and consistency.
Suggested change:
- test('标题--UI截图', async ({ page }) => { + test('Title - UI Screenshot', async ({ page }) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (3)
tests/statistic/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.pngis excluded by!**/*.pngtests/statistic/xdesign.spec.ts-snapshots/prefix-suffix-slot-chromium-win32.pngis excluded by!**/*.pngtests/statistic/xdesign.spec.ts-snapshots/statistic-slot-chromium-win32.pngis excluded by!**/*.png
📒 Files selected for processing (1)
- tests/statistic/xdesign.spec.ts (1 hunks)
🧰 Additional context used
| import { expect, test } from '@playwright/test' | ||
|
|
||
| test.describe('statistic组件xdesign规范', () => { | ||
| test('默认--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('statistic#basic-usage') | ||
| const demo = page.locator('#basic-usage .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('basic-usage.png') | ||
| }) | ||
|
|
||
| test('前后缀--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('statistic#prefix-suffix-slot') | ||
| const demo = page.locator('#prefix-suffix-slot .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('prefix-suffix-slot.png') | ||
| }) | ||
|
|
||
| test('标题--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('statistic#statistic-slot') | ||
| const demo = page.locator('#statistic-slot .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('statistic-slot.png') | ||
| }) | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider refactoring to reduce code duplication.
All three tests follow the same pattern, which presents an opportunity for refactoring to reduce code duplication and improve maintainability.
Consider creating a helper function to encapsulate the common test logic. Here's a suggested refactor:
import { expect, test } from '@playwright/test'
function testStatisticScreenshot(name: string, anchor: string, filename: string) {
test(`${name} - UI Screenshot`, async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto(`statistic#${anchor}`)
const demo = page.locator(`#${anchor} .pc-demo`)
await expect(demo).toBeInViewport()
await expect(demo).toHaveScreenshot(filename)
})
}
test.describe('Statistic Component XDesign Specification', () => {
testStatisticScreenshot('Default', 'basic-usage', 'basic-usage.png')
testStatisticScreenshot('Prefix and Suffix', 'prefix-suffix-slot', 'prefix-suffix-slot.png')
testStatisticScreenshot('Title', 'statistic-slot', 'statistic-slot.png')
})This refactoring reduces code duplication, improves maintainability, and makes it easier to add new test cases in the future.
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
statisticcomponent to capture UI screenshots across different states.