diff --git a/src/renderer/components/layout/AppHeader.tsx b/src/renderer/components/layout/AppHeader.tsx index 24f4a09..7e6a4bf 100644 --- a/src/renderer/components/layout/AppHeader.tsx +++ b/src/renderer/components/layout/AppHeader.tsx @@ -1,4 +1,4 @@ -import { PanelLeft, PanelRight, Keyboard } from 'lucide-react'; +import { PanelLeft, PanelRight, Keyboard, Settings, Info } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { ThemeToggle } from '@/components/theme-toggle'; import { useAppStore } from '@/stores/app-store'; @@ -47,6 +47,22 @@ export function AppHeader() { > + + diff --git a/tests/component/layout/AppHeader.test.tsx b/tests/component/layout/AppHeader.test.tsx index 98ec1ec..27494cf 100644 --- a/tests/component/layout/AppHeader.test.tsx +++ b/tests/component/layout/AppHeader.test.tsx @@ -19,6 +19,12 @@ describe('AppHeader', () => { useAppStore.getState().togglePreview(); }); useCommandStore.getState().register('shortcuts.show', () => {}); + useCommandStore.getState().register('settings.open', () => { + useAppStore.getState().openModal('settings'); + }); + useCommandStore.getState().register('help.about', () => { + useAppStore.getState().openModal('about'); + }); }); it('renders the app title', () => { @@ -64,4 +70,24 @@ describe('AppHeader', () => { // The test passes if no error is thrown and the click is processed. expect(btn).toBeInTheDocument(); }); + + it('settings button opens settings modal', async () => { + render( + + + + ); + await userEvent.click(screen.getByRole('button', { name: /settings/i })); + expect(useAppStore.getState().modal).toEqual({ kind: 'settings' }); + }); + + it('about button opens about modal', async () => { + render( + + + + ); + await userEvent.click(screen.getByRole('button', { name: /^about$/i })); + expect(useAppStore.getState().modal).toEqual({ kind: 'about' }); + }); }); \ No newline at end of file