feat(settings): 设置页改造为 Form + Radio.Group + Switch,紧凑模式开关

This commit is contained in:
2026-06-06 22:55:33 +08:00
parent 09845e0515
commit dd2835bb94
2 changed files with 86 additions and 21 deletions

View File

@@ -5,8 +5,8 @@ import { createElement } from "react";
import { SettingsPage } from "../../../../src/web/features/settings/index";
import { installFetchMock, jsonResponse, renderWithProviders } from "../../test-utils";
function mockSettingsResponse(theme = "system"): Response {
return jsonResponse({ theme });
function mockSettingsResponse(theme = "system", compact = false): Response {
return jsonResponse({ compact, theme });
}
describe("SettingsPage", () => {
@@ -21,7 +21,7 @@ describe("SettingsPage", () => {
expect(screen.getByText("主题")).not.toBeNull();
});
test("渲染主题 Segmented 选项", () => {
test("渲染主题模式 Radio.Group 选项", () => {
installFetchMock((call) => {
if (call.url.includes("/api/settings")) return mockSettingsResponse();
return jsonResponse({});
@@ -34,7 +34,41 @@ describe("SettingsPage", () => {
expect(screen.getByText("黑暗")).not.toBeNull();
});
test("API 加载中时不显示保存状态", () => {
test("渲染紧凑模式标签和开关", () => {
installFetchMock((call) => {
if (call.url.includes("/api/settings")) return mockSettingsResponse();
return jsonResponse({});
});
renderWithProviders(createElement(SettingsPage));
expect(screen.getByText("紧凑模式")).not.toBeNull();
});
test("渲染水平表单结构", () => {
installFetchMock((call) => {
if (call.url.includes("/api/settings")) return mockSettingsResponse();
return jsonResponse({});
});
renderWithProviders(createElement(SettingsPage));
const form = document.querySelector(".ant-form");
expect(form).not.toBeNull();
});
test("不再使用 Segmented", () => {
installFetchMock((call) => {
if (call.url.includes("/api/settings")) return mockSettingsResponse();
return jsonResponse({});
});
renderWithProviders(createElement(SettingsPage));
expect(document.querySelector(".ant-segmented")).toBeNull();
});
test("不显示保存状态文本(已迁移到 toast)", () => {
installFetchMock((call) => {
if (call.url.includes("/api/settings")) return mockSettingsResponse();
return jsonResponse({});
@@ -45,17 +79,17 @@ describe("SettingsPage", () => {
expect(screen.queryByText("保存中...")).toBeNull();
});
test("GET /api/settings 获取已保存主题", async () => {
test("GET /api/settings 获取已保存主题和紧凑设置", async () => {
installFetchMock((call) => {
if (call.url.includes("/api/settings")) return mockSettingsResponse("dark");
if (call.url.includes("/api/settings")) return mockSettingsResponse("dark", true);
return jsonResponse({});
});
renderWithProviders(createElement(SettingsPage));
await waitFor(() => {
const segmented = document.querySelector(".ant-segmented");
expect(segmented).not.toBeNull();
const radioGroup = document.querySelector(".ant-radio-group");
expect(radioGroup).not.toBeNull();
});
});
});