forked from bots-garden/ori
| ✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme | 1 | import { |
| 2 | act, | |
| 3 | fireEvent, | |
| 4 | render, | |
| 5 | screen, | |
| 6 | waitFor, | |
| 7 | } from "@testing-library/react"; | |
| 8 | import { beforeEach, describe, expect, it, vi } from "vitest"; | |
| 9 | import { | |
| 10 | DEFAULT_FILE_TREE_WIDTH, | |
| 11 | resetWorkspace, | |
| 12 | setFileTreeWidth, | |
| 13 | toggleWorkspace, | |
| 14 | useWorkspace, | |
| 15 | } from "../workspace"; | |
| 16 | import { Workspace } from "./Workspace"; | |
| 17 | ||
| 18 | vi.mock("../api", () => ({ | |
| 19 | listFiles: vi.fn().mockResolvedValue({ path: "/w", entries: [] }), | |
| 20 | readFile: vi.fn().mockResolvedValue({ path: "/w/x", content: "" }), | |
| 21 | writeFile: vi.fn().mockResolvedValue(undefined), | |
| 22 | rawFileUrl: (path: string) => `/api/raw?path=${encodeURIComponent(path)}`, | |
| 23 | })); | |
| 24 | ||
| 25 | // The real terminal drags xterm and a WebSocket along; a stub is enough here. | |
| 26 | vi.mock("./TerminalPane", () => ({ | |
| 27 | TerminalPane: () => <div data-testid="terminal-pane" />, | |
| 28 | })); | |
| 29 | ||
| 30 | /** Waits for the (mocked) file listing to settle so React stays quiet. */ | |
| 31 | function treeLoaded() { | |
| 32 | return waitFor(() => expect(screen.queryByText("loading…")).toBeNull()); | |
| 33 | } | |
| 34 | ||
| 35 | describe("Workspace", () => { | |
| 36 | beforeEach(() => { | |
| 37 | localStorage.clear(); | |
| 38 | resetWorkspace(); | |
| 39 | toggleWorkspace(); | |
| 40 | }); | |
| 41 | ||
| 42 | it("applies the file tree width as a CSS custom property", async () => { | |
| 43 | render(<Workspace />); | |
| 44 | await treeLoaded(); | |
| 45 | const panel = screen.getByRole("complementary", { name: "workspace" }); | |
| 46 | expect(panel.style.getPropertyValue("--filetree-width")).toBe( | |
| 47 | `${DEFAULT_FILE_TREE_WIDTH}px`, | |
| 48 | ); | |
| 49 | ||
| 50 | act(() => setFileTreeWidth(360)); | |
| 51 | expect(panel.style.getPropertyValue("--filetree-width")).toBe("360px"); | |
| 52 | }); | |
| 53 | ||
| 54 | it("resizes the file tree from the handle and restores it on double-click", async () => { | |
| 55 | render(<Workspace />); | |
| 56 | await treeLoaded(); | |
| 57 | const handle = screen.getByRole("separator", { | |
| 58 | name: "Resize the file tree", | |
| 59 | }); | |
| 60 | ||
| 61 | fireEvent.keyDown(handle, { key: "End" }); | |
| 62 | expect(useWorkspace.getState().fileTreeWidth).toBe(800); | |
| 63 | ||
| 64 | fireEvent.doubleClick(handle); | |
| 65 | expect(useWorkspace.getState().fileTreeWidth).toBe(DEFAULT_FILE_TREE_WIDTH); | |
| 66 | }); | |
| 67 | }); |