test(components): add per-section tests for SettingsTab extractions

Add focused unit tests for ModelSection, ContextWindowSection,
SemanticSearchSection, KbSection, AdvancedSearchSection,
VariablesSection, and JiraSection. Each test mocks only the props
that section needs. The omnibus SettingsTab.test.tsx remains as the
integration suite exercising cross-section flows.

Author: saagar210

src/components/Settings/sections/AdvancedSearchSection.test.tsx

@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AdvancedSearchSection } from "./AdvancedSearchSection";
+
+describe("AdvancedSearchSection", () => {
+  afterEach(() => cleanup());
+
+  it("renders the vector toggle reflecting the current enabled state", () => {
+    render(
+      <AdvancedSearchSection vectorEnabled={true} onVectorToggle={vi.fn()} />,
+    );
+
+    const toggle = screen.getByLabelText(
+      "Enable vector embeddings",
+    ) as HTMLInputElement;
+    expect(toggle.checked).toBe(true);
+  });
+
+  it("calls onVectorToggle when the checkbox flips", () => {
+    const onVectorToggle = vi.fn();
+    render(
+      <AdvancedSearchSection
+        vectorEnabled={false}
+        onVectorToggle={onVectorToggle}
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText("Enable vector embeddings"));
+    expect(onVectorToggle).toHaveBeenCalledTimes(1);
+  });
+});

src/components/Settings/sections/ContextWindowSection.test.tsx

@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ContextWindowSection } from "./ContextWindowSection";
+
+describe("ContextWindowSection", () => {
+  afterEach(() => cleanup());
+
+  it("disables the select and shows the note when no model is loaded", () => {
+    render(
+      <ContextWindowSection
+        loadedModel={null}
+        contextWindowSize={null}
+        onContextWindowChange={vi.fn()}
+      />,
+    );
+
+    const select = screen.getByLabelText(
+      "Context window size",
+    ) as HTMLSelectElement;
+    expect(select.disabled).toBe(true);
+    expect(
+      screen.getByText("Load a model to configure context window."),
+    ).toBeTruthy();
+  });
+
+  it("invokes onContextWindowChange with the new value when a size is selected", () => {
+    const onContextWindowChange = vi.fn();
+    render(
+      <ContextWindowSection
+        loadedModel="llama-3.1-8b-instruct"
+        contextWindowSize={4096}
+        onContextWindowChange={onContextWindowChange}
+      />,
+    );
+
+    fireEvent.change(screen.getByLabelText("Context window size"), {
+      target: { value: "8192" },
+    });
+    expect(onContextWindowChange).toHaveBeenCalledWith("8192");
+  });
+});

src/components/Settings/sections/JiraSection.test.tsx

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { JiraSection } from "./JiraSection";
+
+describe("JiraSection", () => {
+  afterEach(() => cleanup());
+
+  it("submits the form with the entered credentials when not configured", async () => {
+    const onJiraConnect = vi.fn().mockResolvedValue(undefined);
+    render(
+      <JiraSection
+        jiraConfigured={false}
+        jiraConfig={null}
+        jiraLoading={false}
+        onJiraConnect={onJiraConnect}
+        onJiraDisconnect={vi.fn()}
+      />,
+    );
+
+    fireEvent.change(screen.getByLabelText("Jira URL"), {
+      target: { value: "https://example.atlassian.net" },
+    });
+    fireEvent.change(screen.getByLabelText("Email"), {
+      target: { value: "dev@example.com" },
+    });
+    fireEvent.change(screen.getByLabelText("API Token"), {
+      target: { value: "secret-token" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Connect" }));
+
+    await waitFor(() =>
+      expect(onJiraConnect).toHaveBeenCalledWith(
+        "https://example.atlassian.net",
+        "dev@example.com",
+        "secret-token",
+      ),
+    );
+  });
+
+  it("renders the connected state and triggers disconnect when Disconnect is clicked", () => {
+    const onJiraDisconnect = vi.fn();
+    render(
+      <JiraSection
+        jiraConfigured={true}
+        jiraConfig={{
+          base_url: "https://example.atlassian.net",
+          email: "dev@example.com",
+        }}
+        jiraLoading={false}
+        onJiraConnect={vi.fn()}
+        onJiraDisconnect={onJiraDisconnect}
+      />,
+    );
+
+    expect(
+      screen.getByText("Connected to https://example.atlassian.net"),
+    ).toBeTruthy();
+    expect(screen.getByText("Account: dev@example.com")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Disconnect" }));
+    expect(onJiraDisconnect).toHaveBeenCalledTimes(1);
+  });
+});

src/components/Settings/sections/KbSection.test.tsx

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { KbSection } from "./KbSection";
+
+describe("KbSection", () => {
+  afterEach(() => cleanup());
+
+  it("renders the empty placeholder and Select Folder button when no folder is set", () => {
+    const onSelectKbFolder = vi.fn();
+    render(
+      <KbSection
+        kbFolder={null}
+        indexStats={null}
+        loading={null}
+        onSelectKbFolder={onSelectKbFolder}
+        onRebuildIndex={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("No folder selected")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Select Folder" }));
+    expect(onSelectKbFolder).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows index stats and triggers rebuild when a folder is configured", () => {
+    const onRebuildIndex = vi.fn();
+    render(
+      <KbSection
+        kbFolder="/tmp/kb"
+        indexStats={{ total_chunks: 42, total_files: 7 }}
+        loading={null}
+        onSelectKbFolder={vi.fn()}
+        onRebuildIndex={onRebuildIndex}
+      />,
+    );
+
+    expect(screen.getByText("/tmp/kb")).toBeTruthy();
+    expect(screen.getByText("7")).toBeTruthy();
+    expect(screen.getByText("42")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Rebuild Index" }));
+    expect(onRebuildIndex).toHaveBeenCalledTimes(1);
+  });
+});

src/components/Settings/sections/ModelSection.test.tsx

@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ModelSection } from "./ModelSection";
+
+function renderSection(
+  overrides: Partial<Parameters<typeof ModelSection>[0]> = {},
+) {
+  const defaults = {
+    loadedModel: null as string | null,
+    loadedModelInfo: null,
+    downloadedModels: [] as string[],
+    isEmbeddingLoaded: false,
+    searchApiEmbeddingStatus: null,
+    kbFolder: null as string | null,
+    memoryKernelPreflight: null,
+    memoryKernelLoading: false,
+    allowUnverifiedLocalModels: false,
+    loading: null as string | null,
+    isDownloading: false,
+    downloadProgress: null,
+    onLoadModel: vi.fn(),
+    onUnloadModel: vi.fn(),
+    onDownloadModel: vi.fn(),
+    onCancelDownload: vi.fn(),
+    onLoadCustomModel: vi.fn(),
+    onAllowUnverifiedLocalModelsChange: vi.fn(),
+    onRefreshMemoryKernel: vi.fn(),
+  };
+  const props = { ...defaults, ...overrides };
+  return { props, ...render(<ModelSection {...props} />) };
+}
+
+describe("ModelSection", () => {
+  afterEach(() => cleanup());
+
+  it("shows the Download button for an undownloaded recommended model", () => {
+    const { props } = renderSection();
+    const downloadButton = screen.getAllByRole("button", {
+      name: "Download",
+    })[0];
+    fireEvent.click(downloadButton);
+    expect(props.onDownloadModel).toHaveBeenCalledWith("llama-3.1-8b-instruct");
+  });
+
+  it("toggles the Other Supported Models list", () => {
+    renderSection();
+    fireEvent.click(
+      screen.getByRole("button", { name: "Show other supported models" }),
+    );
+    expect(screen.getByText("Llama 3.2 1B Instruct")).toBeTruthy();
+    fireEvent.click(
+      screen.getByRole("button", { name: "Hide other supported models" }),
+    );
+  });
+
+  it("triggers onAllowUnverifiedLocalModelsChange when the toggle flips", () => {
+    const { props } = renderSection();
+    fireEvent.click(
+      screen.getByLabelText("Allow unverified local models (advanced)"),
+    );
+    expect(props.onAllowUnverifiedLocalModelsChange).toHaveBeenCalledWith(true);
+  });
+});

src/components/Settings/sections/SemanticSearchSection.test.tsx

@@ -0,0 +1,70 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { SemanticSearchSection } from "./SemanticSearchSection";
+
+function renderSection(
+  overrides: Partial<Parameters<typeof SemanticSearchSection>[0]> = {},
+) {
+  const defaults = {
+    embeddingDownloaded: false,
+    isEmbeddingLoaded: false,
+    embeddingLoading: false,
+    embeddingModelInfo: null,
+    vectorEnabled: false,
+    generatingEmbeddings: false,
+    isDownloading: false,
+    downloadProgress: null,
+    searchApiEmbeddingStatus: {
+      installed: false,
+      ready: false,
+      model_name: "sentence-transformers/all-MiniLM-L6-v2",
+      revision: "pinned",
+      local_path: null,
+      error: null,
+    },
+    searchApiEmbeddingLoading: false,
+    searchApiEmbeddingBadge: {
+      label: "Not Installed",
+      className: "not-downloaded",
+      detail: "Install this managed model...",
+    },
+    onCancelDownload: vi.fn(),
+    onDownloadEmbeddingModel: vi.fn(),
+    onLoadEmbeddingModel: vi.fn(),
+    onUnloadEmbeddingModel: vi.fn(),
+    onGenerateEmbeddings: vi.fn(),
+    onInstallSearchApiEmbeddingModel: vi.fn(),
+    onRefreshSearchApiEmbeddingStatus: vi.fn(),
+  };
+  const props = { ...defaults, ...overrides };
+  return { props, ...render(<SemanticSearchSection {...props} />) };
+}
+
+describe("SemanticSearchSection", () => {
+  afterEach(() => cleanup());
+
+  it("prompts to download the desktop model when not downloaded", () => {
+    const { props } = renderSection();
+    fireEvent.click(screen.getByRole("button", { name: "Download Model" }));
+    expect(props.onDownloadEmbeddingModel).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the Unload control when loaded and triggers onUnloadEmbeddingModel", () => {
+    const { props } = renderSection({
+      embeddingDownloaded: true,
+      isEmbeddingLoaded: true,
+      embeddingModelInfo: { name: "nomic-embed-text", embedding_dim: 768 },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Unload" }));
+    expect(props.onUnloadEmbeddingModel).toHaveBeenCalledTimes(1);
+  });
+
+  it("invokes search API install and refresh callbacks", () => {
+    const { props } = renderSection();
+    fireEvent.click(screen.getByRole("button", { name: "Install Model" }));
+    expect(props.onInstallSearchApiEmbeddingModel).toHaveBeenCalledTimes(1);
+    fireEvent.click(screen.getByRole("button", { name: "Refresh Status" }));
+    expect(props.onRefreshSearchApiEmbeddingStatus).toHaveBeenCalledTimes(1);
+  });
+});