@transferwise/components 0.0.0-experimental-e9426b6 → 0.0.0-experimental-ce46fbc

package/src/inputs/SelectInput/SelectInput.test.tsx

@@ -1,606 +0,0 @@
-import { screen, waitFor, within } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import { mockAnimationsApi } from 'jsdom-testing-mocks';
-
-import { render, mockMatchMedia, mockResizeObserver } from '../../test-utils';
-
-import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from '.';
-import { Field } from '../../field/Field';
-
-mockMatchMedia();
-mockResizeObserver();
-mockAnimationsApi();
-
-describe('SelectInput', () => {
-  it('renders placeholder', () => {
-    render(
-      <SelectInput
-        placeholder="Currency"
-        items={[
-          { type: 'option', value: 'USD' },
-          { type: 'option', value: 'EUR' },
-        ]}
-      />,
-    );
-
-    expect(screen.getByText('Currency')).toBeInTheDocument();
-  });
-
-  it('renders footer', async () => {
-    render(
-      <SelectInput
-        items={[
-          { type: 'option', value: 'USD' },
-          { type: 'option', value: 'EUR' },
-        ]}
-        renderFooter={({ queryNormalized: normalizedQuery }) =>
-          normalizedQuery != null ? (
-            <>Showing results for ‘{normalizedQuery}’</>
-          ) : (
-            <>All items shown</>
-          )
-        }
-        filterable
-      />,
-    );
-
-    await userEvent.tab();
-    await userEvent.keyboard(' ');
-
-    const footer = screen.getByText('All items shown');
-    expect(footer).toBeInTheDocument();
-
-    await userEvent.keyboard('u');
-    expect(footer).toHaveTextContent(/‘u’$/);
-
-    await userEvent.keyboard('r');
-    expect(footer).toHaveTextContent(/‘ur’$/);
-
-    await userEvent.keyboard('x');
-    expect(footer).toHaveTextContent(/‘urx’$/);
-
-    await userEvent.keyboard('{Backspace}');
-    expect(footer).toHaveTextContent(/‘ur’$/);
-  });
-
-  it('allows navigating the listbox with cursors', async () => {
-    render(
-      <SelectInput
-        items={[
-          { type: 'option', value: 'GBP' },
-          { type: 'option', value: 'EUR' },
-          { type: 'option', value: 'USD' },
-        ]}
-        renderFooter={({ queryNormalized: normalizedQuery }) => (
-          <button type="button">Footer button</button>
-        )}
-        filterable
-      />,
-    );
-
-    // opened the dropbox, with search focused
-    await userEvent.tab();
-    await userEvent.keyboard(' ');
-    expect(screen.getByRole('combobox')).toHaveFocus();
-
-    // search still focused but listbox can be navigated via keyboard
-    await userEvent.keyboard('{ArrowDown}');
-    expect(screen.getByRole('combobox')).toHaveFocus();
-    expect(screen.getByRole('option', { name: 'EUR' })).toHaveClass(
-      'np-select-input-option-container--active',
-    );
-
-    // tab moves focus to listbox
-    await userEvent.tab();
-    expect(screen.getByRole('listbox')).toHaveFocus();
-    expect(screen.getByRole('combobox')).not.toHaveFocus();
-
-    // arrows still navigate within listbox
-    await userEvent.keyboard('{ArrowDown}');
-    expect(screen.getByRole('option', { name: 'USD' })).toHaveClass(
-      'np-select-input-option-container--active',
-    );
-
-    // tab moves focus to footer but highlighted option is retained
-    await userEvent.tab();
-    expect(screen.getByRole('listbox')).not.toHaveFocus();
-    expect(screen.getByRole('combobox')).not.toHaveFocus();
-    expect(screen.getByText('Footer button')).toHaveFocus();
-    expect(screen.getByRole('option', { name: 'USD' })).toHaveClass(
-      'np-select-input-option-container--active',
-    );
-
-    // shift+tab moves focus back to listbox
-    await userEvent.tab({ shift: true });
-    expect(screen.getByRole('listbox')).toHaveFocus();
-    expect(screen.getByRole('combobox')).not.toHaveFocus();
-    expect(screen.getByText('Footer button')).not.toHaveFocus();
-
-    // previously highlighted option is still active within listbox
-    expect(screen.getByRole('option', { name: 'USD' })).toHaveClass(
-      'np-select-input-option-container--active',
-    );
-
-    // arrows continue to navigate within listbox
-    await userEvent.keyboard('{ArrowUp}');
-    expect(screen.getByRole('option', { name: 'EUR' })).toHaveClass(
-      'np-select-input-option-container--active',
-    );
-
-    // shift+tab moves focus back to search input
-    await userEvent.tab({ shift: true });
-    expect(screen.getByRole('combobox')).toHaveFocus();
-
-    // arrows continue to navigate within listbox
-    await userEvent.keyboard('{ArrowUp}');
-    expect(screen.getByRole('option', { name: 'GBP' })).toHaveClass(
-      'np-select-input-option-container--active',
-    );
-  });
-
-  it('shows item selected via mouse', async () => {
-    const handleClose = jest.fn();
-
-    render(
-      <SelectInput
-        items={[
-          { type: 'option', value: 'USD' },
-          { type: 'option', value: 'EUR' },
-        ]}
-        onClose={handleClose}
-      />,
-    );
-
-    expect(screen.queryByText('EUR')).not.toBeInTheDocument();
-
-    const trigger = screen.getByRole('combobox');
-    await userEvent.click(trigger);
-
-    expect(handleClose).not.toHaveBeenCalled();
-
-    const listbox = screen.getByRole('listbox');
-    const option = within(listbox).getByRole('option', { name: 'EUR' });
-    await userEvent.click(option);
-
-    expect(handleClose).toHaveBeenCalledTimes(1);
-    expect(trigger).toHaveTextContent('EUR');
-  });
-
-  it('filters items via keyboard', async () => {
-    const handleClose = jest.fn();
-
-    render(
-      <SelectInput
-        items={[
-          {
-            type: 'group',
-            label: 'Popular currencies',
-            options: [
-              { type: 'option', value: 'USD' },
-              { type: 'option', value: 'EUR' },
-              { type: 'option', value: 'GBP' },
-            ],
-          },
-        ]}
-        filterable
-        onClose={handleClose}
-      />,
-    );
-
-    const trigger = screen.getByRole('combobox');
-    await userEvent.tab();
-    await userEvent.keyboard(' ');
-
-    expect(handleClose).not.toHaveBeenCalled();
-
-    const listbox = screen.getByRole('listbox');
-    expect(within(listbox).getAllByRole('option')).toHaveLength(3);
-
-    await userEvent.keyboard('u');
-    expect(within(listbox).getAllByRole('option')).toHaveLength(2);
-
-    await userEvent.keyboard('r');
-    expect(within(listbox).getByRole('option')).toBeInTheDocument();
-
-    await userEvent.keyboard('x');
-    expect(within(listbox).queryByRole('option')).not.toBeInTheDocument();
-
-    await userEvent.keyboard('{Backspace}');
-    expect(within(listbox).getByRole('option')).toBeInTheDocument();
-
-    const option = within(listbox).getAllByRole('option')[0];
-    await userEvent.click(option);
-
-    expect(handleClose).toHaveBeenCalledTimes(1);
-    expect(trigger).toHaveTextContent('EUR');
-  });
-
-  it('clears filter query on close', async () => {
-    const handleFilterChange = jest.fn();
-
-    render(
-      <SelectInput
-        items={[
-          { type: 'option', value: 'USD' },
-          { type: 'option', value: 'EUR' },
-        ]}
-        filterable
-        onFilterChange={handleFilterChange}
-      />,
-    );
-
-    const trigger = screen.getByRole('combobox');
-    await userEvent.tab();
-    await userEvent.keyboard(' ');
-
-    expect(handleFilterChange).not.toHaveBeenCalled();
-
-    await userEvent.keyboard(' x');
-    expect(handleFilterChange).toHaveBeenLastCalledWith({
-      query: ' x',
-      queryNormalized: 'x',
-    });
-
-    await userEvent.keyboard('{Escape}');
-    await waitFor(() => {
-      expect(handleFilterChange).toHaveBeenLastCalledWith({
-        query: '',
-        queryNormalized: null,
-      });
-    });
-
-    await userEvent.click(trigger);
-
-    const listbox = screen.getByRole('listbox');
-    expect(within(listbox).getAllByRole('option')).toHaveLength(2);
-  });
-
-  it('filters items ignoring diacritics/accents', async () => {
-    render(
-      <SelectInput
-        items={[
-          { type: 'option', value: 'AX', filterMatchers: ['Åland Islands'] },
-          { type: 'option', value: 'AL', filterMatchers: ['Albania'] },
-          { type: 'option', value: 'DZ', filterMatchers: ['Algeria'] },
-          { type: 'option', value: 'RE', filterMatchers: ['Réunion'] },
-        ]}
-        filterable
-      />,
-    );
-
-    await userEvent.tab();
-    await userEvent.keyboard(' ');
-
-    const listbox = screen.getByRole('listbox');
-    expect(within(listbox).getAllByRole('option')).toHaveLength(4);
-
-    await userEvent.keyboard('aland');
-    expect(within(listbox).getAllByRole('option')).toHaveLength(1);
-    expect(within(listbox).getByRole('option')).toHaveTextContent('AX');
-
-    const searchInput = screen.getByRole('combobox', { expanded: true });
-    await userEvent.clear(searchInput);
-    await userEvent.keyboard('reunion');
-    expect(within(listbox).getAllByRole('option')).toHaveLength(1);
-    expect(within(listbox).getByRole('option')).toHaveTextContent('RE');
-
-    await userEvent.clear(searchInput);
-    await userEvent.keyboard('Åland');
-    expect(within(listbox).getAllByRole('option')).toHaveLength(1);
-    expect(within(listbox).getByRole('option')).toHaveTextContent('AX');
-
-    await userEvent.clear(searchInput);
-    await userEvent.keyboard('Rèunion');
-    expect(within(listbox).getAllByRole('option')).toHaveLength(1);
-    expect(within(listbox).getByRole('option')).toHaveTextContent('RE');
-  });
-
-  it('selects multiple options', async () => {
-    render(
-      <SelectInput
-        multiple
-        items={[
-          { type: 'option', value: 'USD' },
-          { type: 'option', value: 'EUR' },
-        ]}
-      />,
-    );
-
-    const trigger = screen.getByRole('combobox');
-    await userEvent.click(trigger);
-
-    const listbox = screen.getByRole('listbox');
-    const options = within(listbox).getAllByRole('option');
-    for (const option of options) {
-      await userEvent.click(option);
-    }
-
-    expect(trigger).toHaveTextContent('USD, EUR');
-  });
-
-  it('supports custom `id` attribute', () => {
-    render(<SelectInput id="custom" items={[]} />);
-
-    const trigger = screen.getByRole('combobox');
-    expect(trigger).toHaveAttribute('id', 'custom');
-  });
-
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field label="Currency">
-        <SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
-      </Field>,
-    );
-    expect(screen.getByLabelText(/Currency/)).toHaveAttribute('aria-haspopup');
-  });
-
-  it('deduplicates search results across groups using compareValues as key', async () => {
-    interface Currency {
-      code: string;
-      name: string;
-    }
-
-    const usdInGroup1: Currency = { code: 'USD', name: 'US Dollar' };
-    const usdInGroup2: Currency = { code: 'USD', name: 'US Dollar' };
-    const eur: Currency = { code: 'EUR', name: 'Euro' };
-    const gbp: Currency = { code: 'GBP', name: 'British Pound' };
-
-    render(
-      <SelectInput<Currency>
-        items={[
-          {
-            type: 'group',
-            label: 'Popular',
-            options: [
-              { type: 'option', value: usdInGroup1 },
-              { type: 'option', value: eur },
-            ],
-          },
-          {
-            type: 'group',
-            label: 'All currencies',
-            options: [
-              { type: 'option', value: usdInGroup2 },
-              { type: 'option', value: gbp },
-            ],
-          },
-        ]}
-        compareValues="code"
-        renderValue={(currency) => currency.name}
-        filterable
-      />,
-    );
-
-    const trigger = screen.getByRole('combobox');
-    await userEvent.click(trigger);
-
-    const listbox = screen.getByRole('listbox');
-
-    // Before filtering, should show all 4 options (no deduplication yet)
-    let options = within(listbox).getAllByRole('option');
-    expect(options).toHaveLength(4);
-
-    const usdOptions = within(listbox).getAllByText('US Dollar');
-    expect(usdOptions).toHaveLength(2);
-
-    // Start filtering - type a search query to trigger deduplication
-    const searchInput = screen.getByRole('combobox', { expanded: true });
-    await userEvent.type(searchInput, 'u');
-
-    // After filtering with 'u', should show 3 unique options (USD deduplicated, EUR, GBP)
-    options = within(listbox).getAllByRole('option');
-    expect(options).toHaveLength(3);
-    expect(within(listbox).getByText('Euro')).toBeInTheDocument();
-    expect(within(listbox).getByText('British Pound')).toBeInTheDocument();
-
-    // Filter more specifically for 'dollar'
-    await userEvent.clear(searchInput);
-    await userEvent.type(searchInput, 'dollar');
-
-    const filteredOptions = within(listbox).getAllByRole('option');
-    // Should only show 1 USD option, not 2
-    expect(filteredOptions).toHaveLength(1);
-    expect(within(listbox).getByText('US Dollar')).toBeInTheDocument();
-  });
-
-  it('deduplicates search results across groups using compareValues as function', async () => {
-    interface Item {
-      id: number;
-      label: string;
-    }
-
-    const item1Group1: Item = { id: 1, label: 'Item One' };
-    const item2Group1: Item = { id: 2, label: 'Item Two' };
-
-    const item1Group2: Item = { id: 1, label: 'Item One' };
-
-    render(
-      <SelectInput<Item>
-        items={[
-          {
-            type: 'group',
-            label: 'Group A',
-            options: [
-              { type: 'option', value: item1Group1 },
-              { type: 'option', value: item2Group1 },
-            ],
-          },
-          {
-            type: 'group',
-            label: 'Group B',
-            options: [{ type: 'option', value: item1Group2 }],
-          },
-        ]}
-        compareValues={(a, b) => a?.id === b?.id}
-        renderValue={(item) => item.label}
-        filterable
-      />,
-    );
-
-    const trigger = screen.getByRole('combobox');
-    await userEvent.click(trigger);
-
-    const listbox = screen.getByRole('listbox');
-
-    // Before filtering, should show all 3 options (no deduplication yet)
-    let options = within(listbox).getAllByRole('option');
-    expect(options).toHaveLength(3);
-
-    // Start filtering - type a search query to trigger deduplication
-    const searchInput = screen.getByRole('combobox', { expanded: true });
-    await userEvent.type(searchInput, 'item');
-
-    // After filtering, should show 2 unique options (item with id:1 deduplicated, item with id:2)
-    options = within(listbox).getAllByRole('option');
-    expect(options).toHaveLength(2);
-    expect(within(listbox).getByText('Item One')).toBeInTheDocument();
-    expect(within(listbox).getByText('Item Two')).toBeInTheDocument();
-  });
-
-  it('sorts filtered options using sortFilteredOptions prop', async () => {
-    interface Country {
-      code: string;
-      name: string;
-      keywords: string[];
-    }
-
-    const countries: Country[] = [
-      { code: 'AD', name: 'Andorra', keywords: ['united states dollar'] },
-      { code: 'DE', name: 'Germany', keywords: ['EUR'] },
-      { code: 'US', name: 'United States', keywords: ['United States dollar', 'USD'] },
-      { code: 'ZM', name: 'Zambia', keywords: ['USD', 'united states dollar'] },
-    ];
-
-    render(
-      <SelectInput<Country>
-        items={countries.map((country) => ({
-          type: 'option',
-          value: country,
-          filterMatchers: country.keywords,
-        }))}
-        renderValue={(country) => country.name}
-        filterable
-        sortFilteredOptions={(a, b, searchQuery) => {
-          const query = searchQuery.toLowerCase();
-          const nameA = a.value.name.toLowerCase();
-          const nameB = b.value.name.toLowerCase();
-
-          const aMatch = nameA.includes(query);
-          const bMatch = nameB.includes(query);
-
-          if (aMatch && !bMatch) return -1;
-          if (!aMatch && bMatch) return 1;
-
-          return nameA.localeCompare(nameB);
-        }}
-      />,
-    );
-
-    const trigger = screen.getByRole('combobox');
-    await userEvent.click(trigger);
-
-    const searchInput = screen.getByRole('combobox', { expanded: true });
-    await userEvent.type(searchInput, 'united');
-
-    const listbox = screen.getByRole('listbox');
-    const options = within(listbox).getAllByRole('option');
-
-    expect(options).toHaveLength(3);
-    expect(options[0]).toHaveTextContent('United States');
-    expect(options[1]).toHaveTextContent('Andorra');
-    expect(options[2]).toHaveTextContent('Zambia');
-  });
-
-  describe('listbox label', () => {
-    const fieldLabel = 'Fruits';
-    const triggerLabel = 'Select fruit';
-    const options: SelectInputOptionItem[] = [
-      { type: 'option', value: 'Banana' },
-      { type: 'option', value: 'Orange' },
-      { type: 'option', value: 'Olive' },
-    ];
-    const requiredTriggerButtonProps = {
-      id: undefined,
-      'aria-labelledby': undefined,
-      'aria-describedby': undefined,
-      'aria-invalid': undefined,
-      'aria-label': undefined,
-    };
-
-    const renderSelectInput = (props: Omit<SelectInputProps<string | null>, 'items'> = {}) =>
-      render(
-        <Field label={fieldLabel} id="selectId">
-          <SelectInput {...props} items={options} />
-        </Field>,
-      );
-
-    it("should propagate trigger's label if nothing is selected", async () => {
-      renderSelectInput({
-        UNSAFE_triggerButtonProps: {
-          ...requiredTriggerButtonProps,
-          'aria-label': triggerLabel,
-        },
-      });
-      const trigger = screen.getByRole('combobox');
-      await userEvent.click(trigger);
-      expect(screen.getByRole('listbox', { name: triggerLabel })).toBeInTheDocument();
-    });
-
-    it("should propagate trigger's label if an option is selected", async () => {
-      renderSelectInput({
-        UNSAFE_triggerButtonProps: {
-          ...requiredTriggerButtonProps,
-          'aria-label': triggerLabel,
-        },
-        value: options[1].value,
-      });
-      const trigger = screen.getByRole('combobox');
-      await userEvent.click(trigger);
-      expect(screen.getByRole('listbox', { name: triggerLabel })).toBeInTheDocument();
-    });
-
-    it("should propagate trigger's label by id", async () => {
-      const customLabelId = 'customLabelId';
-      renderSelectInput({
-        UNSAFE_triggerButtonProps: {
-          ...requiredTriggerButtonProps,
-          'aria-labelledby': customLabelId,
-        },
-      });
-      const trigger = screen.getByRole('combobox');
-      await userEvent.click(trigger);
-      expect(screen.getByRole('listbox')).toHaveAttribute('aria-labelledby', customLabelId);
-    });
-
-    it("should propagate input's label by id", async () => {
-      renderSelectInput();
-      const trigger = screen.getByRole('combobox');
-      await userEvent.click(trigger);
-      expect(screen.getByRole('listbox', { name: fieldLabel })).toBeInTheDocument();
-    });
-
-    it('should prefer explicit label over label ids', async () => {
-      const customLabelId = 'customLabelId';
-      renderSelectInput({
-        UNSAFE_triggerButtonProps: {
-          ...requiredTriggerButtonProps,
-          'aria-labelledby': customLabelId,
-          'aria-label': triggerLabel,
-        },
-      });
-      const trigger = screen.getByRole('combobox');
-      await userEvent.click(trigger);
-      expect(screen.getByRole('listbox', { name: triggerLabel })).toBeInTheDocument();
-      expect(screen.getByRole('listbox')).not.toHaveAttribute('aria-labelledby');
-    });
-
-    it('should have no label if none of the above are provided', async () => {
-      render(<SelectInput items={options} />);
-      const trigger = screen.getByRole('combobox');
-      await userEvent.click(trigger);
-      const listBox = screen.getByRole('listbox');
-      expect(listBox).not.toHaveAttribute('aria-label');
-      expect(listBox).not.toHaveAttribute('aria-labelledby');
-    });
-  });
-});