Branch batch scroll (#12680)

packages/cli/src/ui/components/shared/Scrollable.test.tsx

@@ -7,7 +7,9 @@
 import { renderWithProviders } from '../../../test-utils/render.js';
 import { Scrollable } from './Scrollable.js';
 import { Text } from 'ink';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import * as ScrollProviderModule from '../../contexts/ScrollProvider.js';
+import { act } from 'react';
 
 vi.mock('ink', async (importOriginal) => {
   const actual = await importOriginal<typeof import('ink')>();
@@ -19,7 +21,22 @@ vi.mock('ink', async (importOriginal) => {
   };
 });
 
+vi.mock('../../hooks/useAnimatedScrollbar.js', () => ({
+  useAnimatedScrollbar: (
+    hasFocus: boolean,
+    scrollBy: (delta: number) => void,
+  ) => ({
+    scrollbarColor: 'white',
+    flashScrollbar: vi.fn(),
+    scrollByWithAnimation: scrollBy,
+  }),
+}));
+
 describe('<Scrollable />', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
   it('renders children', () => {
     const { lastFrame } = renderWithProviders(
       <Scrollable hasFocus={false} height={5}>
@@ -52,4 +69,52 @@ describe('<Scrollable />', () => {
     );
     expect(lastFrame()).toMatchSnapshot();
   });
+
+  it('updates scroll position correctly when scrollBy is called multiple times in the same tick', () => {
+    let capturedEntry: ScrollProviderModule.ScrollableEntry | undefined;
+    vi.spyOn(ScrollProviderModule, 'useScrollable').mockImplementation(
+      (entry, isActive) => {
+        if (isActive) {
+          capturedEntry = entry as ScrollProviderModule.ScrollableEntry;
+        }
+      },
+    );
+
+    renderWithProviders(
+      <Scrollable hasFocus={true} height={5}>
+        <Text>Line 1</Text>
+        <Text>Line 2</Text>
+        <Text>Line 3</Text>
+        <Text>Line 4</Text>
+        <Text>Line 5</Text>
+        <Text>Line 6</Text>
+        <Text>Line 7</Text>
+        <Text>Line 8</Text>
+        <Text>Line 9</Text>
+        <Text>Line 10</Text>
+      </Scrollable>,
+    );
+
+    expect(capturedEntry).toBeDefined();
+
+    if (!capturedEntry) {
+      throw new Error('capturedEntry is undefined');
+    }
+
+    // Initial state (starts at bottom because of auto-scroll logic)
+    expect(capturedEntry.getScrollState().scrollTop).toBe(5);
+
+    // Call scrollBy multiple times (upwards) in the same tick
+    act(() => {
+      capturedEntry!.scrollBy(-1);
+      capturedEntry!.scrollBy(-1);
+    });
+    // Should have moved up by 2
+    expect(capturedEntry.getScrollState().scrollTop).toBe(3);
+
+    act(() => {
+      capturedEntry!.scrollBy(-2);
+    });
+    expect(capturedEntry.getScrollState().scrollTop).toBe(1);
+  });
 });