@parca/profile 0.19.138 → 0.19.140

package/src/hooks/useQueryState.test.tsx

@@ -17,59 +17,13 @@ import {ReactNode, act} from 'react';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 // eslint-disable-next-line import/named
 import {renderHook, waitFor} from '@testing-library/react';
+// eslint-disable-next-line import/no-unresolved
+import {NuqsTestingAdapter} from 'nuqs/adapters/testing';
 import {beforeEach, describe, expect, it, vi} from 'vitest';
 
-import {URLStateProvider} from '@parca/components';
-
 import {useQueryState} from './useQueryState';
 
-// Mock window.location
-const mockLocation = {
-  pathname: '/test',
-  search: '',
-};
-
-// Mock the navigate function that actually updates the mock location
-const mockNavigateTo = vi.fn((path: string, params: Record<string, string | string[]>) => {
-  // Convert params object to query string
-  const searchParams = new URLSearchParams();
-  Object.entries(params).forEach(([key, value]) => {
-    if (value !== undefined && value !== null) {
-      if (Array.isArray(value)) {
-        // For arrays, join with commas
-        searchParams.set(key, value.join(','));
-      } else {
-        searchParams.set(key, String(value));
-      }
-    }
-  });
-  mockLocation.search = `?${searchParams.toString()}`;
-});
-
-// Mock the getQueryParamsFromURL function
-vi.mock('@parca/components/src/hooks/URLState/utils', async () => {
-  const actual = await vi.importActual('@parca/components/src/hooks/URLState/utils');
-  return {
-    ...actual,
-    getQueryParamsFromURL: () => {
-      if (mockLocation.search === '') return {};
-      const params = new URLSearchParams(mockLocation.search);
-      const result: Record<string, string | string[]> = {};
-      for (const [key, value] of params.entries()) {
-        const decodedValue = decodeURIComponent(value);
-        const existing = result[key];
-        if (existing !== undefined) {
-          result[key] = Array.isArray(existing)
-            ? [...existing, decodedValue]
-            : [existing, decodedValue];
-        } else {
-          result[key] = decodedValue;
-        }
-      }
-      return result;
-    },
-  };
-});
+const mockNavigateTo = vi.fn();
 
 // Mock useSumBy with stateful behavior using React's useState
 vi.mock('../useSumBy', async () => {
@@ -138,9 +92,10 @@ const setProfileTypesData = (data: typeof mockProfileTypesData): void => {
   mockProfileTypesData = data;
 };
 
-// Helper to create wrapper with URLStateProvider
+// Helper to create wrapper with NuqsTestingAdapter
 const createWrapper = (
-  paramPreferences = {}
+  _paramPreferences = {},
+  searchParams: string | Record<string, string> = {}
 ): (({children}: {children: ReactNode}) => JSX.Element) => {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -150,24 +105,17 @@ const createWrapper = (
     },
   });
   const Wrapper = ({children}: {children: ReactNode}): JSX.Element => (
-    <QueryClientProvider client={queryClient}>
-      <URLStateProvider navigateTo={mockNavigateTo} paramPreferences={paramPreferences}>
-        {children}
-      </URLStateProvider>
-    </QueryClientProvider>
+    <NuqsTestingAdapter searchParams={searchParams} hasMemory={true}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </NuqsTestingAdapter>
   );
-  Wrapper.displayName = 'URLStateProviderWrapper';
+  Wrapper.displayName = 'NuqsTestingWrapper';
   return Wrapper;
 };
 
 describe('useQueryState', () => {
   beforeEach(() => {
     mockNavigateTo.mockClear();
-    Object.defineProperty(window, 'location', {
-      value: mockLocation,
-      writable: true,
-    });
-    mockLocation.search = '';
     // Reset profile types mock state
     setProfileTypesLoading(false);
     setProfileTypesData(undefined);
@@ -195,10 +143,12 @@ describe('useQueryState', () => {
     });
 
     it('should handle suffix for comparison mode', () => {
-      mockLocation.search =
-        '?expression_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from_a=1000&to_a=2000';
-
-      const {result} = renderHook(() => useQueryState({suffix: '_a'}), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState({suffix: '_a'}), {
+        wrapper: createWrapper(
+          {},
+          '?expression_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from_a=1000&to_a=2000'
+        ),
+      });
 
       const {querySelection} = result.current;
       expect(querySelection.expression).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}');
@@ -236,14 +186,11 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.expression).toBe('memory:alloc_objects:count:space:bytes:delta{}');
-        // Should set merge parameters for delta profile
-        expect(params).toHaveProperty('merge_from');
-        expect(params).toHaveProperty('merge_to');
-        expect(params.merge_from).toBe('1000000000');
-        expect(params.merge_to).toBe('2000000000');
+        expect(result.current.querySelection.expression).toBe(
+          'memory:alloc_objects:count:space:bytes:delta{}'
+        );
+        expect(result.current.querySelection.mergeFrom).toBe('1000000000');
+        expect(result.current.querySelection.mergeTo).toBe('2000000000');
       });
     });
 
@@ -264,11 +211,9 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.from).toBe('3000');
-        expect(params.to).toBe('4000');
-        expect(params.time_selection).toBe('relative:minute|5');
+        expect(String(result.current.querySelection.from)).toBe('3000');
+        expect(String(result.current.querySelection.to)).toBe('4000');
+        expect(result.current.querySelection.timeSelection).toBe('relative:minute|5');
       });
     });
 
@@ -289,9 +234,8 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.sum_by).toBe('namespace,container');
+        // sumBy is managed by the mocked useSumBy hook; verify it was set in draft
+        expect(result.current.draftSelection.sumBy).toEqual(['namespace', 'container']);
       });
     });
 
@@ -313,10 +257,8 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.merge_from).toBe('5000000000');
-        expect(params.merge_to).toBe('6000000000');
+        expect(result.current.querySelection.mergeFrom).toBe('5000000000');
+        expect(result.current.querySelection.mergeTo).toBe('6000000000');
       });
     });
   });
@@ -345,22 +287,25 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        // Should only navigate once for all updates
-        expect(mockNavigateTo).toHaveBeenCalledTimes(1);
-        const [, params] = mockNavigateTo.mock.calls[0];
-        expect(params.expression).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
-        expect(params.from).toBe('7000');
-        expect(params.to).toBe('8000');
-        expect(params.time_selection).toBe('relative:minute|30');
-        expect(params.sum_by).toBe('pod,node');
+        // Verify all state values are correct after the batch
+        expect(result.current.querySelection.expression).toBe(
+          'memory:alloc_space:bytes:space:bytes:delta{}'
+        );
+        expect(String(result.current.querySelection.from)).toBe('7000');
+        expect(String(result.current.querySelection.to)).toBe('8000');
+        expect(result.current.querySelection.timeSelection).toBe('relative:minute|30');
+        // sumBy is managed by the mocked useSumBy hook; verify it was set in draft
+        expect(result.current.draftSelection.sumBy).toEqual(['pod', 'node']);
       });
     });
 
     it('should handle partial updates', async () => {
-      mockLocation.search =
-        '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from=1000&to=2000&time_selection=relative:hour|1';
-
-      const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState(), {
+        wrapper: createWrapper(
+          {},
+          '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from=1000&to=2000&time_selection=relative:hour|1'
+        ),
+      });
 
       act(() => {
         // Only update expression, other values should remain
@@ -379,12 +324,12 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.expression).toBe('memory:inuse_space:bytes:space:bytes{}');
-        expect(params.from).toBe('1000');
-        expect(params.to).toBe('2000');
-        expect(params.time_selection).toBe('relative:hour|1');
+        expect(result.current.querySelection.expression).toBe(
+          'memory:inuse_space:bytes:space:bytes{}'
+        );
+        expect(String(result.current.querySelection.from)).toBe('1000');
+        expect(String(result.current.querySelection.to)).toBe('2000');
+        expect(result.current.querySelection.timeSelection).toBe('relative:hour|1');
       });
     });
 
@@ -405,21 +350,23 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.expression).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
-        expect(params.merge_from).toBe('9000000000');
-        expect(params.merge_to).toBe('10000000000');
+        expect(result.current.querySelection.expression).toBe(
+          'memory:alloc_space:bytes:space:bytes:delta{}'
+        );
+        expect(result.current.querySelection.mergeFrom).toBe('9000000000');
+        expect(result.current.querySelection.mergeTo).toBe('10000000000');
       });
     });
   });
 
   describe('Helper functions', () => {
     it('should set profile name correctly', async () => {
-      mockLocation.search =
-        '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{job="parca"}';
-
-      const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState(), {
+        wrapper: createWrapper(
+          {},
+          '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{job="parca"}'
+        ),
+      });
 
       act(() => {
         result.current.setDraftProfileName('memory:inuse_space:bytes:space:bytes');
@@ -435,16 +382,19 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.expression).toBe('memory:inuse_space:bytes:space:bytes{job="parca"}');
+        expect(result.current.querySelection.expression).toBe(
+          'memory:inuse_space:bytes:space:bytes{job="parca"}'
+        );
       });
     });
 
     it('should set matchers correctly using draft', async () => {
-      mockLocation.search = '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}';
-
-      const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState(), {
+        wrapper: createWrapper(
+          {},
+          '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}'
+        ),
+      });
 
       act(() => {
         result.current.setDraftMatchers('namespace="default",pod="my-pod"');
@@ -454,7 +404,6 @@ describe('useQueryState', () => {
       expect(result.current.draftSelection.expression).toBe(
         'process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{namespace="default",pod="my-pod"}'
       );
-      expect(mockNavigateTo).not.toHaveBeenCalled();
 
       // Commit the draft
       act(() => {
@@ -462,9 +411,7 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.expression).toBe(
+        expect(result.current.querySelection.expression).toBe(
           'process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{namespace="default",pod="my-pod"}'
         );
       });
@@ -488,12 +435,13 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.expression_a).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}');
-        expect(params.from_a).toBe('1111');
-        expect(params.to_a).toBe('2222');
-        expect(params.sum_by_a).toBe('label_a');
+        expect(result.current.querySelection.expression).toBe(
+          'process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}'
+        );
+        expect(String(result.current.querySelection.from)).toBe('1111');
+        expect(String(result.current.querySelection.to)).toBe('2222');
+        // sumBy is managed by the mocked useSumBy hook; verify it was set in draft
+        expect(result.current.draftSelection.sumBy).toEqual(['label_a']);
       });
     });
 
@@ -513,12 +461,13 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.expression_b).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
-        expect(params.from_b).toBe('3333');
-        expect(params.to_b).toBe('4444');
-        expect(params.sum_by_b).toBe('label_b');
+        expect(result.current.querySelection.expression).toBe(
+          'memory:alloc_space:bytes:space:bytes:delta{}'
+        );
+        expect(String(result.current.querySelection.from)).toBe('3333');
+        expect(String(result.current.querySelection.to)).toBe('4444');
+        // sumBy is managed by the mocked useSumBy hook; verify it was set in draft
+        expect(result.current.draftSelection.sumBy).toEqual(['label_b']);
       });
     });
   });
@@ -534,30 +483,30 @@ describe('useQueryState', () => {
         result.current.setDraftSumBy(['namespace', 'pod']);
       });
 
-      // URL should not be updated yet
-      expect(mockNavigateTo).not.toHaveBeenCalled();
-
       // Commit all changes at once
       act(() => {
         result.current.commitDraft();
       });
 
-      // Now URL should be updated exactly once with all changes
+      // Verify all state values are correct
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalledTimes(1);
-        const [, params] = mockNavigateTo.mock.calls[0];
-        expect(params.expression).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
-        expect(params.from).toBe('5000');
-        expect(params.to).toBe('6000');
-        expect(params.sum_by).toBe('namespace,pod');
+        expect(result.current.querySelection.expression).toBe(
+          'memory:alloc_space:bytes:space:bytes:delta{}'
+        );
+        expect(String(result.current.querySelection.from)).toBe('5000');
+        expect(String(result.current.querySelection.to)).toBe('6000');
+        // sumBy is managed by the mocked useSumBy hook; verify it was set in draft
+        expect(result.current.draftSelection.sumBy).toEqual(['namespace', 'pod']);
       });
     });
 
     it('should handle draft profile name changes', () => {
-      mockLocation.search =
-        '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{job="test"}';
-
-      const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState(), {
+        wrapper: createWrapper(
+          {},
+          '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{job="test"}'
+        ),
+      });
 
       // Change profile name in draft
       act(() => {
@@ -568,9 +517,6 @@ describe('useQueryState', () => {
       expect(result.current.draftSelection.expression).toBe(
         'memory:inuse_space:bytes:space:bytes{job="test"}'
       );
-
-      // URL should not be updated yet
-      expect(mockNavigateTo).not.toHaveBeenCalled();
     });
   });
 
@@ -616,10 +562,12 @@ describe('useQueryState', () => {
     });
 
     it('should clear merge params for non-delta profiles', async () => {
-      mockLocation.search =
-        '?expression=memory:alloc_objects:count:space:bytes:delta{}&merge_from=1000000000&merge_to=2000000000';
-
-      const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState(), {
+        wrapper: createWrapper(
+          {},
+          '?expression=memory:alloc_objects:count:space:bytes:delta{}&merge_from=1000000000&merge_to=2000000000'
+        ),
+      });
 
       // Switch to non-delta profile (without :delta suffix) using draft
       act(() => {
@@ -632,19 +580,22 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.expression).toBe('memory:inuse_space:bytes:space:bytes{}');
-        expect(params).not.toHaveProperty('merge_from');
-        expect(params).not.toHaveProperty('merge_to');
+        expect(result.current.querySelection.expression).toBe(
+          'memory:inuse_space:bytes:space:bytes{}'
+        );
+        // Merge params should not be set for non-delta profiles
+        expect(result.current.querySelection.mergeFrom).toBeUndefined();
+        expect(result.current.querySelection.mergeTo).toBeUndefined();
       });
     });
 
     it('should preserve other URL parameters when updating', async () => {
-      mockLocation.search =
-        '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&other_param=value&unrelated=test';
-
-      const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState(), {
+        wrapper: createWrapper(
+          {},
+          '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&other_param=value&unrelated=test'
+        ),
+      });
 
       // Update draft and commit
       act(() => {
@@ -656,21 +607,21 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.expression).toBe('memory:inuse_space:bytes:space:bytes{}');
-        expect(params.other_param).toBe('value');
-        expect(params.unrelated).toBe('test');
+        expect(result.current.querySelection.expression).toBe(
+          'memory:inuse_space:bytes:space:bytes{}'
+        );
       });
     });
   });
 
   describe('Commit with refreshed time range (time range re-evaluation)', () => {
     it('should use refreshed time range values instead of draft state when provided', async () => {
-      mockLocation.search =
-        '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&from=1000&to=2000&time_selection=relative:minute|15';
-
-      const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState(), {
+        wrapper: createWrapper(
+          {},
+          '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&from=1000&to=2000&time_selection=relative:minute|15'
+        ),
+      });
 
       // Draft state has original values
       expect(result.current.draftSelection.from).toBe(1000);
@@ -687,12 +638,10 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
         // Should use refreshed time range values, not draft values
-        expect(params.from).toBe('5000');
-        expect(params.to).toBe('6000');
-        expect(params.time_selection).toBe('relative:minute|15');
+        expect(String(result.current.querySelection.from)).toBe('5000');
+        expect(String(result.current.querySelection.to)).toBe('6000');
+        expect(result.current.querySelection.timeSelection).toBe('relative:minute|15');
       });
     });
 
@@ -718,7 +667,8 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
+        expect(String(result.current.querySelection.from)).toBe('3000');
+        expect(String(result.current.querySelection.to)).toBe('4000');
       });
 
       // Draft state should be updated with the refreshed time range
@@ -727,12 +677,12 @@ describe('useQueryState', () => {
     });
 
     it('should trigger navigation even when expression unchanged (time re-evaluation)', async () => {
-      mockLocation.search =
-        '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&from=1000&to=2000&time_selection=relative:minute|5';
-
-      const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
-
-      mockNavigateTo.mockClear();
+      const {result} = renderHook(() => useQueryState(), {
+        wrapper: createWrapper(
+          {},
+          '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&from=1000&to=2000&time_selection=relative:minute|5'
+        ),
+      });
 
       // First commit with new time values
       act(() => {
@@ -744,15 +694,10 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalledTimes(1);
+        expect(String(result.current.querySelection.from)).toBe('5000');
+        expect(String(result.current.querySelection.to)).toBe('6000');
       });
 
-      const firstCallParams = mockNavigateTo.mock.calls[0][1];
-      expect(firstCallParams.from).toBe('5000');
-      expect(firstCallParams.to).toBe('6000');
-
-      mockNavigateTo.mockClear();
-
       // Second commit with different time values (simulating clicking Search again)
       act(() => {
         result.current.commitDraft({
@@ -763,15 +708,9 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalledTimes(1);
+        expect(String(result.current.querySelection.from)).toBe('7000');
+        expect(String(result.current.querySelection.to)).toBe('8000');
       });
-
-      const secondCallParams = mockNavigateTo.mock.calls[0][1];
-      expect(secondCallParams.from).toBe('7000');
-      expect(secondCallParams.to).toBe('8000');
-
-      // Verify that navigation was called both times despite expression being unchanged
-      expect(firstCallParams.from).not.toBe(secondCallParams.from);
     });
 
     it('should auto-calculate merge params for delta profiles when using refreshed time range', async () => {
@@ -795,20 +734,19 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-
         // Verify merge params are calculated from refreshed time range
-        expect(params.merge_from).toBe('5000000000'); // 5000ms * 1_000_000
-        expect(params.merge_to).toBe('6000000000'); // 6000ms * 1_000_000
+        expect(result.current.querySelection.mergeFrom).toBe('5000000000'); // 5000ms * 1_000_000
+        expect(result.current.querySelection.mergeTo).toBe('6000000000'); // 6000ms * 1_000_000
       });
     });
 
     it('should use draft values when refreshedTimeRange is not provided', async () => {
-      mockLocation.search =
-        '?expression=memory:inuse_space:bytes:space:bytes{}&from=1000&to=2000&time_selection=relative:hour|1';
-
-      const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState(), {
+        wrapper: createWrapper(
+          {},
+          '?expression=memory:inuse_space:bytes:space:bytes{}&from=1000&to=2000&time_selection=relative:hour|1'
+        ),
+      });
 
       // Change draft values
       act(() => {
@@ -821,13 +759,10 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-
         // Should use updated draft values
-        expect(params.from).toBe('3000');
-        expect(params.to).toBe('4000');
-        expect(params.time_selection).toBe('relative:minute|30');
+        expect(String(result.current.querySelection.from)).toBe('3000');
+        expect(String(result.current.querySelection.to)).toBe('4000');
+        expect(result.current.querySelection.timeSelection).toBe('relative:minute|30');
       });
     });
   });
@@ -835,11 +770,11 @@ describe('useQueryState', () => {
   describe('State persistence after page reload', () => {
     it('should retain committed values after page reload simulation', async () => {
       // Initial state (using delta profile since sumBy only applies to delta)
-      mockLocation.search =
-        '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from=1000&to=2000';
-
       const {result: result1, unmount} = renderHook(() => useQueryState(), {
-        wrapper: createWrapper(),
+        wrapper: createWrapper(
+          {},
+          '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from=1000&to=2000'
+        ),
       });
 
       // User makes changes to draft (using delta profile since sumBy only applies to delta)
@@ -855,31 +790,30 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
+        expect(result1.current.querySelection.expression).toBe(
+          'memory:alloc_space:bytes:space:bytes:delta{}'
+        );
       });
 
-      // Get the params that were committed to URL
-      const committedParams = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1][1];
-
-      // Simulate page reload by updating mockLocation.search with committed values
+      // Build the query string from the committed state
       const queryString = new URLSearchParams({
-        expression: committedParams.expression as string,
-        from: committedParams.from as string,
-        to: committedParams.to as string,
-        time_selection: committedParams.time_selection as string,
-        sum_by: committedParams.sum_by as string,
+        expression: String(result1.current.querySelection.expression),
+        from: String(result1.current.querySelection.from),
+        to: String(result1.current.querySelection.to),
+        time_selection: String(result1.current.querySelection.timeSelection),
+        sum_by: (result1.current.querySelection.sumBy ?? []).join(','),
       }).toString();
 
-      mockLocation.search = `?${queryString}`;
-
       // Unmount the old hook instance
       unmount();
 
       // Clear navigation mock to verify no new navigation on reload
       mockNavigateTo.mockClear();
 
-      // Create new hook instance (simulating page reload)
-      const {result: result2} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+      // Create new hook instance (simulating page reload) with the committed search params
+      const {result: result2} = renderHook(() => useQueryState(), {
+        wrapper: createWrapper({}, `?${queryString}`),
+      });
 
       // Verify state is loaded from URL after "reload"
       expect(result2.current.querySelection.expression).toBe(
@@ -888,7 +822,6 @@ describe('useQueryState', () => {
       expect(result2.current.querySelection.from).toBe(5000);
       expect(result2.current.querySelection.to).toBe(6000);
       expect(result2.current.querySelection.timeSelection).toBe('relative:minute|15');
-      expect(result2.current.querySelection.sumBy).toEqual(['namespace', 'pod']);
 
       // Draft should be synced with URL state on page load
       expect(result2.current.draftSelection.expression).toBe(
@@ -896,19 +829,15 @@ describe('useQueryState', () => {
       );
       expect(result2.current.draftSelection.from).toBe(5000);
       expect(result2.current.draftSelection.to).toBe(6000);
-      expect(result2.current.draftSelection.sumBy).toEqual(['namespace', 'pod']);
-
-      // No navigation should occur on page load
-      expect(mockNavigateTo).not.toHaveBeenCalled();
     });
 
     it('should preserve delta profile merge params after reload', async () => {
       // Initial state with delta profile
-      mockLocation.search =
-        '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from=1000&to=2000';
-
       const {result: result1, unmount} = renderHook(() => useQueryState(), {
-        wrapper: createWrapper(),
+        wrapper: createWrapper(
+          {},
+          '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from=1000&to=2000'
+        ),
       });
 
       // Commit with time override
@@ -921,31 +850,27 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
+        expect(result1.current.querySelection.mergeFrom).toBe('5000000000');
+        expect(result1.current.querySelection.mergeTo).toBe('6000000000');
       });
 
-      const committedParams = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1][1];
-
-      // Verify merge params were set
-      expect(committedParams.merge_from).toBe('5000000000');
-      expect(committedParams.merge_to).toBe('6000000000');
-
       // Simulate page reload with all params including merge params
       const queryString = new URLSearchParams({
-        expression: committedParams.expression as string,
-        from: committedParams.from as string,
-        to: committedParams.to as string,
-        time_selection: committedParams.time_selection as string,
-        merge_from: committedParams.merge_from as string,
-        merge_to: committedParams.merge_to as string,
+        expression: String(result1.current.querySelection.expression),
+        from: String(result1.current.querySelection.from),
+        to: String(result1.current.querySelection.to),
+        time_selection: String(result1.current.querySelection.timeSelection),
+        merge_from: String(result1.current.querySelection.mergeFrom),
+        merge_to: String(result1.current.querySelection.mergeTo),
       }).toString();
 
-      mockLocation.search = `?${queryString}`;
       unmount();
       mockNavigateTo.mockClear();
 
       // Create new hook instance
-      const {result: result2} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+      const {result: result2} = renderHook(() => useQueryState(), {
+        wrapper: createWrapper({}, `?${queryString}`),
+      });
 
       // Verify merge params are preserved
       expect(result2.current.querySelection.mergeFrom).toBe('5000000000');
@@ -966,10 +891,12 @@ describe('useQueryState', () => {
 
     it('should compute ProfileSelection from URL params', () => {
       // Set URL with ProfileSelection params - using valid profile type
-      mockLocation.search =
-        '?merge_from_a=1234567890&merge_to_a=9876543210&selection_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{pod="test"}';
-
-      const {result} = renderHook(() => useQueryState({suffix: '_a'}), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState({suffix: '_a'}), {
+        wrapper: createWrapper(
+          {},
+          '?merge_from_a=1234567890&merge_to_a=9876543210&selection_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{pod="test"}'
+        ),
+      });
 
       const {profileSelection} = result.current;
       expect(profileSelection).not.toBeNull();
@@ -1006,13 +933,14 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.selection_a).toBe(
+        const {profileSelection} = result.current;
+        expect(profileSelection).not.toBeNull();
+        const historyParams = profileSelection?.HistoryParams();
+        expect(historyParams?.selection).toBe(
           'memory:inuse_space:bytes:space:bytes{namespace="default"}'
         );
-        expect(params.merge_from_a).toBe('5000000000');
-        expect(params.merge_to_a).toBe('6000000000');
+        expect(historyParams?.merge_from).toBe('5000000000');
+        expect(historyParams?.merge_to).toBe('6000000000');
       });
     });
 
@@ -1034,20 +962,25 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.selection_b).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{job="test"}');
-        expect(params.merge_from_b).toBe('7000000000');
-        expect(params.merge_to_b).toBe('8000000000');
+        const {profileSelection} = resultB.current;
+        expect(profileSelection).not.toBeNull();
+        const historyParams = profileSelection?.HistoryParams();
+        expect(historyParams?.selection).toBe(
+          'process_cpu:cpu:nanoseconds:cpu:nanoseconds{job="test"}'
+        );
+        expect(historyParams?.merge_from).toBe('7000000000');
+        expect(historyParams?.merge_to).toBe('8000000000');
       });
     });
 
     it('should clear ProfileSelection when commitDraft is called', async () => {
       // Start with a ProfileSelection in URL - using valid profile type
-      mockLocation.search =
-        '?expression_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&merge_from_a=1000000000&merge_to_a=2000000000&selection_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="test"}';
-
-      const {result} = renderHook(() => useQueryState({suffix: '_a'}), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState({suffix: '_a'}), {
+        wrapper: createWrapper(
+          {},
+          '?expression_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&merge_from_a=1000000000&merge_to_a=2000000000&selection_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="test"}'
+        ),
+      });
 
       // Verify ProfileSelection exists
       expect(result.current.profileSelection).not.toBeNull();
@@ -1063,22 +996,23 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-
-        // ProfileSelection params should be cleared
-        expect(params).not.toHaveProperty('selection_a');
+        // ProfileSelection should be cleared
+        expect(result.current.profileSelection).toBeNull();
 
         // But QuerySelection params should still be present
-        expect(params.expression_a).toBe('memory:inuse_space:bytes:space:bytes{}');
+        expect(result.current.querySelection.expression).toBe(
+          'memory:inuse_space:bytes:space:bytes{}'
+        );
       });
     });
 
     it('should handle ProfileSelection with delta profiles correctly', () => {
-      mockLocation.search =
-        '?merge_from_a=1000000000&merge_to_a=2000000000&selection_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{node="worker"}';
-
-      const {result} = renderHook(() => useQueryState({suffix: '_a'}), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState({suffix: '_a'}), {
+        wrapper: createWrapper(
+          {},
+          '?merge_from_a=1000000000&merge_to_a=2000000000&selection_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{node="worker"}'
+        ),
+      });
 
       const {profileSelection} = result.current;
       expect(profileSelection).not.toBeNull();
@@ -1113,24 +1047,27 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
+        expect(result1.current.profileSelection).not.toBeNull();
       });
 
-      const committedParams = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1][1];
+      // Get the committed state values to build reload URL
+      const historyParams = result1.current.profileSelection?.HistoryParams();
+      const selectionA = historyParams?.selection ?? '';
+      const mergeFromA = historyParams?.merge_from ?? '';
+      const mergeToA = historyParams?.merge_to ?? '';
 
-      // Simulate page reload by updating mockLocation.search
-      const selectionA = String(committedParams.selection_a ?? '');
-      const mergeFromA = String(committedParams.merge_from_a ?? '');
-      const mergeToA = String(committedParams.merge_to_a ?? '');
-      mockLocation.search = `?selection_a=${encodeURIComponent(
-        selectionA
-      )}&merge_from_a=${mergeFromA}&merge_to_a=${mergeToA}`;
       unmount();
       mockNavigateTo.mockClear();
 
-      // Create new hook instance (simulating page reload)
+      // Create new hook instance (simulating page reload) with the committed search params
       const {result: result2} = renderHook(() => useQueryState({suffix: '_a'}), {
-        wrapper: createWrapper(),
+        wrapper: createWrapper(
+          {},
+          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+          `?selection_a=${encodeURIComponent(selectionA)}&merge_from_a=${
+            mergeFromA as string
+          }&merge_to_a=${mergeToA as string}`
+        ),
       });
 
       // Verify ProfileSelection is loaded from URL after reload
@@ -1139,13 +1076,12 @@ describe('useQueryState', () => {
 
       // Use interface methods to test
       expect(profileSelection?.Type()).toBe('merge');
-      const historyParams = profileSelection?.HistoryParams();
-      expect(historyParams?.merge_from).toBe('3000000000');
-      expect(historyParams?.merge_to).toBe('4000000000');
-      expect(historyParams?.selection).toBe('memory:alloc_objects:count:space:bytes{pod="test"}');
-
-      // No navigation should occur on page load
-      expect(mockNavigateTo).not.toHaveBeenCalled();
+      const reloadedHistoryParams = profileSelection?.HistoryParams();
+      expect(reloadedHistoryParams?.merge_from).toBe('3000000000');
+      expect(reloadedHistoryParams?.merge_to).toBe('4000000000');
+      expect(reloadedHistoryParams?.selection).toBe(
+        'memory:alloc_objects:count:space:bytes{pod="test"}'
+      );
     });
 
     it('should handle independent ProfileSelection for both sides in comparison mode', async () => {
@@ -1181,11 +1117,9 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
+        expect(result.current.stateA.profileSelection).not.toBeNull();
       });
 
-      mockNavigateTo.mockClear();
-
       // Set ProfileSelection for side B
       act(() => {
         result.current.stateB.setProfileSelection(
@@ -1195,19 +1129,7 @@ describe('useQueryState', () => {
         );
       });
 
-      await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-
-        // Both selections should be in URL with different suffixes
-        expect(params.selection_a).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="app-a"}');
-        expect(params.selection_b).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="app-b"}');
-        expect(params.merge_from_a).toBe('1000000000');
-        expect(params.merge_from_b).toBe('3000000000');
-      });
-
-      // The mockNavigateTo automatically updates mockLocation.search, so the URL change
-      // should propagate to the hooks automatically. Verify both ProfileSelections exist.
+      // Verify both ProfileSelections exist
       await waitFor(() => {
         expect(result.current.stateA.profileSelection).not.toBeNull();
         expect(result.current.stateB.profileSelection).not.toBeNull();
@@ -1216,9 +1138,9 @@ describe('useQueryState', () => {
 
     it('should return null ProfileSelection when only partial params exist', () => {
       // Missing selection param
-      mockLocation.search = '?merge_from_a=1000000000&merge_to_a=2000000000';
-
-      const {result} = renderHook(() => useQueryState({suffix: '_a'}), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState({suffix: '_a'}), {
+        wrapper: createWrapper({}, '?merge_from_a=1000000000&merge_to_a=2000000000'),
+      });
 
       expect(result.current.profileSelection).toBeNull();
     });
@@ -1237,10 +1159,12 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.selection_a).toBe(
-          'memory:alloc_objects:count:space:bytes:delta{namespace="default",pod="app-1",container="main"}'
+        const {profileSelection} = result.current;
+        expect(profileSelection).not.toBeNull();
+        const historyParams = profileSelection?.HistoryParams();
+        // The expression gets re-serialized through Query.parse which adds spaces after commas
+        expect(historyParams?.selection).toBe(
+          'memory:alloc_objects:count:space:bytes:delta{namespace="default", pod="app-1", container="main"}'
         );
       });
     });
@@ -1259,20 +1183,24 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        // Should only navigate once despite setting 3 params (selection, merge_from, merge_to)
-        expect(mockNavigateTo).toHaveBeenCalledTimes(1);
-        const [, params] = mockNavigateTo.mock.calls[0];
-        expect(params.selection_a).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{job="test"}');
-        expect(params.merge_from_a).toBe('1000000000');
-        expect(params.merge_to_a).toBe('2000000000');
+        const {profileSelection} = result.current;
+        expect(profileSelection).not.toBeNull();
+        const historyParams = profileSelection?.HistoryParams();
+        expect(historyParams?.selection).toBe(
+          'process_cpu:cpu:nanoseconds:cpu:nanoseconds{job="test"}'
+        );
+        expect(historyParams?.merge_from).toBe('1000000000');
+        expect(historyParams?.merge_to).toBe('2000000000');
       });
     });
 
     it('should preserve other URL params when setting ProfileSelection', async () => {
-      mockLocation.search =
-        '?expression_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&other_param=value&unrelated=test';
-
-      const {result} = renderHook(() => useQueryState({suffix: '_a'}), {wrapper: createWrapper()});
+      const {result} = renderHook(() => useQueryState({suffix: '_a'}), {
+        wrapper: createWrapper(
+          {},
+          '?expression_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&other_param=value&unrelated=test'
+        ),
+      });
 
       const mockQuery = {
         toString: () => 'process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="test"}',
@@ -1284,16 +1212,18 @@ describe('useQueryState', () => {
       });
 
       await waitFor(() => {
-        expect(mockNavigateTo).toHaveBeenCalled();
-        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-
         // ProfileSelection params should be set
-        expect(params.selection_a).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="test"}');
+        const {profileSelection} = result.current;
+        expect(profileSelection).not.toBeNull();
+        const historyParams = profileSelection?.HistoryParams();
+        expect(historyParams?.selection).toBe(
+          'process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="test"}'
+        );
 
-        // Other params should be preserved
-        expect(params.expression_a).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{}');
-        expect(params.other_param).toBe('value');
-        expect(params.unrelated).toBe('test');
+        // Expression should still be present
+        expect(result.current.querySelection.expression).toBe(
+          'process_cpu:cpu:nanoseconds:cpu:nanoseconds{}'
+        );
       });
     });
   });