From 57d4db5daa4b86eae5a7c2584b862adc8ab10b2c Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Fri, 24 Sep 2021 20:21:02 +0200
Subject: [PATCH] Created TagsModeDropdown component

---
 src/tags/TagsModeDropdown.tsx       | 23 ++++++++++++++++
 test/tags/TagsModeDropdown.test.tsx | 42 +++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/tags/TagsModeDropdown.tsx
 create mode 100644 test/tags/TagsModeDropdown.test.tsx

diff --git a/src/tags/TagsModeDropdown.tsx b/src/tags/TagsModeDropdown.tsx
new file mode 100644
index 00000000..816aa2b9
--- /dev/null
+++ b/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>
+);
diff --git a/test/tags/TagsModeDropdown.test.tsx b/test/tags/TagsModeDropdown.test.tsx
new file mode 100644
index 00000000..97f170b8
--- /dev/null
+++ b/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');
+  });
+});