all

2026-04-08 21:26:18 +08:00
commit 8fdc7ac0c3
401 changed files with 53093 additions and 0 deletions
--- a/tests/e2e/navigation.spec.ts
+++ b/tests/e2e/navigation.spec.ts
@@ -0,0 +1,138 @@
+import { expect, test } from '@playwright/test'
+
+/**
+ * DCS 编辑器 - 基础导航测试
+ *
+ * 应用使用 Hash 路由（createWebHashHistory('/dcs-web')），
+ * 首次访问 Web 端默认跳转到 /canvases 画布列表页。
+ */
+
+test.describe('基础导航', () => {
+  test('应用加载无错误', async ({ page }) => {
+    const errors: string[] = []
+    page.on('pageerror', (err) => {
+      errors.push(err.message)
+    })
+
+    await page.goto('/')
+    // 等待应用框架渲染完毕（路由守卫会重定向到 canvases 或 editor）
+    await page.waitForLoadState('networkidle')
+
+    // 不应产生未捕获的 JS 异常
+    expect(errors).toEqual([])
+  })
+
+  test('可以导航到画布列表页', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // Web 模式下默认重定向到画布列表
+    await expect(page.locator('.canvases-page')).toBeVisible({ timeout: 10000 })
+    // 页面标题区域应包含 "DCS图"
+    await expect(page.locator('.page-title')).toContainText('DCS图')
+    // 应有"添加DCS图"卡片
+    await expect(page.locator('.add-card')).toBeVisible()
+  })
+
+  test('可以导航到编辑器页面', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // 通过"添加DCS图"创建一个画布并进入编辑器
+    await page.locator('.add-card').click()
+    // 等待创建对话框出现
+    const dialog = page.locator('.el-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+
+    // 填写画布名称
+    await dialog.locator('input').first().fill('测试画布')
+    // 点击创建按钮
+    await dialog.locator('button').filter({ hasText: '创建' }).click()
+
+    // 等待跳转到编辑器页面
+    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
+  })
+
+  test('编辑器包含侧边栏、画布舞台和属性面板', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // 先创建画布进入编辑器
+    await page.locator('.add-card').click()
+    const dialog = page.locator('.el-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+    await dialog.locator('input').first().fill('结构测试画布')
+    await dialog.locator('button').filter({ hasText: '创建' }).click()
+    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
+
+    // 验证编辑器三大区域
+    // 1. 侧边栏（工具栏 + 面板）
+    await expect(page.locator('.editor-sidebar-shell')).toBeVisible()
+    await expect(page.locator('.tool-rail')).toBeVisible()
+
+    // 2. 画布舞台
+    await expect(page.locator('.canvas-wrapper')).toBeVisible()
+
+    // 3. 属性面板
+    await expect(page.locator('.property-panel-shell')).toBeVisible()
+  })
+
+  test('编辑器头部可见且包含撤销重做按钮', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // 创建画布进入编辑器
+    await page.locator('.add-card').click()
+    const dialog = page.locator('.el-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+    await dialog.locator('input').first().fill('头部测试画布')
+    await dialog.locator('button').filter({ hasText: '创建' }).click()
+    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
+
+    // 编辑器头部
+    await expect(page.locator('.editor-header')).toBeVisible()
+
+    // 撤销按钮（fa-rotate-left 图标）
+    const undoBtn = page.locator('.editor-header .icon-btn').filter({ has: page.locator('.fa-rotate-left') })
+    await expect(undoBtn).toBeVisible()
+
+    // 重做按钮（fa-rotate-right 图标）
+    const redoBtn = page.locator('.editor-header .icon-btn').filter({ has: page.locator('.fa-rotate-right') })
+    await expect(redoBtn).toBeVisible()
+  })
+
+  test('状态栏在编辑器中可见', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // 创建画布进入编辑器
+    await page.locator('.add-card').click()
+    const dialog = page.locator('.el-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+    await dialog.locator('input').first().fill('状态栏测试画布')
+    await dialog.locator('button').filter({ hasText: '创建' }).click()
+    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
+
+    // 状态栏
+    await expect(page.locator('.editor-status-bar')).toBeVisible()
+    // 状态栏应显示缩放百分比
+    await expect(page.locator('.editor-status-bar .status-item')).toContainText(['%'])
+  })
+
+  test('可以通过头部 "DCS编辑器" 按钮返回画布列表', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // 先进入编辑器
+    await page.locator('.add-card').click()
+    const dialog = page.locator('.el-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+    await dialog.locator('input').first().fill('返回测试画布')
+    await dialog.locator('button').filter({ hasText: '创建' }).click()
+    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
+
+    // 点击 "DCS编辑器" 返回画布列表
+    await page.locator('.scope-btn').click()
+    await expect(page.locator('.canvases-page')).toBeVisible({ timeout: 10000 })
+  })
+})