lanyuanxiaoyao/Alfred
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 用自定义侧边栏替换聊天室 Conversations 组件，提取公共 SidebarGroup 和 date-group

Browse Source
This commit is contained in:
兰缘小妖
2026-06-04 00:46:57 +08:00
parent dc7d9e83b8
commit f67cfa84ef
18 changed files with 1042 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
tests/web/components/ChatPage.test.tsx Normal file
View File

@@ -0,0 +1,177 @@
import { fireEvent, screen, waitFor } from "@testing-library/react";
import { describe, expect, test, vi } from "bun:test";
import { createElement } from "react";
import type { Model, Project } from "../../../src/shared/api";
import { ChatPage } from "../../../src/web/features/chat/ChatPage";
import { ProjectContext } from "../../../src/web/shared/hooks/use-current-project";
import { installFetchMock, jsonResponse, renderWithProviders } from "../test-utils";
const PROJECT_ID = "proj-1";
const MOCK_PROJECT: Project = {
archivedAt: null,
createdAt: "2026-01-01T00:00:00.000Z",
description: "",
id: PROJECT_ID,
name: "测试项目",
status: "active",
updatedAt: "2026-01-01T00:00:00.000Z",
};
const TEXT_MODEL: Model = {
capabilities: ["text"],
contextLength: null,
createdAt: "2024-01-01T00:00:00.000Z",
id: "model-1",
maxOutputTokens: null,
modelId: "gpt-4o",
name: "GPT-4o",
providerId: "pv1",
updatedAt: "2024-01-01T00:00:00.000Z",
};
const CONVERSATION = {
createdAt: "2026-06-03T00:00:00.000Z",
id: "conv-1",
modelId: "model-1",
projectId: PROJECT_ID,
title: "测试对话",
updatedAt: "2026-06-03T00:00:00.000Z",
};
function renderChatPage() {
return renderWithProviders(
createElement(ProjectContext.Provider, {
children: createElement(ChatPage),
value: MOCK_PROJECT,
}),
);
}
function setupFetchMock() {
return installFetchMock((call) => {
if (call.url.includes("/models")) {
return jsonResponse({ items: [TEXT_MODEL], total: 1 });
}
if (call.url.includes("/conversations") && call.method === "GET") {
return jsonResponse({ items: [CONVERSATION], page: 1, pageSize: 200, total: 1 });
}
if (call.url.endsWith("/conversations") && call.method === "POST") {
return jsonResponse({ conversation: { ...CONVERSATION, id: "conv-new", title: "新会话" } }, { status: 201 });
}
if (call.method === "DELETE" && call.url.includes("/conversations/")) {
return new Response(null, { status: 204 });
}
if (call.url.includes("/messages")) {
return jsonResponse({ items: [], total: 0 });
}
if (/\/conversations\/conv-1$/.exec(call.url)) {
return jsonResponse({ conversation: CONVERSATION });
}
return jsonResponse({ error: "not found" }, { status: 404 });
});
}
void vi.mock("@ai-sdk/react", () => ({
useChat: () => ({
messages: [],
regenerate: () => undefined,
sendMessage: () => undefined,
setMessages: (msgs: unknown) => msgs,
status: "ready",
stop: () => undefined,
}),
}));
void vi.mock("ai", () => ({
DefaultChatTransport: function () {
return undefined;
},
}));
describe("ChatPage", () => {
test("渲染对话侧边栏和欢迎页", async () => {
setupFetchMock();
renderChatPage();
await waitFor(() => {
expect(screen.getByText("测试对话")).not.toBeNull();
});
expect(screen.getByText("你好，我是阿福")).not.toBeNull();
});
test("点击新对话按钮创建并选中对话", async () => {
const calls = setupFetchMock();
renderChatPage();
await waitFor(() => {
expect(screen.getByText("新对话")).not.toBeNull();
});
fireEvent.click(screen.getByText("新对话"));
await waitFor(() => {
const createCall = calls.find((c) => c.url.endsWith("/conversations") && c.method === "POST");
expect(createCall).toBeTruthy();
});
});
test("点击对话切换选中", async () => {
setupFetchMock();
renderChatPage();
await waitFor(() => {
expect(screen.getByText("测试对话")).not.toBeNull();
});
fireEvent.click(screen.getByText("测试对话"));
await waitFor(() => {
expect(screen.queryByText("你好，我是阿福")).toBeNull();
});
});
test("删除对话后列表更新", async () => {
let deleted = false;
installFetchMock((call) => {
if (call.method === "DELETE" && call.url.includes("/conversations/conv-1")) {
deleted = true;
return new Response(null, { status: 204 });
}
if (call.url.includes("/models")) {
return jsonResponse({ items: [TEXT_MODEL], total: 1 });
}
if (call.url.includes("/conversations") && call.method === "GET") {
if (deleted) {
return jsonResponse({ items: [], page: 1, pageSize: 200, total: 0 });
}
return jsonResponse({ items: [CONVERSATION], page: 1, pageSize: 200, total: 1 });
}
if (call.url.includes("/messages")) {
return jsonResponse({ items: [], total: 0 });
}
return jsonResponse({ error: "not found" }, { status: 404 });
});
renderChatPage();
await waitFor(() => {
expect(screen.getByText("测试对话")).not.toBeNull();
});
fireEvent.click(screen.getByLabelText("删除"));
await waitFor(() => {
expect(screen.getByText("确认删除该对话？")).not.toBeNull();
});
fireEvent.click(screen.getByText("删 除"));
await waitFor(() => {
expect(screen.getByText("暂无对话")).not.toBeNull();
});
});
});

95
tests/web/components/ConversationCard.test.tsx Normal file
View File

@@ -0,0 +1,95 @@
import { fireEvent, screen, waitFor } from "@testing-library/react";
import { describe, expect, test, vi } from "bun:test";
import { createElement } from "react";
import type { Conversation } from "../../../src/shared/api";
import { ConversationCard } from "../../../src/web/features/chat/components/ConversationCard";
import { renderWithProviders } from "../test-utils";
const MOCK_CONVERSATION: Conversation = {
createdAt: "2026-06-03T00:00:00.000Z",
id: "conv-1",
modelId: "model-1",
projectId: "proj-1",
title: "测试对话",
updatedAt: "2026-06-03T00:00:00.000Z",
};
describe("ConversationCard", () => {
test("渲染对话标题", () => {
renderWithProviders(
createElement(ConversationCard, {
conversation: MOCK_CONVERSATION,
onDelete: vi.fn(),
onSelect: vi.fn(),
selected: false,
}),
);
expect(screen.getByText("测试对话")).not.toBeNull();
});
test("点击卡片触发 onSelect", () => {
const onSelect = vi.fn();
renderWithProviders(
createElement(ConversationCard, {
conversation: MOCK_CONVERSATION,
onDelete: vi.fn(),
onSelect,
selected: false,
}),
);
const item = screen.getByText("测试对话").closest(".app-sidebar-list-item")!;
fireEvent.click(item);
expect(onSelect).toHaveBeenCalledTimes(1);
});
test("点击删除按钮弹出确认框，确认后触发 onDelete", async () => {
const onDelete = vi.fn();
renderWithProviders(
createElement(ConversationCard, {
conversation: MOCK_CONVERSATION,
onDelete,
onSelect: vi.fn(),
selected: false,
}),
);
fireEvent.click(screen.getByLabelText("删除"));
await waitFor(() => {
expect(screen.getByText("确认删除该对话？")).not.toBeNull();
});
fireEvent.click(screen.getByText("删 除"));
await waitFor(() => {
expect(onDelete).toHaveBeenCalledTimes(1);
});
});
test("选中时包含 app-sidebar-list-item--selected 类名", () => {
renderWithProviders(
createElement(ConversationCard, {
conversation: MOCK_CONVERSATION,
onDelete: vi.fn(),
onSelect: vi.fn(),
selected: true,
}),
);
const item = screen.getByText("测试对话").closest(".app-sidebar-list-item--selected");
expect(item).not.toBeNull();
});
test("未选中时不包含 app-sidebar-list-item--selected 类名", () => {
renderWithProviders(
createElement(ConversationCard, {
conversation: MOCK_CONVERSATION,
onDelete: vi.fn(),
onSelect: vi.fn(),
selected: false,
}),
);
const item = screen.getByText("测试对话").closest(".app-sidebar-list-item--selected");
expect(item).toBeNull();
});
});

160
tests/web/components/ConversationList.test.tsx Normal file
View File

@@ -0,0 +1,160 @@
import { fireEvent, screen, waitFor } from "@testing-library/react";
import { describe, expect, test, vi } from "bun:test";
import { createElement } from "react";
import type { Conversation } from "../../../src/shared/api";
import { ConversationList } from "../../../src/web/features/chat/components/ConversationList";
import { renderWithProviders } from "../test-utils";
const CONVERSATIONS: Conversation[] = [
{
createdAt: "2026-06-03T00:00:00.000Z",
id: "conv-1",
modelId: "model-1",
projectId: "proj-1",
title: "今天对话",
updatedAt: "2026-06-03T00:00:00.000Z",
},
{
createdAt: "2026-06-02T00:00:00.000Z",
id: "conv-2",
modelId: "model-1",
projectId: "proj-1",
title: "昨天对话",
updatedAt: "2026-06-02T00:00:00.000Z",
},
{
createdAt: "2026-05-01T00:00:00.000Z",
id: "conv-3",
modelId: "model-1",
projectId: "proj-1",
title: "更早对话",
updatedAt: "2026-05-01T00:00:00.000Z",
},
];
describe("ConversationList", () => {
test("列表为空时显示暂无对话", () => {
renderWithProviders(
createElement(ConversationList, {
conversations: [],
loading: false,
onAddClick: vi.fn(),
onDelete: vi.fn(),
onSelect: vi.fn(),
selectedId: null,
}),
);
expect(screen.getByText("暂无对话")).not.toBeNull();
});
test("渲染对话列表并按日期分组", () => {
renderWithProviders(
createElement(ConversationList, {
conversations: CONVERSATIONS,
loading: false,
onAddClick: vi.fn(),
onDelete: vi.fn(),
onSelect: vi.fn(),
selectedId: null,
}),
);
expect(screen.getByText("今天对话")).not.toBeNull();
expect(screen.getByText("昨天对话")).not.toBeNull();
expect(screen.getByText("更早对话")).not.toBeNull();
});
test("加载中显示 Skeleton", () => {
renderWithProviders(
createElement(ConversationList, {
conversations: [],
loading: true,
onAddClick: vi.fn(),
onDelete: vi.fn(),
onSelect: vi.fn(),
selectedId: null,
}),
);
expect(document.querySelector(".ant-skeleton")).not.toBeNull();
});
test("点击新对话按钮触发 onAddClick", () => {
const onAddClick = vi.fn();
renderWithProviders(
createElement(ConversationList, {
conversations: [],
loading: false,
onAddClick,
onDelete: vi.fn(),
onSelect: vi.fn(),
selectedId: null,
}),
);
screen.getByText("新对话").click();
expect(onAddClick).toHaveBeenCalledTimes(1);
});
test("点击搜索按钮过滤对话标题", async () => {
renderWithProviders(
createElement(ConversationList, {
conversations: CONVERSATIONS,
loading: false,
onAddClick: vi.fn(),
onDelete: vi.fn(),
onSelect: vi.fn(),
selectedId: null,
}),
);
const searchInput = screen.getByPlaceholderText("搜索对话");
fireEvent.change(searchInput, { target: { value: "今天" } });
expect(screen.getByText("昨天对话")).not.toBeNull();
fireEvent.keyDown(searchInput, { key: "Enter" });
await waitFor(() => {
expect(screen.getByText("今天对话")).not.toBeNull();
expect(screen.queryByText("昨天对话")).toBeNull();
expect(screen.queryByText("更早对话")).toBeNull();
});
});
test("输入文字未点击搜索时不触发过滤", () => {
renderWithProviders(
createElement(ConversationList, {
conversations: CONVERSATIONS,
loading: false,
onAddClick: vi.fn(),
onDelete: vi.fn(),
onSelect: vi.fn(),
selectedId: null,
}),
);
const searchInput = screen.getByPlaceholderText("搜索对话");
fireEvent.change(searchInput, { target: { value: "今天" } });
expect(screen.getByText("今天对话")).not.toBeNull();
expect(screen.getByText("昨天对话")).not.toBeNull();
expect(screen.getByText("更早对话")).not.toBeNull();
});
test("搜索无匹配结果时显示无匹配对话", async () => {
renderWithProviders(
createElement(ConversationList, {
conversations: CONVERSATIONS,
loading: false,
onAddClick: vi.fn(),
onDelete: vi.fn(),
onSelect: vi.fn(),
selectedId: null,
}),
);
const searchInput = screen.getByPlaceholderText("搜索对话");
fireEvent.change(searchInput, { target: { value: "不存在的对话" } });
fireEvent.keyDown(searchInput, { key: "Enter" });
await waitFor(() => {
expect(screen.getByText("无匹配对话")).not.toBeNull();
});
});
});

104
tests/web/components/ConversationSidebar.test.tsx Normal file
View File

@@ -0,0 +1,104 @@
import { fireEvent, screen, waitFor } from "@testing-library/react";
import { describe, expect, test, vi } from "bun:test";
import { createElement } from "react";
import { ConversationSidebar } from "../../../src/web/features/chat/components/ConversationSidebar";
import { installFetchMock, jsonResponse, renderWithProviders } from "../test-utils";
const PROJECT_ID = "proj-1";
const CONVERSATION = {
createdAt: "2026-06-03T00:00:00.000Z",
id: "conv-1",
modelId: "model-1",
projectId: PROJECT_ID,
title: "测试对话",
updatedAt: "2026-06-03T00:00:00.000Z",
};
function setupSuccessMock() {
return installFetchMock((call) => {
if (call.url.includes("/conversations") && call.method === "GET") {
return jsonResponse({ items: [CONVERSATION], page: 1, pageSize: 200, total: 1 });
}
return jsonResponse({ error: "not found" }, { status: 404 });
});
}
describe("ConversationSidebar", () => {
test("加载成功后渲染对话列表", async () => {
setupSuccessMock();
renderWithProviders(
createElement(ConversationSidebar, {
onAddClick: vi.fn(),
onDelete: vi.fn(),
onSelect: vi.fn(),
projectId: PROJECT_ID,
selectedId: null,
}),
);
await waitFor(() => {
expect(screen.getByText("测试对话")).not.toBeNull();
});
});
test("加载失败时显示错误和重试按钮", async () => {
installFetchMock((call) => {
if (call.url.includes("/conversations") && call.method === "GET") {
return jsonResponse({ error: "服务器错误" }, { status: 500 });
}
return jsonResponse({ error: "not found" }, { status: 404 });
});
renderWithProviders(
createElement(ConversationSidebar, {
onAddClick: vi.fn(),
onDelete: vi.fn(),
onSelect: vi.fn(),
projectId: PROJECT_ID,
selectedId: null,
}),
);
await waitFor(() => {
expect(screen.getByText("加载对话列表失败")).not.toBeNull();
});
expect(screen.getByText("重试")).not.toBeNull();
});
test("点击重试重新请求", async () => {
let callCount = 0;
installFetchMock((call) => {
if (call.url.includes("/conversations") && call.method === "GET") {
callCount++;
if (callCount === 1) {
return jsonResponse({ error: "服务器错误" }, { status: 500 });
}
return jsonResponse({ items: [CONVERSATION], page: 1, pageSize: 200, total: 1 });
}
return jsonResponse({ error: "not found" }, { status: 404 });
});
renderWithProviders(
createElement(ConversationSidebar, {
onAddClick: vi.fn(),
onDelete: vi.fn(),
onSelect: vi.fn(),
projectId: PROJECT_ID,
selectedId: null,
}),
);
await waitFor(() => {
expect(screen.getByText("加载对话列表失败")).not.toBeNull();
});
fireEvent.click(screen.getByText("重试"));
await waitFor(() => {
expect(screen.getByText("测试对话")).not.toBeNull();
});
});
});

3
tests/web/features/inbox/MaterialCard.test.tsx
View File

@@ -18,7 +18,7 @@ const MOCK_MATERIAL: Material = {
};
describe("MaterialCard", () => {
test("渲染素材描述、时间和状态标签", () => {
test("渲染素材描述和状态标签", () => {
renderWithProviders(
createElement(MaterialCard, {
material: MOCK_MATERIAL,
@@ -28,7 +28,6 @@ describe("MaterialCard", () => {
}),
);
expect(screen.getByText("测试素材描述")).not.toBeNull();
expect(screen.getByText("今天")).not.toBeNull();
expect(screen.getByText("待审核")).not.toBeNull();
});

104
tests/web/utils/date-group.test.ts Normal file
View File

@@ -0,0 +1,104 @@
import { describe, expect, test } from "bun:test";
import { getDateGroup, groupByDate } from "../../../src/web/shared/utils/date-group";
function makeDate(daysAgo: number): string {
const d = new Date();
d.setDate(d.getDate() - daysAgo);
return d.toISOString();
}
describe("getDateGroup", () => {
test("今天的日期返回 today", () => {
const now = new Date();
const result = getDateGroup(now.toISOString(), now);
expect(result).toBe("today");
});
test("昨天的日期返回 yesterday", () => {
const now = new Date();
const yesterday = new Date(now);
yesterday.setDate(yesterday.getDate() - 1);
const result = getDateGroup(yesterday.toISOString(), now);
expect(result).toBe("yesterday");
});
test("本周内的日期返回 thisWeek", () => {
const now = new Date();
const dayOfWeek = now.getDay();
const mondayOffset = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
const wednesday = new Date(now);
wednesday.setDate(now.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1) + 2);
if (wednesday > now) {
const tuesday = new Date(now);
tuesday.setDate(now.getDate() - mondayOffset + 1);
if (tuesday < now && tuesday.getDate() !== now.getDate() - 1) {
const result = getDateGroup(tuesday.toISOString(), now);
expect(result).toBe("thisWeek");
return;
}
}
const tuesday = new Date(now);
tuesday.setDate(now.getDate() - mondayOffset + 1);
if (tuesday.toDateString() !== now.toDateString()) {
const yesterday = new Date(now);
yesterday.setDate(yesterday.getDate() - 1);
if (tuesday.toDateString() !== yesterday.toDateString()) {
const result = getDateGroup(tuesday.toISOString(), now);
expect(result).toBe("thisWeek");
return;
}
}
expect(true).toBe(true);
});
test("本月内的日期返回 thisMonth", () => {
const now = new Date(2026, 5, 15);
const earlier = new Date(2026, 5, 3);
const result = getDateGroup(earlier.toISOString(), now);
expect(result).toBe("thisMonth");
});
test("更早的日期返回 earlier", () => {
const now = new Date(2026, 5, 15);
const earlier = new Date(2026, 3, 1);
const result = getDateGroup(earlier.toISOString(), now);
expect(result).toBe("earlier");
});
});
describe("groupByDate", () => {
test("按 dateField 分组并返回有序结果", () => {
const now = new Date();
const items = [
{ id: "1", title: "今天", updatedAt: now.toISOString() },
{ id: "2", title: "昨天", updatedAt: makeDate(1) },
{ id: "3", title: "更早", updatedAt: makeDate(60) },
];
const groups = groupByDate(items, "updatedAt");
const todayGroup = groups.find((g) => g.key === "today")!;
expect(todayGroup.items.length).toBe(1);
expect(todayGroup.items[0]!.id).toBe("1");
const yesterdayGroup = groups.find((g) => g.key === "yesterday")!;
expect(yesterdayGroup.items.length).toBe(1);
const earlierGroup = groups.find((g) => g.key === "earlier")!;
expect(earlierGroup.items.length).toBe(1);
const emptyGroups = groups.filter((g) => g.key === "thisWeek" || g.key === "thisMonth");
emptyGroups.forEach((g) => {
expect(g.items.length).toBe(0);
});
});
test("空数组返回所有空分组", () => {
const groups = groupByDate([] as Array<{ updatedAt: string }>, "updatedAt");
expect(groups.length).toBe(5);
groups.forEach((g) => {
expect(g.items.length).toBe(0);
});
});
});