feat: add test for hover highlighting of users and related edges in h…

…ighlightNodesAndEdges function
liam-hq · Dec 19, 2024 · bf892f4 · bf892f4
1 parent 352d79d
commit bf892f4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/...nd/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts b/...nd/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts
@@ -182,5 +182,27 @@ describe(highlightNodesAndEdges, () => {
         ),
       ])
     })
+    it('When the users is hovered, the users and related edges are highlighted', () => {
+      const { edges: updatedEdges } = highlightNodesAndEdges(nodes, edges, {
+        hoverTableName: 'users',
+      })
+
+      expect(updatedEdges).toEqual([
+        anEdge('users', 'posts', 'users-id', 'posts-user_id', {
+          animated: true,
+          data: { isHighlighted: true },
+        }),
+        anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', {
+          animated: true,
+          data: { isHighlighted: true },
+        }),
+        anEdge(
+          'comments',
+          'comment_users',
+          'comments-id',
+          'comment_users-comment_id',
+        ),
+      ])
+    })
   })
 })
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts
@@ -31,11 +31,11 @@ const isHoveredNode = (
   return node.data.table.name === hoverTableName
 }
 
-const isActivelyRelatedEdge = (
-  activeTableName: string | undefined,
+const isRelatedEdgeToTarget = (
+  targetTableName: string | undefined,
   edge: Edge,
 ): boolean => {
-  return edge.source === activeTableName || edge.target === activeTableName
+  return edge.source === targetTableName || edge.target === targetTableName
 }
 
 const getHighlightedHandlesForRelatedNode = (
@@ -158,7 +158,7 @@ export const highlightNodesAndEdges = (
   })
 
   const updatedEdges = edges.map((edge) => {
-    if (isActivelyRelatedEdge(activeTableName, edge)) {
+    if (isRelatedEdgeToTarget(activeTableName ?? hoverTableName, edge)) {
       return highlightEdge(edge)
     }