Created Dropdown test

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>
   );

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);
+  });
+});