Added test to check how visits stats persist filters in query string

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<VisitsFiltering>) => void;
 
 export const useVisitsQuery = (): [VisitsFiltering, UpdateFiltering] => {
   const navigate = useNavigate();
   const { search } = useLocation();
 
-  const filtering = useMemo(
+  const { filtering, domain: theDomain } = useMemo(
     pipe(
       () => parseQuery<VisitsQuery>(search),
-      ({ startDate, endDate, orphanVisitsType, excludeBots }: VisitsQuery): VisitsFiltering => ({
+      ({ startDate, endDate, orphanVisitsType, excludeBots, domain }: VisitsQuery): VisitsFilteringAndDomain => ({
-        dateRange: startDate || endDate ? datesToDateRange(startDate, endDate) : undefined,
+        domain,
-        visitsFilter: { orphanVisitsType, excludeBots: excludeBots === 'true' },
+        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}`;

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('<VisitsStats />', () => {
     const history = createMemoryHistory();
     history.push(activeRoute);
 
-    return renderWithEvents(
+    return {
-      <Router location={history.location} navigator={history}>
+      history,
-        <VisitsStats
+      ...renderWithEvents(
-          getVisits={getVisitsMock}
+        <Router location={history.location} navigator={history}>
-          visitsInfo={Mock.of<VisitsInfo>(visitsInfo)}
+          <VisitsStats
-          cancelGetVisits={() => {}}
+            getVisits={getVisitsMock}
-          settings={Mock.all<Settings>()}
+            visitsInfo={Mock.of<VisitsInfo>(visitsInfo)}
-          exportCsv={exportCsv}
+            cancelGetVisits={() => {}}
-          selectedServer={Mock.all<SelectedServer>()}
+            settings={Mock.all<Settings>()}
-        />
+            exportCsv={exportCsv}
-      </Router>,
+            selectedServer={Mock.of<ReachableServer>({ version: '3.0.0' })}
-    );
+          />
+        </Router>,
+      ),
+    };
   };
 
   it('renders a preloader when visits are loading', () => {
@@ -81,4 +84,24 @@ describe('<VisitsStats />', () => {
     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']);
+  });
 });