77 lines
3.0 KiB
TypeScript
77 lines
3.0 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
||
|
||
/**
|
||
* 偏好设置「布局」卡片回归 —— 针对 ERP 应用。
|
||
*
|
||
* 背景：原来三张卡片（侧边/双列/顶部）用的是 lucide 抽象图标，看不出布局差异。
|
||
* 改成 vben 那样的**布局示意图**（SVG 骨架图）后，需要确认：
|
||
* 1. 三张卡片都渲染出 SVG（不是空白 / 不是抽象图标）；
|
||
* 2. 点击第三张（顶部菜单）能真正切换布局；
|
||
* 3. 选中态描边生效（is-active）。
|
||
*/
|
||
|
||
const ERP_URL = process.env.ERP_URL ?? 'http://localhost:5090'
|
||
|
||
async function openPreferences(page: import('@playwright/test').Page) {
|
||
await page.goto(`${ERP_URL}/`)
|
||
// 顶栏的偏好设置按钮
|
||
await page.getByTitle('偏好设置').click()
|
||
// 抽屉里切到「布局」页签
|
||
await page.getByRole('tab', { name: '布局' }).or(page.getByText('布局', { exact: true })).first().click()
|
||
await page.waitForTimeout(300)
|
||
}
|
||
|
||
test.describe('ERP 偏好设置 - 布局卡片', () => {
|
||
test('三张布局卡片都渲染出示意图 SVG', async ({ page }) => {
|
||
await openPreferences(page)
|
||
|
||
const cards = page.locator('.pref-card--layout')
|
||
await expect(cards).toHaveCount(3)
|
||
|
||
// 每张卡片里都要有 SVG 骨架图，且不是 0 尺寸（防"渲染成空"）
|
||
for (let i = 0; i < 3; i++) {
|
||
const svg = cards.nth(i).locator('svg.pref-layout-icon')
|
||
await expect(svg).toHaveCount(1)
|
||
const box = await svg.boundingBox()
|
||
expect(box, `第 ${i + 1} 张卡片的示意图应有实际尺寸`).not.toBeNull()
|
||
expect(box!.width, `第 ${i + 1} 张示意图宽度应 > 40px`).toBeGreaterThan(40)
|
||
expect(box!.height, `第 ${i + 1} 张示意图高度应 > 25px`).toBeGreaterThan(25)
|
||
}
|
||
|
||
// 卡片标签
|
||
const labels = await page.locator('.pref-card--layout .pref-card__name').allTextContents()
|
||
expect(labels.join('|')).toContain('侧边菜单')
|
||
expect(labels.join('|')).toContain('双列菜单')
|
||
expect(labels.join('|')).toContain('顶部菜单')
|
||
})
|
||
|
||
test('点击「双列菜单」卡片能切换到双列布局', async ({ page }) => {
|
||
await openPreferences(page)
|
||
|
||
await page.locator('.pref-card--layout', { hasText: '双列菜单' }).click()
|
||
await page.waitForTimeout(500)
|
||
|
||
// 关掉抽屉看布局
|
||
await page.keyboard.press('Escape')
|
||
await page.waitForTimeout(400)
|
||
|
||
await expect(page.locator('.layout-mixed-rail')).toBeVisible()
|
||
await expect(page.locator('.layout-mixed-column')).toBeVisible()
|
||
})
|
||
|
||
test('点击「顶部菜单」卡片能切换回顶部菜单布局', async ({ page }) => {
|
||
await openPreferences(page)
|
||
|
||
await page.locator('.pref-card--layout', { hasText: '顶部菜单' }).click()
|
||
await page.waitForTimeout(500)
|
||
|
||
await page.keyboard.press('Escape')
|
||
await page.waitForTimeout(400)
|
||
|
||
await expect(page.locator('.layout--header-nav')).toHaveCount(1)
|
||
// 顶部布局下没有侧栏 / 图标栏
|
||
await expect(page.locator('.layout-sidebar')).toHaveCount(0)
|
||
await expect(page.locator('.layout-mixed-rail')).toHaveCount(0)
|
||
})
|
||
})
|