diff --git a/examples/sites/demos/pc/app/alert/basic-usage.spec.ts b/examples/sites/demos/pc/app/alert/basic-usage.spec.ts index e31300586..a565fce55 100644 --- a/examples/sites/demos/pc/app/alert/basic-usage.spec.ts +++ b/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() // 状态图标存在 diff --git a/examples/sites/demos/pc/app/alert/center.spec.ts b/examples/sites/demos/pc/app/alert/center.spec.ts index c6e654b26..72d3db221 100644 --- a/examples/sites/demos/pc/app/alert/center.spec.ts +++ b/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') diff --git a/examples/sites/demos/pc/app/alert/custom-close.spec.ts b/examples/sites/demos/pc/app/alert/custom-close.spec.ts index 77b87821b..0889ee87f 100644 --- a/examples/sites/demos/pc/app/alert/custom-close.spec.ts +++ b/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 }) => { diff --git a/examples/sites/demos/pc/app/alert/icon.spec.ts b/examples/sites/demos/pc/app/alert/icon.spec.ts index 6a5be0091..0c92146e1 100644 --- a/examples/sites/demos/pc/app/alert/icon.spec.ts +++ b/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/ + ) }) diff --git a/examples/sites/demos/pc/app/alert/show-icon.spec.ts b/examples/sites/demos/pc/app/alert/show-icon.spec.ts index 462421d9c..d3225dc37 100644 --- a/examples/sites/demos/pc/app/alert/show-icon.spec.ts +++ b/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) }) diff --git a/examples/sites/demos/pc/app/alert/size.spec.ts b/examples/sites/demos/pc/app/alert/size.spec.ts index b579504f2..4f1d53262 100644 --- a/examples/sites/demos/pc/app/alert/size.spec.ts +++ b/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') }) diff --git a/examples/sites/demos/pc/app/alert/title.spec.ts b/examples/sites/demos/pc/app/alert/title.spec.ts index 21c2dec3f..38ecaf6ce 100644 --- a/examples/sites/demos/pc/app/alert/title.spec.ts +++ b/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') })