tesseract/packages/web/categories/option/react/src/components/DropdownSelect/DropdownSelect.test.tsx

import * as React from 'react';
import {
  render,
  screen
} from '@testing-library/react';
import * as TextControlBase from '@tesseract-design/web-base-textcontrol';
import userEvent from '@testing-library/user-event';
import { vi } from 'vitest';
import {
  DropdownSelect
} from '.';

vi.mock('@tesseract-design/web-base-textcontrol');

describe('DropdownSelect', () => {
  it('renders a combobox', () => {
    render(<DropdownSelect />);
    const combobox = screen.getByRole('combobox');
    expect(combobox).toBeInTheDocument();
  });


  it('renders a border', () => {
    render(
      <DropdownSelect
        border
      />
    );
    const border = screen.getByTestId('border');
    expect(border).toBeInTheDocument();
  });

  it('renders a label', () => {
    render(
      <DropdownSelect
        label="foo"
      />
    );
    const combobox = screen.getByLabelText('foo');
    expect(combobox).toBeInTheDocument();
    const label = screen.getByTestId('label');
    expect(label).toHaveTextContent('foo');
  });

  it('renders a hidden label', () => {
    render(
      <DropdownSelect
        label="foo"
        hiddenLabel
      />
    );
    const combobox = screen.getByLabelText('foo');
    expect(combobox).toBeInTheDocument();
    const label = screen.queryByTestId('label');
    expect(label).toBeNull();
  });

  it('renders a hint', () => {
    render(
      <DropdownSelect
        hint="foo"
      />
    );
    const hint = screen.getByTestId('hint');
    expect(hint).toBeInTheDocument();
  });

  it('does not render invalid options', () => {
    render(
      <DropdownSelect
        options={[
          {
            label: 'foo',
          },
          {
            label: 'bar',
          }
        ]}
      />
    );
    const combobox = screen.getByRole('combobox');
    expect(combobox.children).toHaveLength(0);
  });

  it('renders valid options', () => {
    render(
      <DropdownSelect
        options={[
          {
            label: 'foo',
            value: 'foo',
          },
          {
            label: 'bar',
            value: 'bar',
          }
        ]}
      />
    );
    const combobox = screen.getByRole('combobox');
    expect(combobox.children).toHaveLength(2);
  });

  it('renders shallow option groups', () => {
    render(
      <DropdownSelect
        options={[
          {
            label: 'foo',
            children: [
              {
                label: 'baz',
                value: 'baz',
              },
            ],
          },
          {
            label: 'bar',
            children: [
              {
                label: 'quux',
                value: 'quux',
              },
              {
                label: 'quuux',
                value: 'quuux',
              },
            ],
          }
        ]}
      />
    );
    const combobox = screen.getByRole('combobox');
    expect(combobox.children).toHaveLength(2);
    expect(combobox.children[0].children).toHaveLength(1);
    expect(combobox.children[1].children).toHaveLength(2);
  });

  it('renders deep option groups', () => {
    render(
      <DropdownSelect
        options={[
          {
            label: 'foo',
            children: [
              {
                label: 'baz',
                children: [
                  {
                    label: 'quuuux',
                    value: 'quuuux',
                  },
                  {
                    label: 'quuuuux',
                    value: 'quuuuux',
                  },
                  {
                    label: 'quuuuuux',
                    value: 'quuuuuux',
                  },
                ],
              },
            ],
          },
          {
            label: 'bar',
            children: [
              {
                label: 'quux',
                value: 'quux',
              },
              {
                label: 'quuux',
                value: 'quuux',
              },
            ],
          }
        ]}
      />
    );
    const combobox = screen.getByRole('combobox');
    expect(combobox.children).toHaveLength(2);
    expect(combobox.children[0].children).toHaveLength(4);
    expect(combobox.children[1].children).toHaveLength(2);
  });

  describe.each(Object.values(TextControlBase.TextControlSize))('on %s size', (size) => {
    it('renders input styles', () => {
      render(
        <DropdownSelect
          size={size}
        />
      );

      expect(TextControlBase.Input).toBeCalledWith(expect.objectContaining({
        size,
      }));
    });

    it('renders hint styles', () => {
      render(
        <DropdownSelect
          size={size}
          hint="hint"
        />
      );

      expect(TextControlBase.HintWrapper).toBeCalledWith(expect.objectContaining({
        size,
      }));
    });

    it('renders indicator styles', () => {
      render(
        <DropdownSelect
          size={size}
        />
      );

      expect(TextControlBase.IndicatorWrapper).toBeCalledWith(expect.objectContaining({
        size,
      }));
    });
  });

  it('renders a block input', () => {
    render(
      <DropdownSelect
        block
      />
    );

    expect(TextControlBase.Root).toBeCalledWith(expect.objectContaining({
      block: true,
    }));
  });

  describe.each(Object.values(TextControlBase.TextControlStyle))('on %s style', (style) => {
    it('renders input styles', () => {
      render(
        <DropdownSelect
          style={style}
        />
      );

      expect(TextControlBase.Input).toBeCalledWith(expect.objectContaining({
        style,
      }));
    });

    it('renders hint styles', () => {
      render(
        <DropdownSelect
          style={style}
          hint="hint"
        />
      );

      expect(TextControlBase.HintWrapper).toBeCalledWith(expect.objectContaining({
        style,
      }));
    });

    it('renders indicator styles', () => {
      render(
        <DropdownSelect
          style={style}
        />
      );

      expect(TextControlBase.IndicatorWrapper).toBeCalledWith(expect.objectContaining({
        style,
      }));
    });
  });

  it('handles change events', () => {
    const onChange = vi.fn().mockImplementationOnce((e) => { e.preventDefault(); })
    render(
      <DropdownSelect
        onChange={onChange}
        options={[
          {
            label: 'foo',
            value: 'foo',
          },
          {
            label: 'bar',
            value: 'bar',
          }
        ]}
      />
    );
    const combobox: HTMLSelectElement = screen.getByRole('combobox');
    const [, secondOption] = screen.getAllByRole('option');
    userEvent.selectOptions(combobox, secondOption);
    expect(onChange).toBeCalled();
  });
});