u

code/g3soft-libs/packages/ui/e2e/erp-layout-cards.spec.ts

@@ -0,0 +1,76 @@
+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)
+  })
+})