OpenHands/frontend/__tests__/routes/llm-settings.test.tsx

import { render, screen, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import LlmSettingsScreen from "#/routes/llm-settings";
import SettingsService from "#/settings-service/settings-service.api";
import OptionService from "#/api/option-service/option-service.api";
import {
  MOCK_DEFAULT_USER_SETTINGS,
  resetTestHandlersMockSettings,
} from "#/mocks/handlers";
import * as AdvancedSettingsUtlls from "#/utils/has-advanced-settings-set";
import * as ToastHandlers from "#/utils/custom-toast-handlers";
import BillingService from "#/api/billing-service/billing-service.api";

// Mock react-router hooks
const mockUseSearchParams = vi.fn();
vi.mock("react-router", () => ({
  useSearchParams: () => mockUseSearchParams(),
}));

// Mock useIsAuthed hook
const mockUseIsAuthed = vi.fn();
vi.mock("#/hooks/query/use-is-authed", () => ({
  useIsAuthed: () => mockUseIsAuthed(),
}));

// Mock useIsAllHandsSaaSEnvironment hook
const mockUseIsAllHandsSaaSEnvironment = vi.fn();
vi.mock("#/hooks/use-is-all-hands-saas-environment", () => ({
  useIsAllHandsSaaSEnvironment: () => mockUseIsAllHandsSaaSEnvironment(),
}));

const renderLlmSettingsScreen = () =>
  render(<LlmSettingsScreen />, {
    wrapper: ({ children }) => (
      <QueryClientProvider client={new QueryClient()}>
        {children}
      </QueryClientProvider>
    ),
  });

beforeEach(() => {
  vi.resetAllMocks();
  resetTestHandlersMockSettings();

  // Default mock for useSearchParams - returns empty params
  mockUseSearchParams.mockReturnValue([
    {
      get: () => null,
    },
    vi.fn(),
  ]);

  // Default mock for useIsAuthed - returns authenticated by default
  mockUseIsAuthed.mockReturnValue({ data: true, isLoading: false });

  // Default mock for useIsAllHandsSaaSEnvironment - returns true for SaaS environment
  mockUseIsAllHandsSaaSEnvironment.mockReturnValue(true);
});

describe("Content", () => {
  describe("Basic form", () => {
    it("should render the basic form by default", async () => {
      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      const basicFom = screen.getByTestId("llm-settings-form-basic");
      within(basicFom).getByTestId("llm-provider-input");
      within(basicFom).getByTestId("llm-model-input");
      within(basicFom).getByTestId("llm-api-key-input");
      within(basicFom).getByTestId("llm-api-key-help-anchor");
    });

    it("should render the default values if non exist", async () => {
      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      const provider = screen.getByTestId("llm-provider-input");
      const model = screen.getByTestId("llm-model-input");
      const apiKey = screen.getByTestId("llm-api-key-input");

      await waitFor(() => {
        expect(provider).toHaveValue("OpenHands");
        expect(model).toHaveValue("claude-sonnet-4-20250514");

        expect(apiKey).toHaveValue("");
        expect(apiKey).toHaveProperty("placeholder", "");
      });
    });

    it("should render the existing settings values", async () => {
      const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
      getSettingsSpy.mockResolvedValue({
        ...MOCK_DEFAULT_USER_SETTINGS,
        llm_model: "openai/gpt-4o",
        llm_api_key_set: true,
      });

      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      const provider = screen.getByTestId("llm-provider-input");
      const model = screen.getByTestId("llm-model-input");
      const apiKey = screen.getByTestId("llm-api-key-input");

      await waitFor(() => {
        expect(provider).toHaveValue("OpenAI");
        expect(model).toHaveValue("gpt-4o");

        expect(apiKey).toHaveValue("");
        expect(apiKey).toHaveProperty("placeholder", "<hidden>");
        expect(screen.getByTestId("set-indicator")).toBeInTheDocument();
      });
    });
  });

  describe("Advanced form", () => {
    it("should conditionally show security analyzer based on confirmation mode", async () => {
      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      // Enable advanced mode first
      const advancedSwitch = screen.getByTestId("advanced-settings-switch");
      await userEvent.click(advancedSwitch);

      const confirmation = screen.getByTestId(
        "enable-confirmation-mode-switch",
      );

      // Initially confirmation mode is false, so security analyzer should not be visible
      expect(confirmation).not.toBeChecked();
      expect(
        screen.queryByTestId("security-analyzer-input"),
      ).not.toBeInTheDocument();

      // Enable confirmation mode
      await userEvent.click(confirmation);
      expect(confirmation).toBeChecked();

      // Security analyzer should now be visible
      screen.getByTestId("security-analyzer-input");

      // Disable confirmation mode again
      await userEvent.click(confirmation);
      expect(confirmation).not.toBeChecked();

      // Security analyzer should be hidden again
      expect(
        screen.queryByTestId("security-analyzer-input"),
      ).not.toBeInTheDocument();
    });

    it("should render the advanced form if the switch is toggled", async () => {
      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      const advancedSwitch = screen.getByTestId("advanced-settings-switch");
      const basicForm = screen.getByTestId("llm-settings-form-basic");

      expect(
        screen.queryByTestId("llm-settings-form-advanced"),
      ).not.toBeInTheDocument();
      expect(basicForm).toBeInTheDocument();

      await userEvent.click(advancedSwitch);

      expect(
        screen.queryByTestId("llm-settings-form-advanced"),
      ).toBeInTheDocument();
      expect(basicForm).not.toBeInTheDocument();

      const advancedForm = screen.getByTestId("llm-settings-form-advanced");
      within(advancedForm).getByTestId("llm-custom-model-input");
      within(advancedForm).getByTestId("base-url-input");
      within(advancedForm).getByTestId("llm-api-key-input");
      within(advancedForm).getByTestId("llm-api-key-help-anchor-advanced");
      within(advancedForm).getByTestId("agent-input");
      within(advancedForm).getByTestId("enable-memory-condenser-switch");

      await userEvent.click(advancedSwitch);
      expect(
        screen.queryByTestId("llm-settings-form-advanced"),
      ).not.toBeInTheDocument();
      expect(screen.getByTestId("llm-settings-form-basic")).toBeInTheDocument();
    });

    it("should render the default advanced settings", async () => {
      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      const advancedSwitch = screen.getByTestId("advanced-settings-switch");
      expect(advancedSwitch).not.toBeChecked();

      await userEvent.click(advancedSwitch);

      const model = screen.getByTestId("llm-custom-model-input");
      const baseUrl = screen.getByTestId("base-url-input");
      const apiKey = screen.getByTestId("llm-api-key-input");
      const agent = screen.getByTestId("agent-input");
      const condensor = screen.getByTestId("enable-memory-condenser-switch");

      expect(model).toHaveValue("openhands/claude-sonnet-4-20250514");
      expect(baseUrl).toHaveValue("");
      expect(apiKey).toHaveValue("");
      expect(apiKey).toHaveProperty("placeholder", "");
      expect(agent).toHaveValue("CodeActAgent");
      expect(condensor).toBeChecked();
    });

    it("should render the advanced form if existings settings are advanced", async () => {
      const hasAdvancedSettingsSetSpy = vi.spyOn(
        AdvancedSettingsUtlls,
        "hasAdvancedSettingsSet",
      );
      hasAdvancedSettingsSetSpy.mockReturnValue(true);

      renderLlmSettingsScreen();

      await waitFor(() => {
        const advancedSwitch = screen.getByTestId("advanced-settings-switch");
        expect(advancedSwitch).toBeChecked();
        screen.getByTestId("llm-settings-form-advanced");
      });
    });

    it("should render existing advanced settings correctly", async () => {
      const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
      getSettingsSpy.mockResolvedValue({
        ...MOCK_DEFAULT_USER_SETTINGS,
        llm_model: "openai/gpt-4o",
        llm_base_url: "https://api.openai.com/v1/chat/completions",
        llm_api_key_set: true,
        agent: "CoActAgent",
        confirmation_mode: true,
        enable_default_condenser: false,
        security_analyzer: "none",
      });

      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      const model = screen.getByTestId("llm-custom-model-input");
      const baseUrl = screen.getByTestId("base-url-input");
      const apiKey = screen.getByTestId("llm-api-key-input");
      const agent = screen.getByTestId("agent-input");
      const confirmation = screen.getByTestId(
        "enable-confirmation-mode-switch",
      );
      const condensor = screen.getByTestId("enable-memory-condenser-switch");
      const securityAnalyzer = screen.getByTestId("security-analyzer-input");

      await waitFor(() => {
        expect(model).toHaveValue("openai/gpt-4o");
        expect(baseUrl).toHaveValue(
          "https://api.openai.com/v1/chat/completions",
        );
        expect(apiKey).toHaveValue("");
        expect(apiKey).toHaveProperty("placeholder", "<hidden>");
        expect(agent).toHaveValue("CoActAgent");
        expect(confirmation).toBeChecked();
        expect(condensor).not.toBeChecked();
        expect(securityAnalyzer).toHaveValue("SETTINGS$SECURITY_ANALYZER_NONE");
      });
    });
  });

  it.todo("should render an indicator if the llm api key is set");
});

describe("Form submission", () => {
  it("should submit the basic form with the correct values", async () => {
    const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");

    renderLlmSettingsScreen();
    await screen.findByTestId("llm-settings-screen");

    const provider = screen.getByTestId("llm-provider-input");
    const model = screen.getByTestId("llm-model-input");
    const apiKey = screen.getByTestId("llm-api-key-input");

    // select provider
    await userEvent.click(provider);
    const providerOption = screen.getByText("OpenAI");
    await userEvent.click(providerOption);
    expect(provider).toHaveValue("OpenAI");

    // enter api key
    await userEvent.type(apiKey, "test-api-key");

    // select model
    await userEvent.click(model);
    const modelOption = screen.getByText("gpt-4o");
    await userEvent.click(modelOption);
    expect(model).toHaveValue("gpt-4o");

    const submitButton = screen.getByTestId("submit-button");
    await userEvent.click(submitButton);

    expect(saveSettingsSpy).toHaveBeenCalledWith(
      expect.objectContaining({
        llm_model: "openai/gpt-4o",
        llm_api_key: "test-api-key",
      }),
    );
  });

  it("should submit the advanced form with the correct values", async () => {
    const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");

    renderLlmSettingsScreen();
    await screen.findByTestId("llm-settings-screen");

    const advancedSwitch = screen.getByTestId("advanced-settings-switch");
    await userEvent.click(advancedSwitch);

    const model = screen.getByTestId("llm-custom-model-input");
    const baseUrl = screen.getByTestId("base-url-input");
    const apiKey = screen.getByTestId("llm-api-key-input");
    const agent = screen.getByTestId("agent-input");
    const confirmation = screen.getByTestId("enable-confirmation-mode-switch");
    const condensor = screen.getByTestId("enable-memory-condenser-switch");

    // enter custom model
    await userEvent.clear(model);
    await userEvent.type(model, "openai/gpt-4o");
    expect(model).toHaveValue("openai/gpt-4o");

    // enter base url
    await userEvent.type(baseUrl, "https://api.openai.com/v1/chat/completions");
    expect(baseUrl).toHaveValue("https://api.openai.com/v1/chat/completions");

    // enter api key
    await userEvent.type(apiKey, "test-api-key");

    // toggle confirmation mode
    await userEvent.click(confirmation);
    expect(confirmation).toBeChecked();

    // toggle memory condensor
    await userEvent.click(condensor);
    expect(condensor).not.toBeChecked();

    // select agent
    await userEvent.click(agent);
    const agentOption = screen.getByText("CoActAgent");
    await userEvent.click(agentOption);
    expect(agent).toHaveValue("CoActAgent");

    // select security analyzer
    const securityAnalyzer = screen.getByTestId("security-analyzer-input");
    await userEvent.click(securityAnalyzer);
    const securityAnalyzerOption = screen.getByText(
      "SETTINGS$SECURITY_ANALYZER_NONE",
    );
    await userEvent.click(securityAnalyzerOption);

    const submitButton = screen.getByTestId("submit-button");
    await userEvent.click(submitButton);

    expect(saveSettingsSpy).toHaveBeenCalledWith(
      expect.objectContaining({
        llm_model: "openai/gpt-4o",
        llm_base_url: "https://api.openai.com/v1/chat/completions",
        agent: "CoActAgent",
        confirmation_mode: true,
        enable_default_condenser: false,
        security_analyzer: null,
      }),
    );
  });

  it("should disable the button if there are no changes in the basic form", async () => {
    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
    getSettingsSpy.mockResolvedValue({
      ...MOCK_DEFAULT_USER_SETTINGS,
      llm_model: "openai/gpt-4o",
      llm_api_key_set: true,
    });

    renderLlmSettingsScreen();
    await screen.findByTestId("llm-settings-screen");
    screen.getByTestId("llm-settings-form-basic");

    const submitButton = screen.getByTestId("submit-button");
    expect(submitButton).toBeDisabled();

    const model = screen.getByTestId("llm-model-input");
    const apiKey = screen.getByTestId("llm-api-key-input");

    // select model
    await userEvent.click(model);
    const modelOption = screen.getByText("gpt-4o-mini");
    await userEvent.click(modelOption);
    expect(model).toHaveValue("gpt-4o-mini");
    expect(submitButton).not.toBeDisabled();

    // reset model
    await userEvent.click(model);
    const modelOption2 = screen.getByText("gpt-4o");
    await userEvent.click(modelOption2);
    expect(model).toHaveValue("gpt-4o");
    expect(submitButton).toBeDisabled();

    // set api key
    await userEvent.type(apiKey, "test-api-key");
    expect(apiKey).toHaveValue("test-api-key");
    expect(submitButton).not.toBeDisabled();

    // reset api key
    await userEvent.clear(apiKey);
    expect(apiKey).toHaveValue("");
    expect(submitButton).toBeDisabled();
  });

  it("should disable the button if there are no changes in the advanced form", async () => {
    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
    getSettingsSpy.mockResolvedValue({
      ...MOCK_DEFAULT_USER_SETTINGS,
      llm_model: "openai/gpt-4o",
      llm_base_url: "https://api.openai.com/v1/chat/completions",
      llm_api_key_set: true,
      confirmation_mode: true,
    });

    renderLlmSettingsScreen();
    await screen.findByTestId("llm-settings-screen");
    await screen.findByTestId("llm-settings-form-advanced");

    const submitButton = await screen.findByTestId("submit-button");
    expect(submitButton).toBeDisabled();

    const model = await screen.findByTestId("llm-custom-model-input");
    const baseUrl = await screen.findByTestId("base-url-input");
    const apiKey = await screen.findByTestId("llm-api-key-input");
    const agent = await screen.findByTestId("agent-input");
    const condensor = await screen.findByTestId(
      "enable-memory-condenser-switch",
    );

    // Confirmation mode switch is now in basic settings, always visible
    const confirmation = await screen.findByTestId(
      "enable-confirmation-mode-switch",
    );

    // enter custom model
    await userEvent.type(model, "-mini");
    expect(model).toHaveValue("openai/gpt-4o-mini");
    expect(submitButton).not.toBeDisabled();

    // reset model
    await userEvent.clear(model);
    expect(model).toHaveValue("");
    expect(submitButton).toBeDisabled();

    await userEvent.type(model, "openai/gpt-4o");
    expect(model).toHaveValue("openai/gpt-4o");
    expect(submitButton).toBeDisabled();

    // enter base url
    await userEvent.type(baseUrl, "/extra");
    expect(baseUrl).toHaveValue(
      "https://api.openai.com/v1/chat/completions/extra",
    );
    expect(submitButton).not.toBeDisabled();

    await userEvent.clear(baseUrl);
    expect(baseUrl).toHaveValue("");
    expect(submitButton).not.toBeDisabled();

    await userEvent.type(baseUrl, "https://api.openai.com/v1/chat/completions");
    expect(baseUrl).toHaveValue("https://api.openai.com/v1/chat/completions");
    expect(submitButton).toBeDisabled();

    // set api key
    await userEvent.type(apiKey, "test-api-key");
    expect(apiKey).toHaveValue("test-api-key");
    expect(submitButton).not.toBeDisabled();

    // reset api key
    await userEvent.clear(apiKey);
    expect(apiKey).toHaveValue("");
    expect(submitButton).toBeDisabled();

    // set agent
    await userEvent.clear(agent);
    await userEvent.type(agent, "test-agent");
    expect(agent).toHaveValue("test-agent");
    expect(submitButton).not.toBeDisabled();

    // reset agent
    await userEvent.clear(agent);
    expect(agent).toHaveValue("");
    expect(submitButton).toBeDisabled();

    await userEvent.type(agent, "CodeActAgent");
    expect(agent).toHaveValue("CodeActAgent");
    expect(submitButton).toBeDisabled();

    // toggle confirmation mode
    await userEvent.click(confirmation);
    expect(confirmation).not.toBeChecked();
    expect(submitButton).not.toBeDisabled();
    await userEvent.click(confirmation);
    expect(confirmation).toBeChecked();
    expect(submitButton).toBeDisabled();

    // toggle memory condensor
    await userEvent.click(condensor);
    expect(condensor).not.toBeChecked();
    expect(submitButton).not.toBeDisabled();
    await userEvent.click(condensor);
    expect(condensor).toBeChecked();
    expect(submitButton).toBeDisabled();

    // select security analyzer
    const securityAnalyzer = await screen.findByTestId(
      "security-analyzer-input",
    );
    await userEvent.click(securityAnalyzer);
    const securityAnalyzerOption = screen.getByText(
      "SETTINGS$SECURITY_ANALYZER_NONE",
    );
    await userEvent.click(securityAnalyzerOption);
    expect(securityAnalyzer).toHaveValue("SETTINGS$SECURITY_ANALYZER_NONE");

    expect(submitButton).not.toBeDisabled();

    // revert back to original value
    await userEvent.click(securityAnalyzer);
    const originalSecurityAnalyzerOption = screen.getByText(
      "SETTINGS$SECURITY_ANALYZER_LLM_DEFAULT",
    );
    await userEvent.click(originalSecurityAnalyzerOption);
    expect(securityAnalyzer).toHaveValue(
      "SETTINGS$SECURITY_ANALYZER_LLM_DEFAULT",
    );
    expect(submitButton).toBeDisabled();
  });

  it("should reset button state when switching between forms", async () => {
    renderLlmSettingsScreen();
    await screen.findByTestId("llm-settings-screen");

    const advancedSwitch = screen.getByTestId("advanced-settings-switch");
    const submitButton = screen.getByTestId("submit-button");

    expect(submitButton).toBeDisabled();

    // dirty the basic form
    const apiKey = screen.getByTestId("llm-api-key-input");
    await userEvent.type(apiKey, "test-api-key");
    expect(submitButton).not.toBeDisabled();

    await userEvent.click(advancedSwitch);
    expect(submitButton).toBeDisabled();

    // dirty the advanced form
    const model = screen.getByTestId("llm-custom-model-input");
    await userEvent.type(model, "openai/gpt-4o");
    expect(submitButton).not.toBeDisabled();

    await userEvent.click(advancedSwitch);
    expect(submitButton).toBeDisabled();
  });

  // flaky test
  it.skip("should disable the button when submitting changes", async () => {
    const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");

    renderLlmSettingsScreen();
    await screen.findByTestId("llm-settings-screen");

    const apiKey = screen.getByTestId("llm-api-key-input");
    await userEvent.type(apiKey, "test-api-key");

    const submitButton = screen.getByTestId("submit-button");
    await userEvent.click(submitButton);

    expect(saveSettingsSpy).toHaveBeenCalledWith(
      expect.objectContaining({
        llm_api_key: "test-api-key",
      }),
    );

    expect(submitButton).toHaveTextContent("Saving...");
    expect(submitButton).toBeDisabled();

    await waitFor(() => {
      expect(submitButton).toHaveTextContent("Save");
      expect(submitButton).toBeDisabled();
    });
  });

  it("should clear advanced settings when saving basic settings", async () => {
    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
    getSettingsSpy.mockResolvedValue({
      ...MOCK_DEFAULT_USER_SETTINGS,
      llm_model: "openai/gpt-4o",
      llm_base_url: "https://api.openai.com/v1/chat/completions",
      llm_api_key_set: true,
      confirmation_mode: true,
    });
    const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
    renderLlmSettingsScreen();

    await screen.findByTestId("llm-settings-screen");
    const advancedSwitch = screen.getByTestId("advanced-settings-switch");
    await userEvent.click(advancedSwitch);

    const provider = screen.getByTestId("llm-provider-input");
    const model = screen.getByTestId("llm-model-input");

    // select provider
    await userEvent.click(provider);
    const providerOption = screen.getByText("OpenHands");
    await userEvent.click(providerOption);

    // select model
    await userEvent.click(model);
    const modelOption = screen.getByText("claude-sonnet-4-20250514");
    await userEvent.click(modelOption);

    const submitButton = screen.getByTestId("submit-button");
    await userEvent.click(submitButton);

    expect(saveSettingsSpy).toHaveBeenCalledWith(
      expect.objectContaining({
        llm_model: "openhands/claude-sonnet-4-20250514",
        llm_base_url: "",
        confirmation_mode: false, // Confirmation mode is now an advanced setting, should be cleared when saving basic settings
      }),
    );
  });
});

describe("Status toasts", () => {
  describe("Basic form", () => {
    it("should call displaySuccessToast when the settings are saved", async () => {
      const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");

      const displaySuccessToastSpy = vi.spyOn(
        ToastHandlers,
        "displaySuccessToast",
      );

      renderLlmSettingsScreen();

      // Toggle setting to change
      const apiKeyInput = await screen.findByTestId("llm-api-key-input");
      await userEvent.type(apiKeyInput, "test-api-key");

      const submit = await screen.findByTestId("submit-button");
      await userEvent.click(submit);

      expect(saveSettingsSpy).toHaveBeenCalled();
      await waitFor(() => expect(displaySuccessToastSpy).toHaveBeenCalled());
    });

    it("should call displayErrorToast when the settings fail to save", async () => {
      const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");

      const displayErrorToastSpy = vi.spyOn(ToastHandlers, "displayErrorToast");

      saveSettingsSpy.mockRejectedValue(new Error("Failed to save settings"));

      renderLlmSettingsScreen();

      // Toggle setting to change
      const apiKeyInput = await screen.findByTestId("llm-api-key-input");
      await userEvent.type(apiKeyInput, "test-api-key");

      const submit = await screen.findByTestId("submit-button");
      await userEvent.click(submit);

      expect(saveSettingsSpy).toHaveBeenCalled();
      expect(displayErrorToastSpy).toHaveBeenCalled();
    });
  });

  describe("Advanced form", () => {
    it("should call displaySuccessToast when the settings are saved", async () => {
      const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");

      const displaySuccessToastSpy = vi.spyOn(
        ToastHandlers,
        "displaySuccessToast",
      );

      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      const advancedSwitch = screen.getByTestId("advanced-settings-switch");
      await userEvent.click(advancedSwitch);
      await screen.findByTestId("llm-settings-form-advanced");

      // Toggle setting to change
      const apiKeyInput = await screen.findByTestId("llm-api-key-input");
      await userEvent.type(apiKeyInput, "test-api-key");

      const submit = await screen.findByTestId("submit-button");
      await userEvent.click(submit);

      expect(saveSettingsSpy).toHaveBeenCalled();
      await waitFor(() => expect(displaySuccessToastSpy).toHaveBeenCalled());
    });

    it("should call displayErrorToast when the settings fail to save", async () => {
      const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");

      const displayErrorToastSpy = vi.spyOn(ToastHandlers, "displayErrorToast");

      saveSettingsSpy.mockRejectedValue(new Error("Failed to save settings"));

      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      const advancedSwitch = screen.getByTestId("advanced-settings-switch");
      await userEvent.click(advancedSwitch);
      await screen.findByTestId("llm-settings-form-advanced");

      // Toggle setting to change
      const apiKeyInput = await screen.findByTestId("llm-api-key-input");
      await userEvent.type(apiKeyInput, "test-api-key");

      const submit = await screen.findByTestId("submit-button");
      await userEvent.click(submit);

      expect(saveSettingsSpy).toHaveBeenCalled();
      expect(displayErrorToastSpy).toHaveBeenCalled();
    });
  });
});

describe("SaaS mode", () => {
  describe("SaaS subscription", () => {
    // Common mock configurations
    const MOCK_SAAS_CONFIG = {
      APP_MODE: "saas" as const,
      GITHUB_CLIENT_ID: "fake-github-client-id",
      POSTHOG_CLIENT_KEY: "fake-posthog-client-key",
      FEATURE_FLAGS: {
        ENABLE_BILLING: true,
        HIDE_LLM_SETTINGS: false,
        ENABLE_JIRA: false,
        ENABLE_JIRA_DC: false,
        ENABLE_LINEAR: false,
      },
    };

    const MOCK_ACTIVE_SUBSCRIPTION = {
      start_at: "2024-01-01",
      end_at: "2024-12-31",
      created_at: "2024-01-01",
    };

    it("should show upgrade banner and prevent all interactions for unsubscribed SaaS users", async () => {
      // Mock SaaS mode without subscription
      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);

      // Mock subscription access to return null (no subscription)
      const getSubscriptionAccessSpy = vi.spyOn(
        BillingService,
        "getSubscriptionAccess",
      );
      getSubscriptionAccessSpy.mockResolvedValue(null);

      // Mock saveSettings to ensure it's not called
      const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");

      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      // Should show upgrade banner
      expect(screen.getByTestId("upgrade-banner")).toBeInTheDocument();

      // Should have a clickable upgrade button
      const upgradeButton = screen.getByRole("button", { name: /upgrade/i });
      expect(upgradeButton).toBeInTheDocument();
      expect(upgradeButton).not.toBeDisabled();

      // Form should be disabled
      const form = screen.getByTestId("llm-settings-form-basic");
      expect(form).toHaveAttribute("aria-disabled", "true");

      // All form inputs should be disabled or non-interactive
      const providerInput = screen.getByTestId("llm-provider-input");
      const modelInput = screen.getByTestId("llm-model-input");
      const apiKeyInput = screen.getByTestId("llm-api-key-input");
      const advancedSwitch = screen.getByTestId("advanced-settings-switch");
      const submitButton = screen.getByTestId("submit-button");

      // Inputs should be disabled
      expect(providerInput).toBeDisabled();
      expect(modelInput).toBeDisabled();
      expect(apiKeyInput).toBeDisabled();
      expect(advancedSwitch).toBeDisabled();
      expect(submitButton).toBeDisabled();

      // Confirmation mode switch is in advanced view, so it's not visible in basic view
      expect(
        screen.queryByTestId("enable-confirmation-mode-switch"),
      ).not.toBeInTheDocument();

      // Try to interact with inputs - they should not respond
      await userEvent.click(providerInput);
      await userEvent.type(apiKeyInput, "test-key");

      // Values should not change
      expect(apiKeyInput).toHaveValue("");

      // Try to submit form - should not call API
      await userEvent.click(submitButton);
      expect(saveSettingsSpy).not.toHaveBeenCalled();
    });

    it("should call subscription checkout API when upgrade button is clicked", async () => {
      // Mock SaaS mode without subscription
      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);

      // Mock subscription access to return null (no subscription)
      const getSubscriptionAccessSpy = vi.spyOn(
        BillingService,
        "getSubscriptionAccess",
      );
      getSubscriptionAccessSpy.mockResolvedValue(null);

      // Mock the subscription checkout API call
      const createSubscriptionCheckoutSessionSpy = vi.spyOn(
        BillingService,
        "createSubscriptionCheckoutSession",
      );
      createSubscriptionCheckoutSessionSpy.mockResolvedValue({});

      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      // Click the upgrade button
      const upgradeButton = screen.getByRole("button", { name: /upgrade/i });
      await userEvent.click(upgradeButton);

      // Should call the subscription checkout API
      expect(createSubscriptionCheckoutSessionSpy).toHaveBeenCalled();
    });

    it("should disable upgrade button for unauthenticated users in SaaS mode", async () => {
      // Mock SaaS mode without subscription
      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);

      // Mock subscription access to return null (no subscription)
      const getSubscriptionAccessSpy = vi.spyOn(
        BillingService,
        "getSubscriptionAccess",
      );
      getSubscriptionAccessSpy.mockResolvedValue(null);

      // Mock subscription checkout API
      const createSubscriptionCheckoutSessionSpy = vi.spyOn(
        BillingService,
        "createSubscriptionCheckoutSession",
      );

      // Mock authentication to return false (unauthenticated) from the start
      mockUseIsAuthed.mockReturnValue({ data: false, isLoading: false });

      // Mock settings to return default settings even when unauthenticated
      // This is necessary because the useSettings hook is disabled when user is not authenticated
      const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
      getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);

      renderLlmSettingsScreen();

      // Wait for either the settings screen or skeleton to appear
      await waitFor(() => {
        const settingsScreen = screen.queryByTestId("llm-settings-screen");
        const skeleton = screen.queryByTestId("app-settings-skeleton");
        expect(settingsScreen || skeleton).toBeInTheDocument();
      });

      // If we get the skeleton, the test scenario isn't valid - skip the rest
      if (screen.queryByTestId("app-settings-skeleton")) {
        // For unauthenticated users, the settings don't load, so no upgrade banner is shown
        // This is the expected behavior - unauthenticated users see a skeleton loading state
        expect(screen.queryByTestId("upgrade-banner")).not.toBeInTheDocument();
        return;
      }

      await screen.findByTestId("llm-settings-screen");

      // Should show upgrade banner
      expect(screen.getByTestId("upgrade-banner")).toBeInTheDocument();

      // Upgrade button should be disabled for unauthenticated users
      const upgradeButton = screen.getByRole("button", { name: /upgrade/i });
      expect(upgradeButton).toBeInTheDocument();
      expect(upgradeButton).toBeDisabled();

      // Clicking disabled button should not call the API
      await userEvent.click(upgradeButton);
      expect(createSubscriptionCheckoutSessionSpy).not.toHaveBeenCalled();
    });

    it("should not show upgrade banner and allow form interaction for subscribed SaaS users", async () => {
      // Mock SaaS mode with subscription
      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);

      // Mock subscription access to return active subscription
      const getSubscriptionAccessSpy = vi.spyOn(
        BillingService,
        "getSubscriptionAccess",
      );
      getSubscriptionAccessSpy.mockResolvedValue(MOCK_ACTIVE_SUBSCRIPTION);

      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      // Wait for subscription data to load
      await waitFor(() => {
        expect(getSubscriptionAccessSpy).toHaveBeenCalled();
      });

      // Should NOT show upgrade banner
      expect(screen.queryByTestId("upgrade-banner")).not.toBeInTheDocument();

      // Form should NOT be disabled
      const form = screen.getByTestId("llm-settings-form-basic");
      expect(form).not.toHaveAttribute("aria-disabled", "true");
    });

    it("should not call save settings API when making changes in disabled form for unsubscribed users", async () => {
      // Mock SaaS mode without subscription
      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);

      // Mock subscription access to return null (no subscription)
      const getSubscriptionAccessSpy = vi.spyOn(
        BillingService,
        "getSubscriptionAccess",
      );
      getSubscriptionAccessSpy.mockResolvedValue(null);

      // Mock saveSettings to track calls
      const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");

      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      // Verify that basic form elements are disabled for unsubscribed users
      const advancedSwitch = screen.getByTestId("advanced-settings-switch");
      const submitButton = screen.getByTestId("submit-button");

      expect(advancedSwitch).toBeDisabled();
      expect(submitButton).toBeDisabled();

      // Confirmation mode switch is in advanced view, which can't be accessed when form is disabled
      expect(
        screen.queryByTestId("enable-confirmation-mode-switch"),
      ).not.toBeInTheDocument();

      // Try to submit the form - button should remain disabled
      await userEvent.click(submitButton);

      // Should NOT call save settings API for unsubscribed users
      expect(saveSettingsSpy).not.toHaveBeenCalled();
    });

    it("should show backdrop overlay for unsubscribed users", async () => {
      // Mock SaaS mode without subscription
      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);

      // Mock subscription access to return null (no subscription)
      const getSubscriptionAccessSpy = vi.spyOn(
        BillingService,
        "getSubscriptionAccess",
      );
      getSubscriptionAccessSpy.mockResolvedValue(null);

      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      // Wait for subscription data to load
      await waitFor(() => {
        expect(getSubscriptionAccessSpy).toHaveBeenCalled();
      });

      // Should show upgrade banner
      expect(screen.getByTestId("upgrade-banner")).toBeInTheDocument();

      // Should show backdrop overlay
      const backdrop = screen.getByTestId("settings-backdrop");
      expect(backdrop).toBeInTheDocument();
    });

    it("should not show backdrop overlay for subscribed users", async () => {
      // Mock SaaS mode with subscription
      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);

      // Mock subscription access to return active subscription
      const getSubscriptionAccessSpy = vi.spyOn(
        BillingService,
        "getSubscriptionAccess",
      );
      getSubscriptionAccessSpy.mockResolvedValue(MOCK_ACTIVE_SUBSCRIPTION);

      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      // Wait for subscription data to load
      await waitFor(() => {
        expect(getSubscriptionAccessSpy).toHaveBeenCalled();
      });

      // Should NOT show backdrop overlay
      expect(screen.queryByTestId("settings-backdrop")).not.toBeInTheDocument();
    });

    it("should display success toast when redirected back with ?checkout=success parameter", async () => {
      // Mock SaaS mode
      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);

      // Mock subscription access
      const getSubscriptionAccessSpy = vi.spyOn(
        BillingService,
        "getSubscriptionAccess",
      );
      getSubscriptionAccessSpy.mockResolvedValue(MOCK_ACTIVE_SUBSCRIPTION);

      // Mock toast handler
      const displaySuccessToastSpy = vi.spyOn(
        ToastHandlers,
        "displaySuccessToast",
      );

      // Mock URL search params with ?checkout=success
      mockUseSearchParams.mockReturnValue([
        {
          get: (param: string) => (param === "checkout" ? "success" : null),
        },
        vi.fn(),
      ]);

      // Render component with checkout=success parameter
      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      // Verify success toast is displayed with correct message
      expect(displaySuccessToastSpy).toHaveBeenCalledWith(
        "SUBSCRIPTION$SUCCESS",
      );
    });

    it("should display error toast when redirected back with ?checkout=cancel parameter", async () => {
      // Mock SaaS mode
      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);

      // Mock subscription access
      const getSubscriptionAccessSpy = vi.spyOn(
        BillingService,
        "getSubscriptionAccess",
      );
      getSubscriptionAccessSpy.mockResolvedValue(MOCK_ACTIVE_SUBSCRIPTION);

      // Mock toast handler
      const displayErrorToastSpy = vi.spyOn(ToastHandlers, "displayErrorToast");

      // Mock URL search params with ?checkout=cancel
      mockUseSearchParams.mockReturnValue([
        {
          get: (param: string) => (param === "checkout" ? "cancel" : null),
        },
        vi.fn(),
      ]);

      // Render component with checkout=cancel parameter
      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      // Verify error toast is displayed with correct message
      expect(displayErrorToastSpy).toHaveBeenCalledWith("SUBSCRIPTION$FAILURE");
    });

    it("should show upgrade banner when subscription is expired or disabled", async () => {
      // Mock SaaS mode
      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);

      // Mock subscription access to return null (expired/disabled subscriptions return null from backend)
      // The backend only returns active subscriptions within their validity period
      const getSubscriptionAccessSpy = vi.spyOn(
        BillingService,
        "getSubscriptionAccess",
      );
      getSubscriptionAccessSpy.mockResolvedValue(null);

      renderLlmSettingsScreen();
      await screen.findByTestId("llm-settings-screen");

      // Wait for subscription data to load
      await waitFor(() => {
        expect(getSubscriptionAccessSpy).toHaveBeenCalled();
      });

      // Should show upgrade banner for expired/disabled subscriptions (when API returns null)
      expect(screen.getByTestId("upgrade-banner")).toBeInTheDocument();

      // Form should be disabled
      const form = screen.getByTestId("llm-settings-form-basic");
      expect(form).toHaveAttribute("aria-disabled", "true");

      // All form inputs should be disabled
      const providerInput = screen.getByTestId("llm-provider-input");
      const modelInput = screen.getByTestId("llm-model-input");
      const apiKeyInput = screen.getByTestId("llm-api-key-input");
      const advancedSwitch = screen.getByTestId("advanced-settings-switch");

      expect(providerInput).toBeDisabled();
      expect(modelInput).toBeDisabled();
      expect(apiKeyInput).toBeDisabled();
      expect(advancedSwitch).toBeDisabled();

      // Confirmation mode switch is in advanced view, which can't be accessed when form is disabled
      expect(
        screen.queryByTestId("enable-confirmation-mode-switch"),
      ).not.toBeInTheDocument();
    });
  });
});