diff --git a/src/short-urls/helpers/ShortUrlsFilterDropdown.tsx b/src/short-urls/helpers/ShortUrlsFilterDropdown.tsx index 4b36d502..5d774e1a 100644 --- a/src/short-urls/helpers/ShortUrlsFilterDropdown.tsx +++ b/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 onBotsClick = () => onChange({ ...selected, excludeBots: !selected?.excludeBots }); + const { excludeBots = false, excludeMaxVisitsReached = false, excludePastValidUntil = false } = selected; + const onFilterClick = (key: keyof ShortUrlsFilter) => () => onChange({ ...selected, [key]: !selected?.[key] }); return ( - Bots: - Exclude bots visits + Visits: + Ignore visits from bots + + {supportsDisabledFiltering && ( + <> + + Short URLs: + + Exclude with visits reached + + + Exclude enabled in the past + + + )} - onChange({ excludeBots: false })}> + onChange({ excludeBots: false, excludeMaxVisitsReached: false, excludePastValidUntil: false })} + > Clear filters diff --git a/test/short-urls/helpers/ShortUrlsFilterDropdown.test.tsx b/test/short-urls/helpers/ShortUrlsFilterDropdown.test.tsx new file mode 100644 index 00000000..b1168b27 --- /dev/null +++ b/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('', () => { + const setUp = (supportsDisabledFiltering: boolean) => renderWithEvents( + , + ); + + 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); + }); +});