From 6a3da5aded1039da38ca1c30c00c1a7c4ca0b0f5 Mon Sep 17 00:00:00 2001
From: Pouzor <remy.jardinet@gmail.com>
Date: Sat, 18 Apr 2026 22:41:37 +0200
Subject: [PATCH] fix: memoize onBeforeDelete and fix test mock selectors

Extract onBeforeDelete into useCallback to avoid new fn ref each render.
Fix useThemeStore/useCanvasStore mocks to call the selector fn rather
than ignoring it, and reset mockZoom in beforeEach.
---
 frontend/src/components/canvas/CanvasContainer.tsx        | 7 ++++++-
 .../src/components/canvas/__tests__/BaseNode.test.tsx     | 8 +++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/canvas/CanvasContainer.tsx b/frontend/src/components/canvas/CanvasContainer.tsx
index 1daad1d..2e74c83 100644
--- a/frontend/src/components/canvas/CanvasContainer.tsx
+++ b/frontend/src/components/canvas/CanvasContainer.tsx
@@ -73,6 +73,11 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
     onNodeDoubleClick?.(node)
   }, [onNodeDoubleClick])
 
+  const handleBeforeDelete = useCallback(async () => {
+    snapshotHistory()
+    return true
+  }, [snapshotHistory])
+
   return (
     <div className="w-full h-full" style={{ background: theme.colors.canvasBackground }}>
       <ReactFlow
@@ -89,7 +94,7 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         deleteKeyCode={['Backspace', 'Delete']}
-        onBeforeDelete={async () => { snapshotHistory(); return true }}
+        onBeforeDelete={handleBeforeDelete}
         selectionOnDrag={lassoMode}
         panOnDrag={lassoMode ? [1, 2] : true}
         panActivationKeyCode="Space"
diff --git a/frontend/src/components/canvas/__tests__/BaseNode.test.tsx b/frontend/src/components/canvas/__tests__/BaseNode.test.tsx
index 3c5cf6c..a4fd826 100644
--- a/frontend/src/components/canvas/__tests__/BaseNode.test.tsx
+++ b/frontend/src/components/canvas/__tests__/BaseNode.test.tsx
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { Server } from 'lucide-react'
 import { BaseNode } from '../nodes/BaseNode'
@@ -16,11 +16,11 @@ vi.mock('@xyflow/react', () => ({
 }))
 
 vi.mock('@/stores/themeStore', () => ({
-  useThemeStore: () => 'dark',
+  useThemeStore: (sel: (s: { activeTheme: string }) => unknown) => sel({ activeTheme: 'dark' }),
 }))
 
 vi.mock('@/stores/canvasStore', () => ({
-  useCanvasStore: () => ({ hideIp: false }),
+  useCanvasStore: (sel: (s: { hideIp: boolean }) => unknown) => sel({ hideIp: false }),
 }))
 
 vi.mock('@/utils/themes', () => ({
@@ -89,6 +89,8 @@ function renderBaseNode(data: Partial<NodeData>) {
 }
 
 describe('BaseNode — borderWidth zoom scaling', () => {
+  beforeEach(() => { mockZoom = 1 })
+
   it('borderWidth is 1px at zoom=1', () => {
     mockZoom = 1
     const { container } = renderBaseNode({})