diff options
| author | Somhairle H. Marisol <[email protected]> | 2026-09-18 08:26:37 +0800 |
|---|---|---|
| committer | Somhairle H. Marisol <[email protected]> | 2026-09-18 08:26:37 +0800 |
| commit | 60640dfa981e419cf86413c924fd26822bd42327 (patch) | |
| tree | cab175f9fa975c68db82287f06a13a1dc3af8048 /frontend/src/lib | |
| parent | 06a7b1668b44f111eca5d08bc8c2c9d41d8e617e (diff) | |
| download | strategy-lab-60640dfa981e419cf86413c924fd26822bd42327.tar.gz | |
feat(frontend): 布局/认证/项目页迁移 shadcn 并修复 375px 溢出
[变更性质]
本提交为 UI 迁移与移动端布局修复,产品功能不变。
[新增功能]
Leader 第 2 轮验收的失败项:AuthPages 在 375px 视口横向溢出 47px,
原因为 .auth-card 固定 400px 宽度。
[实现方案]
AuthPages:.auth-wrap 改为 flex 包裹,.auth-card 改用
width:min(400px,100%),三档视口下登录/注册/重置均零溢出。
Layout.svelte 重写为 shadcn Button(退出按钮)+ Tailwind 主题变量,
同时保留 .layout/.content/.navlink/.brand 等 legacy class 以维持
mobileCss.test.ts 的断言语义。ProjectsPage 迁移 shadcn Card/Table 等
(保留 p-name 链接语义),新增 projectsPageLoad.test.ts 回归项目列表
加载失败时的错误呈现。
[影响范围]
frontend/src/components/Layout.svelte、pages/AuthPages.svelte、
pages/ProjectsPage.svelte;视觉验证覆盖 375/768/1440 全零溢出。
Diffstat (limited to 'frontend/src/lib')
| -rw-r--r-- | frontend/src/lib/projectsPageLoad.test.ts | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/frontend/src/lib/projectsPageLoad.test.ts b/frontend/src/lib/projectsPageLoad.test.ts new file mode 100644 index 0000000..baf1cee --- /dev/null +++ b/frontend/src/lib/projectsPageLoad.test.ts @@ -0,0 +1,46 @@ +import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'; +import { render, screen, waitFor, cleanup } from '@testing-library/svelte'; + +vi.mock('../lib/client', () => { + const real = vi.importActual<typeof import('../lib/client')>('../lib/client'); + return { ...real, listProjects: vi.fn() }; +}); + +import ProjectsPage from '../pages/ProjectsPage.svelte'; +import { listProjects } from '../lib/client'; +import type { Project } from '../lib/types'; + +function project(i: number): Project { + return { + id: `p${i}`, + name: `项目${i}`, + description: null, + draft_code: '', + draft_generation: 0, + created_at: '2026-09-17T01:00:00Z', + updated_at: '2026-09-17T01:00:00Z' + }; +} + +beforeEach(() => { + vi.mocked(listProjects).mockReset(); +}); + +afterEach(() => cleanup()); + +describe('projects page loads the list (159399 QA regression: load() existed but was wired nowhere, UI always showed 还没有项目)', () => { + it('listProjects is called on mount and existing rows render', async () => { + vi.mocked(listProjects).mockResolvedValue({ items: [project(1), project(2)] }); + render(ProjectsPage); + await waitFor(() => expect(listProjects).toHaveBeenCalled()); + await screen.findByText('项目1'); + await screen.findByText('项目2'); + expect(screen.queryByText('还没有项目')).toBeNull(); + }); + + it('load failure is surfaced as a visible error, not an empty "no projects" state', async () => { + vi.mocked(listProjects).mockRejectedValue(new Error('HTTP500: server unavailable')); + render(ProjectsPage); + await screen.findByText(/server unavailable/); + }); +}); |
