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);
+ });
+});