feat: Add reusable EnumSelector UI component (split from #6832) (#7774)

Co-authored-by: hoteye <hoteye@users.noreply.github.com> Co-authored-by: cornmander <shikhman@google.com>
2026-04-21 02:24:09 -07:00 · 2025-09-10 05:45:12 +08:00
parent 8b40e000d6
commit da58b93026
4 changed files with 249 additions and 1 deletions
@@ -0,0 +1,152 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { renderWithProviders } from '../../../test-utils/render.js';
+import { EnumSelector } from './EnumSelector.js';
+import type { SettingEnumOption } from '../../../config/settingsSchema.js';
+import { describe, it, expect } from 'vitest';
+
+const LANGUAGE_OPTIONS: readonly SettingEnumOption[] = [
+  { label: 'English', value: 'en' },
+  { label: '中文 (简体)', value: 'zh' },
+  { label: 'Español', value: 'es' },
+  { label: 'Français', value: 'fr' },
+];
+
+const NUMERIC_OPTIONS: readonly SettingEnumOption[] = [
+  { label: 'Low', value: 1 },
+  { label: 'Medium', value: 2 },
+  { label: 'High', value: 3 },
+];
+
+describe('<EnumSelector />', () => {
+  it('renders with string options and matches snapshot', () => {
+    const { lastFrame } = renderWithProviders(
+      <EnumSelector
+        options={LANGUAGE_OPTIONS}
+        currentValue="en"
+        isActive={true}
+        onValueChange={() => {}}
+      />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders with numeric options and matches snapshot', () => {
+    const { lastFrame } = renderWithProviders(
+      <EnumSelector
+        options={NUMERIC_OPTIONS}
+        currentValue={2}
+        isActive={true}
+        onValueChange={() => {}}
+      />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders inactive state and matches snapshot', () => {
+    const { lastFrame } = renderWithProviders(
+      <EnumSelector
+        options={LANGUAGE_OPTIONS}
+        currentValue="zh"
+        isActive={false}
+        onValueChange={() => {}}
+      />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders with single option and matches snapshot', () => {
+    const singleOption: readonly SettingEnumOption[] = [
+      { label: 'Only Option', value: 'only' },
+    ];
+    const { lastFrame } = renderWithProviders(
+      <EnumSelector
+        options={singleOption}
+        currentValue="only"
+        isActive={true}
+        onValueChange={() => {}}
+      />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders nothing when no options are provided', () => {
+    const { lastFrame } = renderWithProviders(
+      <EnumSelector
+        options={[]}
+        currentValue=""
+        isActive={true}
+        onValueChange={() => {}}
+      />,
+    );
+    expect(lastFrame()).toBe('');
+  });
+
+  it('handles currentValue not found in options', () => {
+    const { lastFrame } = renderWithProviders(
+      <EnumSelector
+        options={LANGUAGE_OPTIONS}
+        currentValue="invalid"
+        isActive={true}
+        onValueChange={() => {}}
+      />,
+    );
+    // Should default to first option
+    expect(lastFrame()).toContain('English');
+  });
+
+  it('updates when currentValue changes externally', () => {
+    const { rerender, lastFrame } = renderWithProviders(
+      <EnumSelector
+        options={LANGUAGE_OPTIONS}
+        currentValue="en"
+        isActive={true}
+        onValueChange={() => {}}
+      />,
+    );
+    expect(lastFrame()).toContain('English');
+
+    rerender(
+      <EnumSelector
+        options={LANGUAGE_OPTIONS}
+        currentValue="zh"
+        isActive={true}
+        onValueChange={() => {}}
+      />,
+    );
+    expect(lastFrame()).toContain('中文 (简体)');
+  });
+
+  it('shows navigation arrows when multiple options available', () => {
+    const { lastFrame } = renderWithProviders(
+      <EnumSelector
+        options={LANGUAGE_OPTIONS}
+        currentValue="en"
+        isActive={true}
+        onValueChange={() => {}}
+      />,
+    );
+    expect(lastFrame()).toContain('←');
+    expect(lastFrame()).toContain('→');
+  });
+
+  it('hides navigation arrows when single option available', () => {
+    const singleOption: readonly SettingEnumOption[] = [
+      { label: 'Only Option', value: 'only' },
+    ];
+    const { lastFrame } = renderWithProviders(
+      <EnumSelector
+        options={singleOption}
+        currentValue="only"
+        isActive={true}
+        onValueChange={() => {}}
+      />,
+    );
+    expect(lastFrame()).not.toContain('←');
+    expect(lastFrame()).not.toContain('→');
+  });
+});