fix(frontend): correctly display document information in explore view details (#781)

* stringify json values and render within pre tags so react can render them

* run prettier

* add tests for first document

* prettier

* return 'Not Available' instead of 'null' string

* don't render objects in document details; add tests

* remove newlines from imports

frontend/app/explore/DocumentItem/DocumentData.tsx

@@ -43,14 +43,15 @@ const DocumentData = ({ documentName }: DocumentDataProps): JSX.Element => {
 
       <div className="flex flex-col">
         {documents[0] &&
-          Object.keys(documents[0]).map((doc) => {
+          Object.entries(documents[0]).map(([key, value]) => {
+            if (value && typeof value === "object") return;
             return (
-              <div className="grid grid-cols-2 py-2 border-b" key={doc}>
+              <div className="grid grid-cols-2 py-2 border-b" key={key}>
                 <p className="capitalize font-bold break-words">
-                  {doc.replaceAll("_", " ")}
+                  {key.replaceAll("_", " ")}
                 </p>
                 <span className="break-words my-auto">
-                  {documents[0][doc] || "Not Available"}
+                  {String(value || "Not Available")}
                 </span>
               </div>
             );

frontend/app/explore/DocumentItem/__tests__/DocumentData.test.tsx

@@ -0,0 +1,77 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { BrainConfigProvider } from "@/lib/context/BrainConfigProvider";
+import DocumentData from "../DocumentData";
+
+const useSupabaseMock = vi.fn(() => ({
+  session: { user: {} },
+}));
+
+vi.mock("@/lib/context/SupabaseProvider", () => ({
+  useSupabase: () => useSupabaseMock(),
+}));
+
+vi.mock("@/lib/hooks", async () => {
+  const actual = await vi.importActual<typeof import("@/lib/hooks")>(
+    "@/lib/hooks"
+  );
+
+  return {
+    ...actual,
+    useAxios: () => ({
+      axiosInstance: {
+        get: vi.fn().mockResolvedValue({
+          data: {
+            documents: [
+              {
+                file_name: "mock_file_name.pdf",
+                file_size: "0",
+                file_extension: null,
+                file_url: null,
+                content: "foo,bar\nbaz,bat",
+                brains_vectors: [
+                  {
+                    brain_id: "mock_brain_id",
+                    vector_id: "mock_vector_id_1",
+                  },
+                ],
+              },
+              {
+                file_name: "mock_file_name.pdf",
+                file_size: "0",
+                file_extension: null,
+                file_url: null,
+                content: "foo,bar\nbaz,bat",
+                brains_vectors: [
+                  {
+                    brain_id: "mock_brain_id",
+                    vector_id: "mock_vector_id_2",
+                  },
+                ],
+              },
+            ],
+          },
+        }),
+      },
+    }),
+  };
+});
+
+describe("DocumentData", () => {
+  it("should render document data", async () => {
+    const documentName = "Test document";
+    render(
+      <BrainConfigProvider>
+        <DocumentData documentName={documentName} />
+      </BrainConfigProvider>
+    );
+
+    expect(screen.getByText(documentName)).toBeDefined();
+
+    await waitFor(() => {
+      expect(screen.getByText("content")).toBeDefined();
+      expect(screen.getByText("foo,bar", { exact: false })).toBeDefined();
+      expect(screen.getByText("baz,bat", { exact: false })).toBeDefined();
+    });
+  });
+});