Add AuthProvider to test components

webui/src/contexts/__tests__/InstancesContext.test.tsx

@@ -1,12 +1,13 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { render, screen, waitFor } from '@testing-library/react'
-import type { ReactNode } from 'react'
-import { InstancesProvider, useInstances } from '@/contexts/InstancesContext'
-import { instancesApi } from '@/lib/api'
-import type { Instance } from '@/types/instance'
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { InstancesProvider, useInstances } from "@/contexts/InstancesContext";
+import { instancesApi } from "@/lib/api";
+import type { Instance } from "@/types/instance";
+import { AuthProvider } from "../AuthContext";
 
 // Mock the API module
-vi.mock('@/lib/api', () => ({
+vi.mock("@/lib/api", () => ({
   instancesApi: {
     list: vi.fn(),
     create: vi.fn(),
@@ -15,8 +16,8 @@ vi.mock('@/lib/api', () => ({
     stop: vi.fn(),
     restart: vi.fn(),
     delete: vi.fn(),
-  }
-}))
+  },
+}));
 
 // Test component to access context
 function TestComponent() {
@@ -30,366 +31,389 @@ function TestComponent() {
     stopInstance,
     restartInstance,
     deleteInstance,
-    clearError
-  } = useInstances()
+    clearError,
+  } = useInstances();
 
   return (
     <div>
       <div data-testid="loading">{loading.toString()}</div>
-      <div data-testid="error">{error || 'no-error'}</div>
+      <div data-testid="error">{error || "no-error"}</div>
       <div data-testid="instances-count">{instances.length}</div>
-      {instances.map(instance => (
+      {instances.map((instance) => (
         <div key={instance.name} data-testid={`instance-${instance.name}`}>
           {instance.name}:{instance.running.toString()}
         </div>
       ))}
-      
+
       {/* Action buttons for testing with specific instances */}
-      <button 
-        onClick={() => createInstance('new-instance', { model: 'test.gguf' })}
+      <button
+        onClick={() => createInstance("new-instance", { model: "test.gguf" })}
         data-testid="create-instance"
       >
         Create Instance
       </button>
-      <button 
-        onClick={() => updateInstance('instance1', { model: 'updated.gguf' })}
+      <button
+        onClick={() => updateInstance("instance1", { model: "updated.gguf" })}
         data-testid="update-instance"
       >
         Update Instance
       </button>
-      <button 
-        onClick={() => startInstance('instance2')}
+      <button
+        onClick={() => startInstance("instance2")}
         data-testid="start-instance"
       >
         Start Instance2
       </button>
-      <button 
-        onClick={() => stopInstance('instance1')}
+      <button
+        onClick={() => stopInstance("instance1")}
         data-testid="stop-instance"
       >
         Stop Instance1
       </button>
-      <button 
-        onClick={() => restartInstance('instance1')}
+      <button
+        onClick={() => restartInstance("instance1")}
         data-testid="restart-instance"
       >
         Restart Instance1
       </button>
-      <button 
-        onClick={() => deleteInstance('instance2')}
+      <button
+        onClick={() => deleteInstance("instance2")}
         data-testid="delete-instance"
       >
         Delete Instance2
       </button>
-      <button 
-        onClick={clearError}
-        data-testid="clear-error"
-      >
+      <button onClick={clearError} data-testid="clear-error">
         Clear Error
       </button>
     </div>
-  )
+  );
 }
 
 function renderWithProvider(children: ReactNode) {
   return render(
-    <InstancesProvider>
-      {children}
-    </InstancesProvider>
-  )
+    <AuthProvider>
+      <InstancesProvider>{children}</InstancesProvider>
+    </AuthProvider>
+  );
 }
 
-describe('InstancesContext', () => {
+describe("InstancesContext", () => {
   const mockInstances: Instance[] = [
-    { name: 'instance1', running: true, options: { model: 'model1.gguf' } },
-    { name: 'instance2', running: false, options: { model: 'model2.gguf' } }
-  ]
+    { name: "instance1", running: true, options: { model: "model1.gguf" } },
+    { name: "instance2", running: false, options: { model: "model2.gguf" } },
+  ];
 
   beforeEach(() => {
-    vi.clearAllMocks()
+    vi.clearAllMocks();
+    window.sessionStorage.setItem('llamactl_management_key', 'test-api-key-123');
+    global.fetch = vi.fn(() => Promise.resolve(new Response(null, { status: 200 })));
     // Default successful API responses
-    vi.mocked(instancesApi.list).mockResolvedValue(mockInstances)
-  })
+    vi.mocked(instancesApi.list).mockResolvedValue(mockInstances);
+  });
 
   afterEach(() => {
-    vi.clearAllMocks()
-  })
+    vi.restoreAllMocks();
+  });
 
-  describe('Initial Loading', () => {
-    it('loads instances on mount', async () => {
-      renderWithProvider(<TestComponent />)
+  describe("Initial Loading", () => {
+    it("loads instances on mount", async () => {
+      renderWithProvider(<TestComponent />);
 
       // Should start loading
-      expect(screen.getByTestId('loading')).toHaveTextContent('true')
-      
+      expect(screen.getByTestId("loading")).toHaveTextContent("true");
+
       // Should fetch instances
       await waitFor(() => {
-        expect(instancesApi.list).toHaveBeenCalledOnce()
-      })
+        expect(instancesApi.list).toHaveBeenCalledOnce();
+      });
 
       // Should display loaded instances
       await waitFor(() => {
-        expect(screen.getByTestId('loading')).toHaveTextContent('false')
-        expect(screen.getByTestId('instances-count')).toHaveTextContent('2')
-        expect(screen.getByTestId('instance-instance1')).toHaveTextContent('instance1:true')
-        expect(screen.getByTestId('instance-instance2')).toHaveTextContent('instance2:false')
-      })
-    })
+        expect(screen.getByTestId("loading")).toHaveTextContent("false");
+        expect(screen.getByTestId("instances-count")).toHaveTextContent("2");
+        expect(screen.getByTestId("instance-instance1")).toHaveTextContent(
+          "instance1:true"
+        );
+        expect(screen.getByTestId("instance-instance2")).toHaveTextContent(
+          "instance2:false"
+        );
+      });
+    });
 
-    it('handles API error during initial load', async () => {
-      const errorMessage = 'Network error'
-      vi.mocked(instancesApi.list).mockRejectedValue(new Error(errorMessage))
+    it("handles API error during initial load", async () => {
+      const errorMessage = "Network error";
+      vi.mocked(instancesApi.list).mockRejectedValue(new Error(errorMessage));
 
-      renderWithProvider(<TestComponent />)
+      renderWithProvider(<TestComponent />);
 
       await waitFor(() => {
-        expect(screen.getByTestId('loading')).toHaveTextContent('false')
-        expect(screen.getByTestId('error')).toHaveTextContent(errorMessage)
-        expect(screen.getByTestId('instances-count')).toHaveTextContent('0')
-      })
-    })
-  })
+        expect(screen.getByTestId("loading")).toHaveTextContent("false");
+        expect(screen.getByTestId("error")).toHaveTextContent(errorMessage);
+        expect(screen.getByTestId("instances-count")).toHaveTextContent("0");
+      });
+    });
+  });
 
-  describe('Create Instance', () => {
-    it('creates instance and adds it to state', async () => {
-      const newInstance: Instance = { 
-        name: 'new-instance', 
-        running: false, 
-        options: { model: 'test.gguf' } 
-      }
-      vi.mocked(instancesApi.create).mockResolvedValue(newInstance)
+  describe("Create Instance", () => {
+    it("creates instance and adds it to state", async () => {
+      const newInstance: Instance = {
+        name: "new-instance",
+        running: false,
+        options: { model: "test.gguf" },
+      };
+      vi.mocked(instancesApi.create).mockResolvedValue(newInstance);
 
-      renderWithProvider(<TestComponent />)
+      renderWithProvider(<TestComponent />);
 
       await waitFor(() => {
-        expect(screen.getByTestId('loading')).toHaveTextContent('false')
-        expect(screen.getByTestId('instances-count')).toHaveTextContent('2')
-      })
+        expect(screen.getByTestId("loading")).toHaveTextContent("false");
+        expect(screen.getByTestId("instances-count")).toHaveTextContent("2");
+      });
 
-      screen.getByTestId('create-instance').click()
+      screen.getByTestId("create-instance").click();
 
       await waitFor(() => {
-        expect(instancesApi.create).toHaveBeenCalledWith('new-instance', { model: 'test.gguf' })
-      })
+        expect(instancesApi.create).toHaveBeenCalledWith("new-instance", {
+          model: "test.gguf",
+        });
+      });
 
       await waitFor(() => {
-        expect(screen.getByTestId('instances-count')).toHaveTextContent('3')
-        expect(screen.getByTestId('instance-new-instance')).toHaveTextContent('new-instance:false')
-      })
-    })
+        expect(screen.getByTestId("instances-count")).toHaveTextContent("3");
+        expect(screen.getByTestId("instance-new-instance")).toHaveTextContent(
+          "new-instance:false"
+        );
+      });
+    });
 
-    it('handles create instance error without changing state', async () => {
-      const errorMessage = 'Instance already exists'
-      vi.mocked(instancesApi.create).mockRejectedValue(new Error(errorMessage))
+    it("handles create instance error without changing state", async () => {
+      const errorMessage = "Instance already exists";
+      vi.mocked(instancesApi.create).mockRejectedValue(new Error(errorMessage));
 
-      renderWithProvider(<TestComponent />)
+      renderWithProvider(<TestComponent />);
 
       await waitFor(() => {
-        expect(screen.getByTestId('loading')).toHaveTextContent('false')
-        expect(screen.getByTestId('instances-count')).toHaveTextContent('2')
-      })
+        expect(screen.getByTestId("loading")).toHaveTextContent("false");
+        expect(screen.getByTestId("instances-count")).toHaveTextContent("2");
+      });
 
-      screen.getByTestId('create-instance').click()
+      screen.getByTestId("create-instance").click();
 
       await waitFor(() => {
-        expect(screen.getByTestId('error')).toHaveTextContent(errorMessage)
-      })
+        expect(screen.getByTestId("error")).toHaveTextContent(errorMessage);
+      });
 
-      expect(screen.getByTestId('instances-count')).toHaveTextContent('2')
-      expect(screen.queryByTestId('instance-new-instance')).not.toBeInTheDocument()
-    })
-  })
+      expect(screen.getByTestId("instances-count")).toHaveTextContent("2");
+      expect(
+        screen.queryByTestId("instance-new-instance")
+      ).not.toBeInTheDocument();
+    });
+  });
 
-  describe('Update Instance', () => {
-    it('updates instance and maintains it in state', async () => {
-      const updatedInstance: Instance = { 
-        name: 'instance1', 
-        running: true, 
-        options: { model: 'updated.gguf' } 
-      }
-      vi.mocked(instancesApi.update).mockResolvedValue(updatedInstance)
+  describe("Update Instance", () => {
+    it("updates instance and maintains it in state", async () => {
+      const updatedInstance: Instance = {
+        name: "instance1",
+        running: true,
+        options: { model: "updated.gguf" },
+      };
+      vi.mocked(instancesApi.update).mockResolvedValue(updatedInstance);
 
-      renderWithProvider(<TestComponent />)
+      renderWithProvider(<TestComponent />);
 
       await waitFor(() => {
-        expect(screen.getByTestId('loading')).toHaveTextContent('false')
-        expect(screen.getByTestId('instances-count')).toHaveTextContent('2')
-      })
+        expect(screen.getByTestId("loading")).toHaveTextContent("false");
+        expect(screen.getByTestId("instances-count")).toHaveTextContent("2");
+      });
 
-      screen.getByTestId('update-instance').click()
+      screen.getByTestId("update-instance").click();
 
       await waitFor(() => {
-        expect(instancesApi.update).toHaveBeenCalledWith('instance1', { model: 'updated.gguf' })
-      })
+        expect(instancesApi.update).toHaveBeenCalledWith("instance1", {
+          model: "updated.gguf",
+        });
+      });
 
       await waitFor(() => {
-        expect(screen.getByTestId('instances-count')).toHaveTextContent('2')
-        expect(screen.getByTestId('instance-instance1')).toBeInTheDocument()
-      })
-    })
-  })
+        expect(screen.getByTestId("instances-count")).toHaveTextContent("2");
+        expect(screen.getByTestId("instance-instance1")).toBeInTheDocument();
+      });
+    });
+  });
 
-  describe('Start/Stop Instance', () => {
-    it('starts existing instance and updates its running state', async () => {
-      vi.mocked(instancesApi.start).mockResolvedValue({} as Instance)
+  describe("Start/Stop Instance", () => {
+    it("starts existing instance and updates its running state", async () => {
+      vi.mocked(instancesApi.start).mockResolvedValue({} as Instance);
 
-      renderWithProvider(<TestComponent />)
+      renderWithProvider(<TestComponent />);
 
       await waitFor(() => {
-        expect(screen.getByTestId('loading')).toHaveTextContent('false')
+        expect(screen.getByTestId("loading")).toHaveTextContent("false");
         // instance2 starts as not running
-        expect(screen.getByTestId('instance-instance2')).toHaveTextContent('instance2:false')
-      })
+        expect(screen.getByTestId("instance-instance2")).toHaveTextContent(
+          "instance2:false"
+        );
+      });
 
       // Start instance2 (button already configured to start instance2)
-      screen.getByTestId('start-instance').click()
+      screen.getByTestId("start-instance").click();
 
       await waitFor(() => {
-        expect(instancesApi.start).toHaveBeenCalledWith('instance2')
+        expect(instancesApi.start).toHaveBeenCalledWith("instance2");
         // The running state should be updated to true
-        expect(screen.getByTestId('instance-instance2')).toHaveTextContent('instance2:true')
-      })
-    })
+        expect(screen.getByTestId("instance-instance2")).toHaveTextContent(
+          "instance2:true"
+        );
+      });
+    });
 
-    it('stops instance and updates running state to false', async () => {
-      vi.mocked(instancesApi.stop).mockResolvedValue({} as Instance)
+    it("stops instance and updates running state to false", async () => {
+      vi.mocked(instancesApi.stop).mockResolvedValue({} as Instance);
 
-      renderWithProvider(<TestComponent />)
+      renderWithProvider(<TestComponent />);
 
       await waitFor(() => {
-        expect(screen.getByTestId('loading')).toHaveTextContent('false')
+        expect(screen.getByTestId("loading")).toHaveTextContent("false");
         // instance1 starts as running
-        expect(screen.getByTestId('instance-instance1')).toHaveTextContent('instance1:true')
-      })
+        expect(screen.getByTestId("instance-instance1")).toHaveTextContent(
+          "instance1:true"
+        );
+      });
 
       // Stop instance1 (button already configured to stop instance1)
-      screen.getByTestId('stop-instance').click()
+      screen.getByTestId("stop-instance").click();
 
       await waitFor(() => {
-        expect(instancesApi.stop).toHaveBeenCalledWith('instance1')
+        expect(instancesApi.stop).toHaveBeenCalledWith("instance1");
         // The running state should be updated to false
-        expect(screen.getByTestId('instance-instance1')).toHaveTextContent('instance1:false')
-      })
-    })
+        expect(screen.getByTestId("instance-instance1")).toHaveTextContent(
+          "instance1:false"
+        );
+      });
+    });
 
-    it('handles start instance error', async () => {
-      const errorMessage = 'Failed to start instance'
-      vi.mocked(instancesApi.start).mockRejectedValue(new Error(errorMessage))
+    it("handles start instance error", async () => {
+      const errorMessage = "Failed to start instance";
+      vi.mocked(instancesApi.start).mockRejectedValue(new Error(errorMessage));
 
-      renderWithProvider(<TestComponent />)
+      renderWithProvider(<TestComponent />);
 
       await waitFor(() => {
-        expect(screen.getByTestId('loading')).toHaveTextContent('false')
-      })
+        expect(screen.getByTestId("loading")).toHaveTextContent("false");
+      });
 
-      screen.getByTestId('start-instance').click()
+      screen.getByTestId("start-instance").click();
 
       await waitFor(() => {
-        expect(screen.getByTestId('error')).toHaveTextContent(errorMessage)
-      })
-    })
-  })
+        expect(screen.getByTestId("error")).toHaveTextContent(errorMessage);
+      });
+    });
+  });
 
-  describe('Delete Instance', () => {
-    it('deletes instance and removes it from state', async () => {
-      vi.mocked(instancesApi.delete).mockResolvedValue(undefined)
+  describe("Delete Instance", () => {
+    it("deletes instance and removes it from state", async () => {
+      vi.mocked(instancesApi.delete).mockResolvedValue(undefined);
 
-      renderWithProvider(<TestComponent />)
+      renderWithProvider(<TestComponent />);
 
       await waitFor(() => {
-        expect(screen.getByTestId('loading')).toHaveTextContent('false')
-        expect(screen.getByTestId('instances-count')).toHaveTextContent('2')
-        expect(screen.getByTestId('instance-instance2')).toBeInTheDocument()
-      })
+        expect(screen.getByTestId("loading")).toHaveTextContent("false");
+        expect(screen.getByTestId("instances-count")).toHaveTextContent("2");
+        expect(screen.getByTestId("instance-instance2")).toBeInTheDocument();
+      });
 
-      screen.getByTestId('delete-instance').click()
+      screen.getByTestId("delete-instance").click();
 
       await waitFor(() => {
-        expect(instancesApi.delete).toHaveBeenCalledWith('instance2')
-      })
+        expect(instancesApi.delete).toHaveBeenCalledWith("instance2");
+      });
 
       await waitFor(() => {
-        expect(screen.getByTestId('instances-count')).toHaveTextContent('1')
-        expect(screen.queryByTestId('instance-instance2')).not.toBeInTheDocument()
-        expect(screen.getByTestId('instance-instance1')).toBeInTheDocument() // instance1 should still exist
-      })
-    })
+        expect(screen.getByTestId("instances-count")).toHaveTextContent("1");
+        expect(
+          screen.queryByTestId("instance-instance2")
+        ).not.toBeInTheDocument();
+        expect(screen.getByTestId("instance-instance1")).toBeInTheDocument(); // instance1 should still exist
+      });
+    });
 
-    it('handles delete instance error without changing state', async () => {
-      const errorMessage = 'Instance is running'
-      vi.mocked(instancesApi.delete).mockRejectedValue(new Error(errorMessage))
+    it("handles delete instance error without changing state", async () => {
+      const errorMessage = "Instance is running";
+      vi.mocked(instancesApi.delete).mockRejectedValue(new Error(errorMessage));
 
-      renderWithProvider(<TestComponent />)
+      renderWithProvider(<TestComponent />);
 
       await waitFor(() => {
-        expect(screen.getByTestId('loading')).toHaveTextContent('false')
-        expect(screen.getByTestId('instances-count')).toHaveTextContent('2')
-      })
+        expect(screen.getByTestId("loading")).toHaveTextContent("false");
+        expect(screen.getByTestId("instances-count")).toHaveTextContent("2");
+      });
 
-      screen.getByTestId('delete-instance').click()
+      screen.getByTestId("delete-instance").click();
 
       await waitFor(() => {
-        expect(screen.getByTestId('error')).toHaveTextContent(errorMessage)
-      })
+        expect(screen.getByTestId("error")).toHaveTextContent(errorMessage);
+      });
 
-      expect(screen.getByTestId('instances-count')).toHaveTextContent('2')
-      expect(screen.getByTestId('instance-instance2')).toBeInTheDocument()
-    })
-  })
+      expect(screen.getByTestId("instances-count")).toHaveTextContent("2");
+      expect(screen.getByTestId("instance-instance2")).toBeInTheDocument();
+    });
+  });
 
-  describe('Error Management', () => {
-    it('clears error when clearError is called', async () => {
-      const errorMessage = 'Test error'
-      vi.mocked(instancesApi.list).mockRejectedValue(new Error(errorMessage))
+  describe("Error Management", () => {
+    it("clears error when clearError is called", async () => {
+      const errorMessage = "Test error";
+      vi.mocked(instancesApi.list).mockRejectedValue(new Error(errorMessage));
 
-      renderWithProvider(<TestComponent />)
+      renderWithProvider(<TestComponent />);
 
       await waitFor(() => {
-        expect(screen.getByTestId('error')).toHaveTextContent(errorMessage)
-      })
+        expect(screen.getByTestId("error")).toHaveTextContent(errorMessage);
+      });
 
-      screen.getByTestId('clear-error').click()
+      screen.getByTestId("clear-error").click();
 
       await waitFor(() => {
-        expect(screen.getByTestId('error')).toHaveTextContent('no-error')
-      })
-    })
-  })
+        expect(screen.getByTestId("error")).toHaveTextContent("no-error");
+      });
+    });
+  });
 
-  describe('State Consistency', () => {
-    it('maintains consistent state during multiple operations', async () => {
+  describe("State Consistency", () => {
+    it("maintains consistent state during multiple operations", async () => {
       // Test that operations don't interfere with each other
-      const newInstance: Instance = { 
-        name: 'new-instance', 
-        running: false, 
-        options: {} 
-      }
-      vi.mocked(instancesApi.create).mockResolvedValue(newInstance)
-      vi.mocked(instancesApi.start).mockResolvedValue({} as Instance)
+      const newInstance: Instance = {
+        name: "new-instance",
+        running: false,
+        options: {},
+      };
+      vi.mocked(instancesApi.create).mockResolvedValue(newInstance);
+      vi.mocked(instancesApi.start).mockResolvedValue({} as Instance);
 
-      renderWithProvider(<TestComponent />)
+      renderWithProvider(<TestComponent />);
 
       await waitFor(() => {
-        expect(screen.getByTestId('loading')).toHaveTextContent('false')
-        expect(screen.getByTestId('instances-count')).toHaveTextContent('2')
-      })
+        expect(screen.getByTestId("loading")).toHaveTextContent("false");
+        expect(screen.getByTestId("instances-count")).toHaveTextContent("2");
+      });
 
       // Create new instance
-      screen.getByTestId('create-instance').click()
+      screen.getByTestId("create-instance").click();
 
       await waitFor(() => {
-        expect(screen.getByTestId('instances-count')).toHaveTextContent('3')
-      })
+        expect(screen.getByTestId("instances-count")).toHaveTextContent("3");
+      });
 
       // Start an instance (this should not affect the count)
-      screen.getByTestId('start-instance').click()
+      screen.getByTestId("start-instance").click();
 
       await waitFor(() => {
-        expect(instancesApi.start).toHaveBeenCalled()
-        expect(screen.getByTestId('instances-count')).toHaveTextContent('3') // Still 3
+        expect(instancesApi.start).toHaveBeenCalled();
+        expect(screen.getByTestId("instances-count")).toHaveTextContent("3"); // Still 3
         // But the running state should change
-        expect(screen.getByTestId('instance-instance2')).toHaveTextContent('instance2:true')
-      })
-    })
-  })
-})
+        expect(screen.getByTestId("instance-instance2")).toHaveTextContent(
+          "instance2:true"
+        );
+      });
+    });
+  });
+});