From a98db777c555c7a7ba4b0a30ede1bb3b26b8dc7a Mon Sep 17 00:00:00 2001 From: Ido Salomon Date: Thu, 10 Apr 2025 20:34:40 +0300 Subject: [PATCH] add auth tests --- client/src/App.tsx | 3 +- client/src/components/Sidebar.tsx | 7 +- .../src/components/__tests__/Sidebar.test.tsx | 152 ++++++++++++++++++ 3 files changed, 159 insertions(+), 3 deletions(-) diff --git a/client/src/App.tsx b/client/src/App.tsx index 7f29a31..32931b8 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -108,13 +108,12 @@ const App = () => { const [bearerToken, setBearerToken] = useState(() => { return localStorage.getItem("lastBearerToken") || ""; }); - + const [headerName, setHeaderName] = useState(() => { return localStorage.getItem("lastHeaderName") || "Authorization"; }); const [pendingSampleRequests, setPendingSampleRequests] = useState< - Array< PendingRequest & { resolve: (result: CreateMessageResult) => void; diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx index ea0716b..e555ac7 100644 --- a/client/src/components/Sidebar.tsx +++ b/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 ? ( @@ -174,7 +175,10 @@ const Sidebar = ({ 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" /> diff --git a/client/src/components/__tests__/Sidebar.test.tsx b/client/src/components/__tests__/Sidebar.test.tsx index e527f6d..8ac8494 100644 --- a/client/src/components/__tests__/Sidebar.test.tsx +++ b/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( + + + , + ); + + // 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( + + + , + ); + + // 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();