@reltio/graph 1.4.1585 → 1.4.1586-mui5

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

@@ -0,0 +1,1003 @@
+import React from 'react';
+import {mount, shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {act} from 'react-dom/test-utils';
+import {times} from 'ramda';
+import {ui} from '@reltio/mdm-module';
+import {Entity, getHops, getRelation, getRequestErrorMessage, Metadata, updateRelation} from '@reltio/mdm-sdk';
+import {GraphStateContext} from '../../../contexts/GraphStateContext';
+import GraphPerspectiveView from '../GraphPerspectiveView';
+import {rerenderWrapper} from '../../../../../../__mocks__/test-utils';
+
+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('useRelationshipTable behavior', () => {
+    const dispatch = jest.fn();
+    let store;
+
+    const setUp = (method: typeof shallow | typeof mount = shallow, customStore?) => {
+        store = customStore || createStore();
+        return (method as typeof shallow)(<GraphPerspectiveView />);
+    };
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const entity: Entity = {
+        uri: 'entities/main',
+        type: 'configuration/entityTypes/Organization',
+        label: 'Main Entity'
+    };
+    const metadata: Metadata = {
+        entityTypes: [
+            {
+                attributes: [],
+                uri: 'configuration/entityTypes/Organization',
+                label: 'Organization label'
+            },
+            {
+                attributes: [],
+                uri: 'configuration/entityTypes/HCO',
+                label: 'HCO label'
+            }
+        ],
+        relationTypes: [
+            {
+                attributes: [],
+                uri: 'configuration/relationTypes/Subsidiary',
+                label: 'Subsidiary label'
+            },
+            {
+                attributes: [],
+                uri: 'configuration/relationTypes/Assistant',
+                label: 'Assistant'
+            }
+        ]
+    };
+    const entity1 = {
+        uri: 'entities/e1',
+        type: 'configuration/entityTypes/HCO',
+        label: '!Entity 1!'
+    };
+    const entity2 = {
+        uri: 'entities/e2',
+        type: 'configuration/entityTypes/Organization',
+        label: 'Entity 2'
+    };
+    const entity3 = {
+        uri: 'entities/e3',
+        type: 'configuration/entityTypes/Organization',
+        label: 'Entity 3'
+    };
+    const relationMainE1 = {
+        uri: 'relations/main-e1',
+        type: 'configuration/relationTypes/Subsidiary',
+        startObject: {
+            directionalLabel: 'Company parent',
+            objectURI: 'entities/main'
+        },
+        endObject: {
+            directionalLabel: 'Company subsidiary',
+            objectURI: 'entities/e1'
+        },
+        direction: 'directed'
+    };
+    const relationMainE2 = {
+        uri: 'relations/main-e2',
+        type: 'configuration/relationTypes/Subsidiary',
+        startObject: {
+            objectURI: 'entities/main'
+        },
+        endObject: {
+            objectURI: 'entities/e2'
+        },
+        direction: 'directed'
+    };
+    const relationMainE3 = {
+        uri: 'relations/main-e3',
+        type: 'configuration/relationTypes/Assistant',
+        startObject: {
+            objectURI: 'entities/main'
+        },
+        endObject: {
+            objectURI: 'entities/e3'
+        },
+        direction: 'directed'
+    };
+    const relationE2E3 = {
+        uri: 'relations/e2-e3',
+        type: 'configuration/relationTypes/Subsidiary',
+        startObject: {
+            directionalLabel: 'Company parent',
+            objectURI: 'entities/e2'
+        },
+        endObject: {
+            directionalLabel: 'Company subsidiary',
+            objectURI: 'entities/e3'
+        },
+        direction: 'directed'
+    };
+    const relationE3E1 = {
+        uri: 'relations/e3-e1',
+        type: 'configuration/relationTypes/Subsidiary',
+        startObject: {
+            directionalLabel: 'Company parent',
+            objectURI: 'entities/e3'
+        },
+        endObject: {
+            directionalLabel: 'Company subsidiary',
+            objectURI: 'entities/e1'
+        },
+        direction: 'directed'
+    };
+    const data = {
+        entities: [entity, entity1, entity2, entity3],
+        relations: [relationMainE1, relationMainE2, relationMainE3, relationE2E3, relationE3E1]
+    };
+
+    const selectEntity = (component, uri) => {
+        component.find(GraphStateContext.Provider).prop('value').onEntitySelect(uri);
+    };
+
+    it('should prepare relationshipTable data according graph data and selected main entity by default', async () => {
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        const component = setUp(mount, createStore({entity, metadata}));
+        expect(component.find(GraphStateContext.Provider)).toHaveLength(1);
+        expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+            rowsData: [],
+            page: 0,
+            rowsPerPage: 25,
+            sorting: {
+                field: '',
+                order: 'asc'
+            },
+            total: 0,
+            entityTypesOptions: [],
+            relationTypesOptions: []
+        });
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').selectedEntity.uri).toBe(entity.uri);
+        expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+            rowsData: [
+                {
+                    relation: relationMainE1,
+                    entity: entity1,
+                    entityLabel: entity1.label,
+                    entityTypeLabel: 'HCO label',
+                    relationTypeLabel: 'Company subsidiary'
+                },
+                {
+                    relation: relationMainE2,
+                    entity: entity2,
+                    entityLabel: entity2.label,
+                    entityTypeLabel: 'Organization label',
+                    relationTypeLabel: 'Subsidiary label'
+                },
+                {
+                    relation: relationMainE3,
+                    entity: entity3,
+                    entityLabel: entity3.label,
+                    entityTypeLabel: 'Organization label',
+                    relationTypeLabel: 'Assistant'
+                }
+            ],
+            page: 0,
+            rowsPerPage: 25,
+            sorting: {
+                field: '',
+                order: 'asc'
+            },
+            total: 3,
+            entityTypesOptions: [
+                {
+                    attributes: [],
+                    label: 'HCO label',
+                    uri: 'configuration/entityTypes/HCO'
+                },
+                {
+                    attributes: [],
+                    label: 'Organization label',
+                    uri: 'configuration/entityTypes/Organization'
+                }
+            ],
+            relationTypesOptions: [
+                {
+                    attributes: [],
+                    label: 'Subsidiary label',
+                    uri: 'configuration/relationTypes/Subsidiary'
+                },
+                {
+                    attributes: [],
+                    label: 'Assistant',
+                    uri: 'configuration/relationTypes/Assistant'
+                }
+            ]
+        });
+    });
+
+    it('should prepare relationshipTable data according graph data and current selected entity', async () => {
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        const component = setUp(mount, createStore({entity, metadata}));
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+
+        // entity2
+        act(() => {
+            selectEntity(component, entity2.uri);
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').selectedEntity.uri).toBe(entity2.uri);
+        expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+            rowsData: [
+                {
+                    relation: relationMainE2,
+                    entity: entity,
+                    entityLabel: entity.label,
+                    entityTypeLabel: 'Organization label',
+                    relationTypeLabel: 'Subsidiary label'
+                },
+                {
+                    relation: relationE2E3,
+                    entity: entity3,
+                    entityLabel: entity3.label,
+                    entityTypeLabel: 'Organization label',
+                    relationTypeLabel: 'Company subsidiary'
+                }
+            ],
+            page: 0,
+            rowsPerPage: 25,
+            sorting: {
+                field: '',
+                order: 'asc'
+            },
+            total: 2
+        });
+
+        // entity3
+        act(() => {
+            selectEntity(component, entity3.uri);
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').selectedEntity.uri).toBe(entity3.uri);
+        expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+            rowsData: [
+                {
+                    relation: relationMainE3,
+                    entity: entity,
+                    entityLabel: entity.label,
+                    entityTypeLabel: 'Organization label',
+                    relationTypeLabel: 'Assistant'
+                },
+                {
+                    relation: relationE2E3,
+                    entity: entity2,
+                    entityLabel: entity2.label,
+                    entityTypeLabel: 'Organization label',
+                    relationTypeLabel: 'Company parent'
+                },
+                {
+                    relation: relationE3E1,
+                    entity: entity1,
+                    entityLabel: entity1.label,
+                    entityTypeLabel: 'HCO label',
+                    relationTypeLabel: 'Company subsidiary'
+                }
+            ],
+            page: 0,
+            rowsPerPage: 25,
+            sorting: {
+                field: '',
+                order: 'asc'
+            },
+            total: 3
+        });
+    });
+
+    it('should support sorting', async () => {
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        const component = setUp(mount, createStore({entity, metadata}));
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').selectedEntity.uri).toBe(entity.uri);
+        act(() => {
+            component.find(GraphStateContext.Provider).prop('value').relationshipTable.onSort({
+                field: 'relationTypeLabel',
+                order: 'desc'
+            });
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+            rowsData: [
+                {
+                    relation: relationMainE2,
+                    entity: entity2,
+                    entityLabel: entity2.label,
+                    entityTypeLabel: 'Organization label',
+                    relationTypeLabel: 'Subsidiary label'
+                },
+                {
+                    relation: relationMainE1,
+                    entity: entity1,
+                    entityLabel: entity1.label,
+                    entityTypeLabel: 'HCO label',
+                    relationTypeLabel: 'Company subsidiary'
+                },
+                {
+                    relation: relationMainE3,
+                    entity: entity3,
+                    entityLabel: entity3.label,
+                    entityTypeLabel: 'Organization label',
+                    relationTypeLabel: 'Assistant'
+                }
+            ],
+            page: 0,
+            rowsPerPage: 25,
+            sorting: {
+                field: 'relationTypeLabel',
+                order: 'desc'
+            },
+            total: 3
+        });
+    });
+
+    it('should support search text filtering', async () => {
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        const component = setUp(mount, createStore({entity, metadata}));
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').selectedEntity.uri).toBe(entity.uri);
+        act(() => {
+            component.find(GraphStateContext.Provider).prop('value').relationshipTable.onChangeSearchText('entity 1');
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+            rowsData: [
+                {
+                    relation: relationMainE1,
+                    entity: entity1,
+                    entityLabel: entity1.label,
+                    entityTypeLabel: 'HCO label',
+                    relationTypeLabel: 'Company subsidiary'
+                }
+            ],
+            page: 0,
+            rowsPerPage: 25,
+            sorting: {
+                field: '',
+                order: 'asc'
+            },
+            total: 1,
+            searchText: 'entity 1'
+        });
+
+        act(() => {
+            component.find(GraphStateContext.Provider).prop('value').relationshipTable.onChangeSearchText('Entity 2');
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+            rowsData: [
+                {
+                    relation: relationMainE2,
+                    entity: entity2,
+                    entityLabel: entity2.label,
+                    entityTypeLabel: 'Organization label',
+                    relationTypeLabel: 'Subsidiary label'
+                }
+            ],
+            page: 0,
+            rowsPerPage: 25,
+            sorting: {
+                field: '',
+                order: 'asc'
+            },
+            total: 1,
+            searchText: 'Entity 2'
+        });
+    });
+
+    it('should support entityTypes filtering', async () => {
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        const component = setUp(mount, createStore({entity, metadata}));
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').selectedEntity.uri).toBe(entity.uri);
+        act(() => {
+            component
+                .find(GraphStateContext.Provider)
+                .prop('value')
+                .relationshipTable.onFilter({
+                    entityTypesUris: ['configuration/entityTypes/HCO'],
+                    relationTypesUris: []
+                });
+        });
+        component.update();
+
+        expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+            rowsData: [
+                {
+                    entity: entity1,
+                    entityLabel: '!Entity 1!',
+                    entityTypeLabel: 'HCO label',
+                    relation: relationMainE1,
+                    relationTypeLabel: 'Company subsidiary'
+                }
+            ],
+            page: 0,
+            rowsPerPage: 25,
+            sorting: {
+                field: '',
+                order: 'asc'
+            },
+            total: 1,
+            filters: {
+                entityTypesUris: ['configuration/entityTypes/HCO'],
+                relationTypesUris: []
+            },
+            entityTypesOptions: [
+                {
+                    attributes: [],
+                    label: 'HCO label',
+                    uri: 'configuration/entityTypes/HCO'
+                },
+                {
+                    attributes: [],
+                    label: 'Organization label',
+                    uri: 'configuration/entityTypes/Organization'
+                }
+            ]
+        });
+
+        act(() => {
+            selectEntity(component, entity2.uri);
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+            filters: {
+                entityTypesUris: ['configuration/entityTypes/HCO'],
+                relationTypesUris: []
+            },
+            entityTypesOptions: [
+                {
+                    attributes: [],
+                    label: 'Organization label',
+                    uri: 'configuration/entityTypes/Organization'
+                },
+                {
+                    attributes: [],
+                    label: 'HCO label',
+                    uri: 'configuration/entityTypes/HCO'
+                }
+            ]
+        });
+    });
+
+    it('should support relationTypes filtering', async () => {
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        const component = setUp(mount, createStore({entity, metadata}));
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').selectedEntity.uri).toBe(entity.uri);
+        act(() => {
+            component
+                .find(GraphStateContext.Provider)
+                .prop('value')
+                .relationshipTable.onFilter({
+                    entityTypesUris: [],
+                    relationTypesUris: ['configuration/relationTypes/Assistant']
+                });
+        });
+        component.update();
+
+        expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+            rowsData: [
+                {
+                    relation: relationMainE3,
+                    entity: entity3,
+                    entityLabel: entity3.label,
+                    entityTypeLabel: 'Organization label',
+                    relationTypeLabel: 'Assistant'
+                }
+            ],
+            page: 0,
+            rowsPerPage: 25,
+            sorting: {
+                field: '',
+                order: 'asc'
+            },
+            total: 1,
+            filters: {
+                entityTypesUris: [],
+                relationTypesUris: ['configuration/relationTypes/Assistant']
+            },
+            relationTypesOptions: [
+                {
+                    attributes: [],
+                    label: 'Subsidiary label',
+                    uri: 'configuration/relationTypes/Subsidiary'
+                },
+                {
+                    attributes: [],
+                    label: 'Assistant',
+                    uri: 'configuration/relationTypes/Assistant'
+                }
+            ]
+        });
+
+        act(() => {
+            selectEntity(component, entity2.uri);
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+            filters: {
+                entityTypesUris: [],
+                relationTypesUris: ['configuration/relationTypes/Assistant']
+            },
+            relationTypesOptions: [
+                {
+                    attributes: [],
+                    label: 'Subsidiary label',
+                    uri: 'configuration/relationTypes/Subsidiary'
+                },
+                {
+                    attributes: [],
+                    label: 'Assistant',
+                    uri: 'configuration/relationTypes/Assistant'
+                }
+            ]
+        });
+    });
+
+    it('should reset filters on main entity changing', async () => {
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        const component = setUp(mount, createStore({entity, metadata}));
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').selectedEntity.uri).toBe(entity.uri);
+        act(() => {
+            component
+                .find(GraphStateContext.Provider)
+                .prop('value')
+                .relationshipTable.onFilter({
+                    entityTypesUris: ['configuration/relationTypes/HCP'],
+                    relationTypesUris: ['configuration/relationTypes/Assistant']
+                });
+        });
+        component.update();
+
+        expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+            filters: {
+                entityTypesUris: ['configuration/relationTypes/HCP'],
+                relationTypesUris: ['configuration/relationTypes/Assistant']
+            }
+        });
+
+        store = createStore({
+            entity: {
+                uri: 'entities/e1',
+                type: 'configuration/entityTypes/HCO'
+            },
+            metadata
+        });
+        component.setProps({});
+
+        act(() => {
+            selectEntity(component, entity2.uri);
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+            filters: {
+                entityTypesUris: [],
+                relationTypesUris: []
+            }
+        });
+    });
+
+    describe('pagination behavior', () => {
+        const REPEAT_NUMBER = 50;
+        const total = REPEAT_NUMBER + 3;
+        const bigData = {
+            entities: data.entities,
+            relations: data.relations.concat(
+                times(
+                    (i) => ({
+                        ...relationMainE1,
+                        uri: `${relationMainE1.uri}_${i}`
+                    }),
+                    REPEAT_NUMBER
+                )
+            )
+        };
+
+        it('should support page change', async () => {
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(bigData));
+            const component = setUp(mount, createStore({entity, metadata}));
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+            expect(component.find(GraphStateContext.Provider).prop('value').selectedEntity.uri).toBe(entity.uri);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable.rowsData.length).toBe(25);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                page: 0,
+                rowsPerPage: 25,
+                total
+            });
+
+            act(() => {
+                component.find(GraphStateContext.Provider).prop('value').relationshipTable.onPageChange(1);
+            });
+            component.update();
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable.rowsData.length).toBe(25);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                page: 1,
+                rowsPerPage: 25,
+                total
+            });
+
+            act(() => {
+                component.find(GraphStateContext.Provider).prop('value').relationshipTable.onPageChange(2);
+            });
+            component.update();
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable.rowsData.length).toBe(3);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                page: 2,
+                rowsPerPage: 25,
+                total
+            });
+        });
+
+        it('should support rows per page changing', async () => {
+            (getHops as jest.Mock).mockReturnValue(Promise.resolve(bigData));
+            const component = setUp(mount, createStore({entity, metadata}));
+            await act(async () => {
+                await Promise.resolve();
+            });
+            component.update();
+
+            act(() => {
+                component.find(GraphStateContext.Provider).prop('value').relationshipTable.onRowsPerPageChange(50);
+            });
+            component.update();
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable.rowsData.length).toBe(50);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                page: 0,
+                rowsPerPage: 50,
+                total
+            });
+
+            act(() => {
+                component.find(GraphStateContext.Provider).prop('value').relationshipTable.onPageChange(1);
+            });
+            component.update();
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable.rowsData.length).toBe(3);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                page: 1,
+                rowsPerPage: 50,
+                total
+            });
+        });
+    });
+
+    describe('editing relation behavior', () => {
+        const relation = {
+            ...relationMainE1,
+            attributes: {
+                FirstName: [
+                    {
+                        type: 'configuration/entityTypes/HCP/attributes/FirstName',
+                        ov: true,
+                        value: 'HCP_5',
+                        uri: 'entities/19oYeyx1/attributes/FirstName/1dg2njmxf'
+                    }
+                ]
+            }
+        };
+
+        beforeEach(() => {
+            (getRelation as jest.Mock).mockReturnValue(Promise.resolve(relation));
+        });
+        it('should setLoading and request relation on relation editing', async () => {
+            const component = setUp(shallow, createStore({entity, metadata}));
+
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                loading: false,
+                editingRelations: []
+            });
+
+            act(() => {
+                component
+                    .find(GraphStateContext.Provider)
+                    .prop('value')
+                    .relationshipTable.onStartRelationEditing(relation.uri);
+            });
+            expect(getRelation).toHaveBeenCalledWith(relation.uri);
+
+            rerenderWrapper(component);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                loading: true,
+                editingRelations: []
+            });
+
+            await act(async () => {
+                await Promise.resolve();
+            });
+
+            rerenderWrapper(component);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                loading: false,
+                editingRelations: [{initialRelation: relation, relation}]
+            });
+        });
+
+        it('should request relation on relation editing and process error correctly', async () => {
+            (getRelation as jest.Mock).mockRejectedValue('some error');
+            const component = setUp(shallow, createStore({entity, metadata}));
+
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                loading: false,
+                editingRelations: []
+            });
+
+            act(() => {
+                component
+                    .find(GraphStateContext.Provider)
+                    .prop('value')
+                    .relationshipTable.onStartRelationEditing(relation.uri);
+            });
+            expect(getRelation).toHaveBeenCalledWith(relation.uri);
+
+            rerenderWrapper(component);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                loading: true,
+                editingRelations: []
+            });
+
+            await act(async () => {
+                await Promise.resolve();
+            });
+
+            rerenderWrapper(component);
+            expect(dispatch).toHaveBeenCalledWith(
+                ui.actions.errorSet(getRequestErrorMessage('some error', "Can't load relationship's attributes"))
+            );
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                loading: false,
+                editingRelations: []
+            });
+        });
+
+        it('should update relation in editing relations on update relation action', async () => {
+            const component = setUp(shallow, createStore({entity, metadata}));
+
+            act(() => {
+                component
+                    .find(GraphStateContext.Provider)
+                    .prop('value')
+                    .relationshipTable.onStartRelationEditing(relation.uri);
+            });
+
+            await act(async () => {
+                await Promise.resolve();
+            });
+
+            rerenderWrapper(component);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                editingRelations: [{initialRelation: relation, relation}]
+            });
+
+            const updatedRelation = {
+                ...relation,
+                attributes: {
+                    FirstName: [
+                        {
+                            ...relation.attributes.FirstName[0],
+                            value: 'new Value'
+                        }
+                    ]
+                }
+            };
+            act(() => {
+                component
+                    .find(GraphStateContext.Provider)
+                    .prop('value')
+                    .relationshipTable.onUpdateEditingRelation(updatedRelation);
+            });
+            rerenderWrapper(component);
+
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                editingRelations: [{initialRelation: relation, relation: updatedRelation}]
+            });
+
+            act(() => {
+                component
+                    .find(GraphStateContext.Provider)
+                    .prop('value')
+                    .relationshipTable.onCancelRelationEditing(updatedRelation.uri);
+            });
+            rerenderWrapper(component);
+
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                editingRelations: []
+            });
+        });
+
+        it('should make request update relation on onSaveEditingRelation action', async () => {
+            const component = setUp(shallow, createStore({entity, metadata}));
+
+            act(() => {
+                component
+                    .find(GraphStateContext.Provider)
+                    .prop('value')
+                    .relationshipTable.onStartRelationEditing(relation.uri);
+            });
+
+            await act(async () => {
+                await Promise.resolve();
+            });
+
+            rerenderWrapper(component);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                editingRelations: [{initialRelation: relation, relation}]
+            });
+
+            const updatedRelation = {
+                ...relation,
+                attributes: {
+                    FirstName: [
+                        {
+                            ...relation.attributes.FirstName[0],
+                            value: 'new Value'
+                        }
+                    ]
+                }
+            };
+            act(() => {
+                component
+                    .find(GraphStateContext.Provider)
+                    .prop('value')
+                    .relationshipTable.onUpdateEditingRelation(updatedRelation);
+            });
+            rerenderWrapper(component);
+
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                editingRelations: [{initialRelation: relation, relation: updatedRelation}],
+                loading: false
+            });
+
+            act(() => {
+                component
+                    .find(GraphStateContext.Provider)
+                    .prop('value')
+                    .relationshipTable.onSaveEditingRelation(relation, updatedRelation);
+            });
+
+            expect(updateRelation).toHaveBeenCalledWith({oldRelation: relation, newRelation: updatedRelation});
+            rerenderWrapper(component);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                editingRelations: [{initialRelation: relation, relation: updatedRelation}],
+                loading: true
+            });
+            await act(async () => {
+                await Promise.resolve();
+            });
+            rerenderWrapper(component);
+
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                editingRelations: [],
+                loading: false
+            });
+        });
+
+        it('should make request update relation on onSaveEditingRelation action and process error correctly', async () => {
+            const component = setUp(shallow, createStore({entity, metadata}));
+
+            (updateRelation as jest.Mock).mockRejectedValue('some error');
+            act(() => {
+                component
+                    .find(GraphStateContext.Provider)
+                    .prop('value')
+                    .relationshipTable.onStartRelationEditing(relation.uri);
+            });
+
+            await act(async () => {
+                await Promise.resolve();
+            });
+
+            rerenderWrapper(component);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                editingRelations: [{initialRelation: relation, relation}],
+                loading: false
+            });
+
+            act(() => {
+                component
+                    .find(GraphStateContext.Provider)
+                    .prop('value')
+                    .relationshipTable.onSaveEditingRelation(relation, relation);
+            });
+
+            expect(updateRelation).toHaveBeenCalledWith({oldRelation: relation, newRelation: relation});
+            rerenderWrapper(component);
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                editingRelations: [{initialRelation: relation, relation}],
+                loading: true
+            });
+            await act(async () => {
+                await Promise.resolve();
+            });
+            rerenderWrapper(component);
+
+            expect(dispatch).toHaveBeenCalledWith(
+                ui.actions.errorSet(getRequestErrorMessage('some error', "Can't edit relationship"))
+            );
+            expect(component.find(GraphStateContext.Provider).prop('value').relationshipTable).toMatchObject({
+                editingRelations: [{initialRelation: relation, relation}],
+                loading: false
+            });
+        });
+    });
+});