From 9d0da99c742673f6f6ba52ff53c05207b9d302f0 Mon Sep 17 00:00:00 2001
From: alfredorubin96 <alfredo.rubin@neotechnology.com>
Date: Tue, 28 Apr 2026 18:12:32 +0200
Subject: [PATCH 1/2] test(app): add widget-editor sub-component tests (#578)

Add 55 unit tests across 4 test files covering:
- resolveInternalParamType / reverseParamTypeMapping pure functions (16 tests)
- ChartTypeSelector component rendering and callbacks (10 tests)
- ParameterConfigSection UI: all param types, seed query, collisions (18 tests)
- FormFieldsEditor: empty state, add/remove fields, DnD mocks (11 tests)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../__tests__/chart-type-selector.test.tsx    | 229 ++++++++++++
 .../__tests__/form-fields-editor.test.tsx     | 309 ++++++++++++++++
 .../parameter-config-section-ui.test.tsx      | 341 ++++++++++++++++++
 .../parameter-config-section.test.tsx         | 129 +++++++
 4 files changed, 1008 insertions(+)
 create mode 100644 app/src/components/widget-editor/__tests__/chart-type-selector.test.tsx
 create mode 100644 app/src/components/widget-editor/__tests__/form-fields-editor.test.tsx
 create mode 100644 app/src/components/widget-editor/__tests__/parameter-config-section-ui.test.tsx
 create mode 100644 app/src/components/widget-editor/__tests__/parameter-config-section.test.tsx

diff --git a/app/src/components/widget-editor/__tests__/chart-type-selector.test.tsx b/app/src/components/widget-editor/__tests__/chart-type-selector.test.tsx
new file mode 100644
index 00000000..7949c222
--- /dev/null
+++ b/app/src/components/widget-editor/__tests__/chart-type-selector.test.tsx
@@ -0,0 +1,229 @@
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+vi.mock("@neoboard/components", () => ({
+  Label: ({
+    children,
+    ...props
+  }: React.PropsWithChildren<Record<string, unknown>>) => (
+    <label {...props}>{children}</label>
+  ),
+  Combobox: ({
+    value,
+    onChange,
+    options,
+    placeholder,
+  }: {
+    value: string;
+    onChange: (v: string) => void;
+    options: { value: string; label: string }[];
+    placeholder?: string;
+  }) => (
+    <select
+      data-testid={placeholder}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    >
+      <option value="">{placeholder}</option>
+      {options.map((o) => (
+        <option key={o.value} value={o.value}>
+          {o.label}
+        </option>
+      ))}
+    </select>
+  ),
+}));
+
+vi.mock("@/lib/plugin/chart-helpers", () => ({
+  getChartConfig: (type: string) => ({
+    label: type.charAt(0).toUpperCase() + type.slice(1),
+  }),
+}));
+
+vi.mock("lucide-react", async (importOriginal) => {
+  const Icon = () => <span />;
+  const actual = await importOriginal<Record<string, unknown>>();
+  const mocked: Record<string, unknown> = {};
+  for (const key of Object.keys(actual)) {
+    mocked[key] = Icon;
+  }
+  return mocked;
+});
+
+import {
+  ChartTypeSelector,
+  getChartTypeMeta,
+  chartTypeIcons,
+} from "../chart-type-selector";
+import type { ChartType } from "@/lib/plugin/chart-helpers";
+
+describe("getChartTypeMeta", () => {
+  it("returns label from chart config and icon from map", () => {
+    const meta = getChartTypeMeta("bar");
+    expect(meta.label).toBe("Bar");
+    expect(meta.Icon).toBeDefined();
+  });
+
+  it("returns fallback icon for unknown type", () => {
+    const meta = getChartTypeMeta("unknown-type" as ChartType);
+    expect(meta.Icon).toBeDefined();
+  });
+});
+
+describe("chartTypeIcons", () => {
+  it("has entries for all 20 chart types", () => {
+    const expected = [
+      "bar",
+      "line",
+      "pie",
+      "single-value",
+      "graph",
+      "map",
+      "table",
+      "json",
+      "parameter-select",
+      "form",
+      "markdown",
+      "iframe",
+      "gauge",
+      "sankey",
+      "sunburst",
+      "radar",
+      "treemap",
+      "gantt",
+      "circle-packing",
+      "choropleth",
+    ];
+    for (const type of expected) {
+      expect(chartTypeIcons[type as ChartType]).toBeDefined();
+    }
+  });
+});
+
+const connections = [
+  { id: "c1", name: "Neo4j Local", type: "neo4j" },
+  { id: "c2", name: "Postgres Prod", type: "postgresql" },
+];
+const chartTypes: ChartType[] = ["bar", "line", "pie", "table"];
+
+describe("ChartTypeSelector", () => {
+  it("renders chart type selector without connection when showConnection is false", () => {
+    render(
+      <ChartTypeSelector
+        connectionId=""
+        onConnectionChange={vi.fn()}
+        chartType="bar"
+        onChartTypeChange={vi.fn()}
+        compatibleChartTypes={chartTypes}
+        connections={connections}
+        showConnection={false}
+      />,
+    );
+    expect(screen.getByText("Chart Type")).toBeInTheDocument();
+    expect(screen.queryByText("Connection")).not.toBeInTheDocument();
+  });
+
+  it("renders both connection and chart type when showConnection is true", () => {
+    render(
+      <ChartTypeSelector
+        connectionId="c1"
+        onConnectionChange={vi.fn()}
+        chartType="bar"
+        onChartTypeChange={vi.fn()}
+        compatibleChartTypes={chartTypes}
+        connections={connections}
+        showConnection={true}
+      />,
+    );
+    expect(screen.getByText("Chart Type")).toBeInTheDocument();
+    expect(screen.getByText("Connection")).toBeInTheDocument();
+  });
+
+  it("calls onChartTypeChange when chart type changes", () => {
+    const onChartTypeChange = vi.fn();
+    render(
+      <ChartTypeSelector
+        connectionId=""
+        onConnectionChange={vi.fn()}
+        chartType="bar"
+        onChartTypeChange={onChartTypeChange}
+        compatibleChartTypes={chartTypes}
+        connections={connections}
+        showConnection={false}
+      />,
+    );
+    fireEvent.change(screen.getByTestId("Select chart type..."), {
+      target: { value: "line" },
+    });
+    expect(onChartTypeChange).toHaveBeenCalledWith("line");
+  });
+
+  it("calls onConnectionChange when connection changes", () => {
+    const onConnectionChange = vi.fn();
+    render(
+      <ChartTypeSelector
+        connectionId="c1"
+        onConnectionChange={onConnectionChange}
+        chartType="bar"
+        onChartTypeChange={vi.fn()}
+        compatibleChartTypes={chartTypes}
+        connections={connections}
+        showConnection={true}
+      />,
+    );
+    fireEvent.change(screen.getByTestId("Select a connection..."), {
+      target: { value: "c2" },
+    });
+    expect(onConnectionChange).toHaveBeenCalledWith("c2");
+  });
+
+  it("renders chart type options from compatibleChartTypes", () => {
+    render(
+      <ChartTypeSelector
+        connectionId=""
+        onConnectionChange={vi.fn()}
+        chartType="bar"
+        onChartTypeChange={vi.fn()}
+        compatibleChartTypes={chartTypes}
+        connections={connections}
+        showConnection={false}
+      />,
+    );
+    expect(screen.getByText("Bar")).toBeInTheDocument();
+    expect(screen.getByText("Line")).toBeInTheDocument();
+    expect(screen.getByText("Pie")).toBeInTheDocument();
+    expect(screen.getByText("Table")).toBeInTheDocument();
+  });
+
+  it("renders connection options with name and type", () => {
+    render(
+      <ChartTypeSelector
+        connectionId="c1"
+        onConnectionChange={vi.fn()}
+        chartType="bar"
+        onChartTypeChange={vi.fn()}
+        compatibleChartTypes={chartTypes}
+        connections={connections}
+        showConnection={true}
+      />,
+    );
+    expect(screen.getByText("Neo4j Local (neo4j)")).toBeInTheDocument();
+    expect(screen.getByText("Postgres Prod (postgresql)")).toBeInTheDocument();
+  });
+
+  it("shows required indicator on connection label", () => {
+    render(
+      <ChartTypeSelector
+        connectionId="c1"
+        onConnectionChange={vi.fn()}
+        chartType="bar"
+        onChartTypeChange={vi.fn()}
+        compatibleChartTypes={chartTypes}
+        connections={connections}
+        showConnection={true}
+      />,
+    );
+    expect(screen.getByText("*")).toBeInTheDocument();
+  });
+});
diff --git a/app/src/components/widget-editor/__tests__/form-fields-editor.test.tsx b/app/src/components/widget-editor/__tests__/form-fields-editor.test.tsx
new file mode 100644
index 00000000..e5aeb59f
--- /dev/null
+++ b/app/src/components/widget-editor/__tests__/form-fields-editor.test.tsx
@@ -0,0 +1,309 @@
+import React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import type { FormFieldDef } from "@/lib/widget/form-field-def";
+
+// Mock DnD kit — just render children without drag behavior
+vi.mock("@dnd-kit/core", () => ({
+  DndContext: ({ children }: React.PropsWithChildren) => <>{children}</>,
+  closestCenter: vi.fn(),
+  KeyboardSensor: vi.fn(),
+  PointerSensor: vi.fn(),
+  useSensor: () => ({}),
+  useSensors: () => [],
+}));
+vi.mock("@dnd-kit/sortable", () => ({
+  SortableContext: ({ children }: React.PropsWithChildren) => <>{children}</>,
+  sortableKeyboardCoordinates: vi.fn(),
+  useSortable: () => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: vi.fn(),
+    transform: null,
+    transition: null,
+    isDragging: false,
+  }),
+  verticalListSortingStrategy: vi.fn(),
+}));
+vi.mock("@dnd-kit/utilities", () => ({
+  CSS: { Transform: { toString: () => "" } },
+}));
+
+vi.mock("@neoboard/components", () => ({
+  Accordion: ({
+    children,
+  }: React.PropsWithChildren<{
+    value: string[];
+    onValueChange: (v: string[]) => void;
+  }>) => <div data-testid="accordion">{children}</div>,
+  AccordionContent: ({ children }: React.PropsWithChildren) => (
+    <div data-testid="accordion-content">{children}</div>
+  ),
+  AccordionItem: React.forwardRef<
+    HTMLDivElement,
+    React.PropsWithChildren<{ value: string; style?: React.CSSProperties }>
+  >(({ children, value, style }, ref) => (
+    <div ref={ref} data-testid={`field-item-${value}`} style={style}>
+      {children}
+    </div>
+  )),
+  AccordionTrigger: ({ children }: React.PropsWithChildren) => (
+    <div>{children}</div>
+  ),
+  Badge: ({ children }: React.PropsWithChildren) => <span>{children}</span>,
+  Button: ({
+    children,
+    onClick,
+    ...props
+  }: React.PropsWithChildren<Record<string, unknown>>) => (
+    <button onClick={onClick as () => void} {...props}>
+      {children}
+    </button>
+  ),
+  Checkbox: ({
+    id,
+    checked,
+    onCheckedChange,
+  }: {
+    id?: string;
+    checked?: boolean;
+    onCheckedChange?: (v: boolean) => void;
+  }) => (
+    <input
+      type="checkbox"
+      id={id}
+      checked={checked}
+      onChange={(e) => onCheckedChange?.(e.target.checked)}
+      data-testid={id}
+    />
+  ),
+  Input: ({
+    value,
+    onChange,
+    ...props
+  }: React.InputHTMLAttributes<HTMLInputElement>) => (
+    <input value={value} onChange={onChange} {...props} />
+  ),
+  Label: ({
+    children,
+    ...props
+  }: React.PropsWithChildren<Record<string, unknown>>) => (
+    <label {...props}>{children}</label>
+  ),
+  Select: ({
+    children,
+    value,
+    onValueChange,
+  }: React.PropsWithChildren<{
+    value: string;
+    onValueChange: (v: string) => void;
+  }>) => (
+    <select value={value} onChange={(e) => onValueChange(e.target.value)}>
+      {children}
+    </select>
+  ),
+  SelectContent: ({ children }: React.PropsWithChildren) => <>{children}</>,
+  SelectItem: ({
+    children,
+    value,
+  }: React.PropsWithChildren<{ value: string }>) => (
+    <option value={value}>{children}</option>
+  ),
+  SelectTrigger: ({ children }: React.PropsWithChildren) => <>{children}</>,
+  SelectValue: () => null,
+  Textarea: ({
+    value,
+    onChange,
+    ...props
+  }: React.TextareaHTMLAttributes<HTMLTextAreaElement>) => (
+    <textarea value={value} onChange={onChange} {...props} />
+  ),
+}));
+
+vi.mock("lucide-react", () => {
+  const Icon = () => <span />;
+  return { GripVertical: Icon, Plus: Icon, Trash2: Icon };
+});
+
+const mockSetFormFields = vi.fn();
+let mockFormFields: FormFieldDef[] = [];
+
+vi.mock("@/stores/widget-editor-store", () => ({
+  useWidgetEditorStore: (selector: (s: Record<string, unknown>) => unknown) =>
+    selector({
+      formFields: mockFormFields,
+      setFormFields: mockSetFormFields,
+    }),
+}));
+
+import { FormFieldsEditor } from "../form-fields-editor";
+
+describe("FormFieldsEditor", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockFormFields = [];
+  });
+
+  it("renders empty state", () => {
+    render(<FormFieldsEditor />);
+    expect(screen.getByText("Form Fields")).toBeInTheDocument();
+    expect(screen.getByText(/No fields yet/)).toBeInTheDocument();
+  });
+
+  it("renders Add Field button", () => {
+    render(<FormFieldsEditor />);
+    expect(screen.getByText("Add Field")).toBeInTheDocument();
+  });
+
+  it("calls setFormFields when Add Field is clicked", () => {
+    render(<FormFieldsEditor />);
+    fireEvent.click(screen.getByText("Add Field"));
+    expect(mockSetFormFields).toHaveBeenCalled();
+    const newFields = mockSetFormFields.mock.calls[0][0] as FormFieldDef[];
+    expect(newFields).toHaveLength(1);
+    expect(newFields[0].parameterType).toBe("text");
+    expect(newFields[0].required).toBe(true);
+    expect(newFields[0].label).toBe("");
+  });
+
+  it("renders field items when fields exist", () => {
+    mockFormFields = [
+      {
+        id: "f1",
+        label: "Movie Title",
+        parameterName: "title",
+        parameterType: "text",
+        required: true,
+      },
+      {
+        id: "f2",
+        label: "Category",
+        parameterName: "category",
+        parameterType: "select",
+        required: false,
+      },
+    ];
+    render(<FormFieldsEditor />);
+    expect(screen.getByText(/Movie Title/)).toBeInTheDocument();
+    expect(screen.getByText(/Category/)).toBeInTheDocument();
+    expect(screen.queryByText(/No fields yet/)).not.toBeInTheDocument();
+  });
+
+  it("shows field index and label in trigger", () => {
+    mockFormFields = [
+      {
+        id: "f1",
+        label: "Movie Title",
+        parameterName: "title",
+        parameterType: "text",
+        required: true,
+      },
+    ];
+    render(<FormFieldsEditor />);
+    expect(screen.getByText(/Field 1/)).toBeInTheDocument();
+    expect(screen.getByText(/Movie Title/)).toBeInTheDocument();
+  });
+
+  it("shows Untitled for fields without label", () => {
+    mockFormFields = [
+      {
+        id: "f1",
+        label: "",
+        parameterName: "",
+        parameterType: "text",
+        required: false,
+      },
+    ];
+    render(<FormFieldsEditor />);
+    expect(screen.getByText(/Untitled/)).toBeInTheDocument();
+  });
+
+  it("shows required indicator on required fields", () => {
+    mockFormFields = [
+      {
+        id: "f1",
+        label: "Name",
+        parameterName: "name",
+        parameterType: "text",
+        required: true,
+      },
+    ];
+    render(<FormFieldsEditor />);
+    expect(screen.getByText("*")).toBeInTheDocument();
+  });
+
+  it("shows parameter type badge", () => {
+    mockFormFields = [
+      {
+        id: "f1",
+        label: "Name",
+        parameterName: "name",
+        parameterType: "text",
+        required: false,
+      },
+    ];
+    render(<FormFieldsEditor />);
+    expect(screen.getByText("text")).toBeInTheDocument();
+  });
+
+  it("renders delete button for each field", () => {
+    mockFormFields = [
+      {
+        id: "f1",
+        label: "A",
+        parameterName: "a",
+        parameterType: "text",
+        required: false,
+      },
+      {
+        id: "f2",
+        label: "B",
+        parameterName: "b",
+        parameterType: "text",
+        required: false,
+      },
+    ];
+    render(<FormFieldsEditor />);
+    const deleteButtons = screen.getAllByLabelText(/Delete field/);
+    expect(deleteButtons).toHaveLength(2);
+  });
+
+  it("removes field when delete is clicked", () => {
+    mockFormFields = [
+      {
+        id: "f1",
+        label: "A",
+        parameterName: "a",
+        parameterType: "text",
+        required: false,
+      },
+      {
+        id: "f2",
+        label: "B",
+        parameterName: "b",
+        parameterType: "text",
+        required: false,
+      },
+    ];
+    render(<FormFieldsEditor />);
+    fireEvent.click(screen.getByLabelText("Delete field 1"));
+    expect(mockSetFormFields).toHaveBeenCalled();
+    const remaining = mockSetFormFields.mock.calls[0][0] as FormFieldDef[];
+    expect(remaining).toHaveLength(1);
+    expect(remaining[0].id).toBe("f2");
+  });
+
+  it("shows param reference hint in field content", () => {
+    mockFormFields = [
+      {
+        id: "f1",
+        label: "Title",
+        parameterName: "title",
+        parameterType: "text",
+        required: false,
+      },
+    ];
+    render(<FormFieldsEditor />);
+    expect(screen.getByText("$param_title")).toBeInTheDocument();
+  });
+});
diff --git a/app/src/components/widget-editor/__tests__/parameter-config-section-ui.test.tsx b/app/src/components/widget-editor/__tests__/parameter-config-section-ui.test.tsx
new file mode 100644
index 00000000..544c1adf
--- /dev/null
+++ b/app/src/components/widget-editor/__tests__/parameter-config-section-ui.test.tsx
@@ -0,0 +1,341 @@
+import React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+vi.mock("@neoboard/components", () => ({
+  Button: ({
+    children,
+    onClick,
+    disabled,
+  }: React.PropsWithChildren<{ onClick?: () => void; disabled?: boolean }>) => (
+    <button onClick={onClick} disabled={disabled}>
+      {children}
+    </button>
+  ),
+  Label: ({
+    children,
+    htmlFor,
+  }: React.PropsWithChildren<{ htmlFor?: string }>) => (
+    <label htmlFor={htmlFor}>{children}</label>
+  ),
+  Input: ({
+    id,
+    value,
+    onChange,
+    ...props
+  }: React.InputHTMLAttributes<HTMLInputElement>) => (
+    <input
+      id={id}
+      value={value}
+      onChange={onChange}
+      data-testid={id}
+      {...props}
+    />
+  ),
+  Select: ({
+    children,
+    value,
+    onValueChange,
+  }: React.PropsWithChildren<{
+    value: string;
+    onValueChange: (v: string) => void;
+  }>) => (
+    <select value={value} onChange={(e) => onValueChange(e.target.value)}>
+      {children}
+    </select>
+  ),
+  SelectContent: ({ children }: React.PropsWithChildren) => <>{children}</>,
+  SelectItem: ({
+    children,
+    value,
+  }: React.PropsWithChildren<{ value: string }>) => (
+    <option value={value}>{children}</option>
+  ),
+  SelectTrigger: ({ children }: React.PropsWithChildren) => <>{children}</>,
+  SelectValue: ({ placeholder }: { placeholder?: string }) => (
+    <span>{placeholder}</span>
+  ),
+  Checkbox: ({
+    id,
+    checked,
+    onCheckedChange,
+  }: {
+    id?: string;
+    checked?: boolean;
+    onCheckedChange?: (v: boolean) => void;
+  }) => (
+    <input
+      type="checkbox"
+      id={id}
+      checked={checked}
+      onChange={(e) => onCheckedChange?.(e.target.checked)}
+      data-testid={id}
+    />
+  ),
+  Textarea: ({
+    id,
+    value,
+    onChange,
+    ...props
+  }: React.TextareaHTMLAttributes<HTMLTextAreaElement>) => (
+    <textarea
+      id={id}
+      value={value}
+      onChange={onChange}
+      data-testid={id}
+      {...props}
+    />
+  ),
+}));
+
+vi.mock("lucide-react", () => {
+  const Icon = () => <span />;
+  return { Calendar: Icon, Type: Icon, ListFilter: Icon };
+});
+
+const mockSetParamUIType = vi.fn();
+const mockSetDateSub = vi.fn();
+const mockSetMultiSelect = vi.fn();
+const mockSetParamWidgetName = vi.fn();
+const mockSetChartOptions = vi.fn();
+
+let mockStoreState: Record<string, unknown> = {};
+
+vi.mock("@/stores/widget-editor-store", () => ({
+  useWidgetEditorStore: (selector: (s: Record<string, unknown>) => unknown) =>
+    selector(mockStoreState),
+}));
+
+import { ParameterConfigSection } from "../parameter-config-section";
+
+const baseSeedExecution = {
+  isPending: false,
+  isError: false,
+  error: null,
+  mutate: vi.fn(),
+};
+
+describe("ParameterConfigSection", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockStoreState = {
+      paramUIType: "select",
+      setParamUIType: mockSetParamUIType,
+      dateSub: "single",
+      setDateSub: mockSetDateSub,
+      multiSelect: false,
+      setMultiSelect: mockSetMultiSelect,
+      paramWidgetName: "",
+      setParamWidgetName: mockSetParamWidgetName,
+      chartOptions: { seedQuery: "" },
+      setChartOptions: mockSetChartOptions,
+      connectionId: "conn-1",
+    };
+  });
+
+  it("renders parameter type selector", () => {
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(screen.getByText("Parameter Type")).toBeInTheDocument();
+  });
+
+  it("renders parameter name input", () => {
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(screen.getByText("Parameter Name")).toBeInTheDocument();
+  });
+
+  it("calls setParamWidgetName on name change", () => {
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    fireEvent.change(screen.getByTestId("param-widget-name"), {
+      target: { value: "country" },
+    });
+    expect(mockSetParamWidgetName).toHaveBeenCalledWith("country");
+  });
+
+  it("shows reference hint when param name is set", () => {
+    mockStoreState.paramWidgetName = "country";
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(screen.getByTestId("param-reference-hint")).toBeInTheDocument();
+    expect(screen.getByText("$param_country")).toBeInTheDocument();
+  });
+
+  it("does not show reference hint when param name is empty", () => {
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(
+      screen.queryByTestId("param-reference-hint"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows multi-select toggle for select type", () => {
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(screen.getByText("Allow multiple selections")).toBeInTheDocument();
+  });
+
+  it("hides multi-select toggle for non-select types", () => {
+    mockStoreState.paramUIType = "date";
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(
+      screen.queryByText("Allow multiple selections"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows date mode selector for date type", () => {
+    mockStoreState.paramUIType = "date";
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(screen.getByText("Date Mode")).toBeInTheDocument();
+  });
+
+  it("hides date mode selector for non-date types", () => {
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(screen.queryByText("Date Mode")).not.toBeInTheDocument();
+  });
+
+  it("shows seed query section for select type", () => {
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(screen.getByText("Seed Query")).toBeInTheDocument();
+    expect(screen.getByText("Test Seed Query")).toBeInTheDocument();
+  });
+
+  it("hides seed query section for freetext type", () => {
+    mockStoreState.paramUIType = "freetext";
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(screen.queryByText("Seed Query")).not.toBeInTheDocument();
+  });
+
+  it("disables test seed query button when no connection", () => {
+    mockStoreState.connectionId = "";
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(screen.getByText("Test Seed Query")).toBeDisabled();
+  });
+
+  it("disables test seed query button when seed query empty", () => {
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(screen.getByText("Test Seed Query")).toBeDisabled();
+  });
+
+  it("shows Running... when seed query is pending", () => {
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={{ ...baseSeedExecution, isPending: true }}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(screen.getByText("Running...")).toBeInTheDocument();
+  });
+
+  it("shows error message on seed query error", () => {
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={{
+          ...baseSeedExecution,
+          isError: true,
+          error: new Error("Connection failed"),
+        }}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(screen.getByText("Connection failed")).toBeInTheDocument();
+  });
+
+  it("shows options count when seed preview has results", () => {
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={[
+          { value: "a", label: "A" },
+          { value: "b", label: "B" },
+          { value: "c", label: "C" },
+        ]}
+      />,
+    );
+    expect(screen.getByText(/3 options loaded/)).toBeInTheDocument();
+  });
+
+  it("shows singular for 1 option", () => {
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={[{ value: "a", label: "A" }]}
+      />,
+    );
+    expect(screen.getByText(/1 option loaded/)).toBeInTheDocument();
+  });
+
+  it("shows date range sub-parameters in reference hint", () => {
+    mockStoreState.paramUIType = "date";
+    mockStoreState.dateSub = "range";
+    mockStoreState.paramWidgetName = "period";
+    render(
+      <ParameterConfigSection
+        seedQueryExecution={baseSeedExecution}
+        seedPreviewOptions={null}
+      />,
+    );
+    expect(screen.getByText("$param_period_from")).toBeInTheDocument();
+    expect(screen.getByText("$param_period_to")).toBeInTheDocument();
+  });
+});
diff --git a/app/src/components/widget-editor/__tests__/parameter-config-section.test.tsx b/app/src/components/widget-editor/__tests__/parameter-config-section.test.tsx
new file mode 100644
index 00000000..089a1fb3
--- /dev/null
+++ b/app/src/components/widget-editor/__tests__/parameter-config-section.test.tsx
@@ -0,0 +1,129 @@
+import { describe, it, expect, vi } from "vitest";
+
+vi.mock("@neoboard/components", () => ({}));
+vi.mock("lucide-react", () => {
+  const Icon = () => null;
+  return { Calendar: Icon, Type: Icon, ListFilter: Icon };
+});
+vi.mock("@/stores/widget-editor-store", () => ({
+  useWidgetEditorStore: () => ({}),
+}));
+
+import {
+  resolveInternalParamType,
+  reverseParamTypeMapping,
+} from "../parameter-config-section";
+
+describe("resolveInternalParamType", () => {
+  it("maps date + single to date", () => {
+    expect(resolveInternalParamType("date", "single", false)).toBe("date");
+  });
+
+  it("maps date + range to date-range", () => {
+    expect(resolveInternalParamType("date", "range", false)).toBe("date-range");
+  });
+
+  it("maps date + relative to date-relative", () => {
+    expect(resolveInternalParamType("date", "relative", false)).toBe(
+      "date-relative",
+    );
+  });
+
+  it("maps freetext to text", () => {
+    expect(resolveInternalParamType("freetext", "single", false)).toBe("text");
+  });
+
+  it("maps select without multi to select", () => {
+    expect(resolveInternalParamType("select", "single", false)).toBe("select");
+  });
+
+  it("maps select with multi to multi-select", () => {
+    expect(resolveInternalParamType("select", "single", true)).toBe(
+      "multi-select",
+    );
+  });
+
+  it("ignores dateSub for non-date types", () => {
+    expect(resolveInternalParamType("freetext", "range", false)).toBe("text");
+  });
+
+  it("ignores multi for date types", () => {
+    expect(resolveInternalParamType("date", "single", true)).toBe("date");
+  });
+});
+
+describe("reverseParamTypeMapping", () => {
+  it("maps date back", () => {
+    expect(reverseParamTypeMapping("date")).toEqual({
+      uiType: "date",
+      dateSub: "single",
+      multi: false,
+    });
+  });
+
+  it("maps date-range back", () => {
+    expect(reverseParamTypeMapping("date-range")).toEqual({
+      uiType: "date",
+      dateSub: "range",
+      multi: false,
+    });
+  });
+
+  it("maps date-relative back", () => {
+    expect(reverseParamTypeMapping("date-relative")).toEqual({
+      uiType: "date",
+      dateSub: "relative",
+      multi: false,
+    });
+  });
+
+  it("maps text back", () => {
+    expect(reverseParamTypeMapping("text")).toEqual({
+      uiType: "freetext",
+      dateSub: "single",
+      multi: false,
+    });
+  });
+
+  it("maps multi-select back", () => {
+    expect(reverseParamTypeMapping("multi-select")).toEqual({
+      uiType: "select",
+      dateSub: "single",
+      multi: true,
+    });
+  });
+
+  it("maps select back (default case)", () => {
+    expect(reverseParamTypeMapping("select")).toEqual({
+      uiType: "select",
+      dateSub: "single",
+      multi: false,
+    });
+  });
+
+  it("maps unknown type to select default", () => {
+    expect(reverseParamTypeMapping("unknown")).toEqual({
+      uiType: "select",
+      dateSub: "single",
+      multi: false,
+    });
+  });
+
+  it("roundtrips with resolveInternalParamType", () => {
+    const cases = [
+      { ui: "date" as const, sub: "single" as const, multi: false },
+      { ui: "date" as const, sub: "range" as const, multi: false },
+      { ui: "date" as const, sub: "relative" as const, multi: false },
+      { ui: "freetext" as const, sub: "single" as const, multi: false },
+      { ui: "select" as const, sub: "single" as const, multi: false },
+      { ui: "select" as const, sub: "single" as const, multi: true },
+    ];
+    for (const { ui, sub, multi } of cases) {
+      const internal = resolveInternalParamType(ui, sub, multi);
+      const reversed = reverseParamTypeMapping(internal);
+      expect(reversed.uiType).toBe(ui);
+      expect(reversed.multi).toBe(multi);
+      if (ui === "date") expect(reversed.dateSub).toBe(sub);
+    }
+  });
+});

From 60e6a39ee95f9a56a9c24c8f8f3e8eef038fb312 Mon Sep 17 00:00:00 2001
From: alfredorubin96 <alfredo.rubin@neotechnology.com>
Date: Fri, 1 May 2026 10:59:07 +0200
Subject: [PATCH 2/2] ci: retrigger after release/2.0 type-error fix (#632)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>