feat: linked graph view with navigation

__test__/components/Graph/Force-Directed-Graph/ForceDirectedGraph.test.tsx

@@ -25,6 +25,12 @@ describe("ForceDirectedGraph", () => {
   let graph: Graph
   let constrainedNodeId: string
 
+  const mockFunc = jest.fn()
+
+    beforeEach(() => {
+        mockFunc.mockClear()
+    })
+
   beforeEach(() => {
     graph = new Graph(["1", "2", "3"], ["1", "2"], ["2", "3"], [1, 2])
     constrainedNodeId = "2"
@@ -39,6 +45,7 @@ describe("ForceDirectedGraph", () => {
       <ForceDirectedGraph
         graph={graph}
         constrainedNodeId={constrainedNodeId}
+        onModalPress={mockFunc}
       />,
     )
     expect(component).toBeTruthy()
@@ -49,6 +56,7 @@ describe("ForceDirectedGraph", () => {
       <ForceDirectedGraph
         graph={graph}
         constrainedNodeId={constrainedNodeId}
+        onModalPress={mockFunc}
       />,
     )
 
@@ -111,6 +119,7 @@ describe("ForceDirectedGraph", () => {
       <ForceDirectedGraph
         graph={graph}
         constrainedNodeId={constrainedNodeId}
+        onModalPress={mockFunc}
       />,
     )
 
@@ -136,35 +145,9 @@ describe("ForceDirectedGraph", () => {
       jest.advanceTimersByTime(500)
     })
 
-    await waitFor(() => {
-      const modal = component.getByTestId("modal")
-      expect(modal).toBeTruthy()
-      expect(modal.props.visible).toBe(true)
-    }, {timeout: 10})
-
+
     jest.useRealTimers()    
-
-    const modale_image = component.getByTestId("modal-profile-picture")
-    expect(modale_image).toBeTruthy()
-
-    act (() => {
-      fireEvent(modale_image, "press")
-    })
-
-    const quitModal = component.getByTestId("modal-touchable")
-    expect(quitModal).toBeTruthy()
-
-    act(() => {
-    fireEvent(quitModal, "press")
-    })
-
-    jest.useFakeTimers()
-
-    await waitFor(() => {
-      expect(component.queryByTestId("modal")).toBeNull()
-    }, {timeout: 10})
-
-    jest.useRealTimers()
+    expect(mockFunc).toHaveBeenCalled()
 
   })
 
@@ -174,6 +157,7 @@ describe("ForceDirectedGraph", () => {
       <ForceDirectedGraph
         graph={graph}
         constrainedNodeId={constrainedNodeId}
+        onModalPress={mockFunc}
       />,
     )
 
@@ -198,29 +182,14 @@ describe("ForceDirectedGraph", () => {
       <ForceDirectedGraph
         graph={graph}
         constrainedNodeId={constrainedNodeId}
+        onModalPress={mockFunc}
       />,
     )
 
     const node1 = component.getByTestId("node-1")
 
     expect(node1).toBeTruthy()
-    expect(component.queryByTestId("modal")).toBeNull()
-
-    fireEvent(node1, "pressIn")
-
-    jest.useFakeTimers()
-    act(() => {
-    jest.advanceTimersByTime(100)
-    })
-
-    act (() => {
-      fireEvent(node1, "pressOut")
-    })
-
-    await waitFor(() => {
-      expect(component.queryByTestId("modal")).toBeNull()
-    }, {timeout: 10})
-    jest.useRealTimers()
+    expect(mockFunc).not.toHaveBeenCalled()
   })
 
   it("pinching zooms the graph", async () => {
@@ -229,6 +198,7 @@ describe("ForceDirectedGraph", () => {
       <ForceDirectedGraph
         graph={graph}
         constrainedNodeId={constrainedNodeId}
+        onModalPress={mockFunc}
       />,
     )
 

__test__/screens/Contacts/ContactGraph/ContactGraph.test.tsx

@@ -1,12 +1,111 @@
 import React from "react"
-import { render } from "@testing-library/react-native"
+import { act, fireEvent, render } from "@testing-library/react-native"
 import ContactGraph from "../../../../screens/Contacts/ContactGraph/ContactGraph"
 
 describe("ContactGraph", () => {
 
-  it("renders correctly", () => {
-    const component = render(<ContactGraph />)
-    expect(component).toBeTruthy()
-  })
+  const mockFunc = jest.fn()
+
+    beforeEach(() => {
+        mockFunc.mockClear()
+    })
+
+    it("renders the screen", () => {
+        const component = render(<ContactGraph onContactPress={() => mockFunc} />)
+        expect(component).toBeTruthy()
+    })
+
+    it("search bar is reachable", () => {
+        const component = render(<ContactGraph onContactPress={() => mockFunc} />)
+        expect(component).toBeTruthy()
+
+        const searchBar = component.getByPlaceholderText("Search...")
+        expect(searchBar).toBeTruthy()
+
+        act(() => {
+        fireEvent(searchBar, "press")
+        })
+
+        act(() => {
+        fireEvent.changeText(searchBar, "")
+        })
+
+        expect(searchBar.props.value).toBe("")
+
+        act(() => {
+        fireEvent.changeText(searchBar, "0")
+        })
+
+        expect(searchBar.props.value).toBe("0")
+
+        act (() => {
+        fireEvent(searchBar, "submitEditing")
+        })
+    })
+
+    it("clicking a node opens a modal", () => {
+        const component = render(<ContactGraph onContactPress={() => mockFunc} />)
+        expect(component).toBeTruthy()
+
+        const node = component.getByTestId("node-0")
+        expect(node).toBeTruthy()
+
+        act(() => {
+            fireEvent(node, "pressIn")
+            })
+
+            jest.useFakeTimers()
+            act(() => {
+            jest.advanceTimersByTime(50)
+            })
+
+            act (() => {
+              fireEvent(node, "pressOut")
+              jest.advanceTimersByTime(500)
+            })
+
+
+            jest.useRealTimers()  
+
+        const modal = component.getByTestId("modal")
+        expect(modal).toBeTruthy()
+    })
 
+    it("clicking outside the modal closes it", () => {
+        const component = render(<ContactGraph onContactPress={() => mockFunc} />)
+        expect(component).toBeTruthy()
+
+        const node = component.getByTestId("node-0")
+        expect(node).toBeTruthy()
+
+        act(() => {
+            fireEvent(node, "pressIn")
+            })
+
+            jest.useFakeTimers()
+            act(() => {
+            jest.advanceTimersByTime(50)
+            })
+
+            act (() => {
+              fireEvent(node, "pressOut")
+              jest.advanceTimersByTime(500)
+            })
+
+
+            jest.useRealTimers()  
+
+        const modal = component.getByTestId("modal")
+        expect(modal).toBeTruthy()
+
+        const modalTouchable = component.getByTestId("modal-touchable")
+        expect(modalTouchable).toBeTruthy()
+
+        act(() => {
+            fireEvent(modalTouchable, "press")
+            })
+
+        expect(component.queryByTestId("modal")).toBeNull()
+    })
+
 })

__test__/screens/Contacts/ExploreScreen.test.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, fireEvent } from "@testing-library/react-native"
+import { render, fireEvent, act, waitFor } from "@testing-library/react-native"
 import ExploreScreen from "../../../screens/Contacts/ExploreScreen"
 import { SafeAreaProvider } from "react-native-safe-area-context"
 import { black, lightGray } from "../../../assets/colors/colors"
@@ -38,6 +38,17 @@ jest.mock("react-native-safe-area-context", () => {
   }
 })
 
+jest.mock("react-native-gesture-handler", () => {
+  return {
+    State: {
+      END: 5,
+    },
+    PanGestureHandler: 'View',
+    PinchGestureHandler: 'View',
+    GestureHandlerRootView: 'View',
+  }
+})
+
 beforeAll(() => {
   global.alert = jest.fn()
 })
@@ -85,6 +96,61 @@ describe("ExploreScreen", () => {
       expect(mockNavigation.navigate).toHaveBeenCalledWith("ExternalProfile", {"uid": "1"})
     })
 
+    it ("navigates to profile screen when clicking on contact in graph view", async () => {
+      const { getByText, getByTestId, queryByTestId } = render(
+        <SafeAreaProvider>
+          <NavigationContainer>
+            <ExploreScreen navigation={mockNavigation}/>
+          </NavigationContainer>
+        </SafeAreaProvider>
+      )
+      fireEvent.press(getByText("Graph View"))
+
+      const panHandler = getByTestId("pan-handler")
+      const node1 = getByTestId("node-1")
+
+    expect(node1).toBeTruthy()
+    expect(panHandler).toBeTruthy()
+    expect(panHandler.props.enabled).toBe(true)
+
+    act(() => {
+    fireEvent(node1, "pressIn")
+    })
+
+    jest.useFakeTimers()
+    act(() => {
+    jest.advanceTimersByTime(50)
+    })
+
+    act (() => {
+      fireEvent(node1, "pressOut")
+      jest.advanceTimersByTime(500)
+    })
+
+    await waitFor(() => {
+      const modal = getByTestId("modal")
+      expect(modal).toBeTruthy()
+      expect(modal.props.visible).toBe(true)
+    }, {timeout: 10})
+
+    jest.useRealTimers()    
+
+    const modale_image = getByTestId("modal-profile-picture")
+    expect(modale_image).toBeTruthy()
+
+    act(() => {
+    fireEvent(modale_image, "press")
+    })
+
+    await waitFor(() => {
+      expect(queryByTestId("modal")).toBeNull()
+    }, {timeout: 10})
+
+    jest.useRealTimers()
+
+    expect(mockNavigation.navigate).toHaveBeenCalledWith("ExternalProfile", {"uid": "1"})
+      })
+
 })