Created TagsModeDropdown component

src/tags/TagsModeDropdown.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { DropdownItem } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBars as listIcon, faThLarge as cardsIcon } from '@fortawesome/free-solid-svg-icons';
+import { DropdownBtn } from '../utils/DropdownBtn';
+
+interface TagsModeDropdownProps {
+  mode: TagsMode;
+  onChange: (newMode: TagsMode) => void;
+}
+
+export type TagsMode = 'cards' | 'list';
+
+export const TagsModeDropdown: FC<TagsModeDropdownProps> = ({ mode, onChange }) => (
+  <DropdownBtn text={`Display mode: ${mode}`}>
+    <DropdownItem outline active={mode === 'cards'} onClick={() => onChange('cards')}>
+      <FontAwesomeIcon icon={cardsIcon} fixedWidth className="mr-1" /> Cards
+    </DropdownItem>
+    <DropdownItem outline active={mode === 'list'} onClick={() => onChange('list')}>
+      <FontAwesomeIcon icon={listIcon} fixedWidth className="mr-1" /> List
+    </DropdownItem>
+  </DropdownBtn>
+);

test/tags/TagsModeDropdown.test.tsx

@@ -0,0 +1,42 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { DropdownItem } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBars as listIcon, faThLarge as cardsIcon } from '@fortawesome/free-solid-svg-icons';
+import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
+import { DropdownBtn } from '../../src/utils/DropdownBtn';
+
+describe('<TagsModeDropdown />', () => {
+  const onChange = jest.fn();
+  let wrapper: ShallowWrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<TagsModeDropdown mode="list" onChange={onChange} />);
+  });
+
+  afterEach(jest.clearAllMocks);
+  afterEach(() => wrapper?.unmount());
+
+  it('renders expected items', () => {
+    const btn = wrapper.find(DropdownBtn);
+    const items = wrapper.find(DropdownItem);
+    const icons = wrapper.find(FontAwesomeIcon);
+
+    expect(btn).toHaveLength(1);
+    expect(btn.prop('text')).toEqual('Display mode: list');
+    expect(items).toHaveLength(2);
+    expect(icons).toHaveLength(2);
+    expect(icons.first().prop('icon')).toEqual(cardsIcon);
+    expect(icons.last().prop('icon')).toEqual(listIcon);
+  });
+
+  it('changes active element on click', () => {
+    const items = wrapper.find(DropdownItem);
+
+    expect(onChange).not.toHaveBeenCalled();
+    items.first().simulate('click');
+    expect(onChange).toHaveBeenCalledWith('cards');
+
+    items.last().simulate('click');
+    expect(onChange).toHaveBeenCalledWith('list');
+  });
+});