diff --git a/src/components/ControlsPanel/ControlsPanel.tsx b/src/components/ControlsPanel/ControlsPanel.tsx index e2a90ce..9564e2d 100644 --- a/src/components/ControlsPanel/ControlsPanel.tsx +++ b/src/components/ControlsPanel/ControlsPanel.tsx @@ -25,12 +25,26 @@ export function ControlsPanel({ } }; + const handleIncrementByTen = () => { + if (terminalCount < maxTerminals) { + const newCount = Math.min(terminalCount + 10, maxTerminals); + onTerminalCountChange(newCount); + } + }; + const handleDecrement = () => { if (terminalCount > minTerminals) { onTerminalCountChange(terminalCount - 1); } }; + const handleDecrementByTen = () => { + if (terminalCount > minTerminals) { + const newCount = Math.max(terminalCount - 10, minTerminals); + onTerminalCountChange(newCount); + } + }; + const toggleVisibility = () => { setIsVisible(!isVisible); }; @@ -67,7 +81,17 @@ export function ControlsPanel({ {/* Terminal Count Control */} -
+
+ + - + {terminalCount} terminal{terminalCount !== 1 ? 's' : ''} - + + +
{/* Arrange Button */} diff --git a/src/components/ControlsPanel/__tests__/ControlsPanel.test.tsx b/src/components/ControlsPanel/__tests__/ControlsPanel.test.tsx index d87776c..b7bfb6e 100644 --- a/src/components/ControlsPanel/__tests__/ControlsPanel.test.tsx +++ b/src/components/ControlsPanel/__tests__/ControlsPanel.test.tsx @@ -29,6 +29,8 @@ describe('ControlsPanel', () => { expect(screen.getByText('1 terminal')).toBeInTheDocument(); expect(screen.getByText('+')).toBeInTheDocument(); expect(screen.getByText('-')).toBeInTheDocument(); + expect(screen.getByText('+10')).toBeInTheDocument(); + expect(screen.getByText('-10')).toBeInTheDocument(); expect(screen.getByText('Arrange')).toBeInTheDocument(); expect(screen.getByText(/Theme:/)).toBeInTheDocument(); expect(screen.getByText(/Made with ❤️ by/)).toBeInTheDocument(); @@ -56,6 +58,28 @@ describe('ControlsPanel', () => { expect(mockOnTerminalCountChange).toHaveBeenCalledWith(2); }); + it('should call onTerminalCountChange when +10 button is clicked', () => { + const mockOnTerminalCountChange = vi.fn(); + const mockOnArrangeTerminals = vi.fn(); + + render( + + + + + + ); + + const incrementTenButton = screen.getByText('+10'); + fireEvent.click(incrementTenButton); + + expect(mockOnTerminalCountChange).toHaveBeenCalledWith(11); + }); + it('should call onArrangeTerminals when Arrange button is clicked', () => { const mockOnTerminalCountChange = vi.fn(); const mockOnArrangeTerminals = vi.fn(); @@ -80,8 +104,30 @@ describe('ControlsPanel', () => { it('should disable decrement button when at minimum (1)', () => { renderControlsPanel(); - + const decrementButton = screen.getByText('-'); expect(decrementButton).toBeDisabled(); }); -}); \ No newline at end of file + + it('should call onTerminalCountChange when -10 button is clicked', () => { + const mockOnTerminalCountChange = vi.fn(); + const mockOnArrangeTerminals = vi.fn(); + + render( + + + + + + ); + + const decrementTenButton = screen.getByText('-10'); + fireEvent.click(decrementTenButton); + + expect(mockOnTerminalCountChange).toHaveBeenCalledWith(10); + }); +});