Fix tests

Author: kmcginnes

packages/graph-explorer/src/hooks/useAddToGraph.test.ts

@@ -21,10 +21,24 @@ import {
   VertexTypeConfig,
 } from "@/core";
 import { waitFor } from "@testing-library/react";
+import { useMaterializeVertices } from "./useMaterializeVertices";
+import { cloneDeep } from "lodash";
+
+vi.mock("./useMaterializeVertices", () => ({
+  useMaterializeVertices: vi.fn(),
+}));
+
+beforeEach(() => {
+  vi.resetAllMocks();
+});
 
 test("should add one node", async () => {
   const vertex = createRandomVertex();
 
+  vi.mocked(useMaterializeVertices).mockReturnValue(() =>
+    Promise.resolve(toNodeMap([vertex]))
+  );
+
   const { result } = renderHookWithRecoilRoot(() => {
     const callback = useAddToGraph();
     const vertices = useRecoilValue(nodesAtom);
@@ -43,11 +57,43 @@ test("should add one node", async () => {
   });
 });
 
+test("should materialize fragment vertices", async () => {
+  const vertex = createRandomVertex();
+  const clonedVertex = cloneDeep(vertex);
+  vertex.__isFragment = true;
+  vertex.attributes = {};
+
+  vi.mocked(useMaterializeVertices).mockReturnValue(() =>
+    Promise.resolve(toNodeMap([clonedVertex]))
+  );
+
+  const { result } = renderHookWithRecoilRoot(() => {
+    const callback = useAddToGraph();
+    const vertices = useRecoilValue(nodesAtom);
+    const edges = useRecoilValue(edgesAtom);
+
+    return { callback, vertices, edges };
+  });
+
+  act(() => {
+    result.current.callback({ vertices: [vertex] });
+  });
+
+  await waitFor(() => {
+    const actual = result.current.vertices.get(vertex.id);
+    expect(actual).toEqual(clonedVertex);
+  });
+});
+
 test("should add one edge", async () => {
   const node1 = createRandomVertex();
   const node2 = createRandomVertex();
   const edge = createRandomEdge(node1, node2);
 
+  vi.mocked(useMaterializeVertices).mockReturnValue(() =>
+    Promise.resolve(toNodeMap([node1, node2]))
+  );
+
   const { result } = renderHookWithRecoilRoot(
     () => {
       const callback = useAddToGraph();
@@ -74,6 +120,10 @@ test("should add one edge", async () => {
 test("should add multiple nodes and edges", async () => {
   const randomEntities = createRandomEntities();
 
+  vi.mocked(useMaterializeVertices).mockReturnValue(() =>
+    Promise.resolve(randomEntities.nodes)
+  );
+
   const { result } = renderHookWithRecoilRoot(() => {
     const callback = useAddToGraph();
     const vertices = useRecoilValue(nodesAtom);
@@ -105,6 +155,10 @@ test("should update schema when adding a node", async () => {
   const expectedVertexType = extractConfigFromEntity(vertex);
   const dbState = new DbState();
 
+  vi.mocked(useMaterializeVertices).mockReturnValue(() =>
+    Promise.resolve(toNodeMap([vertex]))
+  );
+
   const { result } = renderHookWithRecoilRoot(
     () => {
       const callback = useAddToGraph();
@@ -136,6 +190,10 @@ test("should update schema when adding a node with no label", async () => {
   const expectedVertexType = extractConfigFromEntity(vertex);
   const dbState = new DbState();
 
+  vi.mocked(useMaterializeVertices).mockReturnValue(() =>
+    Promise.resolve(toNodeMap([vertex]))
+  );
+
   const { result } = renderHookWithRecoilRoot(
     () => {
       const callback = useAddToGraph();
@@ -169,6 +227,10 @@ test("should update schema when adding an edge", async () => {
   dbState.addVertexToGraph(node1);
   dbState.addVertexToGraph(node2);
 
+  vi.mocked(useMaterializeVertices).mockReturnValue(() =>
+    Promise.resolve(toNodeMap([node1, node2]))
+  );
+
   const { result } = renderHookWithRecoilRoot(
     () => {
       const callback = useAddToGraph();
@@ -205,6 +267,10 @@ test("should add missing attributes to the schema when adding a node", async ()
   };
   dbState.activeSchema.vertices.push(initialVtConfig);
 
+  vi.mocked(useMaterializeVertices).mockReturnValue(() =>
+    Promise.resolve(toNodeMap([vertex]))
+  );
+
   const { result } = renderHookWithRecoilRoot(
     () => {
       const callback = useAddToGraph();
@@ -245,6 +311,10 @@ test("should add missing attributes to the schema when adding an edge", async ()
   };
   dbState.activeSchema.edges.push(initialEtConfig);
 
+  vi.mocked(useMaterializeVertices).mockReturnValue(() =>
+    Promise.resolve(toNodeMap([node1, node2]))
+  );
+
   const { result } = renderHookWithRecoilRoot(
     () => {
       const callback = useAddToGraph();
@@ -270,8 +340,13 @@ test("should add missing attributes to the schema when adding an edge", async ()
 });
 
 test("should update graph storage when adding a node", async () => {
+  const vertex = createRandomVertex();
   const dbState = new DbState();
 
+  vi.mocked(useMaterializeVertices).mockReturnValue(() =>
+    Promise.resolve(toNodeMap([vertex]))
+  );
+
   const { result } = renderHookWithRecoilRoot(
     () => {
       const callback = useAddToGraph();
@@ -281,7 +356,6 @@ test("should update graph storage when adding a node", async () => {
     snapshot => dbState.applyTo(snapshot)
   );
 
-  const vertex = createRandomVertex();
   act(() => {
     result.current.callback({ vertices: [vertex] });
   });
@@ -305,6 +379,10 @@ test("should update graph storage when adding an edge", async () => {
   dbState.addVertexToGraph(node1);
   dbState.addVertexToGraph(node2);
 
+  vi.mocked(useMaterializeVertices).mockReturnValue(() =>
+    Promise.resolve(toNodeMap([node1, node2]))
+  );
+
   const { result } = renderHookWithRecoilRoot(
     () => {
       const callback = useAddToGraph();
@@ -329,8 +407,17 @@ test("should update graph storage when adding an edge", async () => {
 });
 
 test("should ignore blank nodes when updating graph storage", async () => {
+  const vertex = createRandomVertexForRdf();
+  const blankNode = createRandomVertexForRdf();
+  blankNode.__isBlank = true;
+  const edge = createRandomEdge(vertex, blankNode);
+
   const dbState = new DbState();
 
+  vi.mocked(useMaterializeVertices).mockReturnValue(() =>
+    Promise.resolve(toNodeMap([vertex, blankNode]))
+  );
+
   const { result } = renderHookWithRecoilRoot(
     () => {
       const callback = useAddToGraph();
@@ -340,11 +427,6 @@ test("should ignore blank nodes when updating graph storage", async () => {
     snapshot => dbState.applyTo(snapshot)
   );
 
-  const vertex = createRandomVertexForRdf();
-  const blankNode = createRandomVertexForRdf();
-  blankNode.__isBlank = true;
-  const edge = createRandomEdge(vertex, blankNode);
-
   act(() => {
     result.current.callback({ vertices: [vertex, blankNode], edges: [edge] });
   });

packages/graph-explorer/src/hooks/useAddToGraph.ts

@@ -1,5 +1,4 @@
 import { useNotification } from "@/components/NotificationProvider";
-import { vertexDetailsQuery, VertexDetailsRequest } from "@/connector";
 import {
   activeSchemaSelector,
   createVertex,
@@ -9,16 +8,15 @@ import {
   toEdgeMap,
   toNodeMap,
   updateSchemaFromEntities,
-  useExplorer,
   useUpdateGraphSession,
   Vertex,
-  VertexId,
 } from "@/core";
 import { logger } from "@/utils";
 import { createDisplayError } from "@/utils/createDisplayError";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { startTransition, useCallback } from "react";
 import { useSetRecoilState } from "recoil";
+import { useMaterializeVertices } from "./useMaterializeVertices";
 
 /** Returns a callback that adds an array of nodes and edges to the graph. */
 export function useAddToGraph() {
@@ -93,34 +91,6 @@ export function useAddToGraph() {
   );
 }
 
-/** Fetch the details if the vertex is a fragment. */
-function useMaterializeVertices() {
-  const queryClient = useQueryClient();
-  const explorer = useExplorer();
-
-  return useCallback(
-    async (vertices: Map<VertexId, Vertex>) => {
-      const responses = await Promise.all(
-        vertices.values().map(async vertex => {
-          if (!vertex.__isFragment) {
-            return vertex;
-          }
-
-          const request: VertexDetailsRequest = {
-            vertexId: vertex.id,
-          };
-          const response = await queryClient.ensureQueryData(
-            vertexDetailsQuery(request, explorer)
-          );
-          return response.vertex;
-        })
-      );
-      return toNodeMap(responses.filter(vertex => vertex != null));
-    },
-    [queryClient, explorer]
-  );
-}
-
 /** Returns a callback the given vertex to the graph. */
 export function useAddVertexToGraph(vertex: Vertex) {
   const callback = useAddToGraph();

packages/graph-explorer/src/hooks/useMaterializeVertices.ts

@@ -0,0 +1,32 @@
+import { VertexDetailsRequest, vertexDetailsQuery } from "@/connector";
+import { useExplorer, VertexId, Vertex, toNodeMap } from "@/core";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+
+/** Fetch the details if the vertex is a fragment. */
+export function useMaterializeVertices() {
+  const queryClient = useQueryClient();
+  const explorer = useExplorer();
+
+  return useCallback(
+    async (vertices: Map<VertexId, Vertex>) => {
+      const responses = await Promise.all(
+        vertices.values().map(async vertex => {
+          if (!vertex.__isFragment) {
+            return vertex;
+          }
+
+          const request: VertexDetailsRequest = {
+            vertexId: vertex.id,
+          };
+          const response = await queryClient.ensureQueryData(
+            vertexDetailsQuery(request, explorer)
+          );
+          return response.vertex;
+        })
+      );
+      return toNodeMap(responses.filter(vertex => vertex != null));
+    },
+    [queryClient, explorer]
+  );
+}