From 5b7bf74d66645163db14e6f1f7aea1f31d8b5f8a Mon Sep 17 00:00:00 2001
From: Miguel Solorio <miguelsolorio@google.com>
Date: Thu, 17 Jul 2025 15:51:42 -0700
Subject: Add numbers to selection list (#4320)

---
 .../components/shared/RadioButtonSelect.test.tsx   | 115 +++++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 packages/cli/src/ui/components/shared/RadioButtonSelect.test.tsx

(limited to 'packages/cli/src/ui/components/shared/RadioButtonSelect.test.tsx')

diff --git a/packages/cli/src/ui/components/shared/RadioButtonSelect.test.tsx b/packages/cli/src/ui/components/shared/RadioButtonSelect.test.tsx
new file mode 100644
index 00000000..4b36fe3c
--- /dev/null
+++ b/packages/cli/src/ui/components/shared/RadioButtonSelect.test.tsx
@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import {
+  RadioButtonSelect,
+  type RadioSelectItem,
+} from './RadioButtonSelect.js';
+import { describe, it, expect } from 'vitest';
+
+const ITEMS: Array<RadioSelectItem<string>> = [
+  { label: 'Option 1', value: 'one' },
+  { label: 'Option 2', value: 'two' },
+  { label: 'Option 3', value: 'three', disabled: true },
+];
+
+describe('<RadioButtonSelect />', () => {
+  it('renders a list of items and matches snapshot', () => {
+    const { lastFrame } = render(
+      <RadioButtonSelect items={ITEMS} onSelect={() => {}} isFocused={true} />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders with the second item selected and matches snapshot', () => {
+    const { lastFrame } = render(
+      <RadioButtonSelect
+        items={ITEMS}
+        initialIndex={1}
+        onSelect={() => {}}
+        isFocused={true}
+      />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders with numbers hidden and matches snapshot', () => {
+    const { lastFrame } = render(
+      <RadioButtonSelect
+        items={ITEMS}
+        onSelect={() => {}}
+        isFocused={true}
+        showNumbers={false}
+      />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders with scroll arrows and matches snapshot', () => {
+    const manyItems = Array.from({ length: 20 }, (_, i) => ({
+      label: `Item ${i + 1}`,
+      value: `item-${i + 1}`,
+    }));
+    const { lastFrame } = render(
+      <RadioButtonSelect
+        items={manyItems}
+        onSelect={() => {}}
+        isFocused={true}
+        showScrollArrows={true}
+        maxItemsToShow={5}
+      />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders with special theme display and matches snapshot', () => {
+    const themeItems: Array<RadioSelectItem<string>> = [
+      {
+        label: 'Theme A (Light)',
+        value: 'a-light',
+        themeNameDisplay: 'Theme A',
+        themeTypeDisplay: '(Light)',
+      },
+      {
+        label: 'Theme B (Dark)',
+        value: 'b-dark',
+        themeNameDisplay: 'Theme B',
+        themeTypeDisplay: '(Dark)',
+      },
+    ];
+    const { lastFrame } = render(
+      <RadioButtonSelect
+        items={themeItems}
+        onSelect={() => {}}
+        isFocused={true}
+      />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders a list with >10 items and matches snapshot', () => {
+    const manyItems = Array.from({ length: 12 }, (_, i) => ({
+      label: `Item ${i + 1}`,
+      value: `item-${i + 1}`,
+    }));
+    const { lastFrame } = render(
+      <RadioButtonSelect
+        items={manyItems}
+        onSelect={() => {}}
+        isFocused={true}
+      />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders nothing when no items are provided', () => {
+    const { lastFrame } = render(
+      <RadioButtonSelect items={[]} onSelect={() => {}} isFocused={true} />,
+    );
+    expect(lastFrame()).toBe('');
+  });
+});
-- 
cgit v1.2.3

