@neo4j-nvl/react 1.2.2 → 2.0.0-1e695738

package/lib/__tests__/InteractiveNvlWrapper.test.js

@@ -1,392 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import NVL, { HierarchicalLayoutType } from '@neo4j-nvl/base';
-import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, KeyboardInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
-import { StrictMode, act, createRef } from 'react';
-import { InteractiveNvlWrapper } from '../interactive-nvl-wrapper/InteractiveNvlWrapper';
-jest.mock('@neo4j-nvl/base');
-jest.mock('@neo4j-nvl/layout-workers');
-jest.mock('@neo4j-nvl/interaction-handlers');
-const MockedNVL = NVL;
-let mockOnInitialization;
-HoverInteraction.prototype.callbackMap = new Map();
-HoverInteraction.prototype.updateCallback = jest.fn();
-HoverInteraction.prototype.removeCallback = jest.fn();
-HoverInteraction.prototype.destroy = jest.fn();
-PanInteraction.prototype.callbackMap = new Map();
-PanInteraction.prototype.updateCallback = jest.fn();
-PanInteraction.prototype.removeCallback = jest.fn();
-PanInteraction.prototype.destroy = jest.fn();
-ClickInteraction.prototype.callbackMap = new Map();
-ClickInteraction.prototype.updateCallback = jest.fn();
-ClickInteraction.prototype.removeCallback = jest.fn();
-ClickInteraction.prototype.destroy = jest.fn();
-ZoomInteraction.prototype.callbackMap = new Map();
-ZoomInteraction.prototype.updateCallback = jest.fn();
-ZoomInteraction.prototype.removeCallback = jest.fn();
-ZoomInteraction.prototype.destroy = jest.fn();
-DragNodeInteraction.prototype.callbackMap = new Map();
-DragNodeInteraction.prototype.updateCallback = jest.fn();
-DragNodeInteraction.prototype.removeCallback = jest.fn();
-DragNodeInteraction.prototype.destroy = jest.fn();
-DrawInteraction.prototype.callbackMap = new Map();
-DrawInteraction.prototype.updateCallback = jest.fn();
-DrawInteraction.prototype.removeCallback = jest.fn();
-DrawInteraction.prototype.destroy = jest.fn();
-BoxSelectInteraction.prototype.callbackMap = new Map();
-BoxSelectInteraction.prototype.updateCallback = jest.fn();
-BoxSelectInteraction.prototype.removeCallback = jest.fn();
-BoxSelectInteraction.prototype.destroy = jest.fn();
-LassoInteraction.prototype.callbackMap = new Map();
-LassoInteraction.prototype.updateCallback = jest.fn();
-LassoInteraction.prototype.removeCallback = jest.fn();
-LassoInteraction.prototype.destroy = jest.fn();
-KeyboardInteraction.prototype.callbackMap = new Map();
-KeyboardInteraction.prototype.updateCallback = jest.fn();
-KeyboardInteraction.prototype.removeCallback = jest.fn();
-KeyboardInteraction.prototype.destroy = jest.fn();
-let mockDestroy;
-let destroyHoverInteraction;
-let destroyPanInteraction;
-describe('InteractiveNvlWrapper', () => {
-    beforeEach(() => {
-        jest.spyOn(NVL.prototype, 'getContainer').mockImplementation(() => document.createElement('div'));
-        MockedNVL.mockImplementation((_container, _nodes, _rels, _options, callbacks) => {
-            mockOnInitialization = callbacks.onInitialization;
-            return {
-                getContainer: () => document.createElement('div'),
-                destroy: mockDestroy,
-                setLayout: jest.fn(),
-                setLayoutOptions: jest.fn(),
-                setRenderer: jest.fn()
-            };
-        });
-        mockDestroy = jest.fn();
-        destroyHoverInteraction = jest.fn();
-        destroyPanInteraction = jest.fn();
-        jest.spyOn(NVL.prototype, 'destroy').mockImplementation(mockDestroy);
-        jest.spyOn(HoverInteraction.prototype, 'destroy').mockImplementation(destroyHoverInteraction);
-        jest.spyOn(PanInteraction.prototype, 'destroy').mockImplementation(destroyPanInteraction);
-        jest.spyOn(ClickInteraction.prototype, 'destroy').mockImplementation(jest.fn());
-        jest.spyOn(ZoomInteraction.prototype, 'destroy').mockImplementation(jest.fn());
-        jest.spyOn(DragNodeInteraction.prototype, 'destroy').mockImplementation(jest.fn());
-        jest.spyOn(DrawInteraction.prototype, 'destroy').mockImplementation(jest.fn());
-        jest.spyOn(BoxSelectInteraction.prototype, 'destroy').mockImplementation(jest.fn());
-        jest.spyOn(LassoInteraction.prototype, 'destroy').mockImplementation(jest.fn());
-        jest.spyOn(KeyboardInteraction.prototype, 'destroy').mockImplementation(jest.fn());
-    });
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-    test('initialises NVL expectedly with an empty graph object and no other properties', () => {
-        render(_jsx("div", { children: _jsx(InteractiveNvlWrapper, { nodes: [], rels: [] }) }));
-        expect(NVL).toHaveBeenCalledWith(expect.any(HTMLDivElement), [], [], {}, { onInitialization: mockOnInitialization });
-    });
-    test('initialises NVL expectedly with a graph object and properties', () => {
-        const mockLayoutDoneFunction = jest.fn();
-        render(_jsx(InteractiveNvlWrapper, { nodes: [{ id: '1' }, { id: '2' }], rels: [{ id: '12', from: '1', to: '2' }], layout: HierarchicalLayoutType, layoutOptions: { enableCytoscape: true }, nvlOptions: { renderer: 'canvas' }, nvlCallbacks: { onLayoutDone: mockLayoutDoneFunction } }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        expect(NVL).toHaveBeenCalledWith(expect.any(HTMLDivElement), [{ id: '1' }, { id: '2' }], [{ id: '12', from: '1', to: '2' }], { renderer: 'canvas', layout: HierarchicalLayoutType, layoutOptions: { enableCytoscape: true } }, {
-            onLayoutDone: mockLayoutDoneFunction,
-            onInitialization: mockOnInitialization
-        });
-    });
-    test('initialises expected interaction handlers with correct options', () => {
-        const myNvlRef = createRef();
-        render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, mouseEventCallbacks: {
-                onHover: true,
-                onPan: true
-            }, interactionOptions: {
-                drawShadowOnHover: true
-            } }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        expect(HoverInteraction).toHaveBeenCalledWith(myNvlRef.current, { drawShadowOnHover: true });
-        expect(PanInteraction).toHaveBeenCalledWith(myNvlRef.current, { drawShadowOnHover: true });
-        expect(HoverInteraction).toHaveBeenCalledTimes(1);
-        expect(PanInteraction).toHaveBeenCalledTimes(1);
-        expect(ClickInteraction).not.toHaveBeenCalled();
-        expect(DragNodeInteraction).not.toHaveBeenCalled();
-        expect(DrawInteraction).not.toHaveBeenCalled();
-        expect(ZoomInteraction).not.toHaveBeenCalled();
-        expect(BoxSelectInteraction).not.toHaveBeenCalled();
-        expect(LassoInteraction).not.toHaveBeenCalled();
-        expect(KeyboardInteraction).not.toHaveBeenCalled();
-    });
-    test.each([
-        {
-            name: 'HoverInteraction',
-            InteractionClass: HoverInteraction,
-            callback: { onHover: jest.fn() },
-            options: { drawShadowOnHover: true }
-        },
-        {
-            name: 'ClickInteraction with onCanvasClick',
-            InteractionClass: ClickInteraction,
-            callback: { onCanvasClick: jest.fn() },
-            options: { selectOnClick: false }
-        },
-        {
-            name: 'ClickInteraction with onCanvasDoubleClick',
-            InteractionClass: ClickInteraction,
-            callback: { onCanvasDoubleClick: jest.fn() },
-            options: { selectOnClick: false }
-        },
-        {
-            name: 'ClickInteraction with onCanvasRightClick',
-            InteractionClass: ClickInteraction,
-            callback: { onCanvasRightClick: jest.fn() },
-            options: { selectOnClick: false }
-        },
-        {
-            name: 'ClickInteraction with onNodeClick',
-            InteractionClass: ClickInteraction,
-            callback: { onNodeClick: jest.fn() },
-            options: { selectOnClick: true }
-        },
-        {
-            name: 'ClickInteraction with onNodeDoubleClick',
-            InteractionClass: ClickInteraction,
-            callback: { onNodeDoubleClick: jest.fn() },
-            options: { selectOnClick: false }
-        },
-        {
-            name: 'ClickInteraction with onNodeRightClick',
-            InteractionClass: ClickInteraction,
-            callback: { onNodeRightClick: jest.fn() },
-            options: { selectOnClick: false }
-        },
-        {
-            name: 'ClickInteraction with onRelationshipClick',
-            InteractionClass: ClickInteraction,
-            callback: { onRelationshipClick: jest.fn() },
-            options: { selectOnClick: false }
-        },
-        {
-            name: 'ClickInteraction with onRelationshipDoubleClick',
-            InteractionClass: ClickInteraction,
-            callback: { onRelationshipDoubleClick: jest.fn() },
-            options: { selectOnClick: false }
-        },
-        {
-            name: 'ClickInteraction with onRelationshipRightClick',
-            InteractionClass: ClickInteraction,
-            callback: { onRelationshipRightClick: jest.fn() },
-            options: { selectOnClick: false }
-        },
-        {
-            name: 'PanInteraction',
-            InteractionClass: PanInteraction,
-            callback: { onPan: jest.fn() },
-            options: {}
-        },
-        {
-            name: 'ZoomInteraction',
-            InteractionClass: ZoomInteraction,
-            callback: { onZoom: jest.fn() },
-            options: {}
-        },
-        {
-            name: 'DragNodeInteraction with onDrag',
-            InteractionClass: DragNodeInteraction,
-            callback: { onDrag: jest.fn() },
-            options: { selectOnRelease: false }
-        },
-        {
-            name: 'DragNodeInteraction with onDragStart',
-            InteractionClass: DragNodeInteraction,
-            callback: { onDragStart: jest.fn() },
-            options: {}
-        },
-        {
-            name: 'DragNodeInteraction with onDragEnd',
-            InteractionClass: DragNodeInteraction,
-            callback: { onDragEnd: jest.fn() },
-            options: {}
-        },
-        {
-            name: 'DrawInteraction with onHoverNodeMargin',
-            InteractionClass: DrawInteraction,
-            callback: { onHoverNodeMargin: jest.fn() },
-            options: { excludeNodeMargin: false }
-        },
-        {
-            name: 'DrawInteraction with onDrawStarted',
-            InteractionClass: DrawInteraction,
-            callback: { onDrawStarted: jest.fn() },
-            options: {}
-        },
-        {
-            name: 'DrawInteraction with onDrawEnded',
-            InteractionClass: DrawInteraction,
-            callback: { onDrawEnded: jest.fn() },
-            options: {}
-        },
-        {
-            name: 'BoxSelectInteraction with onBoxStarted',
-            InteractionClass: BoxSelectInteraction,
-            callback: { onBoxStarted: jest.fn() },
-            options: {}
-        },
-        {
-            name: 'BoxSelectInteraction with onBoxSelect',
-            InteractionClass: BoxSelectInteraction,
-            callback: { onBoxSelect: jest.fn() },
-            options: {}
-        },
-        {
-            name: 'LassoInteraction with onLassoStarted',
-            InteractionClass: LassoInteraction,
-            callback: { onLassoStarted: jest.fn() },
-            options: {}
-        },
-        {
-            name: 'LassoInteraction with onLassoSelect',
-            InteractionClass: LassoInteraction,
-            callback: { onLassoSelect: jest.fn() },
-            options: {}
-        }
-    ])('initialises $name when its callback is provided', ({ InteractionClass, callback, options }) => {
-        const myNvlRef = createRef();
-        render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, mouseEventCallbacks: callback, interactionOptions: options }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        expect(InteractionClass).toHaveBeenCalledWith(myNvlRef.current, options);
-        expect(InteractionClass).toHaveBeenCalledTimes(1);
-    });
-    test.each([
-        {
-            name: 'KeyboardInteraction with onKeyDown',
-            callback: { onKeyDown: jest.fn() }
-        },
-        {
-            name: 'KeyboardInteraction with onKeyUp',
-            callback: { onKeyUp: jest.fn() }
-        },
-        {
-            name: 'KeyboardInteraction with onNodeFocus',
-            callback: { onNodeFocus: jest.fn() }
-        },
-        {
-            name: 'KeyboardInteraction with onNodeBlur',
-            callback: { onNodeBlur: jest.fn() }
-        },
-        {
-            name: 'KeyboardInteraction with onRelationshipFocus',
-            callback: { onRelationshipFocus: jest.fn() }
-        },
-        {
-            name: 'KeyboardInteraction with onRelationshipBlur',
-            callback: { onRelationshipBlur: jest.fn() }
-        },
-        {
-            name: 'KeyboardInteraction with onCanvasFocus',
-            callback: { onCanvasFocus: jest.fn() }
-        },
-        {
-            name: 'KeyboardInteraction with onCanvasBlur',
-            callback: { onCanvasBlur: jest.fn() }
-        }
-    ])('initialises $name when its callback is provided', ({ callback }) => {
-        const myNvlRef = createRef();
-        render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, keyboardEventCallbacks: callback }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        expect(KeyboardInteraction).toHaveBeenCalledWith(myNvlRef.current, expect.objectContaining({}));
-        expect(KeyboardInteraction).toHaveBeenCalledTimes(1);
-    });
-    test('does not attempt to initialize interaction handlers if NVL container is not available', () => {
-        const myNvlRef = createRef();
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        jest.spyOn(NVL.prototype, 'getContainer').mockImplementation(() => null);
-        render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, mouseEventCallbacks: {
-                onHover: true
-            }, interactionOptions: {
-                drawShadowOnHover: true
-            } }));
-        expect(HoverInteraction).not.toHaveBeenCalled();
-        expect(NVL).toHaveBeenCalledTimes(1);
-    });
-    test('destroys NVL and active interaction handlers on unmount', () => {
-        const { unmount } = render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], mouseEventCallbacks: {
-                onHover: true
-            } }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        unmount();
-        expect(mockDestroy).toHaveBeenCalledTimes(1);
-        expect(destroyHoverInteraction).toHaveBeenCalledTimes(1);
-        expect(destroyPanInteraction).not.toHaveBeenCalled();
-    });
-    test('successfully re-initialises NVL and active interaction handlers when using React StrictMode', () => {
-        const myNvlRef = createRef();
-        render(_jsx(StrictMode, { children: _jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, mouseEventCallbacks: {
-                    onHover: true
-                }, interactionOptions: {
-                    drawShadowOnHover: true
-                } }) }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        expect(NVL).toHaveBeenCalledTimes(2);
-        expect(HoverInteraction).toHaveBeenCalledTimes(2);
-        expect(HoverInteraction).toHaveBeenCalledWith(myNvlRef.current, { drawShadowOnHover: true });
-        expect(mockDestroy).toHaveBeenCalledTimes(1);
-        expect(destroyHoverInteraction).toHaveBeenCalledTimes(1);
-        expect(destroyPanInteraction).not.toHaveBeenCalled();
-        expect(DragNodeInteraction).not.toHaveBeenCalled();
-        expect(DrawInteraction).not.toHaveBeenCalled();
-        expect(ZoomInteraction).not.toHaveBeenCalled();
-        expect(BoxSelectInteraction).not.toHaveBeenCalled();
-        expect(LassoInteraction).not.toHaveBeenCalled();
-        expect(KeyboardInteraction).not.toHaveBeenCalled();
-    });
-    test('destroys keyboard interaction on unmount', () => {
-        const destroyKeyboardInteraction = jest.fn();
-        jest.spyOn(KeyboardInteraction.prototype, 'destroy').mockImplementation(destroyKeyboardInteraction);
-        const { unmount } = render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], keyboardEventCallbacks: {
-                onKeyDown: true
-            } }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        unmount();
-        expect(destroyKeyboardInteraction).toHaveBeenCalledTimes(1);
-    });
-    test('also calls custom callbacks on initialization', () => {
-        const customOnInitializationCallback = jest.fn();
-        render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], nvlCallbacks: { onInitialization: customOnInitializationCallback } }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        expect(customOnInitializationCallback).toHaveBeenCalledTimes(1);
-    });
-    test('passes zoom and pan properties to BasicNvlWrapper', () => {
-        const setZoom = jest.fn();
-        const setPan = jest.fn();
-        const setZoomAndPan = jest.fn();
-        MockedNVL.mockImplementation(() => ({
-            getContainer: () => document.createElement('div'),
-            destroy: jest.fn(),
-            setLayout: jest.fn(),
-            setLayoutOptions: jest.fn(),
-            setNodePositions: jest.fn(),
-            setZoom,
-            setPan,
-            setZoomAndPan
-        }));
-        render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 10, y: 20 } }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        expect(setZoomAndPan).toHaveBeenCalledWith(1.5, 10, 20);
-    });
-});

package/lib/__tests__/StaticPictureWrapper.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/lib/__tests__/StaticPictureWrapper.test.js

@@ -1,85 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import '@testing-library/jest-dom';
-import { render, waitFor } from '@testing-library/react';
-import { StaticPictureWrapper } from '../static-picture-wrapper/StaticPictureWrapper';
-jest.mock('@neo4j-nvl/base', () => {
-    const mockNVL = jest
-        .fn()
-        .mockImplementation((_element, _nodes, _rels, _nvlOptions, callbacks) => {
-        setTimeout(() => {
-            callbacks.onLayoutDone?.();
-            callbacks.onZoomTransitionDone?.();
-        }, 0);
-        return {
-            getNodes: jest.fn().mockReturnValue([
-                { id: '0', x: 0, y: 0 },
-                { id: '1', x: 100, y: 100 }
-            ]),
-            fit: jest.fn(),
-            getImageDataUrl: jest.fn().mockReturnValue('data:image/png;base64,...mock-png...'),
-            getSvgDataUrl: jest.fn().mockResolvedValue('data:image/svg+xml;charset=utf-8,...mock-svg...'),
-            destroy: jest.fn()
-        };
-    });
-    return mockNVL;
-});
-const NVLMock = jest.requireMock('@neo4j-nvl/base');
-describe('StaticPictureWrapper - format prop support', () => {
-    const mockNodes = [
-        { id: '0', caption: 'Node 0' },
-        { id: '1', caption: 'Node 1' }
-    ];
-    const mockRels = [{ id: '01', from: '0', to: '1', caption: 'KNOWS' }];
-    beforeEach(() => {
-        NVLMock.mockClear();
-    });
-    const getMockNVLInstance = (index = 0) => {
-        return NVLMock.mock.results[index]?.value;
-    };
-    it('Should pass nodes, relationships and options to NVL constructor', () => {
-        const mockOptions = {
-            layout: 'hierarchical',
-            styling: {
-                defaultNodeColor: 'red'
-            }
-        };
-        render(_jsx(StaticPictureWrapper, { nodes: mockNodes, rels: mockRels, format: "png", nvlOptions: mockOptions, width: 250, height: 250 }));
-        expect(NVLMock).toHaveBeenCalledWith(expect.any(HTMLDivElement), mockNodes, mockRels, mockOptions, expect.any(Object));
-    });
-    it('Should use getSvgDataUrl for SVG format', async () => {
-        render(_jsx(StaticPictureWrapper, { nodes: mockNodes, rels: mockRels, format: "svg" }));
-        await waitFor(() => {
-            const mockInstance = getMockNVLInstance();
-            expect(mockInstance.getSvgDataUrl).toHaveBeenCalled();
-            expect(mockInstance.getImageDataUrl).not.toHaveBeenCalled();
-        });
-    });
-    it('Should use getImageDataUrl for PNG format', async () => {
-        render(_jsx(StaticPictureWrapper, { nodes: mockNodes, rels: mockRels, format: "png" }));
-        await waitFor(() => {
-            const mockInstance = getMockNVLInstance();
-            expect(mockInstance.getSvgDataUrl).not.toHaveBeenCalled();
-            expect(mockInstance.getImageDataUrl).toHaveBeenCalled();
-        });
-    });
-    it('Should triggerer re-render when format prop changes', async () => {
-        const { rerender } = render(_jsx(StaticPictureWrapper, { nodes: mockNodes, rels: mockRels, format: "png" }));
-        await waitFor(() => {
-            const mockInstance = getMockNVLInstance(0);
-            expect(mockInstance.getSvgDataUrl).not.toHaveBeenCalled();
-            expect(mockInstance.getImageDataUrl).toHaveBeenCalledTimes(1);
-        });
-        rerender(_jsx(StaticPictureWrapper, { nodes: mockNodes, rels: mockRels, format: "svg" }));
-        await waitFor(() => {
-            const mockInstance = getMockNVLInstance(1);
-            expect(mockInstance.getSvgDataUrl).toHaveBeenCalledTimes(1);
-            expect(mockInstance.getImageDataUrl).not.toHaveBeenCalled();
-        });
-    });
-    it('Should clean up NVL instance on unmount', () => {
-        const { unmount } = render(_jsx(StaticPictureWrapper, { nodes: mockNodes, rels: mockRels, format: "png" }));
-        unmount();
-        const mockInstance = getMockNVLInstance();
-        expect(mockInstance.destroy).toHaveBeenCalled();
-    });
-});

package/lib/__tests__/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/__tests__/index.test.js

@@ -1,8 +0,0 @@
-import * as exportedModules from '../index';
-jest.mock('@neo4j-nvl/layout-workers');
-describe('index', () => {
-    test('provides the expected components', () => {
-        const modules = Object.keys(exportedModules);
-        expect(modules).toContain('BasicNvlWrapper');
-    });
-});