tesseract/categories/web/multichoice/react/src/components/MenuMultiSelect/MenuMultiSelect.test.tsx

import * as React from 'react';
import {
  cleanup,
  render,
  screen,
} from '@testing-library/react';
import { TextControl } from '@tesseract-design/web-base';
import userEvent from '@testing-library/user-event';
import {
  afterEach,
  expect,
  vi,
  describe,
  it,
} from 'vitest';
import matchers from '@testing-library/jest-dom/matchers';
import { PluginAPI } from 'tailwindcss/types/config';
import {
  MenuMultiSelect,
  MenuMultiSelectDerivedElement,
  menuMultiSelectPlugin,
} from '.';

expect.extend(matchers);

describe('menuMultiSelectPlugin', () => {
  it('adds component styles', () => {
    const pluginApi = {
      addComponents: vi.fn(),
    } as unknown as PluginAPI;

    menuMultiSelectPlugin(pluginApi);
    expect(pluginApi.addComponents).toBeCalledTimes(1);
  });
});

describe('MenuMultiSelect', () => {
  afterEach(() => {
    cleanup();
  });

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

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

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

  it('renders a hidden label', () => {
    render(
      <MenuMultiSelect
        label="foo"
        hiddenLabel
      />,
    );
    const listbox = screen.getByLabelText('foo');
    expect(listbox).toBeInTheDocument();
    const label = screen.getByTestId('label');
    expect(label).toHaveClass('sr-only');
  });

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

  it('render options with implicit values', () => {
    render(
      <MenuMultiSelect>
        <option>foo</option>
        <option>bar</option>
      </MenuMultiSelect>,
    );
    const listbox = screen.getByRole('listbox');
    expect(listbox.children).toHaveLength(2);
  });

  it('renders valid options', () => {
    render(
      <MenuMultiSelect>
        <option value="foo">foo</option>
        <option value="bar">bar</option>
      </MenuMultiSelect>,
    );
    const listbox = screen.getByRole('listbox');
    expect(listbox.children).toHaveLength(2);
  });

  it('renders option groups', () => {
    render(
      <MenuMultiSelect>
        <optgroup label="foo">
          <option value="baz">baz</option>
        </optgroup>
        <optgroup label="bar">
          <option value="quux">quux</option>
          <option value="quuux">quuux</option>
        </optgroup>
      </MenuMultiSelect>,
    );
    const listbox = screen.getByRole('listbox');
    expect(listbox.children).toHaveLength(2);
    expect(listbox.children[0].children).toHaveLength(1);
    expect(listbox.children[1].children).toHaveLength(2);
  });

  describe.each`
    size        | inputClassNames | hintClassNames | indicatorClassNames
    ${'small'}  | ${'min-h-10'}   | ${'pr-10'}     | ${'w-10'}
    ${'medium'} | ${'min-h-12'}   | ${'pr-12'}     | ${'w-12'}
    ${'large'}  | ${'min-h-16'}   | ${'pr-16'}     | ${'w-16'}
  `('on $size size', ({
    size,
    inputClassNames,
    hintClassNames,
    indicatorClassNames,
  }: {
    size: TextControl.Size,
    inputClassNames: string,
    hintClassNames: string,
    indicatorClassNames: string,
  }) => {
    it('renders input styles', () => {
      render(
        <MenuMultiSelect
          size={size}
        />,
      );

      const listbox = screen.getByRole('listbox');
      expect(listbox).toHaveClass(inputClassNames);
    });

    it('renders hint styles with indicator', () => {
      render(
        <MenuMultiSelect
          size={size}
          hint="hint"
          indicator="a"
        />,
      );

      const hint = screen.getByTestId('hint');
      expect(hint).toHaveClass(hintClassNames);
    });

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

      const indicator = screen.getByTestId('indicator');
      expect(indicator).toHaveClass(indicatorClassNames);
    });

    it('renders indicator styles for label', () => {
      render(
        <MenuMultiSelect
          size={size}
          label="label"
          indicator="a"
        />,
      );

      const label = screen.getByTestId('label');
      expect(label).toHaveClass(hintClassNames);
    });
  });

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

    const base = screen.getByTestId('base');
    expect(base).toHaveClass('block');
  });

  describe.each`
    variant        | inputClassNames  | hintClassNames
    ${'default'}   | ${'pl-4'}        | ${'bottom-0 pl-4 pb-1'} 
    ${'alternate'} | ${'pl-1.5 pt-5'} | ${'top-0.5'}
  `('on $variant variant', ({
    variant,
    inputClassNames,
    hintClassNames,
  }: {
    variant: TextControl.Variant,
    inputClassNames: string,
    hintClassNames: string,
  }) => {
    it('renders input styles', () => {
      render(
        <MenuMultiSelect
          variant={variant}
        />,
      );

      const listbox = screen.getByRole('listbox');
      expect(listbox).toHaveClass(inputClassNames);
    });

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

      const hint = screen.getByTestId('hint');
      expect(hint).toHaveClass(hintClassNames);
    });
  });

  it('handles change events', async () => {
    const onChange = vi.fn().mockImplementationOnce(
      (e: React.ChangeEvent<MenuMultiSelectDerivedElement>) => {
        e.preventDefault();
      },
    );

    render(
      <MenuMultiSelect
        onChange={onChange}
      >
        <option value="foo">foo</option>
        <option value="bar">bar</option>
      </MenuMultiSelect>,
    );
    const listbox: HTMLSelectElement = screen.getByRole('listbox');
    const [, secondOption] = screen.getAllByRole('option');
    await userEvent.selectOptions(listbox, secondOption);
    expect(onChange).toBeCalled();
  });
});