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.
This commit is contained in:
Pouzor
2026-04-18 22:41:37 +02:00
parent 35c3d00f17
commit 6a3da5aded
2 changed files with 11 additions and 4 deletions
@@ -73,6 +73,11 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
onNodeDoubleClick?.(node) onNodeDoubleClick?.(node)
}, [onNodeDoubleClick]) }, [onNodeDoubleClick])
const handleBeforeDelete = useCallback(async () => {
snapshotHistory()
return true
}, [snapshotHistory])
return ( return (
<div className="w-full h-full" style={{ background: theme.colors.canvasBackground }}> <div className="w-full h-full" style={{ background: theme.colors.canvasBackground }}>
<ReactFlow <ReactFlow
@@ -89,7 +94,7 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
nodeTypes={nodeTypes} nodeTypes={nodeTypes}
edgeTypes={edgeTypes} edgeTypes={edgeTypes}
deleteKeyCode={['Backspace', 'Delete']} deleteKeyCode={['Backspace', 'Delete']}
onBeforeDelete={async () => { snapshotHistory(); return true }} onBeforeDelete={handleBeforeDelete}
selectionOnDrag={lassoMode} selectionOnDrag={lassoMode}
panOnDrag={lassoMode ? [1, 2] : true} panOnDrag={lassoMode ? [1, 2] : true}
panActivationKeyCode="Space" panActivationKeyCode="Space"
@@ -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 { render, screen } from '@testing-library/react'
import { Server } from 'lucide-react' import { Server } from 'lucide-react'
import { BaseNode } from '../nodes/BaseNode' import { BaseNode } from '../nodes/BaseNode'
@@ -16,11 +16,11 @@ vi.mock('@xyflow/react', () => ({
})) }))
vi.mock('@/stores/themeStore', () => ({ vi.mock('@/stores/themeStore', () => ({
useThemeStore: () => 'dark', useThemeStore: (sel: (s: { activeTheme: string }) => unknown) => sel({ activeTheme: 'dark' }),
})) }))
vi.mock('@/stores/canvasStore', () => ({ vi.mock('@/stores/canvasStore', () => ({
useCanvasStore: () => ({ hideIp: false }), useCanvasStore: (sel: (s: { hideIp: boolean }) => unknown) => sel({ hideIp: false }),
})) }))
vi.mock('@/utils/themes', () => ({ vi.mock('@/utils/themes', () => ({
@@ -89,6 +89,8 @@ function renderBaseNode(data: Partial<NodeData>) {
} }
describe('BaseNode — borderWidth zoom scaling', () => { describe('BaseNode — borderWidth zoom scaling', () => {
beforeEach(() => { mockZoom = 1 })
it('borderWidth is 1px at zoom=1', () => { it('borderWidth is 1px at zoom=1', () => {
mockZoom = 1 mockZoom = 1
const { container } = renderBaseNode({}) const { container } = renderBaseNode({})