From e1298cfa812da48a3f279d2c1856b16e978bf972 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Fri, 25 Dec 2020 10:39:54 +0100
Subject: [PATCH] Created Dropdown test

---
 src/utils/Dropdown.tsx       |  7 +++---
 test/utils/Dropdown.test.tsx | 41 ++++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 test/utils/Dropdown.test.tsx

diff --git a/src/utils/Dropdown.tsx b/src/utils/Dropdown.tsx
index d6931310..c7e2f9fc 100644
--- a/src/utils/Dropdown.tsx
+++ b/src/utils/Dropdown.tsx
@@ -3,18 +3,19 @@ import { Dropdown as BsDropdown, DropdownMenu, DropdownToggle } from 'reactstrap
 import { useToggle } from './helpers/hooks';
 import './Dropdown.scss';
 
-interface DropdownProps {
+export interface DropdownProps {
   text: string;
   disabled?: boolean;
   className?: string;
 }
 
-export const Dropdown: FC<DropdownProps> = ({ text, disabled = false, className, children }) => {
+export const Dropdown: FC<DropdownProps> = ({ text, disabled = false, className = '', children }) => {
   const [ isOpen, toggle ] = useToggle();
+  const toggleClasses = `dropdown__btn btn-block ${className}`;
 
   return (
     <BsDropdown isOpen={isOpen} toggle={toggle} disabled={disabled}>
-      <DropdownToggle caret className={`dropdown__btn btn-block ${className}`} color="primary">{text}</DropdownToggle>
+      <DropdownToggle caret className={toggleClasses} color="primary">{text}</DropdownToggle>
       <DropdownMenu className="w-100">{children}</DropdownMenu>
     </BsDropdown>
   );
diff --git a/test/utils/Dropdown.test.tsx b/test/utils/Dropdown.test.tsx
new file mode 100644
index 00000000..b0ed8a95
--- /dev/null
+++ b/test/utils/Dropdown.test.tsx
@@ -0,0 +1,41 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { DropdownMenu, DropdownToggle } from 'reactstrap';
+import { PropsWithChildren } from 'react';
+import { Dropdown, DropdownProps } from '../../src/utils/Dropdown';
+
+describe('<Dropdown />', () => {
+  let wrapper: ShallowWrapper;
+  const createWrapper = (props: PropsWithChildren<DropdownProps>) => {
+    wrapper = shallow(<Dropdown {...props} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+
+  it.each([[ 'foo' ], [ 'bar' ], [ 'baz' ]])('displays provided text', (text) => {
+    const wrapper = createWrapper({ text });
+    const toggle = wrapper.find(DropdownToggle);
+
+    expect(toggle.html()).toContain(text);
+  });
+
+  it.each([[ 'foo' ], [ 'bar' ], [ 'baz' ]])('displays provided children', (children) => {
+    const wrapper = createWrapper({ text: '', children });
+    const menu = wrapper.find(DropdownMenu);
+
+    expect(menu.html()).toContain(children);
+  });
+
+  it.each([
+    [ undefined, 'dropdown__btn btn-block' ],
+    [ '', 'dropdown__btn btn-block' ],
+    [ 'foo', 'dropdown__btn btn-block foo' ],
+    [ 'bar', 'dropdown__btn btn-block bar' ],
+  ])('includes provided classes', (className, expectedClasses) => {
+    const wrapper = createWrapper({ text: '', className });
+    const toggle = wrapper.find(DropdownToggle);
+
+    expect(toggle.prop('className')?.trim()).toEqual(expectedClasses);
+  });
+});