Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(divider): [divider] modify e2e test cases for the divider component #2766

Merged
merged 2 commits into from
Jan 9, 2025
+48 −26
Merged

fix(divider): [divider] modify e2e test cases for the divider component #2766

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e584722
fix: modify e2e test cases for the divider component
James-9696 Jan 8, 2025
bc9bc47
fix: modify e2e test cases for the divider component
James-9696 Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions examples/sites/demos/pc/app/divider/basic-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { test, expect } from '@playwright/test'

test('基本用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that the page error listener is correctly handling exceptions. If any exceptions are expected, they should be explicitly handled or documented.

await page.goto('divider#basic-usage')
const dividerCss = page.locator('.tiny-divider .tiny-divider--default, .tiny-divider.tiny-divider--default')
await expect(dividerCss).toHaveCSS('border-color', 'rgb(219, 219, 219)')
})
12 changes: 5 additions & 7 deletions examples/sites/demos/pc/app/divider/content-position.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { test, expect } from '@playwright/test'

test('Divider 文案位置', async ({ page }) => {
test('分割线文案位置', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that the page error listener is correctly handling exceptions. If any exceptions are expected, they should be explicitly handled or documented.

await page.goto('divider#content-position')
await page.getByText('文案在左侧').click()
await page.getByText('文案', { exact: true }).first().click()
await page.getByText('文案在中间').click()
await page.getByText('文案', { exact: true }).nth(1).click()
await page.getByText('文案在右侧').click()
await page.getByText('文案', { exact: true }).nth(2).click()
const left = page.locator('.tiny-divider__text')
await expect(left.first()).toHaveText('左侧且偏移20%')
await expect(left.nth(1)).toHaveText('中间')
await expect(left.nth(2)).toHaveCSS('right', '80px')
Comment on lines +6 to +9
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve test robustness and consistency.

Several issues need attention:

  1. The locator is too generic and could match unintended elements
  2. Hardcoded pixel values make the test brittle
  3. Inconsistent validation approach between elements

Consider this more robust approach:

-  const left = page.locator('.tiny-divider__text')
-  await expect(left.first()).toHaveText('左侧且偏移20%')
-  await expect(left.nth(1)).toHaveText('中间')
-  await expect(left.nth(2)).toHaveCSS('right', '80px')
+  // More specific locators
+  const leftDivider = page.locator('.tiny-divider__text[style*="left"]')
+  const centerDivider = page.locator('.tiny-divider__text[style*="center"]')
+  const rightDivider = page.locator('.tiny-divider__text[style*="right"]')
+
+  // Validate text content
+  await expect(leftDivider).toHaveText('左侧且偏移20%')
+  await expect(centerDivider).toHaveText('中间')
+
+  // Validate positioning
+  await expect(leftDivider).toHaveCSS('position', 'absolute')
+  await expect(leftDivider).toHaveCSS('left', '20%')
+  await expect(centerDivider).toHaveCSS('position', 'absolute')
+  await expect(centerDivider).toHaveCSS('left', '50%')
+  await expect(rightDivider).toHaveCSS('position', 'absolute')
+  await expect(rightDivider).toHaveCSS('right', expect.stringMatching(/\d+%/))
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const left = page.locator('.tiny-divider__text')
await expect(left.first()).toHaveText('左侧且偏移20%')
await expect(left.nth(1)).toHaveText('中间')
await expect(left.nth(2)).toHaveCSS('right', '80px')
// More specific locators
const leftDivider = page.locator('.tiny-divider__text[style*="left"]')
const centerDivider = page.locator('.tiny-divider__text[style*="center"]')
const rightDivider = page.locator('.tiny-divider__text[style*="right"]')
// Validate text content
await expect(leftDivider).toHaveText('左侧且偏移20%')
await expect(centerDivider).toHaveText('中间')
// Validate positioning
await expect(leftDivider).toHaveCSS('position', 'absolute')
await expect(leftDivider).toHaveCSS('left', '20%')
await expect(centerDivider).toHaveCSS('position', 'absolute')
await expect(centerDivider).toHaveCSS('left', '50%')
await expect(rightDivider).toHaveCSS('position', 'absolute')
await expect(rightDivider).toHaveCSS('right', expect.stringMatching(/\d+%/))

})
22 changes: 9 additions & 13 deletions examples/sites/demos/pc/app/divider/custom-style.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
// divider#custom-style
import { test, expect } from '@playwright/test'

test('Divider 样式', async ({ page }) => {
test('自定义样式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that the page error listener is correctly handling exceptions. If any exceptions are expected, they should be explicitly handled or documented.

await page.goto('divider#custom-style')
await page.getByText('自定义分隔线颜色').click()
await page.locator('.tiny-divider').first().click()
await page.getByText('自定义分隔线的样式').click()
await page.locator('.pc-demo > div:nth-child(4)').click()
await page.getByText('自定义文案的颜色').click()
await page
.locator('div')
.filter({ hasText: /^文案$/ })
.first()
.click()
await page.getByText('文案的背景颜色', { exact: true }).click()
await page.getByText('文案', { exact: true }).nth(1).click()
const dividerText = page.locator('.tiny-divider__text')
Comment on lines +4 to +7
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider adding visual validation for custom styles.

While validating text content is good, this test for custom styles should also verify the actual CSS properties being customized (font color, background, font size, height, and margins).

Add visual validation, for example:

 test('自定义样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('divider#custom-style')
   const dividerText = page.locator('.tiny-divider__text')
+  // Verify custom font color
+  await expect(dividerText.first()).toHaveCSS('color', 'rgb(64, 158, 255)')
+  // Verify custom background
+  await expect(dividerText.nth(1)).toHaveCSS('background-color', 'rgb(240, 249, 235)')
+  // Verify custom font size
+  await expect(dividerText.nth(2)).toHaveCSS('font-size', '20px')
+  // Verify custom height and margin
+  const divider = page.locator('.tiny-divider').nth(3)
+  await expect(divider).toHaveCSS('margin', '32px 0')
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
test('自定义样式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('divider#custom-style')
await page.getByText('自定义分隔线颜色').click()
await page.locator('.tiny-divider').first().click()
await page.getByText('自定义分隔线的样式').click()
await page.locator('.pc-demo > div:nth-child(4)').click()
await page.getByText('自定义文案的颜色').click()
await page
.locator('div')
.filter({ hasText: /^文案$/ })
.first()
.click()
await page.getByText('文案的背景颜色', { exact: true }).click()
await page.getByText('文案', { exact: true }).nth(1).click()
const dividerText = page.locator('.tiny-divider__text')
test('自定义样式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('divider#custom-style')
const dividerText = page.locator('.tiny-divider__text')
// Verify custom font color
await expect(dividerText.first()).toHaveCSS('color', 'rgb(64, 158, 255)')
// Verify custom background
await expect(dividerText.nth(1)).toHaveCSS('background-color', 'rgb(240, 249, 235)')
// Verify custom font size
await expect(dividerText.nth(2)).toHaveCSS('font-size', '20px')
// Verify custom height and margin
const divider = page.locator('.tiny-divider').nth(3)
await expect(divider).toHaveCSS('margin', '32px 0')

const dividerMargin = page.locator('.tiny-divider')
const dividerLine = page.locator('.tiny-divider-line').first()
await expect(dividerLine.first()).toHaveCSS('border-color', 'rgb(20, 118, 255)')
await expect(dividerText.first()).toHaveCSS('color', 'rgb(20, 118, 255)')
await expect(dividerText.nth(1)).toHaveCSS('background-color', 'rgb(20, 118, 255)')
await expect(dividerText.nth(2)).toHaveCSS('font-size', '16px')
await expect(dividerMargin.nth(4)).toHaveCSS('height', '40px')
})
10 changes: 4 additions & 6 deletions examples/sites/demos/pc/app/divider/direction.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
// divider#custom-style
import { test, expect } from '@playwright/test'

test('Divider 分隔线', async ({ page }) => {
test('垂直分割线', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that the page error listener is correctly handling exceptions. If any exceptions are expected, they should be explicitly handled or documented.

await page.goto('divider#direction')
await page.getByText('分隔线', { exact: true }).first().click()
await page.locator('.tiny-divider').first().click()
await page.getByText('分隔线', { exact: true }).nth(1).click()
await page.locator('.pc-demo > div:nth-child(4)').click()
await page.getByText('分隔线', { exact: true }).nth(2).click()
const dividerCss = page.locator('.tiny-divider--vertical')
await expect(dividerCss.first()).toHaveCSS('vertical-align', 'middle')
await expect(dividerCss.first()).toHaveCSS('border-left', '1px solid rgb(219, 219, 219)')
})
10 changes: 10 additions & 0 deletions examples/sites/demos/pc/app/divider/divider-type.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { test, expect } from '@playwright/test'

test('分割线类型', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that the page error listener is correctly handling exceptions. If any exceptions are expected, they should be explicitly handled or documented.

await page.goto('divider#divider-type')
const dividerText = page.locator('.tiny-divider--default')
await expect(dividerText.first()).toHaveCSS('border-top-style', 'solid')
await expect(dividerText.nth(1)).toHaveCSS('border-top-style', 'dashed')
await expect(dividerText.nth(2)).toHaveCSS('border-top-style', 'dotted')
})
12 changes: 12 additions & 0 deletions examples/sites/demos/pc/app/divider/status.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { test, expect } from '@playwright/test'

test('分割线状态', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that the page error listener is correctly handling exceptions. If any exceptions are expected, they should be explicitly handled or documented.

await page.goto('divider#status')
const dividerText = page.locator('.tiny-divider-line')
await expect(dividerText.first()).toHaveClass(/tiny-divider--default/)
await expect(dividerText.nth(1)).toHaveClass(/tiny-divider--success/)
await expect(dividerText.nth(2)).toHaveClass(/tiny-divider--error/)
await expect(dividerText.nth(3)).toHaveClass(/tiny-divider--warning/)
await expect(dividerText.nth(4)).toHaveClass(/tiny-divider--info/)
})
Loading