/**/ import { WorkspacePanel } from "$components/AppLayout/WorkspacePanel"; import type { WorkspaceDiagnosticsProps, WorkspacePanelProps } from "$components/AppLayout/WorkspacePanel"; import { EditorProps } from "$components/Editor"; import { PreviewProps } from "$components/Preview"; import { StatusBarProps } from "$components/StatusBar"; import { useSidebarActions } from "$hooks/controllers/useSidebarActions"; import { useWorkspaceController } from "$hooks/controllers/useWorkspaceController"; import { useEditorPresentationActions, useEditorPresentationState, useLayoutChromeActions, useLayoutChromeState, useLayoutSettingsUiState, useSidebarState, useTabsState, useToolbarState, useWorkspacePanelModeState, useWorkspacePanelSidebarState, useWorkspacePanelStatusBarCollapsed, useWorkspacePanelTopBarsCollapsed, } from "$state/selectors"; import type { EditorPresentationStateReturn, SidebarStateReturn, StatusBarCollapsedReturn, ToolbarStateReturn, TopBarsCollapsedReturn, WorkspacePanelModeStateReturn, WorkspacePanelSidebarStateReturn, } from "$state/selectors"; import type { MarkdownPreviewStyle } from "$types"; import { act, fireEvent, render, screen } from "@testing-library/react"; import { beforeEach, describe, expect, it, vi } from "vitest"; vi.mock( "$state/selectors", () => ({ useSidebarState: vi.fn(), useTabsState: vi.fn(), useToolbarState: vi.fn(), useEditorPresentationActions: vi.fn(), useLayoutChromeActions: vi.fn(), useLayoutChromeState: vi.fn(), useLayoutSettingsUiState: vi.fn(), useEditorPresentationState: vi.fn(), useWorkspacePanelSidebarState: vi.fn(), useWorkspacePanelModeState: vi.fn(), useWorkspacePanelTopBarsCollapsed: vi.fn(), useWorkspacePanelStatusBarCollapsed: vi.fn(), }), ); vi.mock("$hooks/controllers/useSidebarActions", () => ({ useSidebarActions: vi.fn() })); vi.mock("$hooks/controllers/useWorkspaceController", () => ({ useWorkspaceController: vi.fn() })); type SelectorOverrides = { sidebarState?: Partial; toolbarState?: Partial; editorPresentationState?: Partial; setMarkdownPreviewStyle?: (value: MarkdownPreviewStyle) => void; setShowSearch?: (value: boolean) => void; toggleSidebarCollapsed?: () => void; workspacePanelSidebarState?: Partial; workspacePanelModeState?: Partial; topBarsCollapsed?: TopBarsCollapsedReturn; statusBarCollapsed?: StatusBarCollapsedReturn; }; type WorkspacePanelPropOverrides = { toolbar?: Partial; onOpenWelcomeTab?: WorkspacePanelProps["onOpenWelcomeTab"]; onOpenImportSheet?: WorkspacePanelProps["onOpenImportSheet"]; onOpenStandardSiteImportSheet?: WorkspacePanelProps["onOpenStandardSiteImportSheet"]; editor?: Partial; preview?: Partial; statusBar?: Partial; diagnostics?: Partial; welcome?: Partial>; activeDocRelPath?: WorkspacePanelProps["activeDocRelPath"]; activeDocContentType?: WorkspacePanelProps["activeDocContentType"]; }; const createSidebarState = (overrides: Partial = {}): SidebarStateReturn => { const selectedLocationId = overrides.selectedLocationId; const documents = overrides.documents ?? []; const directories = overrides.directories ?? []; return { locations: [], selectedLocationId, selectedDocPath: undefined, documents, directories, documentsByLocation: overrides.documentsByLocation ?? (selectedLocationId ? { [selectedLocationId]: documents } : {}), directoriesByLocation: overrides.directoriesByLocation ?? (selectedLocationId ? { [selectedLocationId]: directories } : {}), expandedLocationIds: overrides.expandedLocationIds ?? [], expandedDirectoriesByLocation: overrides.expandedDirectoriesByLocation ?? {}, isLoading: false, refreshingLocationId: undefined, sidebarRefreshReason: null, externalDropTargetId: undefined, externalDropFolderPath: undefined, activeDropTarget: null, folderSortOrderByLocation: {}, filterText: "", setFilterText: vi.fn(), setDocuments: vi.fn(), setDirectories: vi.fn(), setDocumentsForLocation: vi.fn(), setDirectoriesForLocation: vi.fn(), setSidebarTreeState: vi.fn(), selectLocation: vi.fn(), toggleExpandedLocation: vi.fn(), toggleExpandedDirectory: vi.fn(), expandDirectories: vi.fn(), collapseDirectories: vi.fn(), toggleSidebarCollapsed: vi.fn(), filenameVisibility: false, setExternalDropTarget: vi.fn(), setActiveDropTarget: vi.fn(), reorderFolderSortOrder: vi.fn(), ...overrides, }; }; const createToolbarState = (overrides: Partial = {}): ToolbarStateReturn => ({ isSplitView: false, isFocusMode: false, isPreviewVisible: false, setEditorOnlyMode: vi.fn(), toggleSplitView: vi.fn(), toggleFocusMode: vi.fn(), togglePreviewVisible: vi.fn(), ...overrides, }); const createEditorPresentationState = ( overrides: Partial = {}, ): EditorPresentationStateReturn => ({ theme: "dark", showLineNumbers: true, textWrappingEnabled: true, syntaxHighlightingEnabled: true, fontSize: 16, fontFamily: "IBM Plex Mono", renderedFontFamily: "IBM Plex Mono", markdownPreviewStyle: "github", typewriterScrollingEnabled: false, focusDimmingMode: "off", posHighlightingEnabled: false, styleCheckSettings: { enabled: false, categories: { filler: true, redundancy: true, cliche: true }, customPatterns: [], markerStyle: "highlight", }, ...overrides, }); const createWorkspacePanelSidebarState = ( overrides: Partial = {}, ): WorkspacePanelSidebarStateReturn => ({ sidebarCollapsed: true, ...overrides }); const createWorkspacePanelModeState = ( overrides: Partial = {}, ): WorkspacePanelModeStateReturn => ({ isSplitView: false, isPreviewVisible: false, ...overrides }); const mockPanelSelectors = (overrides: SelectorOverrides = {}): void => { vi.mocked(useSidebarState).mockReturnValue(createSidebarState(overrides.sidebarState)); vi.mocked(useTabsState).mockReturnValue({ tabs: [], activeTabId: null, isSessionHydrated: true }); vi.mocked(useToolbarState).mockReturnValue(createToolbarState(overrides.toolbarState)); vi.mocked(useEditorPresentationActions).mockReturnValue({ setLineNumbersVisible: vi.fn(), toggleLineNumbersVisible: vi.fn(), setTextWrappingEnabled: vi.fn(), toggleTextWrappingEnabled: vi.fn(), setSyntaxHighlightingEnabled: vi.fn(), toggleSyntaxHighlightingEnabled: vi.fn(), setEditorFontSize: vi.fn(), setEditorFontFamily: vi.fn(), setRenderedFontFamily: vi.fn(), setMarkdownPreviewStyle: overrides.setMarkdownPreviewStyle ?? vi.fn(), }); vi.mocked(useLayoutChromeActions).mockReturnValue({ setSidebarCollapsed: vi.fn(), toggleSidebarCollapsed: overrides.toggleSidebarCollapsed ?? vi.fn(), setTopBarsCollapsed: vi.fn(), toggleTabBarCollapsed: vi.fn(), setStatusBarCollapsed: vi.fn(), toggleStatusBarCollapsed: vi.fn(), setShowSearch: overrides.setShowSearch ?? vi.fn(), toggleShowSearch: vi.fn(), setFilenameVisibility: vi.fn(), toggleFilenameVisibility: vi.fn(), }); vi.mocked(useLayoutChromeState).mockReturnValue({ sidebarCollapsed: overrides.workspacePanelSidebarState?.sidebarCollapsed ?? true, topBarsCollapsed: false, statusBarCollapsed: false, showSearch: false, reduceMotion: false, showFilenames: false, createReadmeInNewLocations: true, }); vi.mocked(useLayoutSettingsUiState).mockReturnValue({ isOpen: false, setOpen: vi.fn() }); vi.mocked(useEditorPresentationState).mockReturnValue( createEditorPresentationState(overrides.editorPresentationState), ); vi.mocked(useWorkspacePanelSidebarState).mockReturnValue( createWorkspacePanelSidebarState(overrides.workspacePanelSidebarState), ); vi.mocked(useWorkspacePanelModeState).mockReturnValue( createWorkspacePanelModeState(overrides.workspacePanelModeState), ); vi.mocked(useWorkspacePanelTopBarsCollapsed).mockReturnValue(overrides.topBarsCollapsed ?? true); vi.mocked(useWorkspacePanelStatusBarCollapsed).mockReturnValue(overrides.statusBarCollapsed ?? true); vi.mocked(useWorkspaceController).mockReturnValue({ locations: [], documents: [], documentsByLocation: {}, selectedLocationId: undefined, selectedDocPath: undefined, locationDocuments: [], sidebarFilter: "", isSidebarLoading: false, isSessionHydrated: true, refreshingLocationId: undefined, sidebarRefreshReason: null, tabs: [], activeTabId: null, activeTab: null, setSidebarFilter: vi.fn(), markActiveTabModified: vi.fn(), handleAddLocation: vi.fn(), handleRemoveLocation: vi.fn(), handleSelectLocation: vi.fn(), handleSelectDocument: vi.fn(), handleSelectTab: vi.fn(), handleCloseTab: vi.fn(), handleReorderTabs: vi.fn(), handleCreateDraftTab: vi.fn(), handleCreateNewDocument: vi.fn(), handleRefreshSidebar: vi.fn(), handleRenameDocument: vi.fn(), handleMoveDocument: vi.fn(), handleMoveDirectory: vi.fn(), handleDeleteDocument: vi.fn(), handleCreateDirectory: vi.fn(), handleImportExternalFile: vi.fn(), }); vi.mocked(useSidebarActions).mockReturnValue({ handleAddLocation: vi.fn(), handleRemoveLocation: vi.fn(), handleSelectDocument: vi.fn(), handleCreateNewDocument: vi.fn(), handleRefreshSidebar: vi.fn(), handleRenameDocument: vi.fn(), handleMoveDocument: vi.fn(), handleMoveDirectory: vi.fn(), handleDeleteDocument: vi.fn(), handleImportExternalFile: vi.fn(), }); }; const createWorkspacePanelProps = (overrides: WorkspacePanelPropOverrides = {}): WorkspacePanelProps => ({ toolbar: { saveStatus: "Idle", onSave: vi.fn(), ...overrides.toolbar }, onOpenWelcomeTab: overrides.onOpenWelcomeTab, onOpenImportSheet: overrides.onOpenImportSheet, onOpenStandardSiteImportSheet: overrides.onOpenStandardSiteImportSheet, editor: { initialText: "# Document", onChange: vi.fn(), onSave: vi.fn(), onCursorMove: vi.fn(), onSelectionChange: vi.fn(), ...overrides.editor, }, preview: { renderResult: { html: "

Preview content

", metadata: { title: null, outline: [], links: [], task_items: { total: 0, completed: 0 }, word_count: 2 }, }, theme: "dark", editorLine: 1, previewStyle: "github", renderedFontFamily: "IBM Plex Mono", onScrollToLine: vi.fn(), ...overrides.preview, }, statusBar: { stats: { cursorLine: 1, cursorColumn: 1, wordCount: 0, charCount: 0 }, ...overrides.statusBar }, diagnostics: { isVisible: false, styleCheckEnabled: true, matches: [], onSelectMatch: vi.fn(), onClose: vi.fn(), onOpenSettings: vi.fn(), ...overrides.diagnostics, }, welcome: { isVisible: false, hasLocations: true, locationCount: 1, documentCount: 1, onAddLocation: vi.fn(), ...overrides.welcome, }, activeDocRelPath: overrides.activeDocRelPath, activeDocContentType: overrides.activeDocContentType, }); const renderWorkspacePanel = ( propOverrides: WorkspacePanelPropOverrides = {}, selectorOverrides: SelectorOverrides = {}, ) => { mockPanelSelectors(selectorOverrides); return render(); }; describe("WorkspacePanel", () => { beforeEach(() => { vi.clearAllMocks(); }); it("renders preview-only mode when preview is enabled without split view", () => { const { container } = renderWorkspacePanel({ editor: { initialText: "# Hidden" } }, { toolbarState: { isPreviewVisible: true }, workspacePanelModeState: { isPreviewVisible: true }, }); expect(screen.getByText("Preview content")).toBeInTheDocument(); expect(container.querySelector("[data-testid='editor-container']")).not.toBeInTheDocument(); }); it("switches preview chrome between Reading and Web modes", () => { const setMarkdownPreviewStyle = vi.fn(); renderWorkspacePanel({ editor: { initialText: "# Visible" } }, { setMarkdownPreviewStyle, toolbarState: { isPreviewVisible: true }, workspacePanelModeState: { isPreviewVisible: true }, }); fireEvent.click(screen.getByRole("button", { name: /web/i })); fireEvent.click(screen.getByRole("button", { name: /reading/i })); expect(setMarkdownPreviewStyle).toHaveBeenNthCalledWith(1, "pdf"); expect(setMarkdownPreviewStyle).toHaveBeenNthCalledWith(2, "github"); }); it("renders sidebar controls and supports resizing", () => { const onToggleSidebar = vi.fn(); renderWorkspacePanel({ editor: { initialText: "# Visible" } }, { toggleSidebarCollapsed: onToggleSidebar, workspacePanelSidebarState: { sidebarCollapsed: false }, }); fireEvent.click(screen.getByRole("button", { name: /hide sidebar/i })); expect(onToggleSidebar).toHaveBeenCalledOnce(); const separator = screen.getByRole("separator", { name: "Resize sidebar" }); const sidebarContainer = separator.parentElement as HTMLElement; const appWindow = globalThis as unknown as Window; expect(sidebarContainer).toHaveStyle({ width: "256px" }); fireEvent.pointerDown(separator, { clientX: 256 }); fireEvent.pointerMove(appWindow, { clientX: 360 }); fireEvent.pointerUp(appWindow); expect(sidebarContainer).toHaveStyle({ width: "360px" }); }); it("renders split mode and supports resizing between editor and preview", () => { renderWorkspacePanel({ editor: { initialText: "# Split" } }, { toolbarState: { isSplitView: true, isPreviewVisible: true }, workspacePanelModeState: { isSplitView: true, isPreviewVisible: true }, }); const separator = screen.getByRole("separator", { name: "Resize split panes" }); const editorPane = screen.getByTestId("editor-container").parentElement as HTMLElement; const appWindow = globalThis as unknown as Window; const initialWidth = Number.parseFloat(editorPane.style.width); fireEvent.pointerDown(separator, { clientX: initialWidth }); fireEvent.pointerMove(appWindow, { clientX: initialWidth + 120 }); fireEvent.pointerUp(appWindow); expect(editorPane).toHaveStyle({ width: `${initialWidth + 120}px` }); }); it("falls back from split mode to editor-only when viewport is too narrow", () => { Object.defineProperty(globalThis, "innerWidth", { configurable: true, writable: true, value: 540 }); act(() => { globalThis.dispatchEvent(new Event("resize")); }); const { container } = renderWorkspacePanel({ editor: { initialText: "# Split fallback" } }, { toolbarState: { isSplitView: true, isPreviewVisible: true }, workspacePanelModeState: { isSplitView: true, isPreviewVisible: true }, }); expect(container.querySelector("[aria-label='Resize split panes']")).not.toBeInTheDocument(); expect(screen.queryByText("Preview content")).not.toBeInTheDocument(); expect(container.querySelector("[data-testid='editor-container']")).toBeInTheDocument(); Object.defineProperty(globalThis, "innerWidth", { configurable: true, writable: true, value: 1024 }); act(() => { globalThis.dispatchEvent(new Event("resize")); }); }); it("renders diagnostics panel and routes match actions", () => { const onSelectMatch = vi.fn(); const onClose = vi.fn(); const onOpenSettings = vi.fn(); const match = { from: 6, to: 15, text: "basically", category: "filler" as const, replacement: "remove", line: 1, column: 6, }; renderWorkspacePanel({ diagnostics: { isVisible: true, styleCheckEnabled: true, matches: [match], onSelectMatch, onClose, onOpenSettings, }, }); expect(screen.getByText("Style Check")).toBeInTheDocument(); fireEvent.click(screen.getByText("basically")); expect(onSelectMatch).toHaveBeenCalledWith(match); fireEvent.click(screen.getByLabelText("Close diagnostics panel")); expect(onClose).toHaveBeenCalledOnce(); expect(onOpenSettings).not.toHaveBeenCalled(); }); it("routes tab-strip new tab actions to the welcome handler", () => { const onOpenWelcomeTab = vi.fn(); renderWorkspacePanel({ onOpenWelcomeTab, welcome: { isVisible: false } }, { topBarsCollapsed: false }); fireEvent.click(screen.getByRole("button", { name: /new tab/i })); expect(onOpenWelcomeTab).toHaveBeenCalledOnce(); }); it("renders welcome instead of image view when welcome is visible", () => { renderWorkspacePanel({ welcome: { isVisible: true, hasLocations: true, locationCount: 2, documentCount: 4, onAddLocation: vi.fn() }, activeDocRelPath: "images/cover.png", activeDocContentType: "image/png", }); expect(screen.getByTestId("workspace-welcome-screen")).toBeInTheDocument(); expect(screen.queryByText("Loading image...")).not.toBeInTheDocument(); }); it("renders the welcome screen and routes its actions", () => { const onNewDocument = vi.fn(); const onAddLocation = vi.fn(); const onOpenImportSheet = vi.fn(); const onOpenStandardSiteImportSheet = vi.fn(); const setShowSearch = vi.fn(); renderWorkspacePanel({ toolbar: { onNewDocument }, onOpenImportSheet, onOpenStandardSiteImportSheet, welcome: { isVisible: true, hasLocations: true, locationCount: 2, documentCount: 4, onAddLocation }, }, { workspacePanelSidebarState: { sidebarCollapsed: true }, setShowSearch }); expect(screen.getByTestId("workspace-welcome-screen")).toBeInTheDocument(); fireEvent.click(screen.getByRole("button", { name: /create new/i })); fireEvent.click(screen.getByRole("button", { name: /open existing/i })); fireEvent.click(screen.getByRole("button", { name: /import from tangled/i })); fireEvent.click(screen.getByRole("button", { name: /import standard\.site/i })); fireEvent.click(screen.getByRole("button", { name: /add another location/i })); expect(onNewDocument).toHaveBeenCalledOnce(); expect(setShowSearch).toHaveBeenCalledWith(true); expect(onOpenImportSheet).toHaveBeenCalledOnce(); expect(onOpenStandardSiteImportSheet).toHaveBeenCalledOnce(); expect(onAddLocation).toHaveBeenCalledOnce(); }); });