feat: add diff method toggle buttons

Author: remarkablemark

specs/002-toggle-diff-options/tasks.md

@@ -19,9 +19,9 @@
 
 **Purpose**: Add the `DiffMethod` type and the generic `useLocalStorage` hook that all subsequent tasks depend on.
 
-- [ ] T001 Add `DiffMethod` type (`'characters' | 'words' | 'lines'`) to src/types/diff.ts
-- [ ] T002 [P] Write unit tests for `useLocalStorage` hook in src/hooks/useLocalStorage.test.ts (read/write, fallback on missing key, fallback on invalid JSON, update persists to localStorage)
-- [ ] T003 [P] Implement `useLocalStorage<T>` hook in src/hooks/useLocalStorage.ts (generic useState + localStorage read/write with JSON serialization and error fallback)
+- [x] T001 Add `DiffMethod` type (`'characters' | 'words' | 'lines'`) to src/types/diff.ts
+- [x] T002 [P] Write unit tests for `useLocalStorage` hook in src/hooks/useLocalStorage.test.ts (read/write, fallback on missing key, fallback on invalid JSON, update persists to localStorage)
+- [x] T003 [P] Implement `useLocalStorage<T>` hook in src/hooks/useLocalStorage.ts (generic useState + localStorage read/write with JSON serialization and error fallback)
 
 **Checkpoint**: `DiffMethod` type exists, `useLocalStorage` hook is tested and working.
 
@@ -33,8 +33,8 @@
 
 **⚠️ CRITICAL**: No user story work can begin until this phase is complete.
 
-- [ ] T004 Update `useDiff` hook to accept a third parameter `method: DiffMethod` and dispatch to `diffChars`/`diffWords`/`diffLines` in src/hooks/useDiff.ts
-- [ ] T005 Update `useDiff` tests to cover character-level and line-level diff methods in src/hooks/useDiff.test.ts
+- [x] T004 Update `useDiff` hook to accept a third parameter `method: DiffMethod` and dispatch to `diffChars`/`diffWords`/`diffLines` in src/hooks/useDiff.ts
+- [x] T005 Update `useDiff` tests to cover character-level and line-level diff methods in src/hooks/useDiff.test.ts
 
 **Checkpoint**: `useDiff` supports all three diff methods with tests passing.
 
@@ -50,15 +50,15 @@
 
 > **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
 
-- [ ] T006 [P] [US1] Write unit tests for `DiffMethodToggle` component in src/components/DiffMethodToggle/DiffMethodToggle.test.tsx (renders three buttons for characters/words/lines, highlights active method, calls onMethodChange on click, is keyboard accessible)
-- [ ] T007 [P] [US1] Write integration tests for diff method switching in src/components/App/App.test.tsx (switching method changes diff output, default is "words", localStorage persistence restores selection on re-render)
+- [x] T006 [P] [US1] Write unit tests for `DiffMethodToggle` component in src/components/DiffMethodToggle/DiffMethodToggle.test.tsx (renders three buttons for characters/words/lines, highlights active method, calls onMethodChange on click, is keyboard accessible)
+- [x] T007 [P] [US1] Write integration tests for diff method switching in src/components/App/App.test.tsx (switching method changes diff output, default is "words", localStorage persistence restores selection on re-render)
 
 ### Implementation for User Story 1
 
-- [ ] T008 [P] [US1] Create `DiffMethodToggleProps` interface in src/components/DiffMethodToggle/DiffMethodToggle.types.ts
-- [ ] T009 [P] [US1] Create barrel export in src/components/DiffMethodToggle/index.ts
-- [ ] T010 [US1] Implement `DiffMethodToggle` component with 3-button segmented group (Characters | Words | Lines), `role="group"`, `aria-label`, active/inactive Tailwind styling per research.md in src/components/DiffMethodToggle/DiffMethodToggle.tsx
-- [ ] T011 [US1] Update `App` component: add `diffMethod` state via `useLocalStorage('diffMethod', 'words')`, migrate `viewMode` to `useLocalStorage('viewMode', 'unified')`, pass `diffMethod` to `useDiff` and `DiffMethodToggle`, place `DiffMethodToggle` on left side of diff header in src/components/App/App.tsx
+- [x] T008 [P] [US1] Create `DiffMethodToggleProps` interface in src/components/DiffMethodToggle/DiffMethodToggle.types.ts
+- [x] T009 [P] [US1] Create barrel export in src/components/DiffMethodToggle/index.ts
+- [x] T010 [US1] Implement `DiffMethodToggle` component with 3-button segmented group (Characters | Words | Lines), `role="group"`, `aria-label`, active/inactive Tailwind styling per research.md in src/components/DiffMethodToggle/DiffMethodToggle.tsx
+- [x] T011 [US1] Update `App` component: add `diffMethod` state via `useLocalStorage('diffMethod', 'words')`, migrate `viewMode` to `useLocalStorage('viewMode', 'unified')`, pass `diffMethod` to `useDiff` and `DiffMethodToggle`, place `DiffMethodToggle` on left side of diff header in src/components/App/App.tsx
 
 **Checkpoint**: User Story 1 is fully functional — diff method toggle works, selections persist to localStorage, all tests pass.
 
@@ -68,9 +68,9 @@
 
 **Purpose**: Final quality pass.
 
-- [ ] T012 [P] Accessibility audit — verify `role="group"`, `aria-label` on DiffMethodToggle, keyboard tab order, button focus states
-- [ ] T013 Run all quality gates: `npm run lint`, `npm run lint:tsc`, `npm run test:ci`, `npm run build`
-- [ ] T014 Run quickstart.md validation — follow all steps in specs/002-toggle-diff-options/quickstart.md and verify they work end-to-end
+- [x] T012 [P] Accessibility audit — verify `role="group"`, `aria-label` on DiffMethodToggle, keyboard tab order, button focus states
+- [x] T013 Run all quality gates: `npm run lint`, `npm run lint:tsc`, `npm run test:ci`, `npm run build`
+- [x] T014 Run quickstart.md validation — follow all steps in specs/002-toggle-diff-options/quickstart.md and verify they work end-to-end
 
 ---
 

src/components/App/App.test.tsx

@@ -37,6 +37,7 @@ describe('App component', () => {
   beforeEach(() => {
     const { mockMatchMedia } = createMockMatchMedia(false);
     window.matchMedia = mockMatchMedia;
+    localStorage.clear();
   });
 
   afterEach(() => {
@@ -98,19 +99,23 @@ describe('App component', () => {
     expect(screen.getByRole('status')).toBeInTheDocument();
   });
 
-  it('renders "Diff" label when diff output is visible', async () => {
+  it('renders diff method toggle when diff output is visible', async () => {
     const user = userEvent.setup();
     render(<App />);
 
-    expect(screen.queryByText('Diff')).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('group', { name: 'Diff method' }),
+    ).not.toBeInTheDocument();
 
     const original = screen.getByLabelText('Original Text');
     const modified = screen.getByLabelText('Modified Text');
 
     await user.type(original, 'hello');
     await user.type(modified, 'hello');
 
-    expect(screen.getByText('Diff')).toBeInTheDocument();
+    expect(
+      screen.getByRole('group', { name: 'Diff method' }),
+    ).toBeInTheDocument();
   });
 
   it('shows diff segments when texts differ', async () => {
@@ -316,4 +321,110 @@ describe('App component', () => {
     const addedSpan = diffOutput?.querySelector('.bg-green-100');
     expect(addedSpan).toBeInTheDocument();
   });
+
+  it('defaults to Words diff method', async () => {
+    const user = userEvent.setup();
+    render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'hello');
+    await user.type(modified, 'world');
+
+    const wordsButton = screen.getByRole('button', { name: 'Words' });
+    expect(wordsButton.className).toContain('bg-blue-500');
+  });
+
+  it('switches diff output when changing diff method', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'abc');
+    await user.type(modified, 'aXc');
+
+    const diffOutput = container.querySelector('[aria-live="polite"]');
+
+    await user.click(screen.getByRole('button', { name: 'Characters' }));
+
+    const removedSpan = diffOutput?.querySelector('.bg-red-100');
+    expect(removedSpan).toBeInTheDocument();
+    expect(removedSpan?.textContent).toBe('-b');
+
+    const addedSpan = diffOutput?.querySelector('.bg-green-100');
+    expect(addedSpan).toBeInTheDocument();
+    expect(addedSpan?.textContent).toBe('+X');
+  });
+
+  it('persists diff method to localStorage', async () => {
+    const user = userEvent.setup();
+    render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'hello');
+    await user.type(modified, 'world');
+
+    await user.click(screen.getByRole('button', { name: 'Lines' }));
+
+    expect(localStorage.getItem('diffMethod')).toBe(JSON.stringify('lines'));
+  });
+
+  it('restores diff method from localStorage on mount', async () => {
+    localStorage.setItem('diffMethod', JSON.stringify('characters'));
+
+    const user = userEvent.setup();
+    render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'hello');
+    await user.type(modified, 'world');
+
+    const charsButton = screen.getByRole('button', { name: 'Characters' });
+    expect(charsButton.className).toContain('bg-blue-500');
+  });
+
+  it('persists view mode to localStorage', async () => {
+    const { mockMatchMedia } = createMockMatchMedia(true);
+    window.matchMedia = mockMatchMedia;
+
+    const user = userEvent.setup();
+    render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'hello');
+    await user.type(modified, 'world');
+
+    await user.click(screen.getByRole('button', { name: /side-by-side/i }));
+
+    expect(localStorage.getItem('viewMode')).toBe(
+      JSON.stringify('side-by-side'),
+    );
+  });
+
+  it('restores view mode from localStorage on mount', async () => {
+    const { mockMatchMedia } = createMockMatchMedia(true);
+    window.matchMedia = mockMatchMedia;
+    localStorage.setItem('viewMode', JSON.stringify('side-by-side'));
+
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'hello');
+    await user.type(modified, 'world');
+
+    const columns = container.querySelectorAll('[data-testid^="diff-column-"]');
+    expect(columns).toHaveLength(2);
+  });
 });

src/components/App/App.tsx

@@ -1,17 +1,26 @@
 import { useState } from 'react';
+import DiffMethodToggle from 'src/components/DiffMethodToggle';
 import DiffViewer from 'src/components/DiffViewer';
 import TextInput from 'src/components/TextInput';
 import ViewToggle from 'src/components/ViewToggle';
 import { useDiff } from 'src/hooks/useDiff';
+import { useLocalStorage } from 'src/hooks/useLocalStorage';
 import { useMediaQuery } from 'src/hooks/useMediaQuery';
-import type { ViewMode } from 'src/types/diff';
+import type { DiffMethod, ViewMode } from 'src/types/diff';
 
 export default function App() {
   const [originalText, setOriginalText] = useState('');
   const [modifiedText, setModifiedText] = useState('');
-  const [viewMode, setViewMode] = useState<ViewMode>('unified');
+  const [viewMode, setViewMode] = useLocalStorage<ViewMode>(
+    'viewMode',
+    'unified',
+  );
+  const [diffMethod, setDiffMethod] = useLocalStorage<DiffMethod>(
+    'diffMethod',
+    'words',
+  );
 
-  const diffResult = useDiff(originalText, modifiedText);
+  const diffResult = useDiff(originalText, modifiedText, diffMethod);
   const isDesktop = useMediaQuery('(min-width: 768px)');
   const effectiveViewMode = isDesktop ? viewMode : 'unified';
 
@@ -39,9 +48,10 @@ export default function App() {
       {diffResult && (
         <div className="mt-6">
           <div className="mb-1 flex items-center justify-between">
-            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-              Diff
-            </span>
+            <DiffMethodToggle
+              activeMethod={diffMethod}
+              onMethodChange={setDiffMethod}
+            />
             <ViewToggle activeMode={viewMode} onModeChange={setViewMode} />
           </div>
           <DiffViewer result={diffResult} viewMode={effectiveViewMode} />

src/components/DiffMethodToggle/DiffMethodToggle.test.tsx

@@ -0,0 +1,93 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import DiffMethodToggle from './DiffMethodToggle';
+
+describe('DiffMethodToggle', () => {
+  const defaultProps = {
+    activeMethod: 'words' as const,
+    onMethodChange: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders three buttons for characters, words, and lines', () => {
+    render(<DiffMethodToggle {...defaultProps} />);
+
+    expect(
+      screen.getByRole('button', { name: 'Characters' }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Words' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Lines' })).toBeInTheDocument();
+  });
+
+  it('renders a group with accessible label', () => {
+    render(<DiffMethodToggle {...defaultProps} />);
+
+    expect(
+      screen.getByRole('group', { name: 'Diff method' }),
+    ).toBeInTheDocument();
+  });
+
+  it('highlights the active method button', () => {
+    render(<DiffMethodToggle {...defaultProps} activeMethod="lines" />);
+
+    const linesButton = screen.getByRole('button', { name: 'Lines' });
+    expect(linesButton.className).toContain('bg-blue-500');
+
+    const wordsButton = screen.getByRole('button', { name: 'Words' });
+    expect(wordsButton.className).not.toContain('bg-blue-500');
+  });
+
+  it('calls onMethodChange with "characters" when Characters is clicked', async () => {
+    const user = userEvent.setup();
+    const onMethodChange = vi.fn();
+    render(
+      <DiffMethodToggle {...defaultProps} onMethodChange={onMethodChange} />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Characters' }));
+
+    expect(onMethodChange).toHaveBeenCalledWith('characters');
+  });
+
+  it('calls onMethodChange with "words" when Words is clicked', async () => {
+    const user = userEvent.setup();
+    const onMethodChange = vi.fn();
+    render(
+      <DiffMethodToggle {...defaultProps} onMethodChange={onMethodChange} />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Words' }));
+
+    expect(onMethodChange).toHaveBeenCalledWith('words');
+  });
+
+  it('calls onMethodChange with "lines" when Lines is clicked', async () => {
+    const user = userEvent.setup();
+    const onMethodChange = vi.fn();
+    render(
+      <DiffMethodToggle {...defaultProps} onMethodChange={onMethodChange} />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Lines' }));
+
+    expect(onMethodChange).toHaveBeenCalledWith('lines');
+  });
+
+  it('is keyboard accessible via Enter key', async () => {
+    const user = userEvent.setup();
+    const onMethodChange = vi.fn();
+    render(
+      <DiffMethodToggle {...defaultProps} onMethodChange={onMethodChange} />,
+    );
+
+    const charsButton = screen.getByRole('button', { name: 'Characters' });
+    charsButton.focus();
+    await user.keyboard('{Enter}');
+
+    expect(onMethodChange).toHaveBeenCalledWith('characters');
+  });
+});

src/components/DiffMethodToggle/DiffMethodToggle.tsx

@@ -0,0 +1,50 @@
+import type { DiffMethodToggleProps } from './DiffMethodToggle.types';
+
+export default function DiffMethodToggle({
+  activeMethod,
+  onMethodChange,
+}: DiffMethodToggleProps) {
+  return (
+    <div className="flex gap-1" role="group" aria-label="Diff method">
+      <button
+        type="button"
+        onClick={() => {
+          onMethodChange('characters');
+        }}
+        className={`rounded-l-md px-3 py-1.5 text-sm font-medium transition-colors ${
+          activeMethod === 'characters'
+            ? 'bg-blue-500 text-white dark:bg-blue-600'
+            : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
+        }`}
+      >
+        Characters
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          onMethodChange('words');
+        }}
+        className={`px-3 py-1.5 text-sm font-medium transition-colors ${
+          activeMethod === 'words'
+            ? 'bg-blue-500 text-white dark:bg-blue-600'
+            : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
+        }`}
+      >
+        Words
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          onMethodChange('lines');
+        }}
+        className={`rounded-r-md px-3 py-1.5 text-sm font-medium transition-colors ${
+          activeMethod === 'lines'
+            ? 'bg-blue-500 text-white dark:bg-blue-600'
+            : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
+        }`}
+      >
+        Lines
+      </button>
+    </div>
+  );
+}