shlink-web-client/test/utils/SortingDropdown.test.tsx

import { shallow, ShallowWrapper } from 'enzyme';
import { DropdownItem, DropdownToggle } from 'reactstrap';
import { identity, values } from 'ramda';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSortAmountDown as caretDownIcon } from '@fortawesome/free-solid-svg-icons';
import SortingDropdown, { SortingDropdownProps } from '../../src/utils/SortingDropdown';
import { OrderDir } from '../../src/utils/utils';

describe('<SortingDropdown />', () => {
  let wrapper: ShallowWrapper;
  const items = {
    foo: 'Foo',
    bar: 'Bar',
    baz: 'Hello World',
  };
  const createWrapper = (props: Partial<SortingDropdownProps> = {}) => {
    wrapper = shallow(<SortingDropdown items={items} onChange={identity} {...props} />);

    return wrapper;
  };

  afterEach(() => wrapper?.unmount());

  it('properly renders provided list of items', () => {
    const wrapper = createWrapper();
    const dropdownItems = wrapper.find(DropdownItem);
    const secondIndex = 2;
    const clearItemsCount = 2;

    expect(dropdownItems).toHaveLength(values(items).length + clearItemsCount);
    expect(dropdownItems.at(0).html()).toContain('Foo');
    expect(dropdownItems.at(1).html()).toContain('Bar');
    expect(dropdownItems.at(secondIndex).html()).toContain('Hello World');
  });

  it('properly marks selected field as active with proper icon', () => {
    const wrapper = createWrapper({ orderField: 'bar', orderDir: 'DESC' });
    const activeItem = wrapper.find('DropdownItem[active=true]');
    const activeItemIcon = activeItem.first().find(FontAwesomeIcon);

    expect(activeItem).toHaveLength(1);
    expect(activeItemIcon.prop('icon')).toEqual(caretDownIcon);
  });

  it('triggers change function when item is clicked and no order field was provided', () => {
    const onChange = jest.fn();
    const wrapper = createWrapper({ onChange });
    const firstItem = wrapper.find(DropdownItem).first();

    firstItem.simulate('click');

    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith('foo', 'ASC');
  });

  it('triggers change function when item is clicked and an order field was provided', () => {
    const onChange = jest.fn();
    const wrapper = createWrapper({ onChange, orderField: 'baz', orderDir: 'ASC' });
    const firstItem = wrapper.find(DropdownItem).first();

    firstItem.simulate('click');

    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith('foo', 'ASC');
  });

  it('updates order dir when already selected item is clicked', () => {
    const onChange = jest.fn();
    const wrapper = createWrapper({ onChange, orderField: 'foo', orderDir: 'ASC' });
    const firstItem = wrapper.find(DropdownItem).first();

    firstItem.simulate('click');

    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith('foo', 'DESC');
  });

  it.each([
    [{ isButton: false }, '>Order by<' ],
    [{ isButton: true }, '>Order by...<' ],
    [
      { isButton: true, orderField: 'foo', orderDir: 'ASC' as OrderDir },
      'Order by: &quot;Foo&quot; - &quot;ASC&quot;',
    ],
    [
      { isButton: true, orderField: 'baz', orderDir: 'DESC' as OrderDir },
      'Order by: &quot;Hello World&quot; - &quot;DESC&quot;',
    ],
    [{ isButton: true, orderField: 'baz' }, 'Order by: &quot;Hello World&quot; - &quot;DESC&quot;' ],
  ])('displays expected text in toggle', (props, expectedText) => {
    const wrapper = createWrapper(props);
    const toggle = wrapper.find(DropdownToggle);

    expect(toggle.html()).toContain(expectedText);
  });
});