shlink-web-client/test/utils/table/TableOrderIcon.test.tsx

import { shallow, ShallowWrapper } from 'enzyme';
import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
import { TableOrderIcon } from '../../../src/utils/table/TableOrderIcon';
import { OrderDir } from '../../../src/utils/helpers/ordering';

describe('<TableOrderIcon />', () => {
  let wrapper: ShallowWrapper;
  const createWrapper = (field: string, currentDir?: OrderDir, className?: string) => {
    wrapper = shallow(
      <TableOrderIcon currentOrder={{ dir: currentDir, field: 'foo' }} field={field} className={className} />,
    );

    return wrapper;
  };

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

  it.each([
    [ 'foo', undefined ],
    [ 'bar', 'DESC' as OrderDir ],
    [ 'bar', 'ASC' as OrderDir ],
  ])('renders empty when not all conditions are met', (field, dir) => {
    const wrapper = createWrapper(field, dir);

    expect(wrapper.html()).toEqual(null);
  });

  it.each([
    [ 'DESC' as OrderDir, caretDownIcon ],
    [ 'ASC' as OrderDir, caretUpIcon ],
  ])('renders an icon when all conditions are met', (dir, expectedIcon) => {
    const wrapper = createWrapper('foo', dir);

    expect(wrapper.html()).not.toEqual(null);
    expect(wrapper.prop('icon')).toEqual(expectedIcon);
  });

  it.each([
    [ undefined, 'ms-1' ],
    [ 'foo', 'foo' ],
    [ 'bar', 'bar' ],
  ])('renders expected classname', (className, expectedClassName) => {
    const wrapper = createWrapper('foo', 'ASC', className);

    expect(wrapper.prop('className')).toEqual(expectedClassName);
  });
});