@pixerate/editor-svelte 0.3.12 → 0.5.0

package/src/canvas/__tests__/canvas-docking.test.ts

@@ -0,0 +1,136 @@
+import { describe, it, expect, vi } from 'vitest';
+import { createCanvasDocking } from '../createCanvasDocking.svelte.js';
+import type { CanvasNode } from '../types.js';
+
+describe('createCanvasDocking', () => {
+  const createSampleNode = (id: string, type = 'default', x = 0, y = 0): CanvasNode => ({
+    id,
+    type,
+    position: { x, y },
+    data: {}
+  });
+
+  it('initializes with null drag and connect states', () => {
+    const docking = createCanvasDocking();
+
+    expect(docking.isDragging).toBe(false);
+    expect(docking.draggedNode).toBeNull();
+    expect(docking.draggedInitialPosition).toBeNull();
+    expect(docking.connectingHandle).toBe('');
+    expect(docking.connectingNode).toBeNull();
+  });
+
+  it('tracks drag start, records initial position, and sets isDragging', () => {
+    const docking = createCanvasDocking();
+    const node = createSampleNode('n1', 'default', 100, 200);
+
+    docking.handleNodeDragStart({ targetNode: node });
+
+    expect(docking.isDragging).toBe(true);
+    expect(docking.draggedNode).toBe(node);
+    expect(docking.draggedInitialPosition).toEqual({ x: 100, y: 200 });
+  });
+
+  it('fires onDockHover and onDockLeave as intersecting dock targets change', () => {
+    const onDockHover = vi.fn();
+    const onDockLeave = vi.fn();
+    const docking = createCanvasDocking({
+      isDockTarget: (n) => n.type === 'dockArea',
+      onDockHover,
+      onDockLeave
+    });
+
+    const draggedNode = createSampleNode('dragged', 'item', 50, 50);
+    const dockNode1 = createSampleNode('dock-1', 'dockArea', 0, 0);
+    const dockNode2 = createSampleNode('dock-2', 'dockArea', 200, 200);
+    const normalNode = createSampleNode('normal', 'item', 50, 50);
+
+    docking.handleNodeDragStart({ targetNode: draggedNode });
+
+    // Drag intersecting with dockNode1 and a non-dock normalNode
+    docking.handleNodeDrag(
+      { targetNode: draggedNode },
+      () => [dockNode1, normalNode]
+    );
+
+    expect(onDockHover).toHaveBeenCalledTimes(1);
+    expect(onDockHover).toHaveBeenCalledWith(dockNode1, draggedNode);
+    expect(onDockLeave).not.toHaveBeenCalled();
+
+    // Drag moves over dockNode2, leaving dockNode1
+    docking.handleNodeDrag(
+      { targetNode: draggedNode },
+      () => [dockNode2]
+    );
+
+    expect(onDockLeave).toHaveBeenCalledTimes(1);
+    expect(onDockLeave).toHaveBeenCalledWith(expect.objectContaining({ id: 'dock-1' }), draggedNode);
+    expect(onDockHover).toHaveBeenCalledTimes(2);
+    expect(onDockHover).toHaveBeenLastCalledWith(dockNode2, draggedNode);
+  });
+
+  it('fires onDockDrop and restores position on dock stop', () => {
+    const onDockDrop = vi.fn();
+    const onSave = vi.fn();
+    const updateNodePosition = vi.fn();
+
+    const docking = createCanvasDocking({
+      isDockTarget: (n) => n.type === 'dockArea',
+      restorePositionOnDock: true,
+      onDockDrop,
+      onSave
+    });
+
+    const draggedNode = createSampleNode('dragged', 'item', 100, 100);
+    const dockNode = createSampleNode('dock', 'dockArea', 0, 0);
+
+    docking.handleNodeDragStart({ targetNode: draggedNode });
+
+    // Node was dragged to new position
+    draggedNode.position = { x: 300, y: 300 };
+
+    docking.handleNodeDragStop(
+      { targetNode: draggedNode },
+      () => [dockNode],
+      updateNodePosition
+    );
+
+    expect(onDockDrop).toHaveBeenCalledWith(dockNode, draggedNode);
+    expect(updateNodePosition).toHaveBeenCalledWith('dragged', { x: 100, y: 100 });
+    expect(onSave).toHaveBeenCalled();
+    expect(docking.isDragging).toBe(false);
+    expect(docking.draggedNode).toBeNull();
+  });
+
+  it('tracks handle connect start and end', () => {
+    const docking = createCanvasDocking();
+    const node = createSampleNode('source-node');
+    const getNode = (id: string) => (id === 'source-node' ? node : undefined);
+
+    docking.handleConnectStart(
+      { nodeId: 'source-node', handleId: 'h1', handleType: 'source' },
+      getNode
+    );
+
+    expect(docking.connectingHandle).toBe('source');
+    expect(docking.connectingNode).toBe(node);
+
+    docking.handleConnectEnd();
+
+    expect(docking.connectingHandle).toBe('');
+    expect(docking.connectingNode).toBeNull();
+  });
+
+  it('resets all state cleanly', () => {
+    const docking = createCanvasDocking();
+    const node = createSampleNode('test');
+
+    docking.handleNodeDragStart({ targetNode: node });
+    expect(docking.isDragging).toBe(true);
+
+    docking.reset();
+    expect(docking.isDragging).toBe(false);
+    expect(docking.draggedNode).toBeNull();
+    expect(docking.draggedInitialPosition).toBeNull();
+  });
+});

package/src/canvas/__tests__/canvas-explosion.test.ts

@@ -0,0 +1,249 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import {
+	linearTrajectory,
+	createFanOutTrajectory,
+	createBezierTrajectory,
+	runMultiNodeTransition
+} from '../createCanvasTrajectory.js';
+import {
+	computeNodesBoundingBox,
+	calculateDirectionalDisplacement,
+	calculateReflowDisplacement
+} from '../createCanvasDisplacement.js';
+import { createCanvasExplosion } from '../createCanvasExplosion.svelte.js';
+import { createCanvasGraph } from '../createCanvasGraph.svelte.js';
+import type { CanvasNode, CanvasEdge } from '../types.js';
+
+describe('Canvas Trajectory Math & Transition Runner', () => {
+	it('evaluates linear trajectory at progress intervals', () => {
+		const origin = { x: 100, y: 100 };
+		const target = { x: 300, y: 200 };
+
+		const start = linearTrajectory(origin, target, 0, 0, 1);
+		expect(start.position).toEqual({ x: 100, y: 100 });
+		expect(start.scale).toBe(0);
+
+		const mid = linearTrajectory(origin, target, 0.5, 0, 1);
+		expect(mid.position).toEqual({ x: 200, y: 150 });
+		expect(mid.scale).toBe(0.5);
+
+		const end = linearTrajectory(origin, target, 1, 0, 1);
+		expect(end.position).toEqual({ x: 300, y: 200 });
+		expect(end.scale).toBe(1);
+	});
+
+	it('creates fan-out curved trajectory with scale and opacity', () => {
+		const origin = { x: 50, y: 100 };
+		const targetTop = { x: 250, y: 50 };
+		const targetBottom = { x: 250, y: 150 };
+
+		const trajectory = createFanOutTrajectory({
+			curvature: 0.5,
+			startScale: 0.2,
+			endScale: 1
+		});
+
+		const topPoint = trajectory(origin, targetTop, 0.5, 0, 2);
+		const bottomPoint = trajectory(origin, targetBottom, 0.5, 1, 2);
+
+		expect(topPoint.scale).toBeCloseTo(0.6);
+		expect(bottomPoint.scale).toBeCloseTo(0.6);
+		// Trajectory arc deflects top and bottom differently based on normalized index
+		expect(topPoint.position.y).not.toBe(bottomPoint.position.y);
+	});
+
+	it('creates custom bezier trajectory with control point calculator', () => {
+		const trajectory = createBezierTrajectory((orig, tgt) => ({
+			x: orig.x,
+			y: tgt.y
+		}));
+
+		const pt = trajectory({ x: 0, y: 0 }, { x: 100, y: 100 }, 0.5, 0, 1);
+		// Quadratic Bezier at t=0.5 with P0=(0,0), P1=(0,100), P2=(100,100)
+		// x = 0.25*0 + 0.5*0 + 0.25*100 = 25
+		// y = 0.25*0 + 0.5*100 + 0.25*100 = 75
+		expect(pt.position.x).toBe(25);
+		expect(pt.position.y).toBe(75);
+	});
+
+	it('runs multi-node transitions and notifies on completion', () => {
+		const node: CanvasNode = {
+			id: 'n1',
+			position: { x: 0, y: 0 },
+			data: {}
+		};
+
+		const onComplete = vi.fn();
+		const cancel = runMultiNodeTransition(
+			[
+				{
+					node,
+					from: { x: 0, y: 0 },
+					to: { x: 100, y: 100 },
+					duration: 0 // Immediate completion for testing
+				}
+			],
+			{ onComplete }
+		);
+
+		expect(node.position).toEqual({ x: 100, y: 100 });
+		expect(onComplete).toHaveBeenCalled();
+		cancel();
+	});
+});
+
+describe('Spatial Displacement Solvers', () => {
+	const createNode = (id: string, x: number, y: number, w = 150, h = 50): CanvasNode => ({
+		id,
+		position: { x, y },
+		measured: { width: w, height: h },
+		data: {}
+	});
+
+	it('computes bounding box for a set of nodes', () => {
+		const nodes = [createNode('a', 10, 20, 100, 40), createNode('b', 50, 100, 200, 80)];
+		const bbox = computeNodesBoundingBox(nodes);
+
+		expect(bbox.x).toBe(10);
+		expect(bbox.y).toBe(20);
+		expect(bbox.width).toBe(240); // 50 + 200 - 10 = 240
+		expect(bbox.height).toBe(160); // 100 + 80 - 20 = 160
+	});
+
+	it('calculates directional displacement shifting downstream nodes to make space', () => {
+		const origin = createNode('origin', 100, 100, 100, 50);
+		const downstream = createNode('downstream', 300, 100, 100, 50);
+		const upstream = createNode('upstream', 0, 100, 100, 50);
+
+		// Child cluster with width=200
+		const children = [
+			createNode('c1', 150, 80, 200, 40),
+			createNode('c2', 150, 120, 200, 40)
+		];
+
+		const displaced = calculateDirectionalDisplacement({
+			existingNodes: [origin, downstream, upstream],
+			originNode: origin,
+			childNodes: children,
+			options: { direction: 'right', gap: 40 }
+		});
+
+		// Child cluster width is 200, gap is 40 -> deltaPrimary = 240
+		expect(displaced.has('downstream')).toBe(true);
+		expect(displaced.get('downstream')?.x).toBe(300 + 240);
+		// Upstream node remains untouched
+		expect(displaced.has('upstream')).toBe(false);
+	});
+
+	it('calculates Dagre reflow displacement anchoring origin node position', () => {
+		const origin = createNode('origin', 100, 100, 120, 60);
+		const downstream = createNode('downstream', 300, 100, 120, 60);
+		const edges: CanvasEdge[] = [{ id: 'e1', source: 'origin', target: 'downstream' }];
+
+		const children = [createNode('c1', 0, 0, 120, 60), createNode('c2', 0, 0, 120, 60)];
+		const childEdges: CanvasEdge[] = [
+			{ id: 'ec1', source: 'origin', target: 'c1' },
+			{ id: 'ec2', source: 'c1', target: 'downstream' }
+		];
+
+		const displaced = calculateReflowDisplacement({
+			existingNodes: [origin, downstream],
+			existingEdges: edges,
+			originNode: origin,
+			childNodes: children,
+			childEdges,
+			options: { direction: 'LR', ranksep: 100 }
+		});
+
+		// Downstream node should be pushed further to make space for child rank
+		expect(displaced.has('downstream')).toBe(true);
+		expect(displaced.get('downstream')!.x).toBeGreaterThan(origin.position.x);
+	});
+});
+
+describe('createCanvasExplosion Rune Lifecycle & Reversibility', () => {
+	const createNode = (id: string, x: number, y: number, w = 150, h = 50): CanvasNode => ({
+		id,
+		position: { x, y },
+		measured: { width: w, height: h },
+		data: {}
+	});
+
+	it('explodes node, connects children, shifts downstream nodes, and collapses reversibly', () => {
+		const origin = createNode('origin', 100, 100);
+		const downstream = createNode('downstream', 300, 100);
+		const initialEdge: CanvasEdge = { id: 'e1', source: 'origin', target: 'downstream' };
+
+		const graph = createCanvasGraph({
+			initialNodes: [origin, downstream],
+			initialEdges: [initialEdge]
+		});
+
+		const explosion = createCanvasExplosion(graph);
+
+		expect(explosion.isExploded('origin')).toBe(false);
+
+		const child1 = createNode('c1', 250, 70);
+		const child2 = createNode('c2', 250, 130);
+
+		// 1. Explode
+		const exploded = explosion.explodeNode('origin', {
+			childNodes: [child1, child2],
+			duration: 0, // instantaneous for sync unit testing
+			connectParentToChildren: 'all',
+			directionalOptions: { direction: 'right', gap: 50 }
+		});
+
+		expect(exploded).toBe(true);
+		expect(explosion.isExploded('origin')).toBe(true);
+
+		// Check that children were added
+		expect(graph.nodes.some((n) => n.id === 'c1')).toBe(true);
+		expect(graph.nodes.some((n) => n.id === 'c2')).toBe(true);
+
+		// Check that parent was connected to children
+		expect(graph.edges.some((e) => e.source === 'origin' && e.target === 'c1')).toBe(true);
+		expect(graph.edges.some((e) => e.source === 'origin' && e.target === 'c2')).toBe(true);
+
+		// Check that downstream node was displaced rightward
+		const displacedDownstream = graph.nodes.find((n) => n.id === 'downstream')!;
+		expect(displacedDownstream.position.x).toBeGreaterThan(300);
+
+		// 2. Collapse
+		const collapsed = explosion.collapseNode('origin', {
+			duration: 0
+		});
+
+		expect(collapsed).toBe(true);
+		expect(explosion.isExploded('origin')).toBe(false);
+
+		// Check that children were removed from graph
+		expect(graph.nodes.some((n) => n.id === 'c1')).toBe(false);
+		expect(graph.nodes.some((n) => n.id === 'c2')).toBe(false);
+
+		// Check that child edges were pruned
+		expect(graph.edges.some((e) => e.source === 'origin' && e.target === 'c1')).toBe(false);
+
+		// Check that downstream node returned to its exact pre-explosion baseline coordinate
+		const restoredDownstream = graph.nodes.find((n) => n.id === 'downstream')!;
+		expect(restoredDownstream.position.x).toBe(300);
+		expect(restoredDownstream.position.y).toBe(100);
+	});
+
+	it('toggles explosion with toggleExplode', () => {
+		const origin = createNode('origin', 100, 100);
+		const graph = createCanvasGraph({ initialNodes: [origin] });
+		const explosion = createCanvasExplosion(graph);
+
+		const child = createNode('c1', 200, 100);
+
+		explosion.toggleExplode('origin', {
+			childNodes: [child],
+			duration: 0
+		});
+		expect(explosion.isExploded('origin')).toBe(true);
+
+		explosion.toggleExplode('origin', { childNodes: [child], duration: 0 }, { duration: 0 });
+		expect(explosion.isExploded('origin')).toBe(false);
+	});
+});

package/src/canvas/__tests__/canvas-graph.test.ts

@@ -0,0 +1,159 @@
+import { describe, it, expect, vi } from 'vitest';
+import {
+	createCanvasGraph,
+	calculateGraphDifferences,
+	replaceNodeInGraph
+} from '../createCanvasGraph.svelte.js';
+import type { CanvasNode, CanvasEdge } from '../types.js';
+
+describe('createCanvasGraph & Graph Operations', () => {
+	const createSampleNode = (id: string, x = 0, y = 0): CanvasNode => ({
+		id,
+		position: { x, y },
+		data: { label: `Node ${id}` }
+	});
+
+	const createSampleEdge = (id: string, source: string, target: string): CanvasEdge => ({
+		id,
+		source,
+		target
+	});
+
+	it('initializes with default empty or provided nodes and edges', () => {
+		const graph = createCanvasGraph({
+			initialNodes: [createSampleNode('1')],
+			initialEdges: [createSampleEdge('e1', '1', '2')]
+		});
+
+		expect(graph.nodes).toHaveLength(1);
+		expect(graph.edges).toHaveLength(1);
+		expect(graph.nodes[0].id).toBe('1');
+	});
+
+	it('adds nodes and ignores duplicates', () => {
+		const onNodesChange = vi.fn();
+		const graph = createCanvasGraph({ onNodesChange });
+
+		graph.addNodeOrNodes(createSampleNode('1'));
+		expect(graph.nodes).toHaveLength(1);
+		expect(onNodesChange).toHaveBeenCalledTimes(1);
+
+		// Adding existing node does not duplicate
+		graph.addNodeOrNodes(createSampleNode('1'));
+		expect(graph.nodes).toHaveLength(1);
+
+		// Adding multiple nodes
+		graph.addNodeOrNodes([createSampleNode('2'), createSampleNode('3')]);
+		expect(graph.nodes).toHaveLength(3);
+	});
+
+	it('adds and removes edges cleanly', () => {
+		const onEdgesChange = vi.fn();
+		const graph = createCanvasGraph({ onEdgesChange });
+
+		const e1 = createSampleEdge('e1', '1', '2');
+		const e2 = createSampleEdge('e2', '2', '3');
+
+		graph.addEdge(e1);
+		expect(graph.edges).toHaveLength(1);
+
+		graph.addEdges([e2]);
+		expect(graph.edges).toHaveLength(2);
+
+		graph.removeEdges([e1]);
+		expect(graph.edges).toHaveLength(1);
+		expect(graph.edges[0].id).toBe('e2');
+	});
+
+	it('removes nodes by reference or ID matching', () => {
+		const n1 = createSampleNode('1');
+		const n2 = createSampleNode('2');
+		const graph = createCanvasGraph({ initialNodes: [n1, n2] });
+
+		graph.removeNodes([n1]);
+		expect(graph.nodes).toHaveLength(1);
+		expect(graph.nodes[0].id).toBe('2');
+	});
+
+	it('replaces a node and preserves connected edges when keepEdges is true', () => {
+		const n1 = createSampleNode('1');
+		const n2 = createSampleNode('2');
+		const e1 = createSampleEdge('e1', '1', '2');
+		const n1Replacement = createSampleNode('new-1', 10, 10);
+
+		const result = replaceNodeInGraph([n1, n2], [e1], n1, n1Replacement, true);
+		expect(result.nodes.some((n) => n.id === 'new-1')).toBe(true);
+		expect(result.nodes.some((n) => n.id === '1')).toBe(false);
+
+		// Edge should have updated source to new-1
+		expect(result.edges).toHaveLength(1);
+		expect(result.edges[0].source).toBe('new-1');
+		expect(result.edges[0].target).toBe('2');
+	});
+
+	it('replaces a node without preserving edges when keepEdges is false', () => {
+		const n1 = createSampleNode('1');
+		const n2 = createSampleNode('2');
+		const e1 = createSampleEdge('e1', '1', '2');
+		const n1Replacement = createSampleNode('new-1', 10, 10);
+
+		const result = replaceNodeInGraph([n1, n2], [e1], n1, n1Replacement, false);
+		expect(result.nodes.some((n) => n.id === 'new-1')).toBe(true);
+		expect(result.edges).toHaveLength(1);
+		expect(result.edges[0].source).toBe('1'); // Unchanged
+	});
+
+	it('adds connected nodes connecting inbound and outbound targets', () => {
+		const graph = createCanvasGraph();
+		const inNode = createSampleNode('in');
+		const outNode = createSampleNode('out');
+		const midNode = createSampleNode('mid');
+
+		graph.addNodeOrNodes([inNode, outNode]);
+
+		graph.addConnectedNodes({
+			nodesToAdd: [midNode],
+			inboundNodes: [inNode],
+			outboundNodes: [outNode],
+			getEdgeLabel: (src, tgt) => `${src.id}->${tgt.id}`
+		});
+
+		expect(graph.nodes).toHaveLength(3);
+		expect(graph.edges).toHaveLength(2);
+		expect(graph.edges.find((e) => e.source === 'in' && e.target === 'mid')?.label).toBe('in->mid');
+		expect(graph.edges.find((e) => e.source === 'mid' && e.target === 'out')?.label).toBe('mid->out');
+	});
+
+	it('accurately calculates graph differences against a baseline', () => {
+		const n1 = createSampleNode('1', 0, 0);
+		const n2 = createSampleNode('2', 50, 50);
+		const e1 = createSampleEdge('e1', '1', '2');
+
+		const baseline = {
+			nodes: [n1, n2],
+			edges: [e1]
+		};
+
+		// Node 2 position changed, node 3 added, edge 1 removed, edge 2 added
+		const n2Changed = createSampleNode('2', 100, 100);
+		const n3Added = createSampleNode('3', 200, 200);
+		const e2Added = createSampleEdge('e2', '2', '3');
+
+		const current = {
+			nodes: [n1, n2Changed, n3Added],
+			edges: [e2Added]
+		};
+
+		const diff = calculateGraphDifferences(current, baseline);
+
+		expect(diff.changedNodes).toHaveLength(2); // n2 changed + n3 newly added
+		expect(diff.changedNodes.map((n) => n.id)).toContain('2');
+		expect(diff.changedNodes.map((n) => n.id)).toContain('3');
+		expect(diff.removedNodes).toHaveLength(0);
+
+		expect(diff.removedEdges).toHaveLength(1);
+		expect(diff.removedEdges[0].id).toBe('e1');
+		expect(diff.changedEdges).toHaveLength(1);
+		expect(diff.changedEdges[0].id).toBe('e2');
+	});
+});

package/src/canvas/__tests__/canvas-interactions.test.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi } from 'vitest';
+import {
+  createCanvasInteractions,
+  defaultSvelteFlowPreset,
+  miroCompatiblePreset,
+  restorePanelPointerEvents
+} from '../createCanvasInteractions.svelte.js';
+
+describe('createCanvasInteractions', () => {
+  it('exposes valid default presets', () => {
+    expect(defaultSvelteFlowPreset.snapGrid).toEqual([25, 25]);
+    expect(defaultSvelteFlowPreset.panOnScroll).toBe(false);
+    expect(defaultSvelteFlowPreset.selectionOnDrag).toBe(false);
+
+    expect(miroCompatiblePreset.selectionOnDrag).toBe(true);
+    expect(miroCompatiblePreset.panOnDrag).toEqual([1, 2]);
+  });
+
+  it('toggles spacebar panning mode on Space keydown and keyup', () => {
+    const target = new EventTarget();
+    const onPanModeChange = vi.fn();
+
+    const interactions = createCanvasInteractions({
+      targetElement: target as unknown as HTMLElement,
+      onPanModeChange
+    });
+
+    const cleanup = interactions.attachListeners(target as unknown as HTMLElement);
+
+    // Press Space
+    const downEvent = new KeyboardEvent('keydown', { key: ' ' });
+    target.dispatchEvent(downEvent);
+
+    expect(interactions.isSpacebarPanning).toBe(true);
+    expect(onPanModeChange).toHaveBeenCalledWith(true);
+
+    // Release Space
+    const upEvent = new KeyboardEvent('keyup', { key: ' ' });
+    target.dispatchEvent(upEvent);
+
+    expect(interactions.isSpacebarPanning).toBe(false);
+    expect(onPanModeChange).toHaveBeenCalledWith(false);
+
+    cleanup();
+  });
+
+  it('detects trackpad pinch on wheel event with ctrlKey', () => {
+    const target = new EventTarget();
+    const onTrackpadDetected = vi.fn();
+
+    const interactions = createCanvasInteractions({
+      targetElement: target as unknown as HTMLElement,
+      onTrackpadDetected
+    });
+
+    const cleanup = interactions.attachListeners(target as unknown as HTMLElement);
+
+    expect(interactions.trackpadDetected).toBe(false);
+
+    // Normal wheel without ctrlKey
+    const wheelEvent = new WheelEvent('wheel', { ctrlKey: false });
+    target.dispatchEvent(wheelEvent);
+    expect(interactions.trackpadDetected).toBe(false);
+    expect(onTrackpadDetected).not.toHaveBeenCalled();
+
+    // Trackpad pinch with ctrlKey
+    const pinchEvent = new WheelEvent('wheel', { ctrlKey: true });
+    target.dispatchEvent(pinchEvent);
+    expect(interactions.trackpadDetected).toBe(true);
+    expect(onTrackpadDetected).toHaveBeenCalledTimes(1);
+
+    cleanup();
+  });
+
+  it('restores pointer events on DOM panels', () => {
+    const panel = document.createElement('div');
+    panel.className = 'svelte-flow__panel';
+    panel.style.pointerEvents = 'none';
+    document.body.appendChild(panel);
+
+    restorePanelPointerEvents();
+
+    expect(panel.style.pointerEvents).toBe('auto');
+    document.body.removeChild(panel);
+  });
+});