@reltio/graph 1.4.1584 → 1.4.1586-mui5

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

@@ -0,0 +1,825 @@
+import {renderHook, act} from '@testing-library/react-hooks';
+import {MultiGraph} from 'graphology';
+import {useSigma, useSetSettings, useLoadGraph, useRegisterEvents} from '@react-sigma/core';
+import * as reactRedux from 'react-redux';
+import {animateNodes} from 'sigma/utils/animate';
+import {HopsResponse, RelationTypeDirection} from '@reltio/mdm-sdk';
+import {useGraphLayout} from '../useGraphLayout';
+import {fillGraphWithHopsResponse} from '../../utils/graph';
+import {useTooltipRenderer} from '../useTooltipRenderer';
+import {GraphologyLayout, GraphologyWorkerLayoutConstructor, GraphPathType} from '../../types/graphDataTypes';
+
+jest.mock('sigma/utils/animate', () => ({
+    animateNodes: jest.fn()
+}));
+
+jest.mock('@react-sigma/core', () => {
+    const sigma = jest.requireActual('@react-sigma/core');
+    return {
+        ...sigma,
+        useSigma: jest.fn().mockReturnValue({
+            getCamera: () => ({
+                setState: () => {}
+            }),
+            getGraph: () => ({
+                neighbors: () => {},
+                hasExtremity: () => {},
+                findEdge: () => {}
+            })
+        }),
+        useLoadGraph: jest.fn().mockReturnValue(jest.fn()),
+        useRegisterEvents: jest.fn().mockReturnValue(jest.fn()),
+        useSetSettings: jest.fn().mockReturnValue(jest.fn())
+    };
+});
+
+jest.mock('../useSelfRelationLoopsRenderer', () => ({
+    ...jest.requireActual<Record<string, unknown>>('../useSelfRelationLoopsRenderer'),
+    useSelfRelationLoopsRenderer: jest.fn().mockReturnValue({
+        selfRelationsPathsMap: {},
+        selfRelationLoopsCanvas: null
+    })
+}));
+
+jest.mock('../../utils/graphLayout', () => ({
+    ...jest.requireActual<Record<string, unknown>>('../../utils/graphLayout'),
+    getMousePos: jest.fn()
+}));
+
+jest.mock('../useTooltipRenderer');
+
+const store = {
+    profile: {
+        entity: {
+            uri: 'node1',
+            type: 'hcp'
+        }
+    },
+    tenant: {id: 't1'},
+    metadata: {
+        t1: {
+            entityTypes: [
+                {
+                    uri: 'hcp',
+                    typeImage: 'images/defaultImage/typeImage_gender_neutral.png'
+                }
+            ],
+            relationTypes: [
+                {
+                    uri: 'relType2',
+                    typeColor: '#663344',
+                    label: 'Affilation'
+                },
+                {
+                    uri: 'relType3'
+                },
+                {
+                    uri: 'relType4',
+                    extendsTypeURI: 'relType2'
+                }
+            ]
+        }
+    },
+    ui: {
+        paths: {
+            imagePath: 'https://s3.amazonaws.com/reltio.images/api'
+        }
+    }
+};
+
+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},
+        {uri: 'node4', type: 'hco', traversedRelations: 1, untraversedRelations: 1},
+        {uri: 'node5', type: 'hcp', 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: 'node4'
+            },
+            direction: RelationTypeDirection.undirected
+        },
+        {
+            uri: 'r4',
+            type: 'relType4',
+            startObject: {
+                objectURI: 'node1'
+            },
+            endObject: {
+                objectURI: 'node5'
+            },
+            direction: RelationTypeDirection.bidirectional
+        }
+    ]
+};
+
+type StartHookProps = {
+    selectedNode?: string;
+    graph?: MultiGraph;
+    onNodeClick?: (node: string) => void;
+    layoutSettings?: Record<string, unknown>;
+    syncLayout?: GraphologyLayout<Record<string, unknown>>;
+    workerLayout?: GraphologyWorkerLayoutConstructor<Record<string, unknown>>;
+    isDirected?: boolean;
+    onNodeCollapse?: (node: string, path: GraphPathType) => void;
+    onNodeExpand?: (node: string) => void;
+};
+
+const startHook = ({
+    selectedNode = 'node1',
+    graph = new MultiGraph(),
+    onNodeClick = jest.fn(),
+    onNodeCollapse = jest.fn(),
+    onNodeExpand = jest.fn(),
+    layoutSettings = {},
+    syncLayout,
+    workerLayout,
+    isDirected
+}: StartHookProps = {}) => {
+    return renderHook(useGraphLayout, {
+        initialProps: {
+            data,
+            selectedNode,
+            graph,
+            onNodeClick,
+            onNodeCollapse,
+            onNodeExpand,
+            layoutSettings,
+            syncLayout,
+            workerLayout,
+            isDirected
+        }
+    });
+};
+
+const createGraph = () => {
+    const graph = new MultiGraph();
+    fillGraphWithHopsResponse(graph, data);
+    return graph;
+};
+
+describe('useGraphLayout tests', () => {
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should set ratio to 1.2', () => {
+        const graph = createGraph();
+        const setCameraState = jest.fn();
+
+        (useSigma as jest.Mock).mockReturnValue({
+            getCamera: () => ({
+                setState: setCameraState
+            }),
+            getGraph: () => graph
+        });
+
+        startHook();
+
+        expect(setCameraState).toHaveBeenCalledWith({ratio: 1.2});
+    });
+
+    it('onNodeClick should work correctly', () => {
+        const registerEvents = jest.fn();
+        const onNodeClick = jest.fn();
+        (useRegisterEvents as jest.Mock).mockReturnValue(registerEvents);
+
+        const graph = createGraph();
+        startHook({graph, onNodeClick});
+
+        const clickNode = registerEvents.mock.calls[registerEvents.mock.calls.length - 1][0].clickNode;
+
+        act(() => {
+            clickNode({node: 'node2'});
+        });
+
+        expect(onNodeClick).toHaveBeenCalledWith('node2');
+    });
+
+    describe('onCollapseNode behavior', () => {
+        it('should call onNodeCollapse and onNodeClick if click on collapse button', () => {
+            const registerEvents = jest.fn();
+            const onNodeCollapse = jest.fn();
+            const onNodeClick = jest.fn();
+            (useRegisterEvents as jest.Mock).mockReturnValue(registerEvents);
+
+            const graph = createGraph();
+
+            (useSigma as jest.Mock).mockReturnValue({
+                getCamera: () => ({
+                    setState: () => {}
+                }),
+                getGraph: () => graph,
+                viewportToGraph: jest.fn().mockReturnValue({x: 5, y: 10}),
+                framedGraphToViewport: jest.fn().mockReturnValue({x: 80, y: 140}),
+                getNodeDisplayData: jest.fn().mockReturnValue({
+                    x: 4,
+                    y: 7,
+                    buttonOffset: [19, 19],
+                    buttonSize: 8,
+                    showCollapse: true
+                }),
+                scaleSize: jest.fn().mockImplementation((value) => value)
+            });
+
+            startHook({graph, onNodeCollapse, onNodeClick});
+
+            const click = registerEvents.mock.calls[registerEvents.mock.calls.length - 1][0].click;
+
+            act(() => {
+                click({x: 100, y: 160});
+            });
+
+            expect(onNodeCollapse).toHaveBeenCalled();
+            expect(onNodeClick).toHaveBeenCalled();
+        });
+
+        it('should not call onNodeCollapse and onNodeClick when click outside of collapse button', () => {
+            const registerEvents = jest.fn();
+            const onNodeCollapse = jest.fn();
+            const onNodeClick = jest.fn();
+            (useRegisterEvents as jest.Mock).mockReturnValue(registerEvents);
+
+            const graph = createGraph();
+
+            (useSigma as jest.Mock).mockReturnValue({
+                getCamera: () => ({
+                    setState: () => {}
+                }),
+                getGraph: () => graph,
+                viewportToGraph: jest.fn().mockReturnValue({x: 5, y: 10}),
+                framedGraphToViewport: jest.fn().mockReturnValue({x: 80, y: 140}),
+                getNodeDisplayData: jest.fn().mockReturnValue({
+                    x: 4,
+                    y: 7,
+                    buttonOffset: [19, 19],
+                    buttonSize: 8,
+                    showCollapse: true
+                }),
+                scaleSize: jest.fn().mockImplementation((value) => value)
+            });
+
+            startHook({graph, onNodeCollapse, onNodeClick});
+
+            const click = registerEvents.mock.calls[registerEvents.mock.calls.length - 1][0].click;
+
+            act(() => {
+                click({x: 130, y: 200});
+            });
+
+            expect(onNodeCollapse).not.toHaveBeenCalled();
+            expect(onNodeClick).not.toHaveBeenCalled();
+        });
+
+        it('should not call onNodeCollapse and onNodeClick if showCollapse is false', () => {
+            const registerEvents = jest.fn();
+            const onNodeCollapse = jest.fn();
+            const onNodeClick = jest.fn();
+            (useRegisterEvents as jest.Mock).mockReturnValue(registerEvents);
+
+            const graph = createGraph();
+
+            (useSigma as jest.Mock).mockReturnValue({
+                getCamera: () => ({
+                    setState: () => {}
+                }),
+                getGraph: () => graph,
+                viewportToGraph: jest.fn().mockReturnValue({x: 5, y: 10}),
+                framedGraphToViewport: jest.fn().mockReturnValue({x: 80, y: 140}),
+                getNodeDisplayData: jest.fn().mockReturnValue({
+                    x: 4,
+                    y: 7,
+                    buttonOffset: [19, 19],
+                    buttonSize: 8,
+                    showCollapse: false
+                }),
+                scaleSize: jest.fn().mockImplementation((value) => value)
+            });
+
+            startHook({graph, onNodeCollapse, onNodeClick});
+
+            const click = registerEvents.mock.calls[registerEvents.mock.calls.length - 1][0].click;
+
+            act(() => {
+                click({x: 100, y: 160});
+            });
+
+            expect(onNodeCollapse).not.toHaveBeenCalled();
+            expect(onNodeClick).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('onExpandeNode behavior', () => {
+        it('should call onNodeExpand and onNodeClick if click on expand button', () => {
+            const registerEvents = jest.fn();
+            const onNodeExpand = jest.fn();
+            const onNodeClick = jest.fn();
+            (useRegisterEvents as jest.Mock).mockReturnValue(registerEvents);
+
+            const graph = createGraph();
+
+            (useSigma as jest.Mock).mockReturnValue({
+                getCamera: () => ({
+                    setState: () => {}
+                }),
+                getGraph: () => graph,
+                viewportToGraph: jest.fn().mockReturnValue({x: 5, y: 10}),
+                framedGraphToViewport: jest.fn().mockReturnValue({x: 80, y: 140}),
+                getNodeDisplayData: jest.fn().mockReturnValue({
+                    x: 4,
+                    y: 7,
+                    buttonOffset: [19, 19],
+                    buttonSize: 8,
+                    showExpand: true
+                }),
+                scaleSize: jest.fn().mockImplementation((value) => value)
+            });
+
+            startHook({graph, onNodeExpand, onNodeClick});
+
+            const click = registerEvents.mock.calls[registerEvents.mock.calls.length - 1][0].click;
+
+            act(() => {
+                click({x: 100, y: 120});
+            });
+
+            expect(onNodeExpand).toHaveBeenCalled();
+            expect(onNodeClick).toHaveBeenCalled();
+        });
+
+        it('should not call onNodeExpand and onNodeClick when click outside of expand button', () => {
+            const registerEvents = jest.fn();
+            const onNodeExpand = jest.fn();
+            const onNodeClick = jest.fn();
+            (useRegisterEvents as jest.Mock).mockReturnValue(registerEvents);
+
+            const graph = createGraph();
+
+            (useSigma as jest.Mock).mockReturnValue({
+                getCamera: () => ({
+                    setState: () => {}
+                }),
+                getGraph: () => graph,
+                viewportToGraph: jest.fn().mockReturnValue({x: 5, y: 10}),
+                framedGraphToViewport: jest.fn().mockReturnValue({x: 80, y: 140}),
+                getNodeDisplayData: jest.fn().mockReturnValue({
+                    x: 4,
+                    y: 7,
+                    buttonOffset: [19, 19],
+                    buttonSize: 8,
+                    showExpand: true
+                }),
+                scaleSize: jest.fn().mockImplementation((value) => value)
+            });
+
+            startHook({graph, onNodeExpand, onNodeClick});
+
+            const click = registerEvents.mock.calls[registerEvents.mock.calls.length - 1][0].click;
+
+            act(() => {
+                click({x: 130, y: 200});
+            });
+
+            expect(onNodeExpand).not.toHaveBeenCalled();
+            expect(onNodeClick).not.toHaveBeenCalled();
+        });
+
+        it('should not call onNodeExpand and onNodeClick if showExpand is false', () => {
+            const registerEvents = jest.fn();
+            const onNodeExpand = jest.fn();
+            const onNodeClick = jest.fn();
+            (useRegisterEvents as jest.Mock).mockReturnValue(registerEvents);
+
+            const graph = createGraph();
+
+            (useSigma as jest.Mock).mockReturnValue({
+                getCamera: () => ({
+                    setState: () => {}
+                }),
+                getGraph: () => graph,
+                viewportToGraph: jest.fn().mockReturnValue({x: 5, y: 10}),
+                framedGraphToViewport: jest.fn().mockReturnValue({x: 80, y: 140}),
+                getNodeDisplayData: jest.fn().mockReturnValue({
+                    x: 4,
+                    y: 7,
+                    buttonOffset: [19, 19],
+                    buttonSize: 8,
+                    showExpand: false
+                }),
+                scaleSize: jest.fn().mockImplementation((value) => value)
+            });
+
+            startHook({graph, onNodeExpand, onNodeClick});
+
+            const click = registerEvents.mock.calls[registerEvents.mock.calls.length - 1][0].click;
+
+            act(() => {
+                click({x: 100, y: 120});
+            });
+
+            expect(onNodeExpand).not.toHaveBeenCalled();
+            expect(onNodeClick).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('check sync and worker layout working', () => {
+        it('sync layout', () => {
+            const graph = createGraph();
+            const layoutSettings = {};
+            const positions = {
+                node1: {x: 5, y: 10},
+                node2: {x: 6, y: 11},
+                node3: {x: 7, y: 12},
+                node4: {x: 8, y: 13}
+            };
+            const loadGraph = jest.fn();
+
+            (useLoadGraph as jest.Mock).mockReturnValue(loadGraph);
+            const syncLayout = jest.fn().mockReturnValue(positions);
+
+            startHook({graph, layoutSettings, syncLayout});
+
+            expect(loadGraph).toHaveBeenCalledWith(graph);
+            expect(syncLayout).toHaveBeenCalledWith(graph, layoutSettings);
+            expect(animateNodes).toHaveBeenCalledWith(graph, positions, {duration: 1000});
+        });
+
+        it('worker layout', () => {
+            jest.useFakeTimers();
+            const graph = createGraph();
+            const loadGraph = jest.fn();
+            const layoutSettings = {};
+
+            (useLoadGraph as jest.Mock).mockReturnValue(loadGraph);
+
+            const stopWorker = jest.fn();
+            const startWorker = jest.fn();
+            const killWorker = jest.fn();
+            const workerLayout = jest.fn().mockReturnValue({
+                stop: stopWorker,
+                start: startWorker,
+                kill: killWorker
+            });
+
+            const {unmount} = startHook({graph, layoutSettings, workerLayout});
+
+            expect(loadGraph).toHaveBeenCalledWith(graph);
+            expect(workerLayout).toHaveBeenCalledWith(graph, layoutSettings);
+            expect(startWorker).toHaveBeenCalled();
+            expect(stopWorker).not.toHaveBeenCalled();
+            jest.runAllTimers();
+            expect(stopWorker).toHaveBeenCalled();
+            jest.useRealTimers();
+            unmount();
+            expect(killWorker).toHaveBeenCalled();
+        });
+    });
+
+    describe('node reducer data', () => {
+        const setSettings = jest.fn();
+        const registerEvents = jest.fn();
+        beforeAll(() => {
+            (useSetSettings as jest.Mock).mockReturnValue(setSettings);
+            (useRegisterEvents as jest.Mock).mockReturnValue(registerEvents);
+        });
+
+        const getNodeReducer = () => setSettings.mock.calls[setSettings.mock.calls.length - 1][0].nodeReducer;
+        const getEnterNode = () => registerEvents.mock.calls[registerEvents.mock.calls.length - 1][0].enterNode;
+
+        it('should return correctly image path', () => {
+            const graph = createGraph();
+            startHook({graph});
+            const nodeReducer = getNodeReducer();
+            expect(nodeReducer('node1', graph.getNodeAttributes('node1')).image).toBe(
+                'https://s3.amazonaws.com/reltio.images/api/images/defaultImage/typeImage_gender_neutral.png'
+            );
+        });
+
+        it('should return selected node props if node is selected node', () => {
+            const graph = createGraph();
+            startHook({graph, selectedNode: 'node2'});
+            const nodeReducer = getNodeReducer();
+            expect(nodeReducer('node2', graph.getNodeAttributes('node2'))).toMatchObject({
+                size: 24,
+                buttonSize: 8,
+                buttonOffset: [19, 19]
+            });
+        });
+
+        it('should not fail if selected node is not in graph', () => {
+            const graph = createGraph();
+            const {result} = startHook({graph, selectedNode: 'non existing node'});
+            expect(result.error).toBeUndefined();
+        });
+
+        it('should return default node props if node is not selected node', () => {
+            const graph = createGraph();
+            startHook({graph, selectedNode: 'node2'});
+            const nodeReducer = getNodeReducer();
+            expect(nodeReducer('node1', graph.getNodeAttributes('node1'))).toMatchObject({
+                size: 12,
+                buttonSize: 6,
+                buttonOffset: [8, 13]
+            });
+        });
+
+        it('should return correctly inPath prop if node is selected node', () => {
+            const graph = createGraph();
+            startHook({graph, selectedNode: 'node1'});
+            const nodeReducer = getNodeReducer();
+            expect(nodeReducer('node1', graph.getNodeAttributes('node1')).inPath).toBe(true);
+        });
+
+        it('should return correctly inPath prop if node in path', async () => {
+            const graph = createGraph();
+
+            (useSigma as jest.Mock).mockReturnValue({
+                getCamera: () => ({
+                    setState: () => {}
+                }),
+                getGraph: () => graph
+            });
+
+            const {rerender} = startHook({graph, selectedNode: 'node3'});
+            rerender();
+            const nodeReducer = getNodeReducer();
+            expect(nodeReducer('node2', graph.getNodeAttributes('node2')).inPath).toBe(true);
+        });
+
+        it('should return correct props for main node', async () => {
+            const graph = createGraph();
+
+            (useSigma as jest.Mock).mockReturnValue({
+                getCamera: () => ({
+                    setState: () => {}
+                }),
+                getGraph: () => graph
+            });
+
+            const {rerender} = startHook({graph, selectedNode: 'node3'});
+            rerender();
+            const nodeReducer = getNodeReducer();
+            expect(nodeReducer(store.profile.entity.uri, graph.getNodeAttributes('node2'))).toMatchObject({
+                color: '#00FFFF',
+                inPath: true
+            });
+        });
+
+        it('should return correctly inactive prop if node is inactive', () => {
+            const graph = createGraph();
+            startHook({graph, selectedNode: 'node2'});
+            const nodeReducer = getNodeReducer();
+            expect(nodeReducer('node5', graph.getNodeAttributes('node5')).inactive).toBe(true);
+        });
+
+        it('should show empty label if node is inactive and node is not hovered', () => {
+            const graph = createGraph();
+            startHook({graph, selectedNode: 'node2'});
+            const nodeReducer = getNodeReducer();
+            expect(nodeReducer('node5', graph.getNodeAttributes('node5')).label).toBe('');
+        });
+
+        it('should highlight node if node is hovered', () => {
+            const graph = createGraph();
+
+            startHook({graph, selectedNode: 'node1'});
+            const enterNode = getEnterNode();
+            act(() => {
+                enterNode({node: 'node2'});
+            });
+            const nodeReducer = getNodeReducer();
+            expect(nodeReducer('node2', graph.getNodeAttributes('node2')).highlighted).toBe(true);
+        });
+
+        it('should set showExpand/showCollapse props', () => {
+            const graph = createGraph();
+            (useSigma as jest.Mock).mockReturnValue({
+                getCamera: () => ({
+                    setState: () => {}
+                }),
+                getGraph: () => graph
+            });
+
+            startHook({graph, selectedNode: 'node2'});
+            const nodeReducer = getNodeReducer();
+            expect(nodeReducer('node1', graph.getNodeAttributes('node1'))).toMatchObject({
+                showCollapse: true,
+                showExpand: false
+            });
+            expect(nodeReducer('node2', graph.getNodeAttributes('node2'))).toMatchObject({
+                showCollapse: true,
+                showExpand: true
+            });
+            expect(nodeReducer('node3', graph.getNodeAttributes('node3'))).toMatchObject({
+                showCollapse: false,
+                showExpand: false
+            });
+            expect(nodeReducer('node4', graph.getNodeAttributes('node4'))).toMatchObject({
+                showCollapse: false,
+                showExpand: true
+            });
+            expect(nodeReducer('node5', graph.getNodeAttributes('node5'))).toMatchObject({
+                showCollapse: false,
+                showExpand: false
+            });
+        });
+    });
+
+    describe('edge reducer data', () => {
+        const setSettings = jest.fn();
+        const registerEvents = jest.fn();
+        beforeAll(() => {
+            (useSetSettings as jest.Mock).mockReturnValue(setSettings);
+            (useRegisterEvents as jest.Mock).mockReturnValue(registerEvents);
+        });
+
+        const getEdgeReducer = () => setSettings.mock.calls[setSettings.mock.calls.length - 1][0].edgeReducer;
+
+        it('should render correctly properties for basic case', () => {
+            const graph = createGraph();
+            startHook({graph, selectedNode: 'node1'});
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r1', graph.getEdgeAttributes('r1'))).toMatchObject({
+                hidden: false,
+                size: 1,
+                color: 'rgba(0, 0, 0, 0.2)'
+            });
+        });
+
+        it('should set hovered correctly for edge', () => {
+            (useTooltipRenderer as jest.Mock).mockReturnValue('r1');
+
+            const graph = createGraph();
+            startHook({graph});
+
+            const edgeReducer = getEdgeReducer();
+
+            expect(edgeReducer('r1', graph.getEdgeAttributes('r1')).hovered).toBe(true);
+            expect(edgeReducer('r2', graph.getEdgeAttributes('r2')).hovered).toBe(undefined);
+        });
+
+        it('should not apply correctly arrowSizeRatio if graph is not directed', () => {
+            const graph = createGraph();
+            startHook({graph, selectedNode: 'node1', isDirected: false});
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r1', graph.getEdgeAttributes('r1')).arrowSizeRatio).toBeUndefined();
+        });
+
+        it('should apply correctly arrowSizeRatio if graph is directed', () => {
+            const graph = createGraph();
+            startHook({graph, selectedNode: 'node1', isDirected: true});
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r1', graph.getEdgeAttributes('r1')).arrowSizeRatio).toBe(4);
+        });
+
+        it('should hide edge if has selected node that not equals rootNode and has not extremity and edge not in path', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph, selectedNode: 'node4', isDirected: true});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r2', graph.getEdgeAttributes('r2')).hidden).toBe(true);
+        });
+
+        it('should highlight and increase size of edge if edge in path', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph, selectedNode: 'node2', isDirected: true});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r1', graph.getEdgeAttributes('r1'))).toMatchObject({
+                color: '#0072CE',
+                size: 4,
+                arrowSizeRatio: 1.4
+            });
+        });
+
+        it('should set edge type as "arrow" for directed relation if isDirected is true', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph, selectedNode: 'node4', isDirected: true});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r2', graph.getEdgeAttributes('r2')).type).toBe('arrow');
+        });
+
+        it('should set edge type as "line" for directed relation if isDirected is false', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph, selectedNode: 'node4', isDirected: false});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r2', graph.getEdgeAttributes('r2')).type).toBe('line');
+        });
+
+        it('should set edge type as "line" for undirected relation if isDirected is true', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph, selectedNode: 'node4', isDirected: true});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r2', graph.getEdgeAttributes('r3')).type).toBe('line');
+        });
+
+        it('should set edge type as "line" for undirected relation if isDirected is false', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph, selectedNode: 'node4', isDirected: false});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r2', graph.getEdgeAttributes('r3')).type).toBe('line');
+        });
+
+        it('should set edge type as "doubleArrow" for bidirectional relation if isDirected is true', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph, selectedNode: 'node4', isDirected: true});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r4', graph.getEdgeAttributes('r4')).type).toBe('doubleArrow');
+        });
+
+        it('should set edge type as "line" for bidirectional relation if isDirected is false', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph, selectedNode: 'node4', isDirected: false});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r4', graph.getEdgeAttributes('r4')).type).toBe('line');
+        });
+
+        it('should use edge color from relationType if relationType has typeColor', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r2', graph.getEdgeAttributes('r2')).color).toBe('#663344');
+        });
+
+        it('should use edge color from inherited relationType if relationType has not typeColor', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r4', graph.getEdgeAttributes('r4')).color).toBe('#663344');
+        });
+
+        it('should use default color if relationType has not typeColor', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r3', graph.getEdgeAttributes('r3')).color).toBe('rgba(0, 0, 0, 0.2)');
+        });
+
+        it('should use default color if relationType not found in metadata', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r1', graph.getEdgeAttributes('r1')).color).toBe('rgba(0, 0, 0, 0.2)');
+        });
+
+        it('should set edge label from relationType if relationType has label', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r2', graph.getEdgeAttributes('r2')).relationLabel).toBe('Affilation');
+        });
+
+        it('should set default edge label if relationType has not label', () => {
+            const graph = createGraph();
+            const {rerender} = startHook({graph});
+            rerender();
+            const edgeReducer = getEdgeReducer();
+            expect(edgeReducer('r3', graph.getEdgeAttributes('r3')).relationLabel).toBe('<No label>');
+        });
+    });
+});