summaryrefslogtreecommitdiff
path: root/frontend/src/lib
diff options
context:
space:
mode:
authorSomhairle H. Marisol <[email protected]>2026-09-18 08:26:37 +0800
committerSomhairle H. Marisol <[email protected]>2026-09-18 08:26:37 +0800
commit60640dfa981e419cf86413c924fd26822bd42327 (patch)
treecab175f9fa975c68db82287f06a13a1dc3af8048 /frontend/src/lib
parent06a7b1668b44f111eca5d08bc8c2c9d41d8e617e (diff)
downloadstrategy-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.ts46
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/);
+ });
+});