@reltio/graph 1.4.1584 → 1.4.1586-mui5

package/src/components/GraphPerspectiveView/__tests__/useGraphLoader.test.tsx

@@ -0,0 +1,1519 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import {renderHook} from '@testing-library/react-hooks';
+import {mount, shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {act} from 'react-dom/test-utils';
+import {LinearLoadIndicator, PageRequestsAbortingContext} from '@reltio/components';
+import {
+    createRelation,
+    Entity,
+    getHops,
+    getEntity,
+    HopsResponse,
+    Metadata,
+    RelationTypeDirection,
+    removeRelation,
+    GraphLayout
+} from '@reltio/mdm-sdk';
+import {ui} from '@reltio/mdm-module';
+import * as processResponseToGraphExport from '../../../utils/processResponseToGraph';
+import * as hopsDataExport from '../../../utils/hopsData';
+import {GraphStateContext} from '../../../contexts/GraphStateContext';
+import {GraphPathType} from '../../../types/graphDataTypes';
+import GraphPerspectiveView from '../GraphPerspectiveView';
+import {useGraphState} from '../../../hooks/useGraphState';
+
+jest.mock('../../GraphArea/GraphArea', () => () => null);
+jest.mock('../../GraphRightSidePanel/GraphRightSidePanel', () => ({
+    ...(jest.requireActual('../../GraphRightSidePanel/GraphRightSidePanel') as Record<string, unknown>),
+    default: () => null
+}));
+jest.mock('../../../contexts/GraphStateContext', () => ({
+    GraphStateContext: {
+        Provider: jest.fn().mockImplementation(({children}) => <div id="graphStateContextMock">{children}</div>)
+    }
+}));
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    ScreenProfileBand: () => null
+}));
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    removeRelation: jest.fn().mockReturnValue(Promise.resolve({})),
+    createRelation: jest.fn().mockReturnValue(Promise.resolve({})),
+    getHops: jest.fn().mockReturnValue(Promise.resolve({})),
+    getEntity: jest.fn().mockReturnValue(Promise.resolve({})),
+    getRelation: jest.fn().mockReturnValue(Promise.resolve({})),
+    updateRelation: jest.fn().mockReturnValue(Promise.resolve())
+}));
+
+type CreateStoreProps = {
+    entity?: Entity;
+    metadata?: Metadata;
+};
+const createStore = ({entity, metadata}: CreateStoreProps = {}) => ({
+    profile: {
+        entity: entity || {
+            uri: 'entities/uri1',
+            type: 'configuration/entityTypes/HCO'
+        }
+    },
+    tenant: {
+        id: 't1'
+    },
+    metadata: {
+        t1: metadata
+    }
+});
+
+describe('useGraphLoader behavior', () => {
+    const dispatch = jest.fn();
+    let store;
+    const signal = new AbortController().signal;
+    const setUp = (
+        method: typeof shallow | typeof mount = shallow,
+        customStore?,
+        graphTypeUri?,
+        graphLayout = GraphLayout.SIMPLE_NETWORK
+    ) => {
+        store = customStore || createStore({metadata: {} as Metadata});
+
+        return (method as typeof shallow)(
+            <PageRequestsAbortingContext.Provider value={signal}>
+                <GraphPerspectiveView graphTypeUri={graphTypeUri} graphLayout={graphLayout} />
+            </PageRequestsAbortingContext.Provider>
+        );
+    };
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should request graph data and set value to GraphStateContext.Provider', async () => {
+        const processResponseToGraphSpy = jest.spyOn(processResponseToGraphExport, 'default');
+        const data: HopsResponse = {
+            entities: [
+                {uri: 'e1', type: ''},
+                {uri: 'e2', type: ''},
+                {uri: 'e3', type: ''}
+            ],
+            relations: [
+                {
+                    uri: 'r1',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e1'
+                    },
+                    endObject: {
+                        objectURI: 'e2'
+                    },
+                    direction: RelationTypeDirection.directed
+                },
+                {
+                    uri: 'r2',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e2'
+                    },
+                    endObject: {
+                        objectURI: 'e3'
+                    },
+                    direction: RelationTypeDirection.directed
+                },
+                {
+                    uri: 'r3',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e3'
+                    },
+                    endObject: {
+                        objectURI: 'e1'
+                    },
+                    direction: RelationTypeDirection.bidirectional
+                }
+            ]
+        };
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        const component = setUp(mount);
+        expect(component.find(GraphStateContext.Provider)).toHaveLength(1);
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            data: null,
+            graphLoading: true,
+            graphTypeUri: null
+        });
+        expect(component.find(LinearLoadIndicator)).toHaveLength(1);
+        expect(getHops).toHaveBeenCalledWith({
+            uri: 'entities/uri1',
+            deep: 1,
+            max: 3000,
+            limitCreditsConsumption: true,
+            graphTypes: null,
+            activenessDate: null,
+            signal
+        });
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        const contextValue = component.find(GraphStateContext.Provider).prop('value');
+        expect(contextValue).toMatchObject({
+            data,
+            graphTypeUri: null,
+            graphLoading: false
+        });
+        const graph = contextValue.graphologyGraph;
+        expect(graph.hasNode('e1')).toBe(true);
+        expect(graph.hasNode('e2')).toBe(true);
+        expect(graph.hasNode('e3')).toBe(true);
+        expect(graph.hasEdge('r1')).toBe(true);
+        expect(graph.source('r1')).toBe('e1');
+        expect(graph.target('r1')).toBe('e2');
+        expect(graph.hasEdge('r2')).toBe(true);
+        expect(graph.source('r2')).toBe('e2');
+        expect(graph.target('r2')).toBe('e3');
+        expect(graph.hasEdge('r3')).toBe(true);
+        expect(graph.source('r3')).toBe('e3');
+        expect(graph.target('r3')).toBe('e1');
+        expect(graph.getEdgeAttribute('r1', 'direction')).toBe(RelationTypeDirection.directed);
+        expect(graph.getEdgeAttribute('r2', 'direction')).toBe(RelationTypeDirection.directed);
+        expect(graph.getEdgeAttribute('r3', 'direction')).toBe(RelationTypeDirection.bidirectional);
+        expect(processResponseToGraphSpy).toHaveBeenCalled();
+        expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+    });
+
+    it('should not request graph data for dtss entity', () => {
+        const data = {entities: [], relations: []};
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        const component = setUp(
+            mount,
+            createStore({
+                entity: {
+                    uri: 'entities/uri1',
+                    type: 'configuration/entityTypes/HCO',
+                    dataTenant: 'dt1'
+                },
+                metadata: {} as Metadata
+            })
+        );
+        expect(component.find(GraphStateContext.Provider)).toHaveLength(1);
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            data: null,
+            graphLoading: false,
+            graphTypeUri: null
+        });
+        expect(getHops).not.toHaveBeenCalled();
+    });
+
+    it('should not request graph data for temp entity', () => {
+        const data = {entities: [], relations: []};
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        const component = setUp(
+            mount,
+            createStore({
+                entity: {
+                    uri: 'entities/uri$$1',
+                    type: 'configuration/entityTypes/HCO'
+                },
+                metadata: {} as Metadata
+            })
+        );
+        expect(component.find(GraphStateContext.Provider)).toHaveLength(1);
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            data: null,
+            graphTypeUri: null,
+            graphLoading: false
+        });
+        expect(getHops).not.toHaveBeenCalled();
+    });
+
+    it('should request hops in case when we change graph type with tree layout and then we change layout', async () => {
+        const component = setUp(mount);
+        const contextValue = component.find(GraphStateContext.Provider).prop('value');
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        contextValue.setLayout(GraphLayout.TREE);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+
+        contextValue.setGraphTypeUri('newGraphTypeUri');
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+
+        contextValue.setLayout(GraphLayout.SIMPLE_NETWORK);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(getHops).toHaveBeenCalledTimes(2);
+    });
+
+    it('should dispatch an error in case of failed graph request', async () => {
+        const error = {errorMessage: 'Error!!!'};
+        (getHops as jest.Mock).mockReturnValue(Promise.reject(error));
+        const component = setUp(mount);
+        expect(component.find(GraphStateContext.Provider)).toHaveLength(1);
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            data: null,
+            graphLoading: true,
+            graphTypeUri: null
+        });
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            data: null,
+            graphLoading: false,
+            graphTypeUri: null
+        });
+        expect(dispatch).toHaveBeenCalledWith(ui.actions.errorSet(error.errorMessage));
+    });
+
+    it('should not dispatch an error in case of cancel graph request', async () => {
+        const error = {errorMessage: 'Error!!!', name: 'AbortError'};
+        (getHops as jest.Mock).mockReturnValue(Promise.reject(error));
+        render(
+            <PageRequestsAbortingContext.Provider value={signal}>
+                <GraphPerspectiveView />
+            </PageRequestsAbortingContext.Provider>
+        );
+        await act(async () => {
+            await Promise.resolve();
+        });
+
+        expect(dispatch).not.toHaveBeenCalled();
+    });
+
+    it('should request graph data after changing graphType', async () => {
+        const data = {entities: [], relations: []};
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        const component = setUp(mount);
+        expect(component.find(GraphStateContext.Provider)).toHaveLength(1);
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            data: null,
+            graphLoading: true,
+            graphTypeUri: null
+        });
+        expect(getHops).toHaveBeenCalledWith({
+            uri: 'entities/uri1',
+            deep: 1,
+            max: 3000,
+            limitCreditsConsumption: true,
+            graphTypes: null,
+            activenessDate: null,
+            signal
+        });
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        component
+            .find(GraphStateContext.Provider)
+            .prop('value')
+            .setGraphTypeUri('configuration/graphTypes/FamilyGraph');
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            data,
+            graphLoading: false,
+            graphTypeUri: 'configuration/graphTypes/FamilyGraph'
+        });
+        expect(getHops).toHaveBeenCalledWith({
+            uri: 'entities/uri1',
+            deep: 2,
+            max: 200,
+            limitCreditsConsumption: true,
+            graphTypes: ['FamilyGraph'],
+            activenessDate: null,
+            signal
+        });
+    });
+
+    describe('external graphtype uri', () => {
+        const store = {
+            profile: {
+                entity: {
+                    uri: 'entities/uri1',
+                    type: 'configuration/entityTypes/HCO'
+                }
+            },
+            tenant: {
+                id: 't1'
+            },
+            metadata: {
+                t1: {
+                    entityTypes: [
+                        {
+                            uri: 'configuration/entityTypes/HCO'
+                        }
+                    ],
+                    relationTypes: [
+                        {
+                            uri: 'configuration/relationTypes/ReportsTo',
+                            startObject: {objectTypeURI: 'configuration/entityTypes/HCO'},
+                            endObject: {objectTypeURI: 'configuration/entityTypes/HCO'}
+                        }
+                    ],
+                    graphTypes: [
+                        {
+                            uri: 'configuration/graphTypes/FamilyGraph',
+                            label: 'Company Hierarchy',
+                            relationshipTypeURIs: ['configuration/relationTypes/ReportsTo']
+                        }
+                    ]
+                }
+            }
+        };
+        it('should use external graphtype uri if it is valid', async () => {
+            const data = {entities: [], relations: []};
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+            setUp(mount, store, 'configuration/graphTypes/FamilyGraph');
+            expect(getHops).toHaveBeenCalledWith({
+                uri: 'entities/uri1',
+                deep: 2,
+                max: 200,
+                limitCreditsConsumption: true,
+                graphTypes: ['FamilyGraph'],
+                activenessDate: null,
+                signal
+            });
+        });
+
+        it('should use filter out invalid graph types', async () => {
+            const data = {entities: [], relations: []};
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+            setUp(mount, store, 'configuration/graphTypes/NonexistingGraphType');
+            expect(getHops).toHaveBeenCalledWith({
+                uri: 'entities/uri1',
+                deep: 1,
+                max: 3000,
+                limitCreditsConsumption: true,
+                graphTypes: null,
+                activenessDate: null,
+                signal
+            });
+        });
+    });
+
+    describe('onDeleteRelation behavior', () => {
+        it('should call removeRelation API and update data and graphologyGraph in GraphStateContext.Provider', async () => {
+            const removeRelationFromHopsDataSpy = jest.spyOn(hopsDataExport, 'removeRelationFromHopsData');
+            const data: HopsResponse = {
+                entities: [
+                    {uri: 'e1', type: '', traversedRelations: 1, untraversedRelations: 0},
+                    {uri: 'e2', type: '', traversedRelations: 2, untraversedRelations: 1},
+                    {uri: 'e3', type: '', traversedRelations: 1, untraversedRelations: 3}
+                ],
+                relations: [
+                    {
+                        uri: 'r1',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e1'
+                        },
+                        endObject: {
+                            objectURI: 'e2'
+                        }
+                    },
+                    {
+                        uri: 'r2',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e2'
+                        },
+                        endObject: {
+                            objectURI: 'e3'
+                        }
+                    }
+                ]
+            };
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+            const component = setUp(
+                mount,
+                createStore({
+                    entity: {
+                        uri: 'e1',
+                        type: ''
+                    },
+                    metadata: {entityTypes: [], relationTypes: []}
+                })
+            );
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            let contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data,
+                graphTypeUri: null,
+                graphLoading: false
+            });
+
+            contextValue.onDeleteRelation('r1');
+            component.update();
+            expect(component.find(LinearLoadIndicator)).toHaveLength(1);
+            expect(removeRelation).toHaveBeenCalledWith('r1');
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            contextValue = component.find(GraphStateContext.Provider).prop('value');
+            const graph = contextValue.graphologyGraph;
+            expect(graph.hasNode('e1')).toBe(true);
+            expect(graph.hasNode('e2')).toBe(false);
+            expect(graph.hasNode('e3')).toBe(false);
+            expect(graph.hasEdge('r1')).toBe(false);
+            expect(graph.hasEdge('r2')).toBe(false);
+            expect(graph.getNodeAttribute('e1', 'traversedRelationsCount')).toBe(0);
+            expect(removeRelationFromHopsDataSpy).toHaveBeenCalled();
+            expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        });
+
+        it('should change traversedRelationsCount in graph', async () => {
+            const removeRelationFromHopsDataSpy = jest.spyOn(hopsDataExport, 'removeRelationFromHopsData');
+            const data: HopsResponse = {
+                entities: [
+                    {uri: 'e1', type: '', traversedRelations: 2, untraversedRelations: 0},
+                    {uri: 'e2', type: '', traversedRelations: 2, untraversedRelations: 1},
+                    {uri: 'e3', type: '', traversedRelations: 2, untraversedRelations: 3}
+                ],
+                relations: [
+                    {
+                        uri: 'r1',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e1'
+                        },
+                        endObject: {
+                            objectURI: 'e2'
+                        }
+                    },
+                    {
+                        uri: 'r2',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e2'
+                        },
+                        endObject: {
+                            objectURI: 'e3'
+                        }
+                    },
+                    {
+                        uri: 'r3',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e1'
+                        },
+                        endObject: {
+                            objectURI: 'e3'
+                        }
+                    }
+                ]
+            };
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+            const component = setUp(
+                mount,
+                createStore({
+                    entity: {
+                        uri: 'e1',
+                        type: ''
+                    },
+                    metadata: {entityTypes: [], relationTypes: []}
+                })
+            );
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            let contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data,
+                graphTypeUri: null,
+                graphLoading: false
+            });
+
+            contextValue.onDeleteRelation('r1');
+            component.update();
+            expect(component.find(LinearLoadIndicator)).toHaveLength(1);
+            expect(removeRelation).toHaveBeenCalledWith('r1');
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            contextValue = component.find(GraphStateContext.Provider).prop('value');
+            const graph = contextValue.graphologyGraph;
+            expect(graph.hasNode('e1')).toBe(true);
+            expect(graph.hasNode('e2')).toBe(true);
+            expect(graph.hasNode('e3')).toBe(true);
+            expect(graph.hasEdge('r1')).toBe(false);
+            expect(graph.hasEdge('r2')).toBe(true);
+            expect(graph.hasEdge('r3')).toBe(true);
+            expect(removeRelationFromHopsDataSpy).toHaveBeenCalled();
+            expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+
+            expect(graph.getNodeAttribute('e1', 'traversedRelationsCount')).toBe(1);
+            expect(graph.getNodeAttribute('e2', 'traversedRelationsCount')).toBe(1);
+            expect(graph.getNodeAttribute('e3', 'traversedRelationsCount')).toBe(2);
+        });
+    });
+
+    describe('onAddRelation behavior', () => {
+        it('should call createRelation API and update data and graphologyGraph in GraphStateContext.Provider', async () => {
+            const addRelationToHopsDataSpy = jest.spyOn(hopsDataExport, 'addRelationToHopsData');
+            const data: HopsResponse = {
+                entities: [
+                    {uri: 'e1', type: '', traversedRelations: 1, untraversedRelations: 0},
+                    {uri: 'e2', type: '', traversedRelations: 1, untraversedRelations: 2}
+                ],
+                relations: [
+                    {
+                        uri: 'r1',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e1'
+                        },
+                        endObject: {
+                            objectURI: 'e2'
+                        },
+                        direction: RelationTypeDirection.directed
+                    }
+                ]
+            };
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+            (createRelation as jest.Mock).mockReturnValue(
+                Promise.resolve([
+                    {
+                        successful: true,
+                        object: {
+                            uri: 'r2',
+                            type: 'relations/type2',
+                            startObject: {
+                                objectURI: 'e1',
+                                type: ''
+                            },
+                            endObject: {
+                                objectURI: 'e3',
+                                type: 'entities/type3'
+                            }
+                        }
+                    }
+                ])
+            );
+            (getEntity as jest.Mock).mockReturnValueOnce(Promise.resolve({label: 'correctLabel'}));
+            const component = setUp(
+                mount,
+                createStore({
+                    entity: {
+                        uri: 'e1',
+                        type: ''
+                    },
+                    metadata: {
+                        entityTypes: [],
+                        relationTypes: [
+                            {
+                                uri: 'relations/type2',
+                                direction: RelationTypeDirection.bidirectional,
+                                attributes: [],
+                                label: ''
+                            }
+                        ]
+                    }
+                })
+            );
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            let contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data,
+                graphTypeUri: null,
+                graphLoading: false
+            });
+
+            const newRelation = {
+                startEntityUri: 'e1',
+                endEntityUri: 'e3',
+                relationType: 'relations/type2',
+                attributes: {
+                    FirstName: [
+                        {
+                            type: 'configuration/entityTypes/HCP/attributes/FirstName',
+                            ov: true,
+                            value: 'Name',
+                            uri: 'uri/FirstName'
+                        }
+                    ]
+                },
+                startDate: 8908907878,
+                endDate: 568787879090
+            };
+            contextValue.onAddRelation(newRelation);
+            component.update();
+            expect(component.find(LinearLoadIndicator)).toHaveLength(1);
+            expect(createRelation).toHaveBeenCalledWith(newRelation);
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            contextValue = component.find(GraphStateContext.Provider).prop('value');
+            const graph = contextValue.graphologyGraph;
+            expect(graph.hasNode('e1')).toBe(true);
+            expect(graph.hasNode('e2')).toBe(true);
+            expect(graph.hasNode('e3')).toBe(true);
+            expect(graph.hasEdge('r1')).toBe(true);
+            expect(graph.getEdgeAttribute('r1', 'direction')).toBe(RelationTypeDirection.directed);
+            expect(graph.hasEdge('r2')).toBe(true);
+            expect(graph.getEdgeAttribute('r2', 'direction')).toBe(RelationTypeDirection.bidirectional);
+            expect(graph.getNodeAttribute('e1', 'traversedRelationsCount')).toBe(2);
+            expect(graph.getNodeAttribute('e2', 'traversedRelationsCount')).toBe(1);
+            expect(graph.getNodeAttribute('e3', 'traversedRelationsCount')).toBe(1);
+            expect(graph.getNodeAttribute('e3', 'untraversedRelationsCount')).toBe(1);
+            expect(graph.getNodeAttribute('e3', 'label')).toBe('correctLabel');
+            expect(addRelationToHopsDataSpy).toHaveBeenCalledWith(
+                data,
+                {
+                    endObject: {objectURI: 'e3', type: 'entities/type3', label: 'correctLabel'},
+                    startObject: {objectURI: 'e1', type: ''},
+                    type: 'relations/type2',
+                    uri: 'r2'
+                },
+                store.metadata.t1
+            );
+            expect(contextValue.data).toEqual({
+                entities: [
+                    {uri: 'e1', type: '', traversedRelations: 2, untraversedRelations: 0},
+                    {uri: 'e2', type: '', traversedRelations: 1, untraversedRelations: 2},
+                    {
+                        uri: 'e3',
+                        type: 'entities/type3',
+                        label: 'correctLabel',
+                        traversedRelations: 1,
+                        untraversedRelations: 1
+                    }
+                ],
+                relations: [
+                    {
+                        uri: 'r1',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e1'
+                        },
+                        endObject: {
+                            objectURI: 'e2'
+                        },
+                        direction: RelationTypeDirection.directed
+                    },
+                    {
+                        uri: 'r2',
+                        type: 'relations/type2',
+                        startObject: {
+                            objectURI: 'e1'
+                        },
+                        endObject: {
+                            objectURI: 'e3'
+                        },
+                        direction: RelationTypeDirection.bidirectional
+                    }
+                ]
+            });
+            expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        });
+
+        it('should not fail if initially there were no relations', async () => {
+            const addRelationToHopsDataSpy = jest.spyOn(hopsDataExport, 'addRelationToHopsData');
+            const data: HopsResponse = {
+                entities: [{uri: 'e1', type: '', traversedRelations: 1, untraversedRelations: 0}]
+            };
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+            (createRelation as jest.Mock).mockReturnValue(
+                Promise.resolve([
+                    {
+                        successful: true,
+                        object: {
+                            uri: 'r2',
+                            type: 'relations/type2',
+                            startObject: {
+                                objectURI: 'e1',
+                                type: ''
+                            },
+                            endObject: {
+                                objectURI: 'e3',
+                                type: 'entities/type3'
+                            }
+                        }
+                    }
+                ])
+            );
+            const component = setUp(
+                mount,
+                createStore({
+                    entity: {
+                        uri: 'e1',
+                        type: ''
+                    },
+                    metadata: {
+                        entityTypes: [],
+                        relationTypes: [
+                            {
+                                uri: 'relations/type2',
+                                direction: RelationTypeDirection.bidirectional,
+                                attributes: [],
+                                label: ''
+                            }
+                        ]
+                    }
+                })
+            );
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            let contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data,
+                graphTypeUri: null,
+                graphLoading: false
+            });
+
+            const newRelation = {
+                startEntityUri: 'e1',
+                endEntityUri: 'e3',
+                relationType: 'relations/type2',
+                attributes: {
+                    FirstName: [
+                        {
+                            type: 'configuration/entityTypes/HCP/attributes/FirstName',
+                            ov: true,
+                            value: 'Name',
+                            uri: 'uri/FirstName'
+                        }
+                    ]
+                },
+                startDate: 8908907878,
+                endDate: 568787879090
+            };
+            contextValue.onAddRelation(newRelation);
+            component.update();
+            expect(component.find(LinearLoadIndicator)).toHaveLength(1);
+            expect(createRelation).toHaveBeenCalledWith(newRelation);
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            contextValue = component.find(GraphStateContext.Provider).prop('value');
+            const graph = contextValue.graphologyGraph;
+            expect(graph.hasNode('e1')).toBe(true);
+            expect(graph.hasNode('e3')).toBe(true);
+            expect(graph.hasEdge('r2')).toBe(true);
+            expect(graph.getEdgeAttribute('r2', 'direction')).toBe(RelationTypeDirection.bidirectional);
+            expect(graph.getNodeAttribute('e1', 'traversedRelationsCount')).toBe(2);
+            expect(graph.getNodeAttribute('e3', 'traversedRelationsCount')).toBe(1);
+            expect(graph.getNodeAttribute('e3', 'untraversedRelationsCount')).toBe(1);
+            expect(addRelationToHopsDataSpy).toHaveBeenCalledWith(
+                data,
+                {
+                    endObject: {objectURI: 'e3', type: 'entities/type3'},
+                    startObject: {objectURI: 'e1', type: ''},
+                    type: 'relations/type2',
+                    uri: 'r2'
+                },
+                store.metadata.t1
+            );
+            expect(contextValue.data).toEqual({
+                entities: [
+                    {uri: 'e1', type: '', traversedRelations: 2, untraversedRelations: 0},
+                    {
+                        uri: 'e3',
+                        type: 'entities/type3',
+                        label: undefined,
+                        traversedRelations: 1,
+                        untraversedRelations: 1
+                    }
+                ],
+                relations: [
+                    {
+                        uri: 'r2',
+                        type: 'relations/type2',
+                        startObject: {
+                            objectURI: 'e1'
+                        },
+                        endObject: {
+                            objectURI: 'e3'
+                        },
+                        direction: RelationTypeDirection.bidirectional
+                    }
+                ]
+            });
+            expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        });
+
+        it('should change traversedRelationsCount for existing nodes', async () => {
+            const addRelationToHopsDataSpy = jest.spyOn(hopsDataExport, 'addRelationToHopsData');
+            const data: HopsResponse = {
+                entities: [
+                    {uri: 'e1', type: '', traversedRelations: 1, untraversedRelations: 0},
+                    {uri: 'e2', type: '', traversedRelations: 2, untraversedRelations: 2},
+                    {uri: 'e3', type: '', traversedRelations: 1, untraversedRelations: 2}
+                ],
+                relations: [
+                    {
+                        uri: 'r1',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e1'
+                        },
+                        endObject: {
+                            objectURI: 'e2'
+                        }
+                    },
+                    {
+                        uri: 'r2',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e2'
+                        },
+                        endObject: {
+                            objectURI: 'e3'
+                        }
+                    }
+                ]
+            };
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+            (createRelation as jest.Mock).mockReturnValue(
+                Promise.resolve([
+                    {
+                        successful: true,
+                        object: {
+                            uri: 'r3',
+                            type: 'relations/type2',
+                            startObject: {
+                                objectURI: 'e1',
+                                type: ''
+                            },
+                            endObject: {
+                                objectURI: 'e3',
+                                type: 'entities/type3'
+                            }
+                        }
+                    }
+                ])
+            );
+            const component = setUp(
+                mount,
+                createStore({
+                    entity: {
+                        uri: 'e1',
+                        type: ''
+                    },
+                    metadata: {entityTypes: [], relationTypes: []}
+                })
+            );
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            let contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data,
+                graphTypeUri: null,
+                graphLoading: false
+            });
+
+            const newRelation = {
+                startEntityUri: 'e1',
+                endEntityUri: 'e3',
+                relationType: 'relations/type2',
+                attributes: {
+                    FirstName: [
+                        {
+                            type: 'configuration/entityTypes/HCP/attributes/FirstName',
+                            ov: true,
+                            value: 'Name',
+                            uri: 'uri/FirstName'
+                        }
+                    ]
+                },
+                startDate: 8908907878,
+                endDate: 568787879090
+            };
+            contextValue.onAddRelation(newRelation);
+            component.update();
+            expect(component.find(LinearLoadIndicator)).toHaveLength(1);
+            expect(createRelation).toHaveBeenCalledWith(newRelation);
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            contextValue = component.find(GraphStateContext.Provider).prop('value');
+            const graph = contextValue.graphologyGraph;
+            expect(graph.hasNode('e1')).toBe(true);
+            expect(graph.hasNode('e2')).toBe(true);
+            expect(graph.hasNode('e3')).toBe(true);
+            expect(graph.hasEdge('r1')).toBe(true);
+            expect(graph.hasEdge('r2')).toBe(true);
+            expect(graph.hasEdge('r3')).toBe(true);
+            expect(graph.getNodeAttribute('e1', 'traversedRelationsCount')).toBe(2);
+            expect(graph.getNodeAttribute('e2', 'traversedRelationsCount')).toBe(2);
+            expect(graph.getNodeAttribute('e3', 'traversedRelationsCount')).toBe(2);
+            expect(addRelationToHopsDataSpy).toHaveBeenCalledWith(
+                data,
+                {
+                    endObject: {objectURI: 'e3', type: 'entities/type3'},
+                    startObject: {objectURI: 'e1', type: ''},
+                    type: 'relations/type2',
+                    uri: 'r3'
+                },
+                store.metadata.t1
+            );
+            expect(contextValue.data).toEqual({
+                entities: [
+                    {uri: 'e1', type: '', traversedRelations: 2, untraversedRelations: 0},
+                    {uri: 'e2', type: '', traversedRelations: 2, untraversedRelations: 2},
+                    {uri: 'e3', type: '', traversedRelations: 2, untraversedRelations: 2}
+                ],
+                relations: [
+                    {
+                        uri: 'r1',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e1'
+                        },
+                        endObject: {
+                            objectURI: 'e2'
+                        }
+                    },
+                    {
+                        uri: 'r2',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e2'
+                        },
+                        endObject: {
+                            objectURI: 'e3'
+                        }
+                    },
+                    {
+                        uri: 'r3',
+                        type: 'relations/type2',
+                        startObject: {
+                            objectURI: 'e1'
+                        },
+                        endObject: {
+                            objectURI: 'e3'
+                        }
+                    }
+                ]
+            });
+            expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        });
+    });
+
+    describe('onCollapseEntity behavior', () => {
+        const data: HopsResponse = {
+            entities: [
+                {uri: 'e1', type: ''},
+                {uri: 'e2', type: ''},
+                {uri: 'e3', type: ''},
+                {uri: 'e4', type: ''},
+                {uri: 'e5', type: ''},
+                {uri: 'e6', type: ''}
+            ],
+            relations: [
+                {
+                    uri: 'r1',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e1'
+                    },
+                    endObject: {
+                        objectURI: 'e2'
+                    }
+                },
+                {
+                    uri: 'r2',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e2'
+                    },
+                    endObject: {
+                        objectURI: 'e3'
+                    }
+                },
+                {
+                    uri: 'r3',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e1'
+                    },
+                    endObject: {
+                        objectURI: 'e4'
+                    }
+                },
+                {
+                    uri: 'r4',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e4'
+                    },
+                    endObject: {
+                        objectURI: 'e3'
+                    }
+                },
+                {
+                    uri: 'r5',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e2'
+                    },
+                    endObject: {
+                        objectURI: 'e5'
+                    }
+                },
+                {
+                    uri: 'r6',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e3'
+                    },
+                    endObject: {
+                        objectURI: 'e5'
+                    }
+                },
+                {
+                    uri: 'r7',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e1'
+                    },
+                    endObject: {
+                        objectURI: 'e3'
+                    }
+                },
+                {
+                    uri: 'r8',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e5'
+                    },
+                    endObject: {
+                        objectURI: 'e6'
+                    }
+                }
+            ]
+        };
+
+        beforeAll(() => {
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        });
+
+        it('should update data and graphologyGraph in GraphStateContext.Provider', async () => {
+            const component = setUp(
+                mount,
+                createStore({
+                    entity: {
+                        uri: 'e1',
+                        type: ''
+                    },
+                    metadata: {entityTypes: [], relationTypes: []}
+                })
+            );
+
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            let contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data,
+                graphTypeUri: null,
+                graphLoading: false
+            });
+
+            contextValue.onCollapseEntity('e1', {});
+            component.update();
+            contextValue = component.find(GraphStateContext.Provider).prop('value');
+            const graph = contextValue.graphologyGraph;
+            expect(
+                graph
+                    .nodes()
+                    .map((uri) => graph.getNodeAttribute(uri, 'hidden'))
+                    .filter((x) => !!x).length
+            ).toBe(5);
+            expect(graph.getNodeAttribute('e1', 'hidden')).toBeUndefined();
+            expect(graph.getNodeAttribute('e2', 'hidden')).toBe(true);
+            expect(graph.getNodeAttribute('e3', 'hidden')).toBe(true);
+            expect(graph.getNodeAttribute('e4', 'hidden')).toBe(true);
+            expect(graph.getNodeAttribute('e5', 'hidden')).toBe(true);
+            expect(graph.getNodeAttribute('e6', 'hidden')).toBe(true);
+        });
+
+        it('should hide neighbor nodes, except for nodes in the path', async () => {
+            const component = setUp(
+                mount,
+                createStore({
+                    entity: {
+                        uri: 'e1',
+                        type: ''
+                    },
+                    metadata: {entityTypes: [], relationTypes: []}
+                })
+            );
+
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            let contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data,
+                graphTypeUri: null,
+                graphLoading: false
+            });
+
+            const path: GraphPathType = {
+                nodes: ['e1', 'e2', 'e3'],
+                edges: ['r1', 'r2']
+            };
+
+            contextValue.onCollapseEntity('e3', path);
+            component.update();
+            contextValue = component.find(GraphStateContext.Provider).prop('value');
+            const graph = contextValue.graphologyGraph;
+            expect(
+                graph
+                    .nodes()
+                    .map((uri) => graph.getNodeAttribute(uri, 'hidden'))
+                    .filter((x) => !!x).length
+            ).toBe(3);
+            expect(graph.getNodeAttribute('e1', 'hidden')).toBeUndefined();
+            expect(graph.getNodeAttribute('e2', 'hidden')).toBeUndefined();
+            expect(graph.getNodeAttribute('e3', 'hidden')).toBeUndefined();
+            expect(graph.getNodeAttribute('e4', 'hidden')).toBe(true);
+            expect(graph.getNodeAttribute('e5', 'hidden')).toBe(true);
+            expect(graph.getNodeAttribute('e6', 'hidden')).toBe(true);
+        });
+    });
+
+    describe('onExpandEntity behavior', () => {
+        const data: HopsResponse = {
+            entities: [
+                {uri: 'e1', type: '', untraversedRelations: 0, traversedRelations: 2},
+                {uri: 'e2', type: '', untraversedRelations: 1, traversedRelations: 1},
+                {uri: 'e3', type: '', untraversedRelations: 2, traversedRelations: 1},
+                {uri: 'e4', type: '', untraversedRelations: 0, traversedRelations: 1}
+            ],
+            relations: [
+                {
+                    uri: 'r1',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e1'
+                    },
+                    endObject: {
+                        objectURI: 'e2'
+                    }
+                },
+                {
+                    uri: 'r2',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e1'
+                    },
+                    endObject: {
+                        objectURI: 'e3'
+                    }
+                },
+                {
+                    uri: 'r3',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e3'
+                    },
+                    endObject: {
+                        objectURI: 'e4'
+                    }
+                }
+            ]
+        };
+
+        it('should dispatch an error in case of failed graph request', async () => {
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+            const error = {errorMessage: 'Error!!!'};
+
+            const component = setUp(
+                mount,
+                createStore({
+                    entity: {
+                        uri: 'e1',
+                        type: ''
+                    },
+                    metadata: {entityTypes: [], relationTypes: []}
+                })
+            );
+
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            let contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data,
+                graphTypeUri: null,
+                graphLoading: false
+            });
+
+            (getHops as jest.Mock).mockReturnValue(Promise.reject(error));
+
+            act(() => {
+                contextValue.onExpandEntity('e2');
+            });
+            component.update();
+            expect(component.find(LinearLoadIndicator)).toHaveLength(1);
+            expect(getHops).toHaveBeenCalledWith({
+                uri: 'e2',
+                deep: 1,
+                max: 3000,
+                limitCreditsConsumption: true,
+                graphTypes: null,
+                activenessDate: null,
+                signal
+            });
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+
+            contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data,
+                graphLoading: false,
+                graphTypeUri: null
+            });
+            expect(dispatch).toHaveBeenCalledWith(ui.actions.errorSet(error.errorMessage));
+            expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        });
+
+        it('should not dispatch an error in case of cancel graph request', async () => {
+            const initialProps = {
+                entity: {
+                    uri: 'e1',
+                    type: ''
+                },
+                graphTypeUri: 'graphType',
+                graphLayout: GraphLayout.SIMPLE_NETWORK
+            };
+            store = createStore({
+                entity: {
+                    uri: 'e1',
+                    type: ''
+                },
+                metadata: {entityTypes: [], relationTypes: []}
+            });
+
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+
+            const {result} = renderHook(
+                ({entity, graphTypeUri, graphLayout}) => useGraphState(entity, graphTypeUri, graphLayout),
+                {initialProps}
+            );
+
+            await act(async () => {
+                await Promise.resolve();
+            });
+
+            const error = {errorMessage: 'Error!!!', name: 'AbortError'};
+            (getHops as jest.Mock).mockReturnValue(Promise.reject(error));
+
+            act(() => {
+                result.current.onExpandEntity('e2');
+            });
+            await act(async () => {
+                await Promise.resolve();
+            });
+
+            expect(dispatch).not.toHaveBeenCalled();
+        });
+
+        it('should not update data when untraversedRelation is 0', async () => {
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+            const component = setUp(
+                mount,
+                createStore({
+                    entity: {
+                        uri: 'e1',
+                        type: ''
+                    },
+                    metadata: {entityTypes: [], relationTypes: []}
+                })
+            );
+
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            let contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data,
+                graphTypeUri: null,
+                graphLoading: false
+            });
+
+            contextValue.onCollapseEntity('e1', {});
+            component.update();
+            contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data,
+                graphTypeUri: null,
+                graphLoading: false
+            });
+            let graph = contextValue.graphologyGraph;
+            expect(graph.getNodeAttribute('e1', 'hidden')).toBeUndefined();
+            expect(graph.getNodeAttribute('e2', 'hidden')).toBe(true);
+            expect(graph.getNodeAttribute('e3', 'hidden')).toBe(true);
+
+            act(() => {
+                contextValue.onExpandEntity('e1');
+            });
+            component.update();
+            contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data,
+                graphTypeUri: null,
+                graphLoading: false
+            });
+            graph = contextValue.graphologyGraph;
+            expect(graph.getNodeAttribute('e1', 'hidden')).toBeUndefined();
+            expect(graph.getNodeAttribute('e2', 'hidden')).toBe(false);
+            expect(graph.getNodeAttribute('e3', 'hidden')).toBe(false);
+        });
+
+        it('should call getHops, update data and graphologyGraph in GraphStateContext.Provider', async () => {
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+            const processResponseToGraphSpy = jest.spyOn(processResponseToGraphExport, 'default');
+            const component = setUp(
+                mount,
+                createStore({
+                    entity: {
+                        uri: 'e1',
+                        type: ''
+                    },
+                    metadata: {entityTypes: [], relationTypes: []}
+                })
+            );
+
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            let contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data,
+                graphTypeUri: null,
+                graphLoading: false
+            });
+
+            const hopsData = {
+                entities: [
+                    {uri: 'e2', type: '', untraversedRelations: 0, traversedRelations: 2},
+                    {uri: 'e1', type: '', untraversedRelations: 1, traversedRelations: 1},
+                    {uri: 'e5', type: '', untraversedRelations: 5, traversedRelations: 1}
+                ],
+                relations: [
+                    {
+                        uri: 'r1',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e1'
+                        },
+                        endObject: {
+                            objectURI: 'e2'
+                        }
+                    },
+                    {
+                        uri: 'r4',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e2'
+                        },
+                        endObject: {
+                            objectURI: 'e5'
+                        }
+                    }
+                ]
+            };
+
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(hopsData));
+
+            act(() => {
+                contextValue.onExpandEntity('e2');
+            });
+            component.update();
+            expect(component.find(LinearLoadIndicator)).toHaveLength(1);
+            expect(getHops).toHaveBeenCalledWith({
+                uri: 'e2',
+                deep: 1,
+                max: 3000,
+                limitCreditsConsumption: true,
+                graphTypes: null,
+                activenessDate: null,
+                signal
+            });
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+
+            contextValue = component.find(GraphStateContext.Provider).prop('value');
+            expect(contextValue).toMatchObject({
+                data: {
+                    entities: [
+                        {uri: 'e1', type: '', untraversedRelations: 0, traversedRelations: 2},
+                        {uri: 'e2', type: '', untraversedRelations: 0, traversedRelations: 2},
+                        {uri: 'e3', type: '', untraversedRelations: 2, traversedRelations: 1},
+                        {uri: 'e4', type: '', untraversedRelations: 0, traversedRelations: 1},
+                        {uri: 'e5', type: '', untraversedRelations: 5, traversedRelations: 1}
+                    ],
+                    relations: [
+                        ...data.relations,
+                        {
+                            uri: 'r4',
+                            type: '',
+                            startObject: {
+                                objectURI: 'e2'
+                            },
+                            endObject: {
+                                objectURI: 'e5'
+                            }
+                        }
+                    ]
+                },
+                graphLoading: false,
+                graphTypeUri: null
+            });
+            const graph = contextValue.graphologyGraph;
+            expect(graph.nodes()).toEqual(['e1', 'e2', 'e3', 'e4', 'e5']);
+            expect(graph.edges()).toEqual(['r1', 'r2', 'r3', 'r4']);
+            expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+            expect(processResponseToGraphSpy).toHaveBeenCalledTimes(2);
+            expect(getHops).toHaveBeenCalledTimes(2);
+        });
+    });
+});