diff --git a/src/renderer/components/layout/Toolbar.tsx b/src/renderer/components/layout/Toolbar.tsx
index c9dc98c..b82449d 100644
--- a/src/renderer/components/layout/Toolbar.tsx
+++ b/src/renderer/components/layout/Toolbar.tsx
@@ -1,15 +1,77 @@
-import { Bold, Italic, List, ListOrdered, Code, Link as LinkIcon } from 'lucide-react';
+import { Bold, Italic, List, ListOrdered, Code, Link as LinkIcon, PanelLeft, PanelRight, Save, FolderOpen, FileText } from 'lucide-react';
import { Button } from '@/components/ui/button';
+import { useCommandStore } from '@/stores/command-store';
+import { useAppStore } from '@/stores/app-store';
export function Toolbar() {
+ const dispatch = useCommandStore((s) => s.dispatch);
+ const { sidebarVisible, previewVisible } = useAppStore();
+
return (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
-}
\ No newline at end of file
+}
diff --git a/tests/component/layout/Toolbar.test.tsx b/tests/component/layout/Toolbar.test.tsx
index 9c49cad..62ca379 100644
--- a/tests/component/layout/Toolbar.test.tsx
+++ b/tests/component/layout/Toolbar.test.tsx
@@ -1,11 +1,98 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
import { Toolbar } from '@/components/layout/Toolbar';
+import { useCommandStore } from '@/stores/command-store';
+import { useAppStore } from '@/stores/app-store';
describe('Toolbar', () => {
+ beforeEach(() => {
+ useCommandStore.setState({ handlers: {} });
+ useAppStore.setState({
+ sidebarVisible: true,
+ previewVisible: true,
+ zenMode: false,
+ paneSizes: { sidebar: 20, editor: 50, preview: 30 },
+ });
+ });
+
it('renders formatting buttons', () => {
render(
);
expect(screen.getByRole('button', { name: /bold/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /italic/i })).toBeInTheDocument();
});
-});
\ No newline at end of file
+
+ it('renders all toolbar buttons', () => {
+ render(
);
+ expect(screen.getByTestId('toolbar-open-file')).toBeInTheDocument();
+ expect(screen.getByTestId('toolbar-open-folder')).toBeInTheDocument();
+ expect(screen.getByTestId('toolbar-save')).toBeInTheDocument();
+ expect(screen.getByTestId('toolbar-toggle-sidebar')).toBeInTheDocument();
+ expect(screen.getByTestId('toolbar-toggle-preview')).toBeInTheDocument();
+ });
+
+ it('Open file button dispatches file.open', () => {
+ const handler = vi.fn();
+ useCommandStore.getState().register('file.open', handler);
+ render(
);
+ fireEvent.click(screen.getByTestId('toolbar-open-file'));
+ expect(handler).toHaveBeenCalledTimes(1);
+ });
+
+ it('Open folder button dispatches file.openFolder', () => {
+ const handler = vi.fn();
+ useCommandStore.getState().register('file.openFolder', handler);
+ render(
);
+ fireEvent.click(screen.getByTestId('toolbar-open-folder'));
+ expect(handler).toHaveBeenCalledTimes(1);
+ });
+
+ it('Save button dispatches file.save', () => {
+ const handler = vi.fn();
+ useCommandStore.getState().register('file.save', handler);
+ render(
);
+ fireEvent.click(screen.getByTestId('toolbar-save'));
+ expect(handler).toHaveBeenCalledTimes(1);
+ });
+
+ it('Toggle sidebar button dispatches view.toggleSidebar and reflects aria-pressed', () => {
+ const handler = vi.fn();
+ useCommandStore.getState().register('view.toggleSidebar', handler);
+ render(
);
+ const btn = screen.getByTestId('toolbar-toggle-sidebar');
+ expect(btn).toHaveAttribute('aria-pressed', 'true');
+ fireEvent.click(btn);
+ expect(handler).toHaveBeenCalledTimes(1);
+ });
+
+ it('Toggle preview button dispatches view.togglePreview', () => {
+ const handler = vi.fn();
+ useCommandStore.getState().register('view.togglePreview', handler);
+ render(
);
+ fireEvent.click(screen.getByTestId('toolbar-toggle-preview'));
+ expect(handler).toHaveBeenCalledTimes(1);
+ });
+
+ it('toggle sidebar end-to-end: command flips appStore state, aria-pressed reflects it', () => {
+ useCommandStore.getState().register('view.toggleSidebar', () => {
+ useAppStore.getState().toggleSidebar();
+ });
+ render(
);
+ const btn = screen.getByTestId('toolbar-toggle-sidebar');
+ expect(btn).toHaveAttribute('aria-pressed', 'true');
+ act(() => {
+ fireEvent.click(btn);
+ });
+ expect(useAppStore.getState().sidebarVisible).toBe(false);
+ expect(btn).toHaveAttribute('aria-pressed', 'false');
+ });
+
+ it('formatting buttons (bold, italic, etc.) are disabled (Phase 9 work)', () => {
+ render(
);
+ expect(screen.getByLabelText('Bold')).toBeDisabled();
+ expect(screen.getByLabelText('Italic')).toBeDisabled();
+ expect(screen.getByLabelText('Unordered list')).toBeDisabled();
+ expect(screen.getByLabelText('Ordered list')).toBeDisabled();
+ expect(screen.getByLabelText('Code')).toBeDisabled();
+ expect(screen.getByLabelText('Link')).toBeDisabled();
+ });
+});