|
| 1 | +/** |
| 2 | + * @vitest-environment jsdom |
| 3 | + */ |
| 4 | +import { act } from 'react' |
| 5 | +import type { Node, ReactFlowInstance, Viewport } from '@xyflow/react' |
| 6 | +import { createRoot, type Root } from 'react-dom/client' |
| 7 | +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' |
| 8 | +import { useCanvasViewport } from '@/hooks/use-canvas-viewport' |
| 9 | + |
| 10 | +const mountedRoots: Root[] = [] |
| 11 | + |
| 12 | +function renderCanvasViewport() { |
| 13 | + ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true |
| 14 | + const root = createRoot(document.createElement('div')) |
| 15 | + mountedRoots.push(root) |
| 16 | + |
| 17 | + const setViewport = vi.fn() |
| 18 | + const reactFlowInstance = { |
| 19 | + getNodes: () => [], |
| 20 | + screenToFlowPosition: (position: { x: number; y: number }) => position, |
| 21 | + setViewport, |
| 22 | + } as unknown as ReactFlowInstance |
| 23 | + let fitViewToBounds: ReturnType<typeof useCanvasViewport>['fitViewToBounds'] | undefined |
| 24 | + |
| 25 | + function Probe() { |
| 26 | + fitViewToBounds = useCanvasViewport(reactFlowInstance).fitViewToBounds |
| 27 | + return null |
| 28 | + } |
| 29 | + |
| 30 | + act(() => root.render(<Probe />)) |
| 31 | + |
| 32 | + return { |
| 33 | + applyFit(nodes: Node[]) { |
| 34 | + fitViewToBounds?.({ nodes, padding: 0, minZoom: 0.01, maxZoom: 10, duration: 0 }) |
| 35 | + }, |
| 36 | + get viewport(): Viewport | undefined { |
| 37 | + return setViewport.mock.calls.at(-1)?.[0] |
| 38 | + }, |
| 39 | + } |
| 40 | +} |
| 41 | + |
| 42 | +describe('useCanvasViewport', () => { |
| 43 | + beforeEach(() => { |
| 44 | + Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1000 }) |
| 45 | + Object.defineProperty(window, 'innerHeight', { configurable: true, value: 800 }) |
| 46 | + }) |
| 47 | + |
| 48 | + afterEach(() => { |
| 49 | + act(() => { |
| 50 | + for (const root of mountedRoots.splice(0)) root.unmount() |
| 51 | + }) |
| 52 | + }) |
| 53 | + |
| 54 | + it('falls back from nonpositive measured dimensions to configured dimensions', () => { |
| 55 | + const probe = renderCanvasViewport() |
| 56 | + |
| 57 | + probe.applyFit([ |
| 58 | + { |
| 59 | + id: 'node-1', |
| 60 | + position: { x: 100, y: 200 }, |
| 61 | + data: {}, |
| 62 | + measured: { width: 0, height: -1 }, |
| 63 | + width: 250, |
| 64 | + height: 100, |
| 65 | + }, |
| 66 | + ]) |
| 67 | + |
| 68 | + expect(probe.viewport).toEqual({ x: -400, y: -600, zoom: 4 }) |
| 69 | + }) |
| 70 | + |
| 71 | + it('uses block defaults when measured and configured dimensions are not usable', () => { |
| 72 | + const probe = renderCanvasViewport() |
| 73 | + |
| 74 | + probe.applyFit([ |
| 75 | + { |
| 76 | + id: 'node-1', |
| 77 | + position: { x: 0, y: 0 }, |
| 78 | + data: {}, |
| 79 | + measured: { width: 0, height: 0 }, |
| 80 | + width: -1, |
| 81 | + height: -1, |
| 82 | + }, |
| 83 | + ]) |
| 84 | + |
| 85 | + expect(probe.viewport).toEqual({ x: 0, y: 200, zoom: 4 }) |
| 86 | + }) |
| 87 | +}) |
0 commit comments