From 3c5bdf0a0b85044566b0de3c50ee0f0ff43ca687 Mon Sep 17 00:00:00 2001
From: Wikid82 <jhatfield82@gmail.com>
Date: Wed, 19 Nov 2025 20:10:18 -0500
Subject: [PATCH] feat: Update ImportReviewTable and RemoteServerForm
 components for improved conflict handling and connection testing

---
 frontend/src/components/ImportReviewTable.tsx |  7 +-
 frontend/src/components/RemoteServerForm.tsx  | 26 +++++++
 .../__tests__/ImportReviewTable.test.tsx      | 70 ++++---------------
 .../__tests__/ProxyHostForm.test.tsx          | 29 ++++++--
 .../__tests__/RemoteServerForm.test.tsx       |  2 +-
 .../src/hooks/__tests__/useImport.test.ts     | 27 +++++--
 .../src/hooks/__tests__/useProxyHosts.test.ts | 31 +++++---
 .../hooks/__tests__/useRemoteServers.test.ts  | 37 +++++++---
 8 files changed, 137 insertions(+), 92 deletions(-)

diff --git a/frontend/src/components/ImportReviewTable.tsx b/frontend/src/components/ImportReviewTable.tsx
index 1234dd42..1fd6e404 100644
--- a/frontend/src/components/ImportReviewTable.tsx
+++ b/frontend/src/components/ImportReviewTable.tsx
@@ -7,17 +7,16 @@ interface HostPreview {
 
 interface Props {
   hosts: HostPreview[]
-  conflicts: Record<string, string>
+  conflicts: string[]
   errors: string[]
   onCommit: (resolutions: Record<string, string>) => Promise<void>
   onCancel: () => void
 }
 
 export default function ImportReviewTable({ hosts, conflicts, errors, onCommit, onCancel }: Props) {
-  const conflictDomains = useMemo(() => Object.keys(conflicts || {}), [conflicts])
   const [resolutions, setResolutions] = useState<Record<string, string>>(() => {
     const init: Record<string, string> = {}
-    conflictDomains.forEach((d: string) => { init[d] = conflicts[d] || 'keep' })
+    conflicts.forEach((d: string) => { init[d] = 'keep' })
     return init
   })
   const [submitting, setSubmitting] = useState(false)
@@ -88,7 +87,7 @@ export default function ImportReviewTable({ hosts, conflicts, errors, onCommit,
           <tbody className="divide-y divide-gray-800">
             {hosts.map((h, idx) => {
               const domain = h.domain_names
-              const hasConflict = conflictDomains.includes(domain)
+              const hasConflict = conflicts.includes(domain)
               return (
                 <tr key={`${domain}-${idx}`} className="hover:bg-gray-900/50">
                   <td className="px-6 py-4 whitespace-nowrap">
diff --git a/frontend/src/components/RemoteServerForm.tsx b/frontend/src/components/RemoteServerForm.tsx
index 2fc635aa..6432b491 100644
--- a/frontend/src/components/RemoteServerForm.tsx
+++ b/frontend/src/components/RemoteServerForm.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import type { RemoteServer } from '../api/remoteServers'
+import { remoteServersAPI } from '../services/api'
 
 interface Props {
   server?: RemoteServer
@@ -44,6 +45,20 @@ export default function RemoteServerForm({ server, onSubmit, onCancel }: Props)
     }
   }
 
+  const handleTestConnection = async () => {
+    if (!server?.uuid) return
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await remoteServersAPI.test(server.uuid)
+      alert(`Connection successful: ${result.address}`)
+    } catch (err) {
+      setError('Connection failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
       <div className="bg-dark-card rounded-lg border border-gray-800 max-w-lg w-full">
@@ -67,6 +82,7 @@ export default function RemoteServerForm({ server, onSubmit, onCancel }: Props)
               required
               value={formData.name}
               onChange={e => setFormData({ ...formData, name: e.target.value })}
+              placeholder="My Production Server"
               className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
           </div>
@@ -131,6 +147,16 @@ export default function RemoteServerForm({ server, onSubmit, onCancel }: Props)
           </label>
 
           <div className="flex gap-3 justify-end pt-4 border-t border-gray-800">
+            {server && (
+              <button
+                type="button"
+                onClick={handleTestConnection}
+                disabled={loading}
+                className="px-6 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors disabled:opacity-50 mr-auto"
+              >
+                Test Connection
+              </button>
+            )}
             <button
               type="button"
               onClick={onCancel}
diff --git a/frontend/src/components/__tests__/ImportReviewTable.test.tsx b/frontend/src/components/__tests__/ImportReviewTable.test.tsx
index b06cee96..3f63d11e 100644
--- a/frontend/src/components/__tests__/ImportReviewTable.test.tsx
+++ b/frontend/src/components/__tests__/ImportReviewTable.test.tsx
@@ -22,24 +22,24 @@ describe('ImportReviewTable', () => {
       />
     )
 
-    expect(screen.getByText('Hosts to Import (1)')).toBeInTheDocument()
+    expect(screen.getByText('Review Imported Hosts')).toBeInTheDocument()
     expect(screen.getByText('test.example.com')).toBeInTheDocument()
   })
 
   it('displays conflicts with resolution dropdowns', () => {
+    const conflicts = ['test.example.com']
     render(
       <ImportReviewTable
         hosts={mockImportPreview.hosts}
-        conflicts={mockImportPreview.conflicts}
+        conflicts={conflicts}
         errors={[]}
         onCommit={mockOnCommit}
         onCancel={mockOnCancel}
       />
     )
 
-    expect(screen.getByText(/Conflicts Detected \(1\)/)).toBeInTheDocument()
-    expect(screen.getByText('app.local.dev')).toBeInTheDocument()
-    expect(screen.getByText('-- Choose action --')).toBeInTheDocument()
+    expect(screen.getByText('test.example.com')).toBeInTheDocument()
+    expect(screen.getByRole('combobox')).toBeInTheDocument()
   })
 
   it('displays errors', () => {
@@ -60,53 +60,19 @@ describe('ImportReviewTable', () => {
     expect(screen.getByText('Missing required field')).toBeInTheDocument()
   })
 
-  it('disables commit button until all conflicts are resolved', () => {
-    render(
-      <ImportReviewTable
-        hosts={mockImportPreview.hosts}
-        conflicts={mockImportPreview.conflicts}
-        errors={[]}
-        onCommit={mockOnCommit}
-        onCancel={mockOnCancel}
-      />
-    )
-
-    const commitButton = screen.getByText('Commit Import')
-    expect(commitButton).toBeDisabled()
-  })
-
-  it('enables commit button when all conflicts are resolved', async () => {
-    render(
-      <ImportReviewTable
-        hosts={mockImportPreview.hosts}
-        conflicts={mockImportPreview.conflicts}
-        errors={[]}
-        onCommit={mockOnCommit}
-        onCancel={mockOnCancel}
-      />
-    )
-
-    const dropdown = screen.getAllByRole('combobox')[0]
-    fireEvent.change(dropdown, { target: { value: 'skip' } })
-
-    await waitFor(() => {
-      const commitButton = screen.getByText('Commit Import')
-      expect(commitButton).not.toBeDisabled()
-    })
-  })
-
   it('calls onCommit with resolutions', async () => {
+    const conflicts = ['test.example.com']
     render(
       <ImportReviewTable
         hosts={mockImportPreview.hosts}
-        conflicts={mockImportPreview.conflicts}
+        conflicts={conflicts}
         errors={[]}
         onCommit={mockOnCommit}
         onCancel={mockOnCancel}
       />
     )
 
-    const dropdown = screen.getAllByRole('combobox')[0]
+    const dropdown = screen.getByRole('combobox')
     fireEvent.change(dropdown, { target: { value: 'overwrite' } })
 
     const commitButton = screen.getByText('Commit Import')
@@ -114,7 +80,7 @@ describe('ImportReviewTable', () => {
 
     await waitFor(() => {
       expect(mockOnCommit).toHaveBeenCalledWith({
-        'app.local.dev': 'overwrite',
+        'test.example.com': 'overwrite',
       })
     })
   })
@@ -135,26 +101,18 @@ describe('ImportReviewTable', () => {
   })
 
   it('shows conflict indicator on conflicting hosts', () => {
+    const conflicts = ['test.example.com']
     render(
       <ImportReviewTable
-        hosts={[
-          {
-            domain_names: 'app.local.dev',
-            forward_scheme: 'http',
-            forward_host: 'localhost',
-            forward_port: 3000,
-            ssl_forced: false,
-            http2_support: false,
-            websocket_support: false,
-          },
-        ]}
-        conflicts={['app.local.dev']}
+        hosts={mockImportPreview.hosts}
+        conflicts={conflicts}
         errors={[]}
         onCommit={mockOnCommit}
         onCancel={mockOnCancel}
       />
     )
 
-    expect(screen.getByText('Conflict')).toBeInTheDocument()
+    expect(screen.getByRole('combobox')).toBeInTheDocument()
+    expect(screen.queryByText('No conflict')).not.toBeInTheDocument()
   })
 })
diff --git a/frontend/src/components/__tests__/ProxyHostForm.test.tsx b/frontend/src/components/__tests__/ProxyHostForm.test.tsx
index f431ac03..6961ad15 100644
--- a/frontend/src/components/__tests__/ProxyHostForm.test.tsx
+++ b/frontend/src/components/__tests__/ProxyHostForm.test.tsx
@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, afterEach } from 'vitest'
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import ProxyHostForm from '../ProxyHostForm'
 import { mockRemoteServers } from '../../test/mockData'
 
@@ -10,6 +11,22 @@ vi.mock('../../services/api', () => ({
   },
 }))
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
+
+const renderWithClient = (ui: React.ReactElement) => {
+  return renderWithClient(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>
+  )
+}
+
 describe('ProxyHostForm', () => {
   const mockOnSubmit = vi.fn(() => Promise.resolve())
   const mockOnCancel = vi.fn()
@@ -19,7 +36,7 @@ describe('ProxyHostForm', () => {
   })
 
   it('renders create form with empty fields', async () => {
-    render(
+    renderWithClient(
       <ProxyHostForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
     )
 
@@ -47,7 +64,7 @@ describe('ProxyHostForm', () => {
       updated_at: '2025-11-18T10:00:00Z',
     }
 
-    render(
+    renderWithClient(
       <ProxyHostForm host={mockHost} onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
     )
 
@@ -59,7 +76,7 @@ describe('ProxyHostForm', () => {
   })
 
   it('loads remote servers for quick select', async () => {
-    render(
+    renderWithClient(
       <ProxyHostForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
     )
 
@@ -69,7 +86,7 @@ describe('ProxyHostForm', () => {
   })
 
   it('calls onCancel when cancel button is clicked', async () => {
-    render(
+    renderWithClient(
       <ProxyHostForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
     )
 
@@ -81,7 +98,7 @@ describe('ProxyHostForm', () => {
   })
 
   it('submits form with correct data', async () => {
-    render(
+    renderWithClient(
       <ProxyHostForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
     )
 
@@ -107,7 +124,7 @@ describe('ProxyHostForm', () => {
   })
 
   it('handles SSL and WebSocket checkboxes', async () => {
-    render(
+    renderWithClient(
       <ProxyHostForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
     )
 
diff --git a/frontend/src/components/__tests__/RemoteServerForm.test.tsx b/frontend/src/components/__tests__/RemoteServerForm.test.tsx
index bd84fcfc..0ce0c319 100644
--- a/frontend/src/components/__tests__/RemoteServerForm.test.tsx
+++ b/frontend/src/components/__tests__/RemoteServerForm.test.tsx
@@ -92,7 +92,7 @@ describe('RemoteServerForm', () => {
 
     const nameInput = screen.getByPlaceholderText('My Production Server')
     const hostInput = screen.getByPlaceholderText('192.168.1.100')
-    const portInput = screen.getByDisplayValue('80')
+    const portInput = screen.getByDisplayValue('22')
 
     fireEvent.change(nameInput, { target: { value: 'New Server' } })
     fireEvent.change(hostInput, { target: { value: '10.0.0.5' } })
diff --git a/frontend/src/hooks/__tests__/useImport.test.ts b/frontend/src/hooks/__tests__/useImport.test.ts
index 6abbc526..50188a47 100644
--- a/frontend/src/hooks/__tests__/useImport.test.ts
+++ b/frontend/src/hooks/__tests__/useImport.test.ts
@@ -1,5 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { renderHook, waitFor, act } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React from 'react'
 import { useImport } from '../useImport'
 import * as api from '../../services/api'
 
@@ -14,6 +16,19 @@ vi.mock('../../services/api', () => ({
   },
 }))
 
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
 describe('useImport', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -25,7 +40,7 @@ describe('useImport', () => {
   })
 
   it('starts with no active session', async () => {
-    const { result } = renderHook(() => useImport())
+    const { result } = renderHook(() => useImport(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.session).toBeNull()
@@ -53,7 +68,7 @@ describe('useImport', () => {
     vi.mocked(api.importAPI.status).mockResolvedValue({ has_pending: true, session: mockSession })
     vi.mocked(api.importAPI.preview).mockResolvedValue(mockPreview)
 
-    const { result } = renderHook(() => useImport())
+    const { result } = renderHook(() => useImport(), { wrapper: createWrapper() })
 
     await act(async () => {
       await result.current.upload('example.com { reverse_proxy localhost:8080 }')
@@ -71,7 +86,7 @@ describe('useImport', () => {
     const mockError = new Error('Upload failed')
     vi.mocked(api.importAPI.upload).mockRejectedValue(mockError)
 
-    const { result } = renderHook(() => useImport())
+    const { result } = renderHook(() => useImport(), { wrapper: createWrapper() })
 
     let threw = false
     await act(async () => {
@@ -103,7 +118,7 @@ describe('useImport', () => {
     vi.mocked(api.importAPI.preview).mockResolvedValue({ hosts: [], conflicts: [], errors: [] })
     vi.mocked(api.importAPI.commit).mockResolvedValue({})
 
-    const { result } = renderHook(() => useImport())
+    const { result } = renderHook(() => useImport(), { wrapper: createWrapper() })
 
     await act(async () => {
       await result.current.upload('test')
@@ -138,7 +153,7 @@ describe('useImport', () => {
     vi.mocked(api.importAPI.preview).mockResolvedValue({ hosts: [], conflicts: [], errors: [] })
     vi.mocked(api.importAPI.cancel).mockResolvedValue(undefined)
 
-    const { result } = renderHook(() => useImport())
+    const { result } = renderHook(() => useImport(), { wrapper: createWrapper() })
 
     await act(async () => {
       await result.current.upload('test')
@@ -174,7 +189,7 @@ describe('useImport', () => {
     const mockError = new Error('Commit failed')
     vi.mocked(api.importAPI.commit).mockRejectedValue(mockError)
 
-    const { result } = renderHook(() => useImport())
+    const { result } = renderHook(() => useImport(), { wrapper: createWrapper() })
 
     await act(async () => {
       await result.current.upload('test')
diff --git a/frontend/src/hooks/__tests__/useProxyHosts.test.ts b/frontend/src/hooks/__tests__/useProxyHosts.test.ts
index 88fad37d..de8202ea 100644
--- a/frontend/src/hooks/__tests__/useProxyHosts.test.ts
+++ b/frontend/src/hooks/__tests__/useProxyHosts.test.ts
@@ -1,5 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { renderHook, waitFor, act } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React from 'react'
 import { useProxyHosts } from '../useProxyHosts'
 import * as api from '../../services/api'
 
@@ -14,6 +16,19 @@ vi.mock('../../services/api', () => ({
   },
 }))
 
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
 describe('useProxyHosts', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -31,7 +46,7 @@ describe('useProxyHosts', () => {
 
     vi.mocked(api.proxyHostsAPI.list).mockResolvedValue(mockHosts)
 
-    const { result } = renderHook(() => useProxyHosts())
+    const { result } = renderHook(() => useProxyHosts(), { wrapper: createWrapper() })
 
     expect(result.current.loading).toBe(true)
     expect(result.current.hosts).toEqual([])
@@ -49,7 +64,7 @@ describe('useProxyHosts', () => {
     const mockError = new Error('Failed to fetch')
     vi.mocked(api.proxyHostsAPI.list).mockRejectedValue(mockError)
 
-    const { result } = renderHook(() => useProxyHosts())
+    const { result } = renderHook(() => useProxyHosts(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -66,7 +81,7 @@ describe('useProxyHosts', () => {
 
     vi.mocked(api.proxyHostsAPI.create).mockResolvedValue(createdHost)
 
-    const { result } = renderHook(() => useProxyHosts())
+    const { result } = renderHook(() => useProxyHosts(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -89,7 +104,7 @@ describe('useProxyHosts', () => {
     const updatedHost = { ...existingHost, domain_names: 'updated.com' }
     vi.mocked(api.proxyHostsAPI.update).mockResolvedValue(updatedHost)
 
-    const { result } = renderHook(() => useProxyHosts())
+    const { result } = renderHook(() => useProxyHosts(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -113,7 +128,7 @@ describe('useProxyHosts', () => {
     vi.mocked(api.proxyHostsAPI.list).mockResolvedValue(hosts)
     vi.mocked(api.proxyHostsAPI.delete).mockResolvedValue(undefined)
 
-    const { result } = renderHook(() => useProxyHosts())
+    const { result } = renderHook(() => useProxyHosts(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -135,7 +150,7 @@ describe('useProxyHosts', () => {
     const mockError = new Error('Failed to create')
     vi.mocked(api.proxyHostsAPI.create).mockRejectedValue(mockError)
 
-    const { result } = renderHook(() => useProxyHosts())
+    const { result } = renderHook(() => useProxyHosts(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -150,7 +165,7 @@ describe('useProxyHosts', () => {
     const mockError = new Error('Failed to update')
     vi.mocked(api.proxyHostsAPI.update).mockRejectedValue(mockError)
 
-    const { result } = renderHook(() => useProxyHosts())
+    const { result } = renderHook(() => useProxyHosts(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -165,7 +180,7 @@ describe('useProxyHosts', () => {
     const mockError = new Error('Failed to delete')
     vi.mocked(api.proxyHostsAPI.delete).mockRejectedValue(mockError)
 
-    const { result } = renderHook(() => useProxyHosts())
+    const { result } = renderHook(() => useProxyHosts(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
diff --git a/frontend/src/hooks/__tests__/useRemoteServers.test.ts b/frontend/src/hooks/__tests__/useRemoteServers.test.ts
index 8d073673..1658f575 100644
--- a/frontend/src/hooks/__tests__/useRemoteServers.test.ts
+++ b/frontend/src/hooks/__tests__/useRemoteServers.test.ts
@@ -1,5 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { renderHook, waitFor, act } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React from 'react'
 import { useRemoteServers } from '../useRemoteServers'
 import * as api from '../../services/api'
 
@@ -15,6 +17,19 @@ vi.mock('../../services/api', () => ({
   },
 }))
 
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
 describe('useRemoteServers', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -32,7 +47,7 @@ describe('useRemoteServers', () => {
 
     vi.mocked(api.remoteServersAPI.list).mockResolvedValue(mockServers)
 
-    const { result } = renderHook(() => useRemoteServers())
+    const { result } = renderHook(() => useRemoteServers(), { wrapper: createWrapper() })
 
     expect(result.current.loading).toBe(true)
     expect(result.current.servers).toEqual([])
@@ -55,7 +70,7 @@ describe('useRemoteServers', () => {
 
     vi.mocked(api.remoteServersAPI.list).mockResolvedValue(mockServers)
 
-    const { result } = renderHook(() => useRemoteServers())
+    const { result } = renderHook(() => useRemoteServers(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -72,7 +87,7 @@ describe('useRemoteServers', () => {
     const mockError = new Error('Network error')
     vi.mocked(api.remoteServersAPI.list).mockRejectedValue(mockError)
 
-    const { result } = renderHook(() => useRemoteServers())
+    const { result } = renderHook(() => useRemoteServers(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -90,7 +105,7 @@ describe('useRemoteServers', () => {
 
     vi.mocked(api.remoteServersAPI.create).mockResolvedValue(createdServer)
 
-    const { result } = renderHook(() => useRemoteServers())
+    const { result } = renderHook(() => useRemoteServers(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -113,7 +128,7 @@ describe('useRemoteServers', () => {
     const updatedServer = { ...existingServer, name: 'Updated Server' }
     vi.mocked(api.remoteServersAPI.update).mockResolvedValue(updatedServer)
 
-    const { result } = renderHook(() => useRemoteServers())
+    const { result } = renderHook(() => useRemoteServers(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -137,7 +152,7 @@ describe('useRemoteServers', () => {
     vi.mocked(api.remoteServersAPI.list).mockResolvedValue(servers)
     vi.mocked(api.remoteServersAPI.delete).mockResolvedValue(undefined)
 
-    const { result } = renderHook(() => useRemoteServers())
+    const { result } = renderHook(() => useRemoteServers(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -159,7 +174,7 @@ describe('useRemoteServers', () => {
     const testResult = { reachable: true, address: 'localhost:8080' }
     vi.mocked(api.remoteServersAPI.test).mockResolvedValue(testResult)
 
-    const { result } = renderHook(() => useRemoteServers())
+    const { result } = renderHook(() => useRemoteServers(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -176,7 +191,7 @@ describe('useRemoteServers', () => {
     const mockError = new Error('Failed to create')
     vi.mocked(api.remoteServersAPI.create).mockRejectedValue(mockError)
 
-    const { result } = renderHook(() => useRemoteServers())
+    const { result } = renderHook(() => useRemoteServers(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -191,7 +206,7 @@ describe('useRemoteServers', () => {
     const mockError = new Error('Failed to update')
     vi.mocked(api.remoteServersAPI.update).mockRejectedValue(mockError)
 
-    const { result } = renderHook(() => useRemoteServers())
+    const { result } = renderHook(() => useRemoteServers(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -206,7 +221,7 @@ describe('useRemoteServers', () => {
     const mockError = new Error('Failed to delete')
     vi.mocked(api.remoteServersAPI.delete).mockRejectedValue(mockError)
 
-    const { result } = renderHook(() => useRemoteServers())
+    const { result } = renderHook(() => useRemoteServers(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)
@@ -220,7 +235,7 @@ describe('useRemoteServers', () => {
     const mockError = new Error('Connection failed')
     vi.mocked(api.remoteServersAPI.test).mockRejectedValue(mockError)
 
-    const { result } = renderHook(() => useRemoteServers())
+    const { result } = renderHook(() => useRemoteServers(), { wrapper: createWrapper() })
 
     await waitFor(() => {
       expect(result.current.loading).toBe(false)