Add tests for URL fragment routing behavior with order-independent window mocking

This commit adds comprehensive tests for URL fragment routing functionality:
- Tests that default hash is set based on server capabilities priority (Resources > Prompts > Tools > Ping)
- Tests that hash is not set when disconnected
- Tests that hash is cleared when disconnecting from a connected state
- Includes e2e test to verify startup state behavior

The tests implement proper window.location and window.history mocking using Jest best practices
to avoid order-dependent test failures that occurred in CI environments:

**Problem Solved:**
- CI failures with "TypeError: Cannot redefine property: location" when tests ran in different orders
- Multiple test files using Object.defineProperty() on window properties created non-configurable properties
- Subsequent test files failed when trying to redefine the same global properties

**Solution Applied:**
- Uses Object.defineProperty() with configurable: true and writable: true
- Preserves original window properties and restores them in afterAll cleanup
- Avoids delete operations on window properties that caused TypeScript compilation errors
- Follows Jest 30 official guidance for mocking browser globals in jsdom environment

**Technical Approach:**
```javascript
Object.defineProperty(window, "location", {
  writable: true,
  configurable: true,
  value: { ...originalLocation, hash: "", pathname: "/", search: "" },
});
```

This approach ensures tests pass regardless of execution order and maintains compatibility
with both Jest runtime and TypeScript compilation (tsc).

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: richardkmichael

client/e2e/startup-state.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from "@playwright/test";
+
+// Adjust the URL if your dev server runs on a different port
+const APP_URL = "http://localhost:6274/";
+
+test.describe("Startup State", () => {
+  test("should not navigate to a tab when Inspector first opens", async ({
+    page,
+  }) => {
+    await page.goto(APP_URL);
+
+    // Check that there is no hash fragment in the URL
+    const url = page.url();
+    expect(url).not.toContain("#");
+  });
+});

client/src/__tests__/App.routing.test.tsx

@@ -0,0 +1,208 @@
+import { render, waitFor } from "@testing-library/react";
+import App from "../App";
+import { useConnection } from "../lib/hooks/useConnection";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+
+// Mock auth dependencies first
+jest.mock("@modelcontextprotocol/sdk/client/auth.js", () => ({
+  auth: jest.fn(),
+}));
+
+jest.mock("../lib/oauth-state-machine", () => ({
+  OAuthStateMachine: jest.fn(),
+}));
+
+jest.mock("../lib/auth", () => ({
+  InspectorOAuthClientProvider: jest.fn().mockImplementation(() => ({
+    tokens: jest.fn().mockResolvedValue(null),
+    clear: jest.fn(),
+  })),
+  DebugInspectorOAuthClientProvider: jest.fn(),
+}));
+
+// Mock the config utils
+jest.mock("../utils/configUtils", () => ({
+  ...jest.requireActual("../utils/configUtils"),
+  getMCPProxyAddress: jest.fn(() => "http://localhost:6277"),
+  getMCPProxyAuthToken: jest.fn(() => ({
+    token: "",
+    header: "X-MCP-Proxy-Auth",
+  })),
+  getInitialTransportType: jest.fn(() => "stdio"),
+  getInitialSseUrl: jest.fn(() => "http://localhost:3001/sse"),
+  getInitialCommand: jest.fn(() => "mcp-server-everything"),
+  getInitialArgs: jest.fn(() => ""),
+  initializeInspectorConfig: jest.fn(() => ({})),
+  saveInspectorConfig: jest.fn(),
+}));
+
+// Default connection state is disconnected
+const disconnectedConnectionState = {
+  connectionStatus: "disconnected" as const,
+  serverCapabilities: null,
+  mcpClient: null,
+  requestHistory: [],
+  makeRequest: jest.fn(),
+  sendNotification: jest.fn(),
+  handleCompletion: jest.fn(),
+  completionsSupported: false,
+  connect: jest.fn(),
+  disconnect: jest.fn(),
+};
+
+// Connected state for tests that need an active connection
+const connectedConnectionState = {
+  ...disconnectedConnectionState,
+  connectionStatus: "connected" as const,
+  serverCapabilities: {},
+  mcpClient: {
+    request: jest.fn(),
+    notification: jest.fn(),
+    close: jest.fn(),
+  } as unknown as Client,
+};
+
+// Mock other dependencies
+jest.mock("../lib/hooks/useConnection", () => ({
+  useConnection: jest.fn(() => disconnectedConnectionState),
+}));
+
+jest.mock("../lib/hooks/useDraggablePane", () => ({
+  useDraggablePane: () => ({
+    height: 300,
+    handleDragStart: jest.fn(),
+  }),
+  useDraggableSidebar: () => ({
+    width: 320,
+    isDragging: false,
+    handleDragStart: jest.fn(),
+  }),
+}));
+
+jest.mock("../components/Sidebar", () => ({
+  __esModule: true,
+  default: () => <div>Sidebar</div>,
+}));
+
+// Mock fetch
+global.fetch = jest.fn().mockResolvedValue({ json: () => Promise.resolve({}) });
+
+// Mock window.location and window.history using Object.defineProperty
+const mockHistory = { replaceState: jest.fn() };
+
+// Store original values for cleanup
+const originalLocation = window.location;
+const originalHistory = window.history;
+
+// Set up location mock using Object.defineProperty to avoid TypeScript issues
+Object.defineProperty(window, "location", {
+  writable: true,
+  configurable: true,
+  value: {
+    ...originalLocation,
+    hash: "",
+    pathname: "/",
+    search: "",
+  },
+});
+
+Object.defineProperty(window, "history", {
+  writable: true,
+  configurable: true,
+  value: {
+    ...originalHistory,
+    replaceState: mockHistory.replaceState,
+  },
+});
+
+describe("App - URL Fragment Routing", () => {
+  const mockUseConnection = jest.mocked(useConnection);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.location.hash = "";
+    // Override default to connected state, with capabilities for routing tests
+    mockUseConnection.mockReturnValue({
+      ...connectedConnectionState,
+      serverCapabilities: { resources: { listChanged: true, subscribe: true } },
+    });
+  });
+
+  afterAll(() => {
+    // Restore original window properties
+    Object.defineProperty(window, "location", {
+      configurable: true,
+      value: originalLocation,
+    });
+    Object.defineProperty(window, "history", {
+      configurable: true,
+      value: originalHistory,
+    });
+  });
+
+  test("sets default hash based on server capabilities priority", async () => {
+    // Tab priority follows UI order: Resources | Prompts | Tools | Ping | Sampling | Roots | Auth
+    // Server capabilities determine the first 3 tabs; if none are present, falls back to Ping
+    const testCases = [
+      {
+        capabilities: { resources: { listChanged: true, subscribe: true } },
+        expected: "resources",
+      },
+      {
+        capabilities: { prompts: { listChanged: true, subscribe: true } },
+        expected: "prompts",
+      },
+      {
+        capabilities: { tools: { listChanged: true, subscribe: true } },
+        expected: "tools",
+      },
+      { capabilities: {}, expected: "ping" }, // No server capabilities - falls back to Ping
+    ];
+
+    for (const { capabilities, expected } of testCases) {
+      window.location.hash = "";
+      mockUseConnection.mockImplementationOnce(() => ({
+        ...connectedConnectionState,
+        serverCapabilities: capabilities,
+      }));
+
+      render(<App />);
+
+      await waitFor(() => {
+        expect(window.location.hash).toBe(expected);
+      });
+    }
+  });
+
+  test("does not set hash when disconnected", async () => {
+    window.location.hash = "";
+    mockUseConnection.mockImplementationOnce(() => disconnectedConnectionState);
+
+    render(<App />);
+
+    await waitFor(() => {
+      expect(window.location.hash).toBe("");
+    });
+  });
+
+  test("clears hash when disconnected", async () => {
+    window.location.hash = "";
+
+    // Start connected - use default connected state
+    const { rerender } = render(<App />);
+
+    // Should set hash to resources (from default mock)
+    await waitFor(() => {
+      expect(window.location.hash).toBe("resources");
+    });
+
+    // Now disconnect
+    mockUseConnection.mockImplementationOnce(() => disconnectedConnectionState);
+    rerender(<App />);
+
+    // Should clear the hash
+    await waitFor(() => {
+      expect(mockHistory.replaceState).toHaveBeenCalledWith(null, "", "/");
+    });
+  });
+});