diff --git a/src/visits/helpers/hooks.ts b/src/visits/helpers/hooks.ts index 1538d63e..af19d9c8 100644 --- a/src/visits/helpers/hooks.ts +++ b/src/visits/helpers/hooks.ts @@ -12,6 +12,7 @@ interface VisitsQuery { endDate?: string; orphanVisitsType?: OrphanVisitType; excludeBots?: 'true'; + domain?: string; } interface VisitsFiltering { @@ -19,18 +20,26 @@ interface VisitsFiltering { visitsFilter: VisitsFilter; } +interface VisitsFilteringAndDomain { + filtering: VisitsFiltering; + domain?: string; +} + type UpdateFiltering = (extra: DeepPartial) => void; export const useVisitsQuery = (): [VisitsFiltering, UpdateFiltering] => { const navigate = useNavigate(); const { search } = useLocation(); - const filtering = useMemo( + const { filtering, domain: theDomain } = useMemo( pipe( () => parseQuery(search), - ({ startDate, endDate, orphanVisitsType, excludeBots }: VisitsQuery): VisitsFiltering => ({ - dateRange: startDate || endDate ? datesToDateRange(startDate, endDate) : undefined, - visitsFilter: { orphanVisitsType, excludeBots: excludeBots === 'true' }, + ({ startDate, endDate, orphanVisitsType, excludeBots, domain }: VisitsQuery): VisitsFilteringAndDomain => ({ + domain, + filtering: { + dateRange: startDate || endDate ? datesToDateRange(startDate, endDate) : undefined, + visitsFilter: { orphanVisitsType, excludeBots: excludeBots === 'true' }, + }, }), ), [search], @@ -42,6 +51,7 @@ export const useVisitsQuery = (): [VisitsFiltering, UpdateFiltering] => { endDate: (dateRange?.endDate && formatIsoDate(dateRange.endDate)) || undefined, excludeBots: visitsFilter.excludeBots ? 'true' : undefined, orphanVisitsType: visitsFilter.orphanVisitsType, + domain: theDomain, }; const stringifiedQuery = stringifyQuery(query); const queryString = isEmpty(stringifiedQuery) ? '' : `?${stringifiedQuery}`; diff --git a/test/visits/VisitsStats.test.tsx b/test/visits/VisitsStats.test.tsx index ce503fac..7498ddec 100644 --- a/test/visits/VisitsStats.test.tsx +++ b/test/visits/VisitsStats.test.tsx @@ -1,11 +1,11 @@ -import { screen } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { Router } from 'react-router-dom'; import { createMemoryHistory } from 'history'; import { VisitsStats } from '../../src/visits/VisitsStats'; import { Visit } from '../../src/visits/types'; import { Settings } from '../../src/settings/reducers/settings'; -import { SelectedServer } from '../../src/servers/data'; +import { ReachableServer } from '../../src/servers/data'; import { renderWithEvents } from '../__helpers__/setUpTest'; import { rangeOf } from '../../src/utils/utils'; import { VisitsInfo } from '../../src/visits/reducers/types'; @@ -18,18 +18,21 @@ describe('', () => { const history = createMemoryHistory(); history.push(activeRoute); - return renderWithEvents( - - (visitsInfo)} - cancelGetVisits={() => {}} - settings={Mock.all()} - exportCsv={exportCsv} - selectedServer={Mock.all()} - /> - , - ); + return { + history, + ...renderWithEvents( + + (visitsInfo)} + cancelGetVisits={() => {}} + settings={Mock.all()} + exportCsv={exportCsv} + selectedServer={Mock.of({ version: '3.0.0' })} + /> + , + ), + }; }; it('renders a preloader when visits are loading', () => { @@ -81,4 +84,24 @@ describe('', () => { await user.click(screen.getByRole('button', { name: /Export/ })); expect(exportCsv).toHaveBeenCalled(); }); + + it('sets filters in query string', async () => { + const { history, user } = setUp({ visits }); + const expectSearchContains = (contains: string[]) => { + expect(contains).not.toHaveLength(0); + contains.forEach((entry) => expect(history.location.search).toContain(entry)); + }; + + expect(history.location.search).toEqual(''); + + await user.click(screen.getByRole('button', { name: /Filters/ })); + await waitFor(() => screen.getByRole('menu')); + await user.click(screen.getByRole('menuitem', { name: 'Exclude potential bots' })); + expectSearchContains(['excludeBots=true']); + + await user.click(screen.getByRole('button', { name: /Last 30 days/ })); + await waitFor(() => screen.getByRole('menu')); + await user.click(screen.getByRole('menuitem', { name: /Last 180 days/ })); + expectSearchContains(['startDate', 'endDate']); + }); });