From e58472284d27ffda1f05823a69b557ad5f9589f2 Mon Sep 17 00:00:00 2001
From: James-9696 <hujm969696@163.com>
Date: Wed, 8 Jan 2025 02:40:16 -0800
Subject: [PATCH] fix: modify e2e test cases for the divider component

---
 .../demos/pc/app/divider/basic-usage.spec.ts  |  8 ++++++++
 .../pc/app/divider/content-position.spec.ts   | 12 +++++-------
 .../demos/pc/app/divider/custom-style.spec.ts | 19 ++++++-------------
 .../demos/pc/app/divider/direction.spec.ts    | 10 ++++------
 .../demos/pc/app/divider/divider-type.spec.ts | 10 ++++++++++
 .../sites/demos/pc/app/divider/status.spec.ts | 12 ++++++++++++
 6 files changed, 45 insertions(+), 26 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/divider/basic-usage.spec.ts
 create mode 100644 examples/sites/demos/pc/app/divider/divider-type.spec.ts
 create mode 100644 examples/sites/demos/pc/app/divider/status.spec.ts

diff --git a/examples/sites/demos/pc/app/divider/basic-usage.spec.ts b/examples/sites/demos/pc/app/divider/basic-usage.spec.ts
new file mode 100644
index 0000000000..26065b9925
--- /dev/null
+++ b/examples/sites/demos/pc/app/divider/basic-usage.spec.ts
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  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)')
+})
diff --git a/examples/sites/demos/pc/app/divider/content-position.spec.ts b/examples/sites/demos/pc/app/divider/content-position.spec.ts
index ef5dd55bd7..730ab0a633 100644
--- a/examples/sites/demos/pc/app/divider/content-position.spec.ts
+++ b/examples/sites/demos/pc/app/divider/content-position.spec.ts
@@ -1,12 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('Divider 文案位置', async ({ page }) => {
+test('分割线文案位置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   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()).toHaveCSS('left', '133px')
+  await expect(left.nth(1)).toHaveCSS('left', '304.5px')
+  await expect(left.nth(2)).toHaveCSS('right', '80px')
 })
diff --git a/examples/sites/demos/pc/app/divider/custom-style.spec.ts b/examples/sites/demos/pc/app/divider/custom-style.spec.ts
index be21a3e4e9..d930302970 100644
--- a/examples/sites/demos/pc/app/divider/custom-style.spec.ts
+++ b/examples/sites/demos/pc/app/divider/custom-style.spec.ts
@@ -1,19 +1,12 @@
 // divider#custom-style
 import { test, expect } from '@playwright/test'
 
-test('Divider 样式', async ({ page }) => {
+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')
+  await expect(dividerText.first()).toHaveText('字体颜色')
+  await expect(dividerText.nth(1)).toHaveText('文案背景')
+  await expect(dividerText.nth(2)).toHaveText('字体大小')
+  await expect(dividerText.nth(3)).toHaveText('高度及边距')
 })
diff --git a/examples/sites/demos/pc/app/divider/direction.spec.ts b/examples/sites/demos/pc/app/divider/direction.spec.ts
index b2f50a30ce..0bc6ca5068 100644
--- a/examples/sites/demos/pc/app/divider/direction.spec.ts
+++ b/examples/sites/demos/pc/app/divider/direction.spec.ts
@@ -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())
   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)')
 })
diff --git a/examples/sites/demos/pc/app/divider/divider-type.spec.ts b/examples/sites/demos/pc/app/divider/divider-type.spec.ts
new file mode 100644
index 0000000000..16f7073b2e
--- /dev/null
+++ b/examples/sites/demos/pc/app/divider/divider-type.spec.ts
@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('分割线类型', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('divider#divider-type')
+  const dividerText = page.locator('.tiny-divider__text')
+  await expect(dividerText.first()).toHaveText('solid线')
+  await expect(dividerText.nth(1)).toHaveText('dashed线')
+  await expect(dividerText.nth(2)).toHaveText('dotted线')
+})
diff --git a/examples/sites/demos/pc/app/divider/status.spec.ts b/examples/sites/demos/pc/app/divider/status.spec.ts
new file mode 100644
index 0000000000..7d6450c864
--- /dev/null
+++ b/examples/sites/demos/pc/app/divider/status.spec.ts
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('分割线状态', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('divider#status')
+  const dividerText = page.locator('.tiny-divider__text')
+  await expect(dividerText.first()).toHaveText('default')
+  await expect(dividerText.nth(1)).toHaveText('success')
+  await expect(dividerText.nth(2)).toHaveText('error')
+  await expect(dividerText.nth(3)).toHaveText('warning')
+  await expect(dividerText.nth(4)).toHaveText('info')
+})