test: add _utils unit tests, form demo controls, and eslint fixes

Add tests for general.ts (16), useCombobox (19), and hooks (5) — 40 new tests.
Add Select, DatePicker, TimePicker, ColorPicker to Form "Other Controls" demo.
Fix jest-dom/prefer-to-have-text-content eslint errors in test files.

Author: wangdicoder

components/_utils/__tests__/general.test.ts

@@ -0,0 +1,76 @@
+import { isOneOf, camelCaseToDash, convertHexToRGBA, getPrefixCls } from '../general';
+
+describe('isOneOf', () => {
+  it('should return true when target is in array', () => {
+    expect(isOneOf('a', ['a', 'b', 'c'])).toBe(true);
+  });
+
+  it('should return false when target is not in array', () => {
+    expect(isOneOf('d', ['a', 'b', 'c'])).toBe(false);
+  });
+
+  it('should handle string comparison', () => {
+    expect(isOneOf('hello', 'hello')).toBe(true);
+    expect(isOneOf('hello', 'world')).toBe(false);
+  });
+
+  it('should handle empty array', () => {
+    expect(isOneOf('a', [])).toBe(false);
+  });
+});
+
+describe('camelCaseToDash', () => {
+  it('should convert camelCase to dash-case', () => {
+    expect(camelCaseToDash('backgroundColor')).toBe('background-color');
+  });
+
+  it('should convert multiple uppercase letters', () => {
+    expect(camelCaseToDash('borderTopWidth')).toBe('border-top-width');
+  });
+
+  it('should leave lowercase strings unchanged', () => {
+    expect(camelCaseToDash('color')).toBe('color');
+  });
+
+  it('should handle empty string', () => {
+    expect(camelCaseToDash('')).toBe('');
+  });
+});
+
+describe('convertHexToRGBA', () => {
+  it('should convert 6-digit hex to rgba', () => {
+    expect(convertHexToRGBA('#FF0000')).toBe('rgba(255,0,0,1)');
+  });
+
+  it('should convert with custom opacity', () => {
+    expect(convertHexToRGBA('#00FF00', 0.5)).toBe('rgba(0,255,0,0.5)');
+  });
+
+  it('should handle lowercase hex', () => {
+    expect(convertHexToRGBA('#0000ff')).toBe('rgba(0,0,255,1)');
+  });
+
+  it('should return original string for invalid hex', () => {
+    expect(convertHexToRGBA('red')).toBe('red');
+    expect(convertHexToRGBA('#FFF')).toBe('#FFF');
+    expect(convertHexToRGBA('not-a-color')).toBe('not-a-color');
+  });
+});
+
+describe('getPrefixCls', () => {
+  it('should return default prefix with ty-', () => {
+    expect(getPrefixCls('button')).toBe('ty-button');
+  });
+
+  it('should use context prefix when provided', () => {
+    expect(getPrefixCls('button', 'ant')).toBe('ant-button');
+  });
+
+  it('should return customised class when provided', () => {
+    expect(getPrefixCls('button', undefined, 'my-btn')).toBe('my-btn');
+  });
+
+  it('should prefer customised class over context prefix', () => {
+    expect(getPrefixCls('button', 'ant', 'my-btn')).toBe('my-btn');
+  });
+});

components/_utils/__tests__/hooks.test.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { render, fireEvent, act } from '@testing-library/react';
+import { useClickOutside, useDebounce } from '../hooks';
+
+describe('useClickOutside', () => {
+  // useClickOutside reads the target element directly (not a ref), so we need
+  // a state-based ref pattern that triggers a re-render once the element mounts.
+  function ClickOutsideHarness() {
+    const [clicked, setClicked] = useState(false);
+    const [el, setEl] = useState<HTMLDivElement | null>(null);
+
+    useClickOutside(el as HTMLDivElement, () => setClicked(true));
+
+    return (
+      <div>
+        <div ref={setEl} data-testid="inside">Inside</div>
+        <div data-testid="outside">Outside</div>
+        <span data-testid="result">{String(clicked)}</span>
+      </div>
+    );
+  }
+
+  it('should call handler when clicking outside target', () => {
+    const { getByTestId } = render(<ClickOutsideHarness />);
+    fireEvent.click(getByTestId('outside'));
+    expect(getByTestId('result')).toHaveTextContent('true');
+  });
+
+  it('should not call handler when clicking inside target', () => {
+    const { getByTestId } = render(<ClickOutsideHarness />);
+    fireEvent.click(getByTestId('inside'));
+    expect(getByTestId('result')).toHaveTextContent('false');
+  });
+});
+
+describe('useDebounce', () => {
+  function DebounceHarness({ value, delay }: { value: string; delay?: number }) {
+    const [debounced] = useDebounce(value, delay);
+    return <span data-testid="debounced">{debounced}</span>;
+  }
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should return initial value immediately', () => {
+    const { getByTestId } = render(<DebounceHarness value="hello" />);
+    expect(getByTestId('debounced')).toHaveTextContent('hello');
+  });
+
+  it('should debounce value changes', () => {
+    const { getByTestId, rerender } = render(<DebounceHarness value="a" delay={200} />);
+    expect(getByTestId('debounced')).toHaveTextContent('a');
+
+    rerender(<DebounceHarness value="b" delay={200} />);
+    // Not yet updated
+    expect(getByTestId('debounced')).toHaveTextContent('a');
+
+    act(() => {
+      jest.advanceTimersByTime(200);
+    });
+    expect(getByTestId('debounced')).toHaveTextContent('b');
+  });
+
+  it('should cancel pending update on new value', () => {
+    const { getByTestId, rerender } = render(<DebounceHarness value="a" delay={200} />);
+
+    rerender(<DebounceHarness value="b" delay={200} />);
+    act(() => { jest.advanceTimersByTime(100); });
+
+    rerender(<DebounceHarness value="c" delay={200} />);
+    act(() => { jest.advanceTimersByTime(100); });
+
+    // 'b' should have been cancelled, still showing 'a'
+    expect(getByTestId('debounced')).toHaveTextContent('a');
+
+    act(() => { jest.advanceTimersByTime(100); });
+    expect(getByTestId('debounced')).toHaveTextContent('c');
+  });
+});

components/_utils/__tests__/useCombobox.test.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { useCombobox } from '../useCombobox';
+
+interface Item {
+  value: string;
+  label?: string;
+  disabled?: boolean;
+}
+
+const items: Item[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'grape', label: 'Grape', disabled: true },
+];
+
+// Test harness that exposes hook state via data attributes and DOM
+function Harness(props: Parameters<typeof useCombobox<Item>>[0]) {
+  const combo = useCombobox<Item>(props);
+  return (
+    <div>
+      <input
+        data-testid="trigger"
+        onKeyDown={combo.handleKeyDown}
+        readOnly
+      />
+      <span data-testid="isOpen">{String(combo.isOpen)}</span>
+      <span data-testid="focusedIndex">{combo.focusedIndex}</span>
+      <span data-testid="filteredCount">{combo.filteredItems.length}</span>
+      <ul data-testid="items">
+        {combo.filteredItems.map((item) => (
+          <li key={item.value}>{item.value}</li>
+        ))}
+      </ul>
+      <button data-testid="open" onClick={combo.openDropdown}>Open</button>
+      <button data-testid="close" onClick={combo.closeDropdown}>Close</button>
+    </div>
+  );
+}
+
+function renderCombobox(overrides: Partial<Parameters<typeof useCombobox<Item>>[0]> = {}) {
+  const defaultProps = { items, searchValue: '', ...overrides };
+  return render(<Harness {...defaultProps} />);
+}
+
+describe('useCombobox', () => {
+  describe('filtering', () => {
+    it('should show all items when searchValue is empty', () => {
+      const { getByTestId } = renderCombobox();
+      expect(getByTestId('filteredCount')).toHaveTextContent('4');
+    });
+
+    it('should filter items by label (case-insensitive)', () => {
+      const { getByTestId } = renderCombobox({ searchValue: 'ap' });
+      expect(getByTestId('filteredCount')).toHaveTextContent('2');
+    });
+
+    it('should return all items when filterOption is false', () => {
+      const { getByTestId } = renderCombobox({ searchValue: 'xyz', filterOption: false });
+      expect(getByTestId('filteredCount')).toHaveTextContent('4');
+    });
+
+    it('should use custom filter function', () => {
+      const filterOption = (_input: string, item: Item) => item.value.startsWith('b');
+      const { getByTestId } = renderCombobox({ searchValue: 'anything', filterOption });
+      expect(getByTestId('filteredCount')).toHaveTextContent('1');
+      expect(getByTestId('items')).toHaveTextContent('banana');
+    });
+
+    it('should filter by value when label is not a string', () => {
+      const itemsNoLabel: Item[] = [
+        { value: 'alpha' },
+        { value: 'beta' },
+      ];
+      const { getByTestId } = renderCombobox({ items: itemsNoLabel, searchValue: 'bet' });
+      expect(getByTestId('filteredCount')).toHaveTextContent('1');
+    });
+  });
+
+  describe('open/close', () => {
+    it('should start closed by default', () => {
+      const { getByTestId } = renderCombobox();
+      expect(getByTestId('isOpen')).toHaveTextContent('false');
+    });
+
+    it('should respect defaultOpen', () => {
+      const { getByTestId } = renderCombobox({ defaultOpen: true });
+      expect(getByTestId('isOpen')).toHaveTextContent('true');
+    });
+
+    it('should open and close via helpers', () => {
+      const onOpenChange = jest.fn();
+      const { getByTestId } = renderCombobox({ onOpenChange });
+
+      fireEvent.click(getByTestId('open'));
+      expect(getByTestId('isOpen')).toHaveTextContent('true');
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+
+      fireEvent.click(getByTestId('close'));
+      expect(getByTestId('isOpen')).toHaveTextContent('false');
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it('should not change internal state when controlled', () => {
+      const { getByTestId } = renderCombobox({ isOpen: false });
+      fireEvent.click(getByTestId('open'));
+      expect(getByTestId('isOpen')).toHaveTextContent('false');
+    });
+  });
+
+  describe('focusedIndex', () => {
+    it('should default to 0 when defaultActiveFirstOption is true and items exist', () => {
+      const { getByTestId } = renderCombobox();
+      expect(getByTestId('focusedIndex')).toHaveTextContent('0');
+    });
+
+    it('should default to -1 when defaultActiveFirstOption is false', () => {
+      const { getByTestId } = renderCombobox({ defaultActiveFirstOption: false });
+      expect(getByTestId('focusedIndex')).toHaveTextContent('-1');
+    });
+
+    it('should default to -1 when items are empty', () => {
+      const { getByTestId } = renderCombobox({ items: [] });
+      expect(getByTestId('focusedIndex')).toHaveTextContent('-1');
+    });
+  });
+
+  describe('keyboard navigation', () => {
+    it('should open on ArrowDown when closed', () => {
+      const { getByTestId } = renderCombobox();
+      fireEvent.keyDown(getByTestId('trigger'), { key: 'ArrowDown' });
+      expect(getByTestId('isOpen')).toHaveTextContent('true');
+    });
+
+    it('should close on Escape', () => {
+      const { getByTestId } = renderCombobox({ defaultOpen: true });
+      fireEvent.keyDown(getByTestId('trigger'), { key: 'Escape' });
+      expect(getByTestId('isOpen')).toHaveTextContent('false');
+    });
+
+    it('should cycle focusedIndex with ArrowDown/ArrowUp', () => {
+      const { getByTestId } = renderCombobox({ defaultOpen: true });
+
+      // Start at 0, go down
+      fireEvent.keyDown(getByTestId('trigger'), { key: 'ArrowDown' });
+      expect(getByTestId('focusedIndex')).toHaveTextContent('1');
+
+      fireEvent.keyDown(getByTestId('trigger'), { key: 'ArrowDown' });
+      expect(getByTestId('focusedIndex')).toHaveTextContent('2');
+
+      // Go up
+      fireEvent.keyDown(getByTestId('trigger'), { key: 'ArrowUp' });
+      expect(getByTestId('focusedIndex')).toHaveTextContent('1');
+    });
+
+    it('should wrap around at boundaries', () => {
+      const { getByTestId } = renderCombobox({ defaultOpen: true });
+
+      // Go up from 0 → wraps to last
+      fireEvent.keyDown(getByTestId('trigger'), { key: 'ArrowUp' });
+      expect(getByTestId('focusedIndex')).toHaveTextContent('3');
+
+      // Go down from last → wraps to 0
+      fireEvent.keyDown(getByTestId('trigger'), { key: 'ArrowDown' });
+      expect(getByTestId('focusedIndex')).toHaveTextContent('0');
+    });
+
+    it('should select focused item on Enter', () => {
+      const onSelect = jest.fn();
+      const { getByTestId } = renderCombobox({ defaultOpen: true, onSelect });
+
+      // Focus is at 0 (Apple)
+      fireEvent.keyDown(getByTestId('trigger'), { key: 'Enter' });
+      expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ value: 'apple' }));
+    });
+
+    it('should not select disabled item on Enter', () => {
+      const onSelect = jest.fn();
+      const { getByTestId } = renderCombobox({ defaultOpen: true, onSelect });
+
+      // Navigate to grape (index 3, disabled)
+      fireEvent.keyDown(getByTestId('trigger'), { key: 'ArrowDown' });
+      fireEvent.keyDown(getByTestId('trigger'), { key: 'ArrowDown' });
+      fireEvent.keyDown(getByTestId('trigger'), { key: 'ArrowDown' });
+      expect(getByTestId('focusedIndex')).toHaveTextContent('3');
+
+      fireEvent.keyDown(getByTestId('trigger'), { key: 'Enter' });
+      expect(onSelect).not.toHaveBeenCalled();
+    });
+
+    it('should ignore keyboard when disabled', () => {
+      const { getByTestId } = renderCombobox({ disabled: true });
+      fireEvent.keyDown(getByTestId('trigger'), { key: 'ArrowDown' });
+      expect(getByTestId('isOpen')).toHaveTextContent('false');
+    });
+  });
+});