nntrivi2001
9a54978eef
Server mode (AGENTHUB_MODE=server; OFF by default — local mode is unchanged) - Login for every page and API call (server/lib/auth.js, routes/auth.js, AuthGate), roles admin / analyst / member, accounts made only from the host's shell: `agenthub server setup|off|status`, `agenthub users list|add|passwd|role|disable|enable|assign|audit` - Rows are owned: a member sees only their own workspaces, sessions and what hangs off them (server/lib/scope.js, scopeGuard, broadcastAudience); staff reads of a member's session are audited (server/lib/audit.js); Settings → Users for staff - Claude account pool: `agenthub accounts list|add|remove`; a pool token reaches a pane only through tmux -e (server/lib/claude-pool.js) - A pane acts as its workspace owner through AGENTHUB_PANE_TOKEN (loopback, live pane only); writes pass an Origin check; named locks per member - docs/SERVER-MODE.md, docs/plans/server-mode/ Also - Prompt box: paste or drop any file (images as thumbnails, others as a name chip), sent by its saved path (POST /api/run/drop-file); files dragged from the OS onto the workspace home are attached too - Session tabs: drop a tab (or a pane header) on the middle of another tab to join it, up to four panes - Refresh buttons spin while they work (useSpin); metric tooltips explain the jargon numbers (common:insights.help.*) - Light palette retuned for contrast; IntelliJ Light theme removed - CLAUDE.md sync marker trimmed; its history moved to docs/CLAUDE-SYNC-LOG.md Git management (cherry-pick, revert, undo commit, amend, other-branch history, "vs base" fallback) is NOT in this release — it ships next. Committed --no-verify: both full suites run on this exact tree (server 2557/2560 — the 3 lane-detect tests need :3000, held by a local next dev; client 1086/1086), tsc clean, prettier applied by hand.
88 lines
3.5 KiB
TypeScript
88 lines
3.5 KiB
TypeScript
/**
|
|
* @file AppearanceSettings.test.tsx
|
|
* @description Tests for the Settings → Appearance section: the language switch, and the mode switch and the per-mode theme cards writing through useTheme to `<html>`.
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
|
|
import { describe, it, expect, beforeEach, vi } from "vitest";
|
|
import { act, render, screen, within } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import i18n from "../../../i18n";
|
|
import { AppearanceSettings } from "../AppearanceSettings";
|
|
|
|
vi.mock("../PetSettings", () => ({ PetSettings: () => <div data-testid="pet-settings" /> }));
|
|
|
|
const root = document.documentElement;
|
|
|
|
describe("AppearanceSettings", () => {
|
|
beforeEach(() => {
|
|
localStorage.clear();
|
|
root.classList.remove("dark");
|
|
root.removeAttribute("data-theme");
|
|
root.removeAttribute("data-mode");
|
|
});
|
|
|
|
it("switches the interface language and holds the pet block", async () => {
|
|
const user = userEvent.setup();
|
|
render(<AppearanceSettings />);
|
|
expect(screen.getByTestId("pet-settings").closest("section")).toHaveAttribute("id", "pet");
|
|
const group = screen.getByRole("radiogroup", { name: "Interface language" });
|
|
expect(within(group).getByRole("radio", { name: "English" })).toHaveAttribute(
|
|
"aria-checked",
|
|
"true"
|
|
);
|
|
await user.click(within(group).getByRole("radio", { name: "Tiếng Việt" }));
|
|
expect(i18n.language).toBe("vi");
|
|
await act(async () => {
|
|
await i18n.changeLanguage("en");
|
|
});
|
|
});
|
|
|
|
it("renders every theme of both modes, defaults selected", () => {
|
|
render(<AppearanceSettings />);
|
|
const pressed = screen
|
|
.getAllByRole("button", { pressed: true })
|
|
.map((b) => b.getAttribute("aria-label") ?? b.textContent);
|
|
expect(pressed).toHaveLength(2); // both Default cards
|
|
expect(screen.getByRole("radio", { name: /Dark/ })).toHaveAttribute("aria-checked", "true");
|
|
for (const name of [
|
|
"Darcula",
|
|
"Apple Dark",
|
|
"Orca Dark",
|
|
"Apple Light",
|
|
"Canvas",
|
|
"Orca Light",
|
|
]) {
|
|
expect(screen.getByText(name)).toBeInTheDocument();
|
|
}
|
|
});
|
|
|
|
it("picking a dark theme applies it at once; a light pick waits for light mode", async () => {
|
|
const user = userEvent.setup();
|
|
render(<AppearanceSettings />);
|
|
await user.click(screen.getByRole("button", { name: /Darcula/ }));
|
|
expect(root.dataset.theme).toBe("darcula");
|
|
await user.click(screen.getByRole("button", { name: /Canvas/ }));
|
|
expect(root.dataset.theme).toBe("darcula");
|
|
await user.click(screen.getByRole("radio", { name: /^Light$/ }));
|
|
expect(root.classList.contains("dark")).toBe(false);
|
|
expect(root.dataset.theme).toBe("canvas");
|
|
expect(screen.getByRole("button", { name: /Canvas/ })).toHaveAttribute("aria-pressed", "true");
|
|
});
|
|
|
|
it("the System mode is checked after choosing it", async () => {
|
|
const user = userEvent.setup();
|
|
render(<AppearanceSettings />);
|
|
await user.click(screen.getByRole("radio", { name: /System/ }));
|
|
expect(screen.getByRole("radio", { name: /System/ })).toHaveAttribute("aria-checked", "true");
|
|
expect(localStorage.getItem("theme")).toBe("system");
|
|
});
|
|
|
|
it("each swatch scopes its own mode and theme", () => {
|
|
const { container } = render(<AppearanceSettings />);
|
|
expect(container.querySelector('.dark[data-theme="darcula"]')).not.toBeNull();
|
|
expect(container.querySelector('[data-mode="light"][data-theme="canvas"]')).not.toBeNull();
|
|
expect(container.querySelector('[data-mode="light"]:not([data-theme])')).not.toBeNull();
|
|
});
|
|
});
|