@parca/profile 0.19.138 → 0.19.140

package/dist/hooks/useQueryState.test.js

@@ -16,57 +16,11 @@ import { 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, params) => {
-    // 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 = {};
-            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 () => {
     const actual = await vi.importActual('../useSumBy');
@@ -109,8 +63,8 @@ const setProfileTypesLoading = (loading) => {
 const setProfileTypesData = (data) => {
     mockProfileTypesData = data;
 };
-// Helper to create wrapper with URLStateProvider
-const createWrapper = (paramPreferences = {}) => {
+// Helper to create wrapper with NuqsTestingAdapter
+const createWrapper = (_paramPreferences = {}, searchParams = {}) => {
     const queryClient = new QueryClient({
         defaultOptions: {
             queries: {
@@ -118,18 +72,13 @@ const createWrapper = (paramPreferences = {}) => {
             },
         },
     });
-    const Wrapper = ({ children }) => (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(URLStateProvider, { navigateTo: mockNavigateTo, paramPreferences: paramPreferences, children: children }) }));
-    Wrapper.displayName = 'URLStateProviderWrapper';
+    const Wrapper = ({ children }) => (_jsx(NuqsTestingAdapter, { searchParams: searchParams, hasMemory: true, children: _jsx(QueryClientProvider, { client: queryClient, children: children }) }));
+    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);
@@ -150,9 +99,9 @@ describe('useQueryState', () => {
             expect(querySelection.to).toBeDefined();
         });
         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{}');
             expect(querySelection.from).toBe(1000);
@@ -177,14 +126,9 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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');
             });
         });
         it('should update time range', async () => {
@@ -200,11 +144,9 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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');
             });
         });
         it('should update sumBy', async () => {
@@ -220,9 +162,8 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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']);
             });
         });
         it('should auto-calculate merge range for delta profiles', async () => {
@@ -239,10 +180,8 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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');
             });
         });
     });
@@ -264,20 +203,19 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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
                 result.current.setDraftExpression('memory:inuse_space:bytes:space:bytes{}');
@@ -290,12 +228,10 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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');
             });
         });
         it('should auto-calculate merge params for delta profiles in batch update', async () => {
@@ -311,19 +247,17 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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');
             });
@@ -333,28 +267,24 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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"');
             });
             // Draft should be updated but not URL yet
             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(() => {
                 result.current.commitDraft();
             });
             await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-                expect(params.expression).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{namespace="default",pod="my-pod"}');
+                expect(result.current.querySelection.expression).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{namespace="default",pod="my-pod"}');
             });
         });
     });
@@ -372,12 +302,11 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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']);
             });
         });
         it('should handle _b suffix correctly', async () => {
@@ -393,12 +322,11 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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']);
             });
         });
     });
@@ -411,34 +339,29 @@ describe('useQueryState', () => {
                 result.current.setDraftTimeRange(5000, 6000, 'relative:hour|3');
                 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(() => {
                 result.current.setDraftProfileName('memory:inuse_space:bytes:space:bytes');
             });
             // Draft should be updated
             expect(result.current.draftSelection.expression).toBe('memory:inuse_space:bytes:space:bytes{job="test"}');
-            // URL should not be updated yet
-            expect(mockNavigateTo).not.toHaveBeenCalled();
         });
     });
     describe('Edge cases', () => {
@@ -466,9 +389,9 @@ describe('useQueryState', () => {
             expect(result.current.querySelection.expression).toBe('');
         });
         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(() => {
                 result.current.setDraftExpression('memory:inuse_space:bytes:space:bytes{}');
@@ -478,17 +401,16 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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(() => {
                 result.current.setDraftExpression('memory:inuse_space:bytes:space:bytes{}');
@@ -497,19 +419,15 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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);
             expect(result.current.draftSelection.to).toBe(2000);
@@ -523,12 +441,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');
             });
         });
         it('should update draft state with refreshed time range after commit', async () => {
@@ -547,17 +463,17 @@ 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
             expect(result.current.draftSelection.from).toBe(3000);
             expect(result.current.draftSelection.to).toBe(4000);
         });
         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(() => {
                 result.current.commitDraft({
@@ -567,12 +483,9 @@ 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({
@@ -582,13 +495,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 () => {
             const { result } = renderHook(() => useQueryState({
@@ -605,17 +514,15 @@ 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(() => {
                 result.current.setDraftTimeRange(3000, 4000, 'relative:minute|30');
@@ -625,22 +532,18 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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');
             });
         });
     });
     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)
             act(() => {
@@ -653,45 +556,38 @@ describe('useQueryState', () => {
                 result1.current.commitDraft();
             });
             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,
-                from: committedParams.from,
-                to: committedParams.to,
-                time_selection: committedParams.time_selection,
-                sum_by: committedParams.sum_by,
+                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('memory:alloc_space:bytes:space:bytes:delta{}');
             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('memory:alloc_space:bytes:space:bytes:delta{}');
             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
             act(() => {
@@ -702,26 +598,24 @@ 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,
-                from: committedParams.from,
-                to: committedParams.to,
-                time_selection: committedParams.time_selection,
-                merge_from: committedParams.merge_from,
-                merge_to: committedParams.merge_to,
+                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');
             expect(result2.current.querySelection.mergeTo).toBe('6000000000');
@@ -737,9 +631,9 @@ 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();
             // Test using the interface methods
@@ -764,11 +658,12 @@ describe('useQueryState', () => {
                 result.current.setProfileSelection(mergeFrom, mergeTo, mockQuery);
             });
             await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-                expect(params.selection_a).toBe('memory:inuse_space:bytes:space:bytes{namespace="default"}');
-                expect(params.merge_from_a).toBe('5000000000');
-                expect(params.merge_to_a).toBe('6000000000');
+                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(historyParams?.merge_from).toBe('5000000000');
+                expect(historyParams?.merge_to).toBe('6000000000');
             });
         });
         it('should use correct suffix for ProfileSelection in comparison mode', async () => {
@@ -785,18 +680,19 @@ describe('useQueryState', () => {
                 resultB.current.setProfileSelection(mergeFrom, mergeTo, mockQuery);
             });
             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();
             // Make a change to trigger commit
@@ -808,18 +704,16 @@ describe('useQueryState', () => {
                 result.current.commitDraft();
             });
             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();
             // Test that ProfileSelection recognizes delta profile type
@@ -845,31 +739,30 @@ describe('useQueryState', () => {
                 result1.current.setProfileSelection(mergeFrom, mergeTo, mockQuery);
             });
             await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-            });
-            const committedParams = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1][1];
-            // 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}`;
+                expect(result1.current.profileSelection).not.toBeNull();
+            });
+            // 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 ?? '';
             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}&merge_to_a=${mergeToA}`),
             });
             // Verify ProfileSelection is loaded from URL after reload
             const profileSelection = result2.current.profileSelection;
             expect(profileSelection).not.toBeNull();
             // 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 () => {
             // Test component using both hooks with the same URLStateProvider (real-world scenario)
@@ -895,24 +788,13 @@ describe('useQueryState', () => {
                 result.current.stateA.setProfileSelection(BigInt(1000000000), BigInt(2000000000), mockQueryA);
             });
             await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
+                expect(result.current.stateA.profileSelection).not.toBeNull();
             });
-            mockNavigateTo.mockClear();
             // Set ProfileSelection for side B
             act(() => {
                 result.current.stateB.setProfileSelection(BigInt(3000000000), BigInt(4000000000), mockQueryB);
             });
-            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();
@@ -920,8 +802,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();
         });
         it('should handle ProfileSelection with complex query expressions', async () => {
@@ -934,9 +817,11 @@ describe('useQueryState', () => {
                 result.current.setProfileSelection(BigInt(5000000000), BigInt(6000000000), mockQuery);
             });
             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"}');
             });
         });
         it('should batch ProfileSelection update with other URL state changes', async () => {
@@ -950,18 +835,18 @@ describe('useQueryState', () => {
                 result.current.setProfileSelection(BigInt(1000000000), BigInt(2000000000), mockQuery);
             });
             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"}',
                 profileType: () => ({ delta: false }),
@@ -970,14 +855,13 @@ describe('useQueryState', () => {
                 result.current.setProfileSelection(BigInt(1000000000), BigInt(2000000000), mockQuery);
             });
             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"}');
-                // 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');
+                const { profileSelection } = result.current;
+                expect(profileSelection).not.toBeNull();
+                const historyParams = profileSelection?.HistoryParams();
+                expect(historyParams?.selection).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="test"}');
+                // Expression should still be present
+                expect(result.current.querySelection.expression).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{}');
             });
         });
     });