Add coverage for short table state URLs

frontend/src/components/TableView/TableView.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, jest, beforeEach } from '@jest/globals'
 import '@testing-library/jest-dom'
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, waitFor } from '@testing-library/react'
 import { Role } from '@/shared/types'
 import { TableView } from './TableView'
 import { usePageContext } from '../Page'
@@ -22,11 +22,12 @@ jest.mock('@/hooks/user', () => ({
 }))
 
 let mockLocationSearch = ''
+let mockNavigate = jest.fn()
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual<typeof import('react-router-dom')>('react-router-dom'),
   useLocation: () => ({ search: mockLocationSearch, pathname: '/table' }),
-  useNavigate: () => jest.fn(),
+  useNavigate: () => mockNavigate,
 }))
 
 jest.mock('./TableToolBar', () => ({
@@ -45,6 +46,8 @@ const mockUseUser = useUser as jest.Mock
 describe('TableView table help integration', () => {
   beforeEach(() => {
     mockLocationSearch = ''
+    mockNavigate = jest.fn()
+    window.sessionStorage.clear()
     mockUsePageContext.mockReturnValue({
       editRights: {},
       idList: [],
@@ -124,6 +127,46 @@ describe('TableView table help integration', () => {
     expect(setSqlOrderBy).toHaveBeenCalledWith([{ id: 'name', desc: false }])
   })
 
+  it('stores table state outside the URL and navigates with a short state id', async () => {
+    render(
+      <TableView<TestRow>
+        title="Test Table"
+        idFieldName="id"
+        columns={[
+          { header: 'Name', accessorKey: 'name' },
+          { header: 'Id', accessorKey: 'id' },
+        ]}
+        visibleColumns={{ name: true, id: true }}
+        data={[
+          {
+            id: '1',
+            name: 'Alpha',
+            full_count: 1,
+          },
+        ]}
+        url="test"
+        isFetching={false}
+      />
+    )
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalled()
+    })
+
+    const navigatedUrl = mockNavigate.mock.calls
+      .map(call => call[0])
+      .find((value): value is string => typeof value === 'string' && value.startsWith('/table?tableState='))
+
+    expect(navigatedUrl).toBeDefined()
+    expect(navigatedUrl).not.toContain('columnfilters=')
+    expect(navigatedUrl).not.toContain('sorting=')
+    expect(navigatedUrl).not.toContain('pagination=')
+
+    const stateId = new URLSearchParams(navigatedUrl?.split('?')[1]).get('tableState')
+    expect(stateId).toBeTruthy()
+    expect(window.sessionStorage.getItem(`nowdatabase-table-state:${stateId}`)).toBeTruthy()
+  })
+
   it('shows help with multi-sort guidance for regular tables', () => {
     const { getByRole, getByText } = render(
       <TableView<TestRow>