Added test for ShortUrlsFilterDropdown

src/short-urls/helpers/ShortUrlsFilterDropdown.tsx

@@ -5,23 +5,40 @@ import { ShortUrlsFilter } from '../data';
 
 interface ShortUrlsFilterDropdownProps {
   onChange: (filters: ShortUrlsFilter) => void;
+  supportsDisabledFiltering: boolean;
   selected?: ShortUrlsFilter;
   className?: string;
 }
 
 export const ShortUrlsFilterDropdown = (
-  { onChange, selected = {}, className }: ShortUrlsFilterDropdownProps,
+  { onChange, selected = {}, className, supportsDisabledFiltering }: ShortUrlsFilterDropdownProps,
 ) => {
-  const { excludeBots = false } = selected;
+  const { excludeBots = false, excludeMaxVisitsReached = false, excludePastValidUntil = false } = selected;
-  const onBotsClick = () => onChange({ ...selected, excludeBots: !selected?.excludeBots });
+  const onFilterClick = (key: keyof ShortUrlsFilter) => () => onChange({ ...selected, [key]: !selected?.[key] });
 
   return (
     <DropdownBtn text="Filters" dropdownClassName={className} className="me-3" right minWidth={250}>
-      <DropdownItem header>Bots:</DropdownItem>
+      <DropdownItem header>Visits:</DropdownItem>
-      <DropdownItem active={excludeBots} onClick={onBotsClick}>Exclude bots visits</DropdownItem>
+      <DropdownItem active={excludeBots} onClick={onFilterClick('excludeBots')}>Ignore visits from bots</DropdownItem>
+
+      {supportsDisabledFiltering && (
+        <>
+          <DropdownItem divider />
+          <DropdownItem header>Short URLs:</DropdownItem>
+          <DropdownItem active={excludeMaxVisitsReached} onClick={onFilterClick('excludeMaxVisitsReached')}>
+            Exclude with visits reached
+          </DropdownItem>
+          <DropdownItem active={excludePastValidUntil} onClick={onFilterClick('excludePastValidUntil')}>
+            Exclude enabled in the past
+          </DropdownItem>
+        </>
+      )}
 
       <DropdownItem divider />
-      <DropdownItem disabled={!hasValue(selected)} onClick={() => onChange({ excludeBots: false })}>
+      <DropdownItem
+        disabled={!hasValue(selected)}
+        onClick={() => onChange({ excludeBots: false, excludeMaxVisitsReached: false, excludePastValidUntil: false })}
+      >
         <i>Clear filters</i>
       </DropdownItem>
     </DropdownBtn>

test/short-urls/helpers/ShortUrlsFilterDropdown.test.tsx

@@ -0,0 +1,21 @@
+import { screen, waitFor } from '@testing-library/react';
+import { ShortUrlsFilterDropdown } from '../../../src/short-urls/helpers/ShortUrlsFilterDropdown';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<ShortUrlsFilterDropdown />', () => {
+  const setUp = (supportsDisabledFiltering: boolean) => renderWithEvents(
+    <ShortUrlsFilterDropdown onChange={jest.fn()} supportsDisabledFiltering={supportsDisabledFiltering} />,
+  );
+
+  it.each([
+    [true, 3],
+    [false, 1],
+  ])('displays proper amount of menu items', async (supportsDisabledFiltering, expectedItems) => {
+    const { user } = setUp(supportsDisabledFiltering);
+
+    await user.click(screen.getByRole('button', { name: 'Filters' }));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument());
+
+    expect(screen.getAllByRole('menuitem')).toHaveLength(expectedItems);
+  });
+});