@databiosphere/findable-ui 49.0.0 → 49.2.0

package/tests/research.queryProvider.test.ts

@@ -0,0 +1,321 @@
+import { jest } from "@jest/globals";
+import { act, renderHook } from "@testing-library/react";
+import { FormEvent, ReactNode } from "react";
+import React from "react";
+
+/**
+ * Fetch callbacks passed to fetchResponse.
+ */
+interface FetchCallbacks {
+  controller: AbortController;
+  onError: (error: Error) => void;
+  onSettled: () => void;
+  onSuccess: (data: unknown) => void;
+}
+
+// Mock fetchResponse
+const mockFetchResponse = jest.fn();
+
+jest.unstable_mockModule("../src/views/ResearchView/query/fetch", () => ({
+  fetchResponse: mockFetchResponse,
+}));
+
+const { useQuery } =
+  await import("../src/views/ResearchView/state/query/hooks/UseQuery/hook");
+const { ChatProvider } =
+  await import("../src/views/ResearchView/state/provider");
+
+/**
+ * Creates a mock form event for testing.
+ * @returns Mock FormEvent.
+ */
+function createMockFormEvent(): FormEvent<HTMLFormElement> {
+  const mockForm = document.createElement("form");
+
+  // Mock reset
+  mockForm.reset = jest.fn();
+
+  return {
+    currentTarget: mockForm,
+    preventDefault: jest.fn(),
+  } as unknown as FormEvent<HTMLFormElement>;
+}
+
+/**
+ * Creates a wrapper component that provides ChatProvider with a URL.
+ * @param url - The query endpoint URL.
+ * @returns A wrapper component for renderHook.
+ */
+function createWrapper(
+  url = "https://api.example.com",
+): ({ children }: { children: ReactNode }) => ReactNode {
+  return function Wrapper({ children }: { children: ReactNode }): ReactNode {
+    return React.createElement(ChatProvider, { url }, children);
+  };
+}
+
+describe("QueryProvider", () => {
+  beforeEach(() => {
+    mockFetchResponse.mockReset();
+    mockFetchResponse.mockImplementation(
+      async (_url: unknown, _query: unknown, callbacks: unknown) => {
+        (callbacks as FetchCallbacks).onSettled();
+      },
+    );
+  });
+
+  describe("initial state", () => {
+    it("should return onSubmit function", () => {
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(typeof result.current.onSubmit).toBe("function");
+    });
+  });
+
+  describe("submit guards", () => {
+    it("should not submit if status is loading", async () => {
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "valid query" },
+          { status: { loading: true } },
+        );
+      });
+
+      expect(mockFetchResponse).not.toHaveBeenCalled();
+    });
+
+    it("should not submit if query is empty", async () => {
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "" },
+          { status: { loading: false } },
+        );
+      });
+
+      expect(mockFetchResponse).not.toHaveBeenCalled();
+    });
+
+    it("should submit if query is provided", async () => {
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "valid query" },
+          { status: { loading: false } },
+        );
+      });
+
+      expect(mockFetchResponse).toHaveBeenCalled();
+    });
+  });
+
+  describe("submit behavior", () => {
+    it("should call preventDefault on form event", async () => {
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "diabetes studies" },
+          { status: { loading: false } },
+        );
+      });
+
+      expect(event.preventDefault).toHaveBeenCalled();
+    });
+
+    it("should call fetchResponse with correct arguments", async () => {
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "diabetes studies" },
+          { status: { loading: false } },
+        );
+      });
+
+      expect(mockFetchResponse).toHaveBeenCalledWith(
+        "https://api.example.com",
+        "diabetes studies",
+        expect.objectContaining({
+          controller: expect.any(AbortController),
+          onError: expect.any(Function),
+          onSettled: expect.any(Function),
+          onSuccess: expect.any(Function),
+        }),
+      );
+    });
+
+    it("should pass url to fetchResponse", async () => {
+      const testUrl = "https://custom-api.example.com/search";
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(testUrl),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "cancer studies" },
+          { status: { loading: false } },
+        );
+      });
+
+      expect(mockFetchResponse).toHaveBeenCalledWith(
+        testUrl,
+        expect.any(String),
+        expect.any(Object),
+      );
+    });
+  });
+
+  describe("option callbacks", () => {
+    it("should call onMutate after dispatching query", async () => {
+      const onMutate = jest.fn();
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "test query" },
+          { onMutate, status: { loading: false } },
+        );
+      });
+
+      expect(onMutate).toHaveBeenCalledWith(event.currentTarget, "test query");
+    });
+
+    it("should call onSettled after fetch completes", async () => {
+      const onSettled = jest.fn();
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "test query" },
+          { onSettled, status: { loading: false } },
+        );
+      });
+
+      expect(onSettled).toHaveBeenCalledWith(event.currentTarget);
+    });
+
+    it("should call onSuccess after successful fetch", async () => {
+      const mockData = { message: "success" };
+      mockFetchResponse.mockImplementation(
+        async (_url: unknown, _query: unknown, callbacks: unknown) => {
+          (callbacks as FetchCallbacks).onSuccess(mockData);
+          (callbacks as FetchCallbacks).onSettled();
+        },
+      );
+
+      const onSuccess = jest.fn();
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "test query" },
+          { onSuccess, status: { loading: false } },
+        );
+      });
+
+      expect(onSuccess).toHaveBeenCalledWith(mockData);
+    });
+
+    it("should call onError after failed fetch", async () => {
+      const mockError = new Error("Network error");
+      mockFetchResponse.mockImplementation(
+        async (_url: unknown, _query: unknown, callbacks: unknown) => {
+          (callbacks as FetchCallbacks).onError(mockError);
+          (callbacks as FetchCallbacks).onSettled();
+        },
+      );
+
+      const onError = jest.fn();
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "test query" },
+          { onError, status: { loading: false } },
+        );
+      });
+
+      expect(onError).toHaveBeenCalledWith(mockError);
+    });
+  });
+
+  describe("abort handling", () => {
+    it("should create new AbortController for each submit", async () => {
+      const controllers: AbortController[] = [];
+      mockFetchResponse.mockImplementation(
+        async (_url: unknown, _query: unknown, callbacks: unknown) => {
+          controllers.push((callbacks as FetchCallbacks).controller);
+          (callbacks as FetchCallbacks).onSettled();
+        },
+      );
+
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+
+      await act(async () => {
+        await result.current.onSubmit(
+          createMockFormEvent(),
+          { query: "query 1" },
+          { status: { loading: false } },
+        );
+      });
+
+      await act(async () => {
+        await result.current.onSubmit(
+          createMockFormEvent(),
+          { query: "query 2" },
+          { status: { loading: false } },
+        );
+      });
+
+      expect(controllers).toHaveLength(2);
+      expect(controllers[0]).not.toBe(controllers[1]);
+    });
+  });
+});

package/tests/research.useKeyShortCuts.test.ts

@@ -0,0 +1,254 @@
+import { jest } from "@jest/globals";
+import { renderHook } from "@testing-library/react";
+import { KeyboardEvent } from "react";
+import { Message, MESSAGE_TYPE } from "../src/views/ResearchView/state/types";
+
+/**
+ * Mock input element for keyboard event testing.
+ */
+interface MockInputElement {
+  form: { requestSubmit: jest.Mock } | null;
+  placeholder: string;
+  value: string;
+}
+
+// Mock useChatState
+const mockUseChatState = jest.fn();
+
+jest.unstable_mockModule(
+  "../src/views/ResearchView/state/hooks/UseChatState/hook",
+  () => ({ useChatState: mockUseChatState }),
+);
+
+const { useKeyShortCuts } =
+  await import("../src/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/hook");
+
+/**
+ * Creates a mock keyboard event for testing.
+ * @param key - The key pressed.
+ * @param inputEl - The mock input element.
+ * @param shiftKey - Whether the shift key is pressed.
+ * @returns A mock KeyboardEvent.
+ */
+function createMockKeyEvent(
+  key: string,
+  inputEl: MockInputElement,
+  shiftKey = false,
+): KeyboardEvent<HTMLInputElement> {
+  return {
+    currentTarget: inputEl,
+    key,
+    preventDefault: jest.fn(),
+    shiftKey,
+  } as unknown as KeyboardEvent<HTMLInputElement>;
+}
+
+/**
+ * Creates a mock input element for testing.
+ * @param value - Initial input value.
+ * @param placeholder - Placeholder text.
+ * @returns A mock input element.
+ */
+function createMockInputEl(value = "", placeholder = ""): MockInputElement {
+  return {
+    form: { requestSubmit: jest.fn() },
+    placeholder,
+    value,
+  };
+}
+
+/**
+ * Creates a user message for testing.
+ * @param text - The message text.
+ * @returns A user message object.
+ */
+function createUserMessage(text: string): Message {
+  return {
+    createdAt: Date.now(),
+    text,
+    type: MESSAGE_TYPE.USER,
+  };
+}
+
+/**
+ * Creates a prompt message for testing.
+ * @param text - The message text.
+ * @returns A prompt message object.
+ */
+function createPromptMessage(text: string): Message {
+  return {
+    createdAt: Date.now(),
+    text,
+    type: MESSAGE_TYPE.PROMPT,
+  };
+}
+
+/**
+ * Sets up the mock useChatState with the given messages.
+ * @param messages - Array of messages.
+ */
+function setupMockState(messages: Message[]): void {
+  mockUseChatState.mockReturnValue({
+    state: { messages },
+  });
+}
+
+describe("useKeyShortCuts", () => {
+  beforeEach(() => {
+    mockUseChatState.mockReset();
+    setupMockState([]);
+  });
+
+  describe("enter key", () => {
+    it("should prevent default and submit form on Enter", () => {
+      const { result } = renderHook(() => useKeyShortCuts());
+      const inputEl = createMockInputEl("some query");
+      const event = createMockKeyEvent("Enter", inputEl);
+
+      result.current.onKeyDown(event);
+
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(inputEl.form?.requestSubmit).toHaveBeenCalled();
+    });
+
+    it("should not prevent default on Shift+Enter", () => {
+      const { result } = renderHook(() => useKeyShortCuts());
+      const inputEl = createMockInputEl("some query");
+      const event = createMockKeyEvent("Enter", inputEl, true);
+
+      result.current.onKeyDown(event);
+
+      expect(event.preventDefault).not.toHaveBeenCalled();
+      expect(inputEl.form?.requestSubmit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("escape key", () => {
+    it("should clear input value on Escape", () => {
+      const { result } = renderHook(() => useKeyShortCuts());
+      const inputEl = createMockInputEl("some text");
+      const event = createMockKeyEvent("Escape", inputEl);
+
+      result.current.onKeyDown(event);
+
+      expect(inputEl.value).toBe("");
+    });
+  });
+
+  describe("arrow key history navigation", () => {
+    it("should navigate to most recent history entry on ArrowUp", () => {
+      setupMockState([
+        createUserMessage("first query"),
+        createPromptMessage("response"),
+        createUserMessage("second query"),
+      ]);
+      const { result } = renderHook(() => useKeyShortCuts());
+      const inputEl = createMockInputEl();
+      const event = createMockKeyEvent("ArrowUp", inputEl);
+
+      result.current.onKeyDown(event);
+
+      expect(inputEl.value).toBe("second query");
+    });
+
+    it("should navigate through multiple history entries on ArrowUp", () => {
+      setupMockState([
+        createUserMessage("first query"),
+        createUserMessage("second query"),
+      ]);
+      const { result } = renderHook(() => useKeyShortCuts());
+      const inputEl = createMockInputEl();
+
+      result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
+      expect(inputEl.value).toBe("second query");
+
+      result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
+      expect(inputEl.value).toBe("first query");
+    });
+
+    it("should clamp at oldest history entry on ArrowUp", () => {
+      setupMockState([createUserMessage("only query")]);
+      const { result } = renderHook(() => useKeyShortCuts());
+      const inputEl = createMockInputEl();
+
+      result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
+      result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
+
+      expect(inputEl.value).toBe("only query");
+    });
+
+    it("should navigate forward on ArrowDown and restore draft at index -1", () => {
+      setupMockState([
+        createUserMessage("first query"),
+        createUserMessage("second query"),
+      ]);
+      const { result } = renderHook(() => useKeyShortCuts());
+      const inputEl = createMockInputEl("my draft");
+
+      // Navigate up twice.
+      result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
+      result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
+      expect(inputEl.value).toBe("first query");
+
+      // Navigate down once.
+      result.current.onKeyDown(createMockKeyEvent("ArrowDown", inputEl));
+      expect(inputEl.value).toBe("second query");
+
+      // Navigate down to restore draft.
+      result.current.onKeyDown(createMockKeyEvent("ArrowDown", inputEl));
+      expect(inputEl.value).toBe("my draft");
+    });
+
+    it("should not navigate on ArrowDown when not browsing history", () => {
+      setupMockState([createUserMessage("some query")]);
+      const { result } = renderHook(() => useKeyShortCuts());
+      const inputEl = createMockInputEl("current text");
+      const event = createMockKeyEvent("ArrowDown", inputEl);
+
+      result.current.onKeyDown(event);
+
+      expect(inputEl.value).toBe("current text");
+    });
+
+    it("should save draft before entering history", () => {
+      setupMockState([createUserMessage("history entry")]);
+      const { result } = renderHook(() => useKeyShortCuts());
+      const inputEl = createMockInputEl("my draft text");
+
+      // Navigate up to save draft and enter history.
+      result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
+      expect(inputEl.value).toBe("history entry");
+
+      // Navigate down to restore draft.
+      result.current.onKeyDown(createMockKeyEvent("ArrowDown", inputEl));
+      expect(inputEl.value).toBe("my draft text");
+    });
+  });
+
+  describe("tab key", () => {
+    it("should fill input with placeholder when input is empty", () => {
+      const { result } = renderHook(() => useKeyShortCuts());
+      const inputEl = createMockInputEl("", "Search for studies...");
+      const event = createMockKeyEvent("Tab", inputEl);
+
+      result.current.onKeyDown(event);
+
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(inputEl.value).toBe("Search for studies...");
+    });
+
+    it("should not prevent default when input has value", () => {
+      const { result } = renderHook(() => useKeyShortCuts());
+      const inputEl = createMockInputEl(
+        "existing text",
+        "Search for studies...",
+      );
+      const event = createMockKeyEvent("Tab", inputEl);
+
+      result.current.onKeyDown(event);
+
+      expect(event.preventDefault).not.toHaveBeenCalled();
+      expect(inputEl.value).toBe("existing text");
+    });
+  });
+});

package/tests/toggleButtonGroupProvider.test.tsx

@@ -0,0 +1,125 @@
+import { act, render, screen } from "@testing-library/react";
+import React, { JSX } from "react";
+import { ToggleButtonGroupProvider } from "../src/components/common/ToggleButtonGroup/provider/provider";
+import { useToggleButtonGroup } from "../src/components/common/ToggleButtonGroup/provider/hook";
+
+enum TEST_VALUE {
+  OPTION_A = "OPTION_A",
+  OPTION_B = "OPTION_B",
+}
+
+const TEST_ID_VALUE = "value";
+const TEST_ID_BUTTON = "button";
+
+/**
+ * Test component that consumes the toggle button group context via hook.
+ * @returns Test component.
+ */
+function TestConsumer(): JSX.Element {
+  const { onChange, value } = useToggleButtonGroup<TEST_VALUE>();
+  return (
+    <div>
+      <span data-testid={TEST_ID_VALUE}>{value ?? "null"}</span>
+      <button
+        data-testid={TEST_ID_BUTTON}
+        onClick={(e) =>
+          onChange?.(
+            e as unknown as React.MouseEvent<HTMLElement>,
+            TEST_VALUE.OPTION_B,
+          )
+        }
+      >
+        Change
+      </button>
+    </div>
+  );
+}
+
+describe("ToggleButtonGroupProvider", () => {
+  it("should render children", () => {
+    render(
+      <ToggleButtonGroupProvider>
+        <div data-testid="child">child component</div>
+      </ToggleButtonGroupProvider>,
+    );
+
+    expect(screen.getByTestId("child")).toBeTruthy();
+  });
+
+  it("should set initial value to null by default", () => {
+    render(
+      <ToggleButtonGroupProvider>
+        <TestConsumer />
+      </ToggleButtonGroupProvider>,
+    );
+
+    expect(screen.getByTestId(TEST_ID_VALUE).textContent).toBe("null");
+  });
+
+  it("should set initial value when provided", () => {
+    render(
+      <ToggleButtonGroupProvider<TEST_VALUE> initialValue={TEST_VALUE.OPTION_A}>
+        <TestConsumer />
+      </ToggleButtonGroupProvider>,
+    );
+
+    expect(screen.getByTestId(TEST_ID_VALUE).textContent).toBe(
+      TEST_VALUE.OPTION_A,
+    );
+  });
+
+  it("should update value on onChange", () => {
+    render(
+      <ToggleButtonGroupProvider<TEST_VALUE> initialValue={TEST_VALUE.OPTION_A}>
+        <TestConsumer />
+      </ToggleButtonGroupProvider>,
+    );
+
+    expect(screen.getByTestId(TEST_ID_VALUE).textContent).toBe(
+      TEST_VALUE.OPTION_A,
+    );
+
+    act(() => {
+      screen.getByTestId(TEST_ID_BUTTON).click();
+    });
+
+    expect(screen.getByTestId(TEST_ID_VALUE).textContent).toBe(
+      TEST_VALUE.OPTION_B,
+    );
+  });
+
+  it("should pass props to render function children", () => {
+    render(
+      <ToggleButtonGroupProvider<TEST_VALUE> initialValue={TEST_VALUE.OPTION_A}>
+        {({ onChange, value }) => (
+          <div>
+            <span data-testid={TEST_ID_VALUE}>{value}</span>
+            <button
+              data-testid={TEST_ID_BUTTON}
+              onClick={(e) =>
+                onChange?.(
+                  e as unknown as React.MouseEvent<HTMLElement>,
+                  TEST_VALUE.OPTION_B,
+                )
+              }
+            >
+              Change
+            </button>
+          </div>
+        )}
+      </ToggleButtonGroupProvider>,
+    );
+
+    expect(screen.getByTestId(TEST_ID_VALUE).textContent).toBe(
+      TEST_VALUE.OPTION_A,
+    );
+
+    act(() => {
+      screen.getByTestId(TEST_ID_BUTTON).click();
+    });
+
+    expect(screen.getByTestId(TEST_ID_VALUE).textContent).toBe(
+      TEST_VALUE.OPTION_B,
+    );
+  });
+});