@reltio/graph 1.4.1585 → 1.4.1586-mui5

package/src/hooks/__tests__/useGraphLayoutSelector.test.tsx

@@ -0,0 +1,19 @@
+import {GraphLayout} from '@reltio/mdm-sdk';
+import {renderHook} from '@testing-library/react-hooks';
+import {useGraphLayoutSelector} from '../useGraphLayoutSelector';
+
+const startHook = (graphLayout) => {
+    return renderHook(useGraphLayoutSelector, {
+        initialProps: graphLayout
+    });
+};
+
+describe('useGraphLayoutSelector tests', () => {
+    it('should set graph layout from props if it is correct layout', () => {
+        expect(startHook(GraphLayout.TREE).result.current).toMatchObject({layout: GraphLayout.TREE});
+    });
+
+    it('should return GraphLayout.SIMPLE_NETWORK if layout from props is not correct', () => {
+        expect(startHook('abs').result.current).toMatchObject({layout: GraphLayout.SIMPLE_NETWORK});
+    });
+});

package/src/hooks/__tests__/useSelfRelationLoopsRenderer.test.ts

@@ -0,0 +1,198 @@
+import {renderHook, act} from '@testing-library/react-hooks';
+import {MultiGraph} from 'graphology';
+import {useSigma} from '@react-sigma/core';
+import {HopsResponse, RelationTypeDirection} from '@reltio/mdm-sdk';
+import {fillGraphWithHopsResponse} from '../../utils/graph';
+import {useSelfRelationLoopsRenderer} from '../useSelfRelationLoopsRenderer';
+import {useSigmaCustomRenderers} from '../../contexts/SigmaCustomRenderersContext';
+import {drawSelfRelationLoop} from '../../rendering/canvas/selfRelationLoop';
+
+jest.mock('@react-sigma/core');
+jest.mock('../../contexts/SigmaCustomRenderersContext');
+jest.mock('../../rendering/canvas/selfRelationLoop');
+
+const data: HopsResponse = {
+    entities: [
+        {uri: 'node1', type: 'hcp', traversedRelations: 2, untraversedRelations: 0},
+        {uri: 'node2', type: 'hcp', traversedRelations: 3, untraversedRelations: 2},
+        {uri: 'node3', type: 'hca', traversedRelations: 1, untraversedRelations: 0}
+    ],
+    relations: [
+        {
+            uri: 'r1',
+            type: 'relType1',
+            startObject: {
+                objectURI: 'node1'
+            },
+            endObject: {
+                objectURI: 'node2'
+            },
+            direction: RelationTypeDirection.directed
+        },
+        {
+            uri: 'r2',
+            type: 'relType2',
+            startObject: {
+                objectURI: 'node3'
+            },
+            endObject: {
+                objectURI: 'node2'
+            },
+            direction: RelationTypeDirection.directed
+        },
+        {
+            uri: 'r3',
+            type: 'relType3',
+            startObject: {
+                objectURI: 'node2'
+            },
+            endObject: {
+                objectURI: 'node2'
+            },
+            direction: RelationTypeDirection.directed
+        },
+        {
+            uri: 'r4',
+            type: 'relType4',
+            startObject: {
+                objectURI: 'node1'
+            },
+            endObject: {
+                objectURI: 'node1'
+            },
+            direction: RelationTypeDirection.directed
+        }
+    ]
+};
+
+const edges = {
+    r1: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: false,
+        loop: false,
+        relationTypeUri: 'relType1',
+        direction: RelationTypeDirection.directed
+    },
+    r2: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: false,
+        loop: false,
+        relationTypeUri: 'relType2',
+        direction: RelationTypeDirection.directed
+    },
+    r3: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: false,
+        hidden: true,
+        loop: true,
+        relationTypeUri: 'relType3',
+        direction: RelationTypeDirection.directed
+    },
+    r4: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: true,
+        loop: true,
+        relationTypeUri: 'relType4',
+        direction: RelationTypeDirection.directed
+    }
+};
+
+const nodes = {
+    node1: {
+        size: 12,
+        label: 'node 1',
+        x: 0.5,
+        y: 0.4
+    },
+    node2: {
+        size: 12,
+        label: 'node 2',
+        x: 0.6,
+        y: 0.6
+    },
+    node3: {
+        size: 12,
+        label: 'node 3',
+        x: 0.8,
+        y: 0.7
+    }
+};
+
+const startHook = (graph) => renderHook(useSelfRelationLoopsRenderer, {initialProps: graph});
+
+const createGraph = () => {
+    const graph = new MultiGraph();
+    fillGraphWithHopsResponse(graph, data);
+    return graph;
+};
+
+describe('useSelfRelationLoopsRenderer tests', () => {
+    const getEdgeDisplayData = jest.fn().mockImplementation((edgeId) => edges[edgeId]);
+    const getNodeDisplayData = jest.fn().mockImplementation((nodeId) => nodes[nodeId]);
+    const scaleSize = jest.fn().mockImplementation((size) => size * 2);
+    const framedGraphToViewport = jest.fn().mockImplementation(({x, y}) => ({x: x * 100, y: y * 100}));
+
+    const addRenderers = jest.fn();
+    const canvases = {selfRelationLoops: {}};
+
+    beforeAll(() => {
+        (drawSelfRelationLoop as jest.Mock).mockImplementation(
+            (_context, edgeData) => `path-${edgeData.relationTypeUri}`
+        );
+
+        (useSigmaCustomRenderers as jest.Mock).mockReturnValue({
+            addRenderers,
+            canvases
+        });
+
+        (useSigma as jest.Mock).mockReturnValue({
+            getEdgeDisplayData,
+            getNodeDisplayData,
+            scaleSize,
+            framedGraphToViewport
+        });
+    });
+
+    const getSelfRelationLoopsRenderer = () =>
+        addRenderers.mock.calls[addRenderers.mock.calls.length - 1][0].selfRelationLoops;
+
+    it('should draw self relations correctly and with correctly setting paths', () => {
+        const graph = createGraph();
+        const {result} = startHook(graph);
+
+        expect(result.current).toEqual({
+            selfRelationsPathsMap: {},
+            selfRelationLoopsCanvas: canvases.selfRelationLoops
+        });
+
+        const {renderer} = getSelfRelationLoopsRenderer();
+
+        act(() => {
+            renderer('canvas');
+        });
+
+        expect(drawSelfRelationLoop).toHaveBeenCalledTimes(1);
+        expect(drawSelfRelationLoop).toHaveBeenCalledWith(
+            'canvas',
+            {
+                ...edges.r4,
+                size: 2
+            },
+            {
+                ...nodes.node1,
+                size: 24,
+                x: 50,
+                y: 40
+            }
+        );
+
+        expect(result.current).toEqual({
+            selfRelationsPathsMap: {r4: 'path-relType4'},
+            selfRelationLoopsCanvas: canvases.selfRelationLoops
+        });
+    });
+});

package/src/hooks/__tests__/useSigmaCustomRenderers.test.ts

@@ -0,0 +1,273 @@
+import {renderHook, act} from '@testing-library/react-hooks';
+import {useSigmaContext} from '@react-sigma/core';
+import {pipe, findLast, path, nth, equals} from 'ramda';
+import {useSigmaCustomRenderers} from '../useSigmaCustomRenderers';
+import {getPixelRatio} from 'sigma/utils';
+
+jest.mock('@react-sigma/core');
+jest.mock('sigma/utils');
+
+describe('useSigmaCustomRenderers tests', () => {
+    const addListener = jest.fn();
+    const off = jest.fn();
+
+    const getRendererByEventName = (eventName) =>
+        pipe(path(['mock', 'calls']), findLast(pipe(nth(0), equals(eventName))), nth(1))(addListener);
+
+    const sigmaContainerElement = {
+        querySelector: (val) => val,
+        insertBefore: jest.fn()
+    };
+
+    const sigmaElement = {
+        querySelector: jest.fn(() => sigmaContainerElement),
+        offsetWidth: 200,
+        offsetHeight: 300
+    };
+
+    const context = {
+        scale: jest.fn(),
+        clearRect: jest.fn()
+    };
+
+    const canvas = {
+        style: {} as CSSStyleDeclaration,
+        setAttribute: jest.fn(),
+        getContext: jest.fn(() => context),
+        remove: jest.fn()
+    };
+
+    beforeEach(() => {
+        (useSigmaContext as jest.Mock).mockReturnValue({
+            sigma: {addListener, off},
+            container: sigmaElement
+        });
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+        jest.clearAllMocks();
+        canvas.style = {} as CSSStyleDeclaration;
+    });
+
+    it('should add listeners', () => {
+        renderHook(useSigmaCustomRenderers);
+        expect(addListener).toHaveBeenCalledWith('beforeRender', expect.any(Function));
+        expect(addListener).toHaveBeenCalledWith('afterRender', expect.any(Function));
+        expect(addListener).toHaveBeenCalledWith('resize', expect.any(Function));
+    });
+
+    it('should remove listeners after unmount component', () => {
+        const {unmount} = renderHook(useSigmaCustomRenderers);
+        unmount();
+        expect(off).toHaveBeenCalledWith('beforeRender', expect.any(Function));
+        expect(off).toHaveBeenCalledWith('afterRender', expect.any(Function));
+        expect(off).toHaveBeenCalledWith('resize', expect.any(Function));
+    });
+
+    it('beforeRender should work correctly', () => {
+        const {result, rerender} = renderHook(useSigmaCustomRenderers);
+
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas as any);
+
+        act(() => {
+            result.current.addRenderers({customRenderer: {renderer: jest.fn(), insertBefore: 'element'}});
+        });
+
+        rerender();
+
+        const beforeRender = getRendererByEventName('beforeRender');
+
+        act(() => {
+            beforeRender();
+        });
+
+        expect(sigmaElement.querySelector).toHaveBeenCalledWith('.sigma-container');
+        expect(canvas.style.position).toBe('absolute');
+        expect(canvas.setAttribute).toHaveBeenCalledWith('class', 'sigma-customRenderer');
+        expect(canvas.getContext).toHaveBeenCalledWith('2d', {preserveDrawingBuffer: false, antialias: false});
+        expect(sigmaContainerElement.insertBefore).toHaveBeenCalledWith(canvas, '.sigma-element');
+        expect(result.current).toEqual({
+            addRenderers: expect.any(Function),
+            canvases: {customRenderer: {canvasElement: canvas, context}}
+        });
+        expect(getPixelRatio).toHaveBeenCalled();
+    });
+
+    it('beforeRender should work correctly if canvas already has been created', () => {
+        const {result, rerender} = renderHook(useSigmaCustomRenderers);
+
+        act(() => {
+            result.current.addRenderers({customRenderer: {renderer: jest.fn(), insertBefore: 'element'}});
+        });
+
+        rerender();
+
+        const beforeRender = getRendererByEventName('beforeRender');
+
+        act(() => {
+            beforeRender();
+        });
+
+        expect(sigmaElement.querySelector).toHaveBeenCalledTimes(1);
+
+        act(() => {
+            beforeRender();
+        });
+
+        expect(sigmaElement.querySelector).toHaveBeenCalledTimes(1);
+    });
+
+    it('resize should work correctly if canvases is empty', () => {
+        const {result, rerender} = renderHook(useSigmaCustomRenderers);
+
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas as any);
+
+        act(() => {
+            result.current.addRenderers({customRenderer: {renderer: jest.fn(), insertBefore: 'element'}});
+        });
+
+        rerender();
+
+        const resize = getRendererByEventName('resize');
+
+        act(() => {
+            resize();
+        });
+
+        expect(getPixelRatio).toHaveBeenCalled();
+        expect(canvas.setAttribute).not.toHaveBeenCalled();
+    });
+
+    it('resize should work correctly if canvas exists and pixelRatio equals 1', () => {
+        (getPixelRatio as jest.Mock).mockReturnValue(1);
+
+        const {result, rerender} = renderHook(useSigmaCustomRenderers);
+
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas as any);
+
+        act(() => {
+            result.current.addRenderers({customRenderer: {renderer: jest.fn(), insertBefore: 'element'}});
+        });
+
+        rerender();
+
+        const beforeRender = getRendererByEventName('beforeRender');
+
+        act(() => {
+            beforeRender();
+        });
+
+        expect(result.current.canvases.customRenderer).not.toBeUndefined();
+
+        const resize = getRendererByEventName('resize');
+
+        jest.clearAllMocks();
+
+        act(() => {
+            resize();
+        });
+
+        expect(canvas.setAttribute).toHaveBeenCalledTimes(2);
+        expect(canvas.setAttribute).toHaveBeenCalledWith('width', '200px');
+        expect(canvas.setAttribute).toHaveBeenCalledWith('height', '300px');
+        expect(canvas.style.width).toBe('200px');
+        expect(canvas.style.height).toBe('300px');
+        expect(context.scale).not.toHaveBeenCalled();
+    });
+
+    it('resize should work correctly if canvas exists and pixelRatio does not equal 1', () => {
+        (getPixelRatio as jest.Mock).mockReturnValue(0.9);
+
+        const {result, rerender} = renderHook(useSigmaCustomRenderers);
+
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas as any);
+
+        act(() => {
+            result.current.addRenderers({customRenderer: {renderer: jest.fn(), insertBefore: 'element'}});
+        });
+
+        rerender();
+
+        const beforeRender = getRendererByEventName('beforeRender');
+
+        act(() => {
+            beforeRender();
+        });
+
+        expect(result.current.canvases.customRenderer).not.toBeUndefined();
+
+        const resize = getRendererByEventName('resize');
+
+        jest.clearAllMocks();
+
+        act(() => {
+            resize();
+        });
+
+        expect(canvas.setAttribute).toHaveBeenCalledTimes(2);
+        expect(canvas.setAttribute).toHaveBeenCalledWith('width', '180px');
+        expect(canvas.setAttribute).toHaveBeenCalledWith('height', '270px');
+        expect(canvas.style.width).toBe('200px');
+        expect(canvas.style.height).toBe('300px');
+        expect(context.scale).toHaveBeenCalledWith(0.9, 0.9);
+    });
+
+    it('afterRender should work correctly', () => {
+        const {result, rerender} = renderHook(useSigmaCustomRenderers);
+
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas as any);
+
+        const customRenderer = jest.fn();
+
+        act(() => {
+            result.current.addRenderers({customRenderer: {renderer: customRenderer, insertBefore: 'element'}});
+        });
+
+        rerender();
+
+        const beforeRender = getRendererByEventName('beforeRender');
+
+        act(() => {
+            beforeRender();
+        });
+
+        expect(result.current.canvases.customRenderer).not.toBeUndefined();
+
+        const afterRender = getRendererByEventName('afterRender');
+
+        jest.clearAllMocks();
+
+        act(() => {
+            afterRender();
+        });
+
+        expect(context.clearRect).toHaveBeenCalledWith(0, 0, 200, 300);
+        expect(customRenderer).toHaveBeenCalledWith(context);
+    });
+
+    it('should remove canvas element from DOM and clear canvases ref if component has been unmounted', () => {
+        const {result, rerender, unmount} = renderHook(useSigmaCustomRenderers);
+
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas as any);
+
+        act(() => {
+            result.current.addRenderers({customRenderer: {renderer: jest.fn(), insertBefore: 'element'}});
+        });
+
+        rerender();
+
+        const beforeRender = getRendererByEventName('beforeRender');
+
+        act(() => {
+            beforeRender();
+        });
+
+        expect(result.current.canvases.customRenderer).not.toBeUndefined();
+
+        unmount();
+
+        expect(canvas.remove).toHaveBeenCalled();
+        expect(result.current.canvases).toEqual({});
+    });
+});