Dropdown tests

src/components/Controls.jsx

@@ -197,11 +197,9 @@ export default function Controls({ state, setState, mapbox }) {
               end={!canShowViews && !filters[index + 1]}
               filter={filter}
               open={dropdown === filter}
-              options={state.indexes[filter]}
               setDropdown={setDropdown}
               state={state}
               setState={setState}
-              values={state.input[filter]}
             />
           </div>
         ))}

src/components/Dropdown.jsx

@@ -3,16 +3,17 @@ import React, { Fragment } from 'react';
 import { formatClasses as cx, getIndexByKey, formatUrl } from '../helpers';
 
 export default function Dropdown({
+  defaultValue,
+  end,
   filter,
-  options,
   open,
-  end,
-  values,
-  defaultValue,
   setDropdown,
-  state,
   setState,
+  state,
 }) {
+  const options = state.indexes[filter];
+  const values = state.input[filter];
+
   //set filter: pass it up to parent
   const setFilter = (e, filter, value) => {
     e.preventDefault();
@@ -34,40 +35,39 @@ export default function Dropdown({
     }
 
     //sort filters
-    state.input[filter].sort((a, b) => {
-      return (
+    state.input[filter].sort(
+      (a, b) =>
         state.indexes[filter].findIndex(x => a === x.key) -
         state.indexes[filter].findIndex(x => b === x.key)
-      );
-    });
+    );
 
     //pass it up to app controller
     setState({ ...state });
   };
 
-  const renderDropdownItem = option => (
-    <Fragment key={option.key}>
+  const renderDropdownItem = ({ key, name, slugs, children }) => (
+    <Fragment key={key}>
       <a
         className={cx(
           'align-items-center d-flex dropdown-item justify-content-between',
           {
-            'bg-secondary text-white': values.includes(option.key),
+            'bg-secondary text-white': values.includes(key),
           }
         )}
         href={formatUrl({
           ...state.input,
-          [filter]: values.includes(option.key) ? [option.key] : [],
+          [filter]: values.includes(key) ? [key] : [],
         })}
-        onClick={e => setFilter(e, filter, option.key)}
+        onClick={e => setFilter(e, filter, key)}
       >
-        <span>{option.name}</span>
+        <span>{name}</span>
         <span className="badge bg-light border ms-3 text-dark">
-          {option.slugs.length}
+          {slugs.length}
         </span>
       </a>
-      {!!option.children?.length && (
+      {!!children?.length && (
         <div className="children">
-          {option.children.map(child => renderDropdownItem(child))}
+          {children.map(child => renderDropdownItem(child))}
         </div>
       )}
     </Fragment>
@@ -83,6 +83,7 @@ export default function Dropdown({
       <button
         className="btn btn-outline-secondary dropdown-toggle w-100"
         onClick={() => setDropdown(open ? null : filter)}
+        id={filter}
       >
         {values?.length && options?.length
           ? values.map(value => getIndexByKey(options, value)?.name).join(' + ')
@@ -93,6 +94,7 @@ export default function Dropdown({
           show: open,
           'dropdown-menu-end': end,
         })}
+        aria-labelledby={filter}
       >
         <a
           className={cx('dropdown-item', {

src/components/Dropdown.spec.tsx

@@ -0,0 +1,122 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import Dropdown from './Dropdown';
+import { strings } from '../helpers';
+
+describe('<Dropdown />', () => {
+  const filter = 'type';
+  const defaultValue = strings[`${filter}_any`];
+  const mockState = {
+    input: {
+      [filter]: [],
+    },
+    indexes: {
+      [filter]: [
+        { key: 'foo', name: 'Foo', slugs: [] },
+        {
+          key: 'bar',
+          name: 'Bar',
+          slugs: [],
+          children: [{ key: 'baz', name: 'Baz', slugs: [] }],
+        },
+        { key: 'online', name: 'Online', slugs: [] },
+        { key: 'in-person', name: 'In-Person', slugs: [] },
+      ],
+    },
+  };
+
+  it('renders', () => {
+    render(
+      <Dropdown
+        filter={filter}
+        open={false}
+        end={false}
+        defaultValue={defaultValue}
+        setDropdown={jest.fn()}
+        state={{ ...mockState, input: { [filter]: ['bar'] } }}
+        setState={jest.fn()}
+      />
+    );
+    expect(screen.getAllByText(defaultValue)).toHaveLength(1);
+  });
+
+  it('opens', () => {
+    const mockSetDropdown = jest.fn();
+
+    render(
+      <Dropdown
+        filter={filter}
+        open={false}
+        end={false}
+        defaultValue={defaultValue}
+        setDropdown={mockSetDropdown}
+        state={mockState}
+        setState={jest.fn()}
+      />
+    );
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(mockSetDropdown).toBeCalled();
+
+    const dropdown = screen.getByLabelText(defaultValue);
+    expect(dropdown).toBeVisible();
+  });
+
+  it('has working links', async () => {
+    const mockSetDropdown = jest.fn();
+    const mockSetState = jest.fn();
+
+    render(
+      <Dropdown
+        defaultValue={defaultValue}
+        end={false}
+        filter={filter}
+        open={true}
+        setDropdown={mockSetDropdown}
+        setState={mockSetState}
+        state={mockState}
+      />
+    );
+
+    function modify<
+      K extends keyof typeof mockState['input'],
+      T extends typeof mockState['input'][K]
+    >(key: K, value: T) {
+      return {
+        ...mockState,
+        input: { ...mockState.input, [key]: value },
+      };
+    }
+
+    //dropdown starts open
+    const dropdown = screen.getByLabelText(defaultValue);
+    expect(dropdown).toHaveClass('show');
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(mockSetDropdown).toBeCalled();
+
+    //test links
+    const link1 = screen.getByText('Foo');
+    const link2 = screen.getByText('Bar');
+
+    //click a filter
+    fireEvent.click(link1);
+    expect(mockSetState).toHaveBeenLastCalledWith(modify(filter, ['foo']));
+
+    //add a filter by clicking with metaKey
+    fireEvent.click(link2, { metaKey: true });
+    expect(mockSetState).toHaveBeenLastCalledWith(
+      modify(filter, ['foo', 'bar'])
+    );
+
+    //remove a filter by clicking with metaKey
+    fireEvent.click(link1, { metaKey: true });
+    expect(mockSetState).toHaveBeenLastCalledWith(modify(filter, ['bar']));
+
+    //click all
+    const all = screen.getAllByText(strings[`${filter}_any`]);
+    fireEvent.click(all[1]);
+    expect(mockSetState).toHaveBeenLastCalledWith(modify(filter, []));
+  });
+});