test(alert): [alert] update alert E2E test (#931)

examples/sites/demos/pc/app/alert/basic-usage.spec.ts

@@ -1,11 +1,24 @@
 import { test, expect } from '@playwright/test'
 
-test('Alert 基本用法', async ({ page }) => {
+test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('alert#base')
+  await page.goto('alert#basic-usage')
+
+  const demo = page.locator('#basic-usage')
+  const alertBox = demo.locator('.tiny-alert')
+
+  // 颜色边框正确
+  await expect(alertBox.first()).toHaveCSS('background-color', 'rgb(235, 246, 255)')
+  await expect(alertBox.first()).toHaveCSS('border-bottom-color', 'rgb(190, 204, 250)')
+  await expect(alertBox.nth(1)).toHaveCSS('background-color', 'rgb(255, 238, 237)')
+  await expect(alertBox.nth(1)).toHaveCSS('border-bottom-color', 'rgb(255, 188, 186)')
+  await expect(alertBox.nth(2)).toHaveCSS('background-color', 'rgb(237, 255, 249)')
+  await expect(alertBox.nth(2)).toHaveCSS('border-bottom-color', 'rgb(172, 242, 220)')
+  await expect(alertBox.nth(3)).toHaveCSS('background-color', 'rgb(255, 243, 232)')
+  await expect(alertBox.nth(3)).toHaveCSS('border-bottom-color', 'rgb(255, 208, 166)')
 
   // 警告可见
-  const alertSuccess = page.locator('.tiny-alert--success')
+  const alertSuccess = demo.locator('.tiny-alert--success')
   await expect(alertSuccess).toBeVisible()
 
   // 状态图标存在

examples/sites/demos/pc/app/alert/center.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('测试 Alert 提示内容是否居中', async ({ page }) => {
+test('文字居中', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('alert#center')
 

examples/sites/demos/pc/app/alert/custom-close.spec.ts

@@ -1,13 +1,14 @@
 import { test, expect } from '@playwright/test'
 
-test('自定义关闭图标，控制警告的再次显示或隐藏', async ({ page }) => {
+test('关闭按钮', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('alert#custom-close')
 
-  const alertSuccess = page.locator('.tiny-alert--success')
-  const defaultClose = alertSuccess.locator('.tiny-alert__close')
-  const customClose = alertSuccess.locator('.icon')
-  const btn = page.getByRole('button', { name: '显示或隐藏警告' })
+  const demo = page.locator('#custom-close')
+  const customAlert = demo.locator('.tiny-alert').first()
+  const defaultClose = customAlert.locator('.tiny-alert__close')
+  const customClose = customAlert.locator('.icon')
+  const switchBtn = demo.locator('.tiny-switch')
 
   // 自定义关闭图标
   await expect(defaultClose).not.toBeVisible()
@@ -15,40 +16,40 @@ test('自定义关闭图标，控制警告的再次显示或隐藏', async ({ pa
 
   // 点击自定义关闭按钮，警告消失
   await customClose.click()
-  await expect(alertSuccess).toBeHidden()
-  await btn.click()
+  await expect(customAlert).toBeHidden()
+  await switchBtn.click()
 
   // 点击按钮控制警告消失或隐藏
-  await expect(alertSuccess).toBeVisible()
-  await btn.click()
-  await expect(alertSuccess).toBeHidden()
-  await btn.click()
-  await expect(alertSuccess).toBeVisible()
-})
-
-test('关闭按钮事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('alert#custom-close')
-
-  const alertWarning = page.locator('.tiny-alert')
-  const close = alertWarning.locator('.tiny-alert__close')
-
-  // 点击关闭后警告消失，自定义事件modalBox提示出现
-  await close.click()
-  await expect(alertWarning).toBeHidden()
-  await expect(page.locator('.tiny-modal__box')).toBeVisible()
+  await expect(customAlert).toBeVisible()
+  await switchBtn.click()
+  await expect(customAlert).toBeHidden()
+  await switchBtn.click()
+  await expect(customAlert).toBeVisible()
 })
 
 test('自定义关闭按钮文本', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('alert#custom-close')
 
-  const alertError = page.locator('.tiny-alert')
+  const alertError = page.locator('.tiny-alert').nth(1)
   const closeText = alertError.locator('.tiny-alert__close')
 
   // 自定义按钮文字
-  await expect(alertError.locator('.tiny-alert__close')).not.toBeVisible()
-  await expect(closeText).toBeVisible()
+  await expect(closeText).not.toBeVisible()
+  await expect(alertError.locator('.is-custom').getByText('关闭')).toBeVisible()
+})
+
+test('关闭按钮事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('alert#custom-close')
+
+  const alertWarning = page.locator('.tiny-alert--warning')
+  const close = alertWarning.locator('.tiny-alert__close')
+
+  // 点击关闭后警告消失，自定义事件modalBox提示出现
+  await close.click()
+  await expect(alertWarning).not.toBeVisible()
+  await expect(page.locator('.tiny-modal__box').getByText('关闭了')).toBeVisible()
 })
 
 test('不可关闭警告', async ({ page }) => {

examples/sites/demos/pc/app/alert/icon.spec.ts

@@ -5,9 +5,10 @@ test('测试 Alert 自定义图标', async ({ page }) => {
   await page.goto('alert#icon')
 
   // 自定义图标和默认图标不同
-  const iconCustomAlert = page.locator('.tiny-alert--success').nth(0)
-  const alert = page.locator('.tiny-alert--success').nth(1)
+  const iconCustomAlert = page.locator('.tiny-alert').nth(0)
 
-  await expect(iconCustomAlert.locator('.tiny-alert__icon path')).toHaveCount(2)
-  await expect(alert.locator('.tiny-alert__icon path')).toHaveCount(3)
+  await expect(iconCustomAlert.locator('.tiny-alert__icon:nth-child(1) path')).toHaveAttribute(
+    'd',
+    /M13 3v1h-2V3h2zm-1.+1h2v-2h-2c-1\.4 0-2\.8-\.5-4-1\.3z/
+  )
 })

examples/sites/demos/pc/app/alert/show-icon.spec.ts

@@ -4,6 +4,6 @@ test('测试 Alert 不显示图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('alert#show-icon')
 
-  const noIconAlert = page.locator('.tiny-alert')
-  await expect(noIconAlert.locator('.tiny-alert__icon')).toHaveCount(0)
+  const noIconAlert = page.locator('.tiny-alert').nth(1)
+  await expect(noIconAlert.locator('.tiny-alert__icon')).toHaveCount(1)
 })

examples/sites/demos/pc/app/alert/size.spec.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('测试 Alert 大尺寸', async ({ page }) => {
+test('尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('alert#size')
 
   const largeAlert = page.locator('.tiny-alert').nth(1)
   await expect(largeAlert).toHaveClass(/tiny-alert--large/)
-  await expect(largeAlert).not.toHaveCSS('height', 'var(--ti-alert-normal-height)')
+  await expect(largeAlert).toHaveCSS('height', '68px')
 })

examples/sites/demos/pc/app/alert/title.spec.ts

@@ -8,4 +8,5 @@ test('测试 Alert 自定义标题', async ({ page }) => {
   const alert = page.locator('.tiny-alert--large').first()
   const title = alert.locator('.tiny-alert__title')
   await expect(title).toHaveCount(1)
+  await expect(title).toHaveText('通过属性设置自定义 title')
 })