uikit-react-public 0.14.21 → 0.21.8

package/lib/components/Select/__tests__/Select.test.tsx

@@ -1,5 +1,6 @@
-import { describe, expect, test } from 'vitest';
-import { render } from '@testing-library/react';
+import { describe, expect, test, vi, beforeAll } from 'vitest';
+import { useState } from 'react';
+import { createEvent, fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Select from '../Select';
 import { ThemeContextProvider } from '../../../theme/useTheme';
@@ -11,6 +12,13 @@ const defaultOptions = [
 ];
 
 describe('Select', () => {
+  beforeAll(() => {
+    Object.defineProperty(Element.prototype, 'scrollIntoView', {
+      value: vi.fn(),
+      writable: true,
+    });
+  });
+
   // Snapshot tests
 
   test('Snapshot: default', () => {
@@ -19,7 +27,7 @@ describe('Select', () => {
         <Select
           options={defaultOptions}
           value=''
-          onChange={() => {}}
+          onValueChange={() => {}}
         />
       </ThemeContextProvider>
     );
@@ -35,7 +43,7 @@ describe('Select', () => {
         <Select
           options={defaultOptions}
           value=''
-          onChange={() => {}}
+          onValueChange={() => {}}
         />
       </ThemeContextProvider>
     );
@@ -50,7 +58,7 @@ describe('Select', () => {
           native
           options={defaultOptions}
           value=''
-          onChange={() => {}}
+          nativeHtmlAttributes={{ onChange: () => {} }}
         />
       </ThemeContextProvider>
     );
@@ -66,7 +74,7 @@ describe('Select', () => {
         <Select
           options={defaultOptions}
           value=''
-          onChange={() => {}}
+          onValueChange={() => {}}
         />
       </ThemeContextProvider>
     );
@@ -91,7 +99,7 @@ describe('Select', () => {
           disabled
           options={defaultOptions}
           value=''
-          onChange={() => {}}
+          onValueChange={() => {}}
         />
       </ThemeContextProvider>
     );
@@ -109,11 +117,693 @@ describe('Select', () => {
           native
           options={defaultOptions}
           value='1'
-          onChange={() => {}}
+          nativeHtmlAttributes={{ onChange: () => {} }}
         />
       </ThemeContextProvider>
     );
     const select = renderResult.getByTestId('ucl-uikit-select--native');
     expect(select).toHaveProperty('disabled');
   });
+
+  test('Filters options when filterable is true', async () => {
+    const user = userEvent.setup();
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+    await user.click(renderResult.getByTestId('ucl-uikit-select'));
+    const input = renderResult.container.querySelector('input');
+    expect(input).not.toBeNull();
+    await user.type(input as HTMLInputElement, '2');
+
+    const options = await renderResult.findAllByRole('option');
+    expect(options.length).toBe(1);
+    expect(options[0].textContent).toBe('Option 2');
+  });
+
+  test('shows empty state when filter yields no options', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.type(result.getByRole('searchbox'), 'zzz');
+
+    expect(result.getByText('No options')).toBeInTheDocument();
+    expect(result.queryAllByTestId('ucl-uikit-select__option')).toHaveLength(0);
+  });
+
+  test('clears filter text after selecting an option', async () => {
+    const user = userEvent.setup();
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      return (
+        <Select
+          filterable
+          options={defaultOptions}
+          value={value}
+          onValueChange={(next) => setValue(next as string)}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.type(result.getByRole('searchbox'), '2');
+    await user.click(result.getByText('Option 2'));
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    expect(result.getByRole('searchbox')).toHaveValue('');
+    expect(result.getAllByTestId('ucl-uikit-select__option')).toHaveLength(
+      defaultOptions.length
+    );
+  });
+
+  test('clears filter text when dropdown closes', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.type(result.getByRole('searchbox'), '1');
+
+    await user.click(document.body);
+    await user.click(result.getByTestId('ucl-uikit-select'));
+
+    expect(result.getByRole('searchbox')).toHaveValue('');
+  });
+
+  test('keyboard navigation uses filtered options', async () => {
+    const user = userEvent.setup();
+    const options = [
+      { label: 'Alpha', value: 'alpha' },
+      { label: 'Echo', value: 'echo' },
+      { label: 'Gamma', value: 'gamma' },
+    ];
+    const changeSpy = vi.fn();
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      const handleChange = vi.fn((next, ev) => {
+        setValue(next as string);
+        changeSpy(next, ev);
+      });
+      return (
+        <Select
+          filterable
+          options={options}
+          value={value}
+          onValueChange={handleChange}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.type(result.getByRole('searchbox'), 'a');
+    expect(result.getAllByTestId('ucl-uikit-select__option')).toHaveLength(2);
+
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+
+    expect(changeSpy.mock.calls.map(([val]) => val)).toEqual([
+      'alpha',
+      'gamma',
+      'alpha',
+    ]);
+  });
+
+  test('selectionBehaviour=commit does not call onValueChange on arrow keys', async () => {
+    const user = userEvent.setup();
+    const changeSpy = vi.fn();
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      return (
+        <Select
+          options={defaultOptions}
+          value={value}
+          selectionBehaviour='commit'
+          onValueChange={(next, ev) => {
+            setValue(next as string);
+            changeSpy(next, ev);
+          }}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+
+    expect(changeSpy).not.toHaveBeenCalled();
+  });
+
+  test('selectionBehaviour=commit commits highlighted option on Enter', async () => {
+    const user = userEvent.setup();
+    const changeSpy = vi.fn();
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      return (
+        <Select
+          options={defaultOptions}
+          value={value}
+          selectionBehaviour='commit'
+          onValueChange={(next, ev) => {
+            setValue(next as string);
+            changeSpy(next, ev);
+          }}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{Enter}');
+
+    expect(changeSpy.mock.calls.map(([val]) => val)).toEqual(['2']);
+    expect(
+      result.queryByTestId('ucl-uikit-select__panel')
+    ).not.toBeInTheDocument();
+    expect(result.getByTestId('ucl-uikit-select')).toHaveTextContent(
+      'Option 2'
+    );
+  });
+
+  test('keyboard navigation does not get stuck on duplicate values', async () => {
+    const user = userEvent.setup();
+    const options = [
+      { label: 'First duplicate', value: 'dup' },
+      { label: 'Second duplicate', value: 'dup' },
+      { label: 'Unique', value: 'unique' },
+    ];
+    const changeSpy = vi.fn();
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      const handleChange = vi.fn((next, ev) => {
+        setValue(next as string);
+        changeSpy(next, ev);
+      });
+      return (
+        <Select
+          options={options}
+          value={value}
+          onValueChange={handleChange}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+
+    expect(changeSpy.mock.calls.map(([val]) => val)).toEqual([
+      'dup',
+      'dup',
+      'unique',
+    ]);
+
+    const optionElements = result.getAllByRole('option');
+    expect(
+      optionElements.filter((el) => el.getAttribute('aria-selected') === 'true')
+    ).toHaveLength(1);
+    expect(optionElements[2]).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('keeps duplicate label identity when selecting by click', async () => {
+    const user = userEvent.setup();
+    const options = [
+      { label: 'First duplicate', value: 'dup' },
+      { label: 'Second duplicate', value: 'dup' },
+    ];
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      return (
+        <Select
+          options={options}
+          value={value}
+          onValueChange={(next) => setValue(next as string)}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.click(result.getAllByRole('option')[1]);
+
+    expect(result.getByTestId('ucl-uikit-select')).toHaveTextContent(
+      'Second duplicate'
+    );
+  });
+
+  test('filterable select keeps option clicks working while the filter input is focused', async () => {
+    const user = userEvent.setup();
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      return (
+        <Select
+          filterable
+          options={defaultOptions}
+          value={value}
+          onValueChange={(next) => setValue(next as string)}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    const filterInput = result.getByRole('searchbox');
+    expect(filterInput).toHaveFocus();
+
+    await user.click(result.getByRole('option', { name: 'Option 2' }));
+
+    expect(
+      result.queryByTestId('ucl-uikit-select__panel')
+    ).not.toBeInTheDocument();
+    expect(result.getByTestId('ucl-uikit-select')).toHaveTextContent(
+      'Option 2'
+    );
+  });
+
+  test('forwards id and title attributes to the combobox', () => {
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          id='my-select'
+          title='Select an option'
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    const combobox = result.getByRole('combobox');
+    expect(combobox).toHaveAttribute('id', 'my-select');
+    expect(combobox).toHaveAttribute('title', 'Select an option');
+  });
+
+  test('applies filterInputProps to the filter input', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <div>
+          <span id='filter-hint'>Filter options by text</span>
+          <Select
+            filterable
+            options={defaultOptions}
+            value=''
+            onValueChange={() => {}}
+            filterInputProps={{ 'aria-describedby': 'filter-hint' }}
+          />
+        </div>
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByRole('combobox'));
+    const filterInput = result.getByRole('searchbox');
+    expect(filterInput).toHaveAttribute('aria-describedby', 'filter-hint');
+  });
+
+  test('opens filter input on keyboard focus', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    await user.tab();
+
+    const filterInput = await result.findByRole('searchbox');
+    expect(filterInput).toHaveFocus();
+    expect(result.getByRole('listbox')).toBeInTheDocument();
+  });
+
+  test('pressing Escape closes dropdown and clears filter', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    const combobox = result.getByTestId('ucl-uikit-select');
+    await user.click(combobox);
+    await user.type(result.getByRole('searchbox'), '1');
+    await user.keyboard('{Escape}');
+
+    expect(
+      result.queryByTestId('ucl-uikit-select__panel')
+    ).not.toBeInTheDocument();
+    expect(combobox).toHaveFocus();
+
+    await user.click(combobox);
+    expect(result.getByRole('searchbox')).toHaveValue('');
+  });
+
+  test('announces active option and option position metadata', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    const combobox = result.getByRole('combobox');
+    await user.click(combobox);
+
+    const options = result.getAllByRole('option');
+    expect(options[0]).toHaveAttribute('aria-posinset', '1');
+    expect(options[0]).toHaveAttribute('aria-setsize', '3');
+    expect(options[1]).toHaveAttribute('aria-posinset', '2');
+    expect(options[1]).toHaveAttribute('aria-setsize', '3');
+
+    await user.keyboard('{ArrowDown}');
+    expect(combobox).toHaveAttribute('aria-activedescendant', options[0].id);
+
+    await user.keyboard('{ArrowDown}');
+    expect(combobox).toHaveAttribute('aria-activedescendant', options[1].id);
+  });
+
+  test('filterable input tracks active descendant while navigating options', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByRole('combobox'));
+    const filterInput = result.getByRole('searchbox');
+    expect(filterInput).toHaveFocus();
+
+    const options = result.getAllByRole('option');
+    await user.keyboard('{ArrowDown}');
+    expect(filterInput).toHaveAttribute('aria-activedescendant', options[0].id);
+
+    await user.keyboard('{ArrowDown}');
+    expect(filterInput).toHaveAttribute('aria-activedescendant', options[1].id);
+  });
+
+  test('open dropdown closes when tabbing to the next element', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <div>
+          <Select
+            options={defaultOptions}
+            value=''
+            onValueChange={() => {}}
+          />
+          <button type='button'>After</button>
+        </div>
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByRole('combobox'));
+    expect(result.getByRole('listbox')).toBeInTheDocument();
+
+    await user.tab();
+
+    expect(result.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(result.getByRole('button', { name: 'After' })).toHaveFocus();
+  });
+
+  test('open filterable dropdown closes when tabbing to the next element', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <div>
+          <Select
+            filterable
+            options={defaultOptions}
+            value=''
+            onValueChange={() => {}}
+          />
+          <button type='button'>After</button>
+        </div>
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByRole('combobox'));
+    expect(result.getByRole('searchbox')).toHaveFocus();
+    expect(result.getByRole('listbox')).toBeInTheDocument();
+
+    await user.tab();
+
+    expect(result.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(result.getByRole('button', { name: 'After' })).toHaveFocus();
+  });
+
+  test('open dropdown closes when shift-tabbing to the previous element', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <div>
+          <button type='button'>Before</button>
+          <Select
+            options={defaultOptions}
+            value=''
+            onValueChange={() => {}}
+          />
+        </div>
+      </ThemeContextProvider>
+    );
+
+    await user.tab();
+    await user.tab();
+    expect(result.getByRole('combobox')).toHaveFocus();
+
+    await user.keyboard('{Enter}');
+    expect(result.getByRole('listbox')).toBeInTheDocument();
+
+    await user.tab({ shift: true });
+
+    expect(result.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(result.getByRole('button', { name: 'Before' })).toHaveFocus();
+  });
+
+  test('open filterable dropdown closes when shift-tabbing to the previous element', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <div>
+          <button type='button'>Before</button>
+          <Select
+            filterable
+            options={defaultOptions}
+            value=''
+            onValueChange={() => {}}
+          />
+        </div>
+      </ThemeContextProvider>
+    );
+
+    await user.tab();
+    await user.tab();
+    expect(result.getByRole('searchbox')).toHaveFocus();
+    expect(result.getByRole('listbox')).toBeInTheDocument();
+
+    await user.tab({ shift: true });
+
+    expect(result.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(result.getByRole('button', { name: 'Before' })).toHaveFocus();
+  });
+
+  test('open filterable dropdown at end of tab order does not trap focus on Tab', async () => {
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    fireEvent.click(result.getByRole('combobox'));
+    const searchbox = result.getByRole('searchbox');
+    expect(result.getByRole('listbox')).toBeInTheDocument();
+
+    const tabEvent = createEvent.keyDown(searchbox, { key: 'Tab' });
+    const dispatchResult = fireEvent(searchbox, tabEvent);
+
+    expect(dispatchResult).toBe(true);
+    expect(result.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  test('open filterable dropdown at start of tab order does not trap focus on shift-tab', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    await user.tab();
+    const searchbox = result.getByRole('searchbox');
+    expect(searchbox).toHaveFocus();
+    expect(result.getByRole('listbox')).toBeInTheDocument();
+
+    const shiftTabEvent = createEvent.keyDown(searchbox, {
+      key: 'Tab',
+      shiftKey: true,
+    });
+    const dispatchResult = fireEvent(searchbox, shiftTabEvent);
+
+    expect(dispatchResult).toBe(true);
+    expect(result.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  test('clear button appears for clearable select and clears to null', async () => {
+    const user = userEvent.setup();
+    const changeSpy = vi.fn();
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState<string | null>('2');
+      return (
+        <Select
+          clearable
+          options={defaultOptions}
+          value={value}
+          placeholder='Select an option'
+          onValueChange={(next, ev) => {
+            setValue(next as string | null);
+            changeSpy(next, ev);
+          }}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    const clearButton = result.getByTestId(
+      'ucl-uikit-select__visible-field-clear-button'
+    );
+    expect(result.getByRole('combobox')).toHaveTextContent('Option 2');
+
+    await user.click(clearButton);
+
+    expect(changeSpy).toHaveBeenCalledWith(null, expect.any(Object));
+    expect(result.getByRole('combobox')).toHaveTextContent('Select an option');
+    expect(
+      result.queryByTestId('ucl-uikit-select__visible-field-clear-button')
+    ).not.toBeInTheDocument();
+  });
+
+  test('disabled clearable select does not show clear button', () => {
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          clearable
+          disabled
+          options={defaultOptions}
+          value='1'
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    expect(
+      result.queryByTestId('ucl-uikit-select__visible-field-clear-button')
+    ).not.toBeInTheDocument();
+  });
 });