fix: update tests to match new hook-based data fetching

Update 10 test files to work with the refactored pages that now use
data hooks instead of inline query logic:

- Add @/hooks/use-tenant-context mock for hooks that need tenantSlug
- Switch from useClients to useApiClients mocks where hooks changed
- Mock ../hooks module for payments and reconciliation tests
- Update booking-log-header test to use instrumentCode (was baseCurrency)

Author: bjcoombs

frontend/src/features/ledger/pages/booking-log-header.test.tsx

@@ -9,7 +9,7 @@ const mockBookingLog: FinancialBookingLog = {
   productServiceReference: 'PRODUCT-A',
   businessUnitReference: 'BU-TRADING',
   chartOfAccountsRules: 'STANDARD',
-  baseCurrency: 'GBP',
+  instrumentCode: 'GBP',
   status: 'PENDING',
   createdAt: { seconds: 1700000000n, nanos: 0 },
   updatedAt: { seconds: 1700001000n, nanos: 0 },

frontend/src/features/parties/pages/[partyId].test.tsx

@@ -23,6 +23,23 @@ vi.mock('@/api/context', () => ({
       retrieveDemographics: vi.fn().mockResolvedValue(null),
     },
   })),
+  useApiClients: vi.fn(() => ({
+    party: {
+      retrieveParty: vi.fn().mockResolvedValue({
+        party: {
+          partyId: 'test-party-1',
+          legalName: 'Test Party',
+          partyType: 'PARTY_TYPE_ORGANIZATION',
+          status: 'PARTY_STATUS_ACTIVE',
+        },
+      }),
+      listPaymentMethods: vi.fn().mockResolvedValue({ paymentMethods: [] }),
+      retrieveReference: vi.fn().mockResolvedValue({}),
+      retrieveAssociations: vi.fn().mockResolvedValue({}),
+      retrieveBankRelations: vi.fn().mockResolvedValue({}),
+      retrieveDemographics: vi.fn().mockResolvedValue(null),
+    },
+  })),
 }))
 
 // Mock useAuth to avoid requiring AuthProvider in tests
@@ -35,6 +52,14 @@ vi.mock('@/contexts/tenant-context', () => ({
   useTenantContext: vi.fn(() => ({ tenantSlug: 'test-tenant', isPlatformAdmin: false, currentTenant: null, switchTenant: vi.fn() })),
 }))
 
+vi.mock('@/hooks/use-tenant-context', () => ({
+  useTenantSlug: () => 'test-tenant',
+  useCurrentTenant: () => null,
+  useIsPlatformAdmin: () => false,
+  useSwitchTenant: () => vi.fn(),
+  useClearTenant: () => vi.fn(),
+}))
+
 import { PartyDetailPage } from './[partyId]'
 
 function makeQueryClient() {

frontend/src/features/parties/pages/tabs/associations-tab.test.tsx

@@ -3,9 +3,21 @@ import { render, screen, waitFor } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { TooltipProvider } from '@/components/ui/tooltip'
 
+const mockRetrieveAssociations = vi.fn().mockResolvedValue({})
+
 vi.mock('@/api/context', () => ({
-  useClients: vi.fn(),
-  useApiClients: vi.fn(),
+  useClients: vi.fn(() => ({
+    party: {
+      retrieveAssociations: mockRetrieveAssociations,
+    },
+  })),
+  useApiClients: vi.fn(() => ({
+    party: {
+      retrieveAssociations: mockRetrieveAssociations,
+      listParties: vi.fn().mockResolvedValue({ parties: [] }),
+      registerAssociations: vi.fn(),
+    },
+  })),
 }))
 
 vi.mock('@/hooks/use-tenant-context', () => ({
@@ -53,11 +65,11 @@ describe('AssociationsTab', () => {
 
   describe('loading state', () => {
     it('renders skeletons while loading', () => {
-      vi.mocked(useClients).mockReturnValue({
+      vi.mocked(useApiClients).mockReturnValue({
         party: {
           retrieveAssociations: vi.fn(() => new Promise(() => {})),
         },
-      } as ReturnType<typeof useClients>)
+      } as ReturnType<typeof useApiClients>)
 
       const { container } = renderTab()
 
@@ -66,11 +78,11 @@ describe('AssociationsTab', () => {
     })
 
     it('does not render empty state while loading', () => {
-      vi.mocked(useClients).mockReturnValue({
+      vi.mocked(useApiClients).mockReturnValue({
         party: {
           retrieveAssociations: vi.fn(() => new Promise(() => {})),
         },
-      } as ReturnType<typeof useClients>)
+      } as ReturnType<typeof useApiClients>)
 
       renderTab()
 
@@ -80,11 +92,11 @@ describe('AssociationsTab', () => {
 
   describe('empty state', () => {
     it('renders empty state heading after data loads', async () => {
-      vi.mocked(useClients).mockReturnValue({
+      vi.mocked(useApiClients).mockReturnValue({
         party: {
           retrieveAssociations: vi.fn().mockResolvedValue({}),
         },
-      } as ReturnType<typeof useClients>)
+      } as ReturnType<typeof useApiClients>)
 
       renderTab()
 
@@ -94,11 +106,11 @@ describe('AssociationsTab', () => {
     })
 
     it('renders descriptive message', async () => {
-      vi.mocked(useClients).mockReturnValue({
+      vi.mocked(useApiClients).mockReturnValue({
         party: {
           retrieveAssociations: vi.fn().mockResolvedValue({}),
         },
-      } as ReturnType<typeof useClients>)
+      } as ReturnType<typeof useApiClients>)
 
       renderTab()
 
@@ -108,11 +120,11 @@ describe('AssociationsTab', () => {
     })
 
     it('renders add association button', async () => {
-      vi.mocked(useClients).mockReturnValue({
+      vi.mocked(useApiClients).mockReturnValue({
         party: {
           retrieveAssociations: vi.fn().mockResolvedValue({}),
         },
-      } as ReturnType<typeof useClients>)
+      } as ReturnType<typeof useApiClients>)
 
       renderTab()
 
@@ -125,9 +137,9 @@ describe('AssociationsTab', () => {
   describe('query key', () => {
     it('calls retrieveAssociations with the provided partyId', async () => {
       const retrieveAssociations = vi.fn().mockResolvedValue({})
-      vi.mocked(useClients).mockReturnValue({
+      vi.mocked(useApiClients).mockReturnValue({
         party: { retrieveAssociations },
-      } as ReturnType<typeof useClients>)
+      } as ReturnType<typeof useApiClients>)
 
       renderTab('party-abc')
 

frontend/src/features/payments/pages/payment-detail.test.tsx

@@ -6,10 +6,15 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { TooltipProvider } from '@/components/ui/tooltip'
 import { AuthProvider } from '@/contexts/auth-context'
 import { TenantProvider } from '@/contexts/tenant-context'
-import { PaymentDetailPage } from './payment-detail'
-
-vi.mock('./payment-detail-query', () => ({
-  fetchPaymentDetail: vi.fn(),
+// Mock the payment detail hook
+const mockPaymentDetailQuery = vi.fn()
+
+vi.mock('../hooks', () => ({
+  usePaymentDetail: vi.fn(() => ({
+    data: null,
+    isLoading: false,
+    isError: false,
+  })),
 }))
 
 // Mock dialog mutations to avoid requiring a live API transport
@@ -19,8 +24,17 @@ vi.mock('./dialogs/payment-mutations', () => ({
   useReversePayment: () => ({ mutateAsync: vi.fn(), isPending: false, reset: vi.fn() }),
 }))
 
-import { fetchPaymentDetail } from './payment-detail-query'
-const mockFetch = vi.mocked(fetchPaymentDetail)
+vi.mock('@/hooks/use-tenant-context', () => ({
+  useTenantSlug: () => 'test-tenant',
+  useCurrentTenant: () => null,
+  useIsPlatformAdmin: () => false,
+  useSwitchTenant: () => vi.fn(),
+  useClearTenant: () => vi.fn(),
+}))
+
+import { usePaymentDetail } from '../hooks'
+import { PaymentDetailPage } from './payment-detail'
+const mockUsePaymentDetail = vi.mocked(usePaymentDetail)
 
 function makeQueryClient() {
   return new QueryClient({
@@ -73,7 +87,7 @@ const sampleDetail = {
 
 describe('PaymentDetailPage - structure', () => {
   beforeEach(() => {
-    mockFetch.mockResolvedValue(sampleDetail)
+    mockUsePaymentDetail.mockReturnValue({ data: sampleDetail, isLoading: false, isError: false } as ReturnType<typeof usePaymentDetail>)
   })
 
   it('renders payment order ID as heading', async () => {
@@ -117,7 +131,7 @@ describe('PaymentDetailPage - structure', () => {
 
 describe('PaymentDetailPage - Overview tab', () => {
   beforeEach(() => {
-    mockFetch.mockResolvedValue(sampleDetail)
+    mockUsePaymentDetail.mockReturnValue({ data: sampleDetail, isLoading: false, isError: false } as ReturnType<typeof usePaymentDetail>)
   })
 
   it('shows payment details in Overview tab', async () => {
@@ -174,7 +188,7 @@ describe('PaymentDetailPage - Overview tab', () => {
 
 describe('PaymentDetailPage - Saga Steps tab', () => {
   beforeEach(() => {
-    mockFetch.mockResolvedValue(sampleDetail)
+    mockUsePaymentDetail.mockReturnValue({ data: sampleDetail, isLoading: false, isError: false } as ReturnType<typeof usePaymentDetail>)
   })
 
   it('shows SagaTimeline when Saga Steps tab is clicked', async () => {
@@ -221,8 +235,7 @@ describe('PaymentDetailPage - Saga Steps tab', () => {
 
 describe('PaymentDetailPage - loading state', () => {
   it('shows skeleton while loading', () => {
-    // Never resolves
-    mockFetch.mockReturnValue(new Promise(() => {}))
+    mockUsePaymentDetail.mockReturnValue({ data: undefined, isLoading: true, isError: false } as ReturnType<typeof usePaymentDetail>)
 
     render(
       <Wrapper>
@@ -236,7 +249,7 @@ describe('PaymentDetailPage - loading state', () => {
 
 describe('PaymentDetailPage - error state', () => {
   it('shows error message on fetch failure', async () => {
-    mockFetch.mockRejectedValue(new Error('Not found'))
+    mockUsePaymentDetail.mockReturnValue({ data: undefined, isLoading: false, isError: true } as ReturnType<typeof usePaymentDetail>)
 
     render(
       <Wrapper>

frontend/src/features/payments/pages/payments-list.test.tsx

@@ -6,15 +6,18 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { TooltipProvider } from '@/components/ui/tooltip'
 import { AuthProvider } from '@/contexts/auth-context'
 import { TenantProvider } from '@/contexts/tenant-context'
-import { PaymentsPage } from './index'
-
-// Mock the payments query function
-vi.mock('./payments-query', () => ({
-  fetchPayments: vi.fn(),
+// Mock the payments hook
+const mockQueryFn = vi.fn()
+
+vi.mock('../hooks', () => ({
+  usePaymentsTable: vi.fn(() => ({
+    queryKey: ['test-tenant', 'payments'],
+    queryFn: mockQueryFn,
+    tenantSlug: 'test-tenant',
+  })),
 }))
 
-import { fetchPayments } from './payments-query'
-const mockFetchPayments = vi.mocked(fetchPayments)
+import { PaymentsPage } from './index'
 
 function makeQueryClient() {
   return new QueryClient({
@@ -60,7 +63,7 @@ const samplePayments = [
 
 describe('PaymentsPage - list rendering', () => {
   it('renders page heading', async () => {
-    mockFetchPayments.mockResolvedValue({ items: [] })
+    mockQueryFn.mockResolvedValue({ items: [] })
 
     render(
       <Wrapper>
@@ -72,7 +75,7 @@ describe('PaymentsPage - list rendering', () => {
   })
 
   it('renders column headers', async () => {
-    mockFetchPayments.mockResolvedValue({ items: [] })
+    mockQueryFn.mockResolvedValue({ items: [] })
 
     render(
       <Wrapper>
@@ -91,7 +94,7 @@ describe('PaymentsPage - list rendering', () => {
   })
 
   it('renders payment rows with data', async () => {
-    mockFetchPayments.mockResolvedValue({ items: samplePayments })
+    mockQueryFn.mockResolvedValue({ items: samplePayments })
 
     render(
       <Wrapper>
@@ -106,7 +109,7 @@ describe('PaymentsPage - list rendering', () => {
   })
 
   it('renders amount using MoneyDisplay', async () => {
-    mockFetchPayments.mockResolvedValue({ items: samplePayments })
+    mockQueryFn.mockResolvedValue({ items: samplePayments })
 
     render(
       <Wrapper>
@@ -121,7 +124,7 @@ describe('PaymentsPage - list rendering', () => {
   })
 
   it('renders status using StatusBadge', async () => {
-    mockFetchPayments.mockResolvedValue({ items: samplePayments })
+    mockQueryFn.mockResolvedValue({ items: samplePayments })
 
     render(
       <Wrapper>
@@ -138,7 +141,7 @@ describe('PaymentsPage - list rendering', () => {
 
 describe('PaymentsPage - navigation', () => {
   it('navigates to detail page on row click', async () => {
-    mockFetchPayments.mockResolvedValue({ items: samplePayments })
+    mockQueryFn.mockResolvedValue({ items: samplePayments })
 
     const onNavigate = vi.fn()
 
@@ -166,7 +169,7 @@ describe('PaymentsPage - navigation', () => {
 
 describe('PaymentsPage - filters', () => {
   it('renders status filter select', async () => {
-    mockFetchPayments.mockResolvedValue({ items: [] })
+    mockQueryFn.mockResolvedValue({ items: [] })
 
     render(
       <Wrapper>

frontend/src/features/positions/pages/detail.test.tsx

@@ -15,6 +15,14 @@ vi.mock('@/api/context', () => ({
   })),
 }))
 
+vi.mock('@/hooks/use-tenant-context', () => ({
+  useTenantSlug: () => 'test-tenant',
+  useCurrentTenant: () => null,
+  useIsPlatformAdmin: () => false,
+  useSwitchTenant: () => vi.fn(),
+  useClearTenant: () => vi.fn(),
+}))
+
 import { PositionDetailPage } from './detail'
 
 function makeQueryClient() {

frontend/src/features/positions/pages/index.test.tsx

@@ -20,6 +20,14 @@ vi.mock('@/api/context', () => ({
   })),
 }))
 
+vi.mock('@/hooks/use-tenant-context', () => ({
+  useTenantSlug: () => 'test-tenant',
+  useCurrentTenant: () => null,
+  useIsPlatformAdmin: () => false,
+  useSwitchTenant: () => vi.fn(),
+  useClearTenant: () => vi.fn(),
+}))
+
 import { PositionsPage } from './index'
 
 function makeQueryClient() {