add auth tests

Author: idosal

client/src/App.tsx

@@ -108,13 +108,12 @@ const App = () => {
   const [bearerToken, setBearerToken] = useState<string>(() => {
     return localStorage.getItem("lastBearerToken") || "";
   });
-  
+
   const [headerName, setHeaderName] = useState<string>(() => {
     return localStorage.getItem("lastHeaderName") || "Authorization";
   });
 
   const [pendingSampleRequests, setPendingSampleRequests] = useState<
-
     Array<
       PendingRequest & {
         resolve: (result: CreateMessageResult) => void;

client/src/components/Sidebar.tsx

@@ -161,6 +161,7 @@ const Sidebar = ({
                   variant="outline"
                   onClick={() => setShowBearerToken(!showBearerToken)}
                   className="flex items-center w-full"
+                  data-testid="auth-button"
                 >
                   {showBearerToken ? (
                     <ChevronDown className="w-4 h-4 mr-2" />
@@ -174,7 +175,10 @@ const Sidebar = ({
                     <label className="text-sm font-medium">Header Name</label>
                     <Input
                       placeholder="Authorization"
-                      onChange={(e) => setHeaderName && setHeaderName(e.target.value)}
+                      onChange={(e) =>
+                        setHeaderName && setHeaderName(e.target.value)
+                      }
+                      data-testid="header-input"
                       className="font-mono"
                       value={headerName}
                     />
@@ -183,6 +187,7 @@ const Sidebar = ({
                       placeholder="Bearer Token"
                       value={bearerToken}
                       onChange={(e) => setBearerToken(e.target.value)}
+                      data-testid="bearer-token-input"
                       className="font-mono"
                       type="password"
                     />

client/src/components/__tests__/Sidebar.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
 import { describe, it, beforeEach, jest } from "@jest/globals";
 import Sidebar from "../Sidebar";
 import { DEFAULT_INSPECTOR_CONFIG } from "@/lib/constants";
@@ -108,6 +109,157 @@ describe("Sidebar Environment Variables", () => {
     });
   });
 
+  describe("Authentication", () => {
+    const openAuthSection = () => {
+      const button = screen.getByTestId("auth-button");
+      fireEvent.click(button);
+    };
+
+    it("should update bearer token", () => {
+      const setBearerToken = jest.fn();
+      renderSidebar({
+        bearerToken: "",
+        setBearerToken,
+        transportType: "sse", // Set transport type to SSE
+      });
+
+      openAuthSection();
+
+      const tokenInput = screen.getByTestId("bearer-token-input");
+      fireEvent.change(tokenInput, { target: { value: "new_token" } });
+
+      expect(setBearerToken).toHaveBeenCalledWith("new_token");
+    });
+
+    it("should update header name", () => {
+      const setHeaderName = jest.fn();
+      renderSidebar({
+        headerName: "Authorization",
+        setHeaderName,
+        transportType: "sse",
+      });
+
+      openAuthSection();
+
+      const headerInput = screen.getByTestId("header-input");
+      fireEvent.change(headerInput, { target: { value: "X-Custom-Auth" } });
+
+      expect(setHeaderName).toHaveBeenCalledWith("X-Custom-Auth");
+    });
+
+    it("should clear bearer token", () => {
+      const setBearerToken = jest.fn();
+      renderSidebar({
+        bearerToken: "existing_token",
+        setBearerToken,
+        transportType: "sse", // Set transport type to SSE
+      });
+
+      openAuthSection();
+
+      const tokenInput = screen.getByTestId("bearer-token-input");
+      fireEvent.change(tokenInput, { target: { value: "" } });
+
+      expect(setBearerToken).toHaveBeenCalledWith("");
+    });
+
+    it("should properly render bearer token input", () => {
+      const { rerender } = renderSidebar({
+        bearerToken: "existing_token",
+        transportType: "sse", // Set transport type to SSE
+      });
+
+      openAuthSection();
+
+      // Token input should be a password field
+      const tokenInput = screen.getByTestId("bearer-token-input");
+      expect(tokenInput).toHaveProperty("type", "password");
+
+      // Update the token
+      fireEvent.change(tokenInput, { target: { value: "new_token" } });
+
+      // Rerender with updated token
+      rerender(
+        <TooltipProvider>
+          <Sidebar
+            {...defaultProps}
+            bearerToken="new_token"
+            transportType="sse"
+          />
+        </TooltipProvider>,
+      );
+
+      // Token input should still exist after update
+      expect(screen.getByTestId("bearer-token-input")).toBeInTheDocument();
+    });
+
+    it("should maintain token visibility state after update", () => {
+      const { rerender } = renderSidebar({
+        bearerToken: "existing_token",
+        transportType: "sse", // Set transport type to SSE
+      });
+
+      openAuthSection();
+
+      // Token input should be a password field
+      const tokenInput = screen.getByTestId("bearer-token-input");
+      expect(tokenInput).toHaveProperty("type", "password");
+
+      // Update the token
+      fireEvent.change(tokenInput, { target: { value: "new_token" } });
+
+      // Rerender with updated token
+      rerender(
+        <TooltipProvider>
+          <Sidebar
+            {...defaultProps}
+            bearerToken="new_token"
+            transportType="sse"
+          />
+        </TooltipProvider>,
+      );
+
+      // Token input should still exist after update
+      expect(screen.getByTestId("bearer-token-input")).toBeInTheDocument();
+    });
+
+    it("should maintain header name when toggling auth section", () => {
+      renderSidebar({
+        headerName: "X-API-Key",
+        transportType: "sse",
+      });
+
+      // Open auth section
+      openAuthSection();
+
+      // Verify header name is displayed
+      const headerInput = screen.getByTestId("header-input");
+      expect(headerInput).toHaveValue("X-API-Key");
+
+      // Close auth section
+      const authButton = screen.getByTestId("auth-button");
+      fireEvent.click(authButton);
+
+      // Reopen auth section
+      fireEvent.click(authButton);
+
+      // Verify header name is still preserved
+      expect(screen.getByTestId("header-input")).toHaveValue("X-API-Key");
+    });
+
+    it("should display default header name when not specified", () => {
+      renderSidebar({
+        headerName: undefined,
+        transportType: "sse",
+      });
+
+      openAuthSection();
+
+      const headerInput = screen.getByTestId("header-input");
+      expect(headerInput).toHaveAttribute("placeholder", "Authorization");
+    });
+  });
+
   describe("Key Editing", () => {
     it("should maintain order when editing first key", () => {
       const setEnv = jest.fn();