@reltio/graph 1.4.1585 → 1.4.1586-mui5

package/src/components/HierarchyLayout/__tests__/calculations.spec.ts

@@ -0,0 +1,230 @@
+import {GraphLayout} from '@reltio/mdm-sdk';
+import {
+    calculateXPos,
+    calculateYPos,
+    getAngleOfRotation,
+    getMaxLvlSize,
+    getMaxQuantityNodesOnOneLvl,
+    isSimpleGraph
+} from '../calculations';
+
+describe('calculations behavior', () => {
+    it('calculateXPos should work correctly', () => {
+        expect(
+            calculateXPos({
+                quantityAtLvl: 10,
+                posAtLvl: 2,
+                max: 10,
+                isEvenRow: true,
+                layout: GraphLayout.HORIZONTAL_LR,
+                shouldUseCheckboardPattern: true
+            })
+        ).toBe(25);
+
+        expect(
+            calculateXPos({
+                quantityAtLvl: 10,
+                posAtLvl: 4,
+                max: 10,
+                isEvenRow: true,
+                layout: GraphLayout.HORIZONTAL_LR,
+                shouldUseCheckboardPattern: true
+            })
+        ).toBe(45);
+
+        expect(
+            calculateXPos({
+                quantityAtLvl: 10,
+                posAtLvl: 2,
+                max: 10,
+                isEvenRow: false,
+                layout: GraphLayout.HORIZONTAL_LR,
+                shouldUseCheckboardPattern: true
+            })
+        ).toBe(20);
+
+        expect(
+            calculateXPos({
+                quantityAtLvl: 10,
+                posAtLvl: 5,
+                max: 10,
+                isEvenRow: true,
+                layout: GraphLayout.VERTICAL_TB,
+                shouldUseCheckboardPattern: true
+            })
+        ).toBe(50);
+
+        expect(
+            calculateXPos({
+                quantityAtLvl: 10,
+                posAtLvl: 7,
+                max: 10,
+                isEvenRow: true,
+                layout: GraphLayout.HORIZONTAL_LR,
+                shouldUseCheckboardPattern: false
+            })
+        ).toBe(70);
+
+        expect(
+            calculateXPos({
+                quantityAtLvl: 1,
+                posAtLvl: 0,
+                max: 10,
+                isEvenRow: true,
+                layout: GraphLayout.HORIZONTAL_LR,
+                shouldUseCheckboardPattern: true
+            })
+        ).toBe(45);
+
+        expect(
+            calculateXPos({
+                quantityAtLvl: 1,
+                posAtLvl: 0,
+                max: 5,
+                isEvenRow: true,
+                layout: GraphLayout.HORIZONTAL_LR,
+                shouldUseCheckboardPattern: true
+            })
+        ).toBe(20);
+
+        expect(
+            calculateXPos({
+                quantityAtLvl: 5,
+                posAtLvl: 3,
+                max: 10,
+                isEvenRow: true,
+                layout: GraphLayout.HORIZONTAL_LR,
+                shouldUseCheckboardPattern: true
+            })
+        ).toBe(60);
+
+        expect(
+            calculateXPos({
+                quantityAtLvl: 4,
+                posAtLvl: 2,
+                max: 8,
+                isEvenRow: true,
+                layout: GraphLayout.HORIZONTAL_LR,
+                shouldUseCheckboardPattern: true
+            })
+        ).toBe(42);
+    });
+
+    it('calculateYPos should work correctly', () => {
+        expect(
+            calculateYPos({
+                quantityAtLvl: 10,
+                rowNumber: 5,
+                isEvenItem: true,
+                layout: GraphLayout.VERTICAL_TB,
+                shouldUseCheckboardPattern: true
+            })
+        ).toBe(55);
+
+        expect(
+            calculateYPos({
+                quantityAtLvl: 10,
+                rowNumber: 8,
+                isEvenItem: true,
+                layout: GraphLayout.VERTICAL_TB,
+                shouldUseCheckboardPattern: true
+            })
+        ).toBe(85);
+
+        expect(
+            calculateYPos({
+                quantityAtLvl: 10,
+                rowNumber: 5,
+                isEvenItem: true,
+                layout: GraphLayout.VERTICAL_TB,
+                shouldUseCheckboardPattern: false
+            })
+        ).toBe(50);
+
+        expect(
+            calculateYPos({
+                quantityAtLvl: 10,
+                rowNumber: 1,
+                isEvenItem: true,
+                layout: GraphLayout.HORIZONTAL_LR,
+                shouldUseCheckboardPattern: true
+            })
+        ).toBe(10);
+
+        expect(
+            calculateYPos({
+                quantityAtLvl: 10,
+                rowNumber: 3,
+                isEvenItem: false,
+                layout: GraphLayout.VERTICAL_TB,
+                shouldUseCheckboardPattern: true
+            })
+        ).toBe(30);
+
+        expect(
+            calculateYPos({
+                quantityAtLvl: 1,
+                rowNumber: 0,
+                isEvenItem: true,
+                layout: GraphLayout.VERTICAL_TB,
+                shouldUseCheckboardPattern: true
+            })
+        ).toBe(0);
+    });
+
+    describe('getAngleOfRotation', () => {
+        it('should return correctly angle for Horizontal layout', () => {
+            expect(getAngleOfRotation(GraphLayout.HORIZONTAL_LR)).toBe(270);
+        });
+
+        it('should return correctly angle for Vertical layout', () => {
+            expect(getAngleOfRotation(GraphLayout.VERTICAL_TB)).toBe(180);
+        });
+    });
+
+    describe('getMaxLvlSize', () => {
+        it('should return max level size correctly', () => {
+            expect(getMaxLvlSize([['node1'], ['node2', 'node3', 'node4'], ['node5', 'node6']])).toBe(3);
+            expect(getMaxLvlSize([['node1'], ['node2', 'node3'], ['node4', 'node5']])).toBe(2);
+            expect(getMaxLvlSize([['node1'], ['node2', 'node3'], ['node4', 'node5', 'node6', 'node7']])).toBe(4);
+        });
+    });
+
+    describe('isSimpleGraph', () => {
+        it('should return true for lengths shorter than 100', () => {
+            expect(isSimpleGraph(50)).toBe(true);
+            expect(isSimpleGraph(1)).toBe(true);
+            expect(isSimpleGraph(80)).toBe(true);
+            expect(isSimpleGraph(99)).toBe(true);
+        });
+
+        it('should return false for lengths longer than 100', () => {
+            expect(isSimpleGraph(100)).toBe(false);
+            expect(isSimpleGraph(150)).toBe(false);
+            expect(isSimpleGraph(200)).toBe(false);
+            expect(isSimpleGraph(1000)).toBe(false);
+        });
+    });
+
+    describe('getMaxQuantityNodesOnOneLvl', () => {
+        it('should return default max quantity nodes at level for nodesLength shorter than 100', () => {
+            expect(getMaxQuantityNodesOnOneLvl(10, GraphLayout.HORIZONTAL_LR)).toBe(10);
+            expect(getMaxQuantityNodesOnOneLvl(50, GraphLayout.VERTICAL_TB)).toBe(10);
+            expect(getMaxQuantityNodesOnOneLvl(80, GraphLayout.HORIZONTAL_LR)).toBe(10);
+        });
+
+        it('should calculate max quantity nodes at level for nodesLength longer than 100 and Horizontal layout', () => {
+            expect(getMaxQuantityNodesOnOneLvl(120, GraphLayout.HORIZONTAL_LR)).toBe(8);
+            expect(getMaxQuantityNodesOnOneLvl(200, GraphLayout.HORIZONTAL_LR)).toBe(10);
+            expect(getMaxQuantityNodesOnOneLvl(500, GraphLayout.HORIZONTAL_LR)).toBe(16);
+            expect(getMaxQuantityNodesOnOneLvl(1000, GraphLayout.HORIZONTAL_LR)).toBe(22);
+        });
+
+        it('should calculate max quantity nodes at level for nodesLength longer than 100 and Vertical layout', () => {
+            expect(getMaxQuantityNodesOnOneLvl(120, GraphLayout.VERTICAL_TB)).toBe(16);
+            expect(getMaxQuantityNodesOnOneLvl(200, GraphLayout.VERTICAL_TB)).toBe(21);
+            expect(getMaxQuantityNodesOnOneLvl(500, GraphLayout.VERTICAL_TB)).toBe(34);
+            expect(getMaxQuantityNodesOnOneLvl(1000, GraphLayout.VERTICAL_TB)).toBe(47);
+        });
+    });
+});

package/src/components/HierarchyLayout/buildHierarchy.ts

@@ -0,0 +1,109 @@
+import Graph from 'graphology';
+import {GraphologyGraphData, Node, Edge, NodesHierarchy} from '../../types/graphDataTypes';
+
+const getFirstLvlNodes = (edgesWithoutLoops: Edge[], nodes: Node[], selectedNode: string): Set<string> => {
+    const firstLvlNodesIds = new Set<string>();
+    nodes.forEach((node) => {
+        if (!edgesWithoutLoops.some((edge) => edge.to === node.id)) {
+            firstLvlNodesIds.add(node.id);
+        }
+    });
+    if (!firstLvlNodesIds.size) {
+        firstLvlNodesIds.add(selectedNode);
+    }
+    return firstLvlNodesIds;
+};
+
+const canFindChildNodes = (nodesIds: Set<string>, edgesWithoutLoops: Edge[], processedNodes) => {
+    const children = new Set<string>();
+    nodesIds.forEach((nodeId) => {
+        edgesWithoutLoops.forEach((edge) => {
+            if (edge.from === nodeId && !processedNodes.has(edge.to)) {
+                children.add(edge.to);
+            }
+        });
+    });
+    return !!children.size;
+};
+
+const findChildNodeIds = (
+    parentNodes: Set<string>,
+    nodesArr: NodesHierarchy,
+    processedNodes: Set<string>,
+    edgesWithoutLoops: Edge[]
+): NodesHierarchy => {
+    const currentLvlNodeIds = new Set<string>();
+    if (!nodesArr.length) {
+        nodesArr.push(Array.from(parentNodes));
+    }
+    parentNodes.forEach((nodeId) => {
+        processedNodes.add(nodeId);
+        edgesWithoutLoops.forEach((edge) => {
+            if (edge.from === nodeId && !parentNodes.has(edge.to) && !processedNodes.has(edge.to)) {
+                currentLvlNodeIds.add(edge.to);
+            }
+        });
+    });
+    if (currentLvlNodeIds.size) {
+        nodesArr.push(Array.from(currentLvlNodeIds));
+    }
+
+    if (canFindChildNodes(currentLvlNodeIds, edgesWithoutLoops, processedNodes)) {
+        return findChildNodeIds(currentLvlNodeIds, nodesArr, processedNodes, edgesWithoutLoops);
+    } else return nodesArr;
+};
+
+const splitLongLevels = (
+    nodes: string[],
+    finalHierarchyNodesArr: NodesHierarchy,
+    nodesHierarchy: NodesHierarchy,
+    level: number,
+    maxQuantityNodesOnOneLvl: number
+): NodesHierarchy => {
+    if (nodes.length <= maxQuantityNodesOnOneLvl) {
+        finalHierarchyNodesArr[level] = [...nodes];
+    }
+    if (nodes.length > maxQuantityNodesOnOneLvl) {
+        const extraNodes = nodes.slice(maxQuantityNodesOnOneLvl);
+        const remainingNodes = nodes.slice(0, maxQuantityNodesOnOneLvl);
+
+        finalHierarchyNodesArr[level] = remainingNodes;
+        finalHierarchyNodesArr[level + 1] = nodesHierarchy[level + 1]
+            ? [...nodesHierarchy[level + 1], ...extraNodes]
+            : extraNodes;
+    }
+    if (finalHierarchyNodesArr[level + 1] || nodesHierarchy[level + 1]) {
+        level++;
+        const nodes = finalHierarchyNodesArr[level] || nodesHierarchy[level];
+        return splitLongLevels(nodes, finalHierarchyNodesArr, nodesHierarchy, level, maxQuantityNodesOnOneLvl);
+    } else {
+        return finalHierarchyNodesArr;
+    }
+};
+
+export const buildHierarchyNodes = (
+    graphData: GraphologyGraphData,
+    selectedNode: string,
+    maxQuantityNodesOnOneLvl = 10
+): NodesHierarchy => {
+    const nodes = graphData.nodes;
+    const edgesWithoutLoops = graphData.edges.filter((edge) => edge.from !== edge.to);
+    const firstLvlNodeIds = getFirstLvlNodes(edgesWithoutLoops, nodes, selectedNode);
+
+    const nodesHierarchy = findChildNodeIds(firstLvlNodeIds, [], new Set<string>(), edgesWithoutLoops);
+    const finalHierarchyNodesArr = splitLongLevels(nodesHierarchy[0], [], nodesHierarchy, 0, maxQuantityNodesOnOneLvl);
+
+    return finalHierarchyNodesArr;
+};
+
+export const extractDataFromGraph = (graph: Graph): GraphologyGraphData => {
+    const nodes = graph.nodes().map((id) => ({id, name: ''} as Node));
+    const edges = graph.mapEdges((edge, attributes, source, target) => ({
+        from: source,
+        to: target,
+        key: edge,
+        relationTypeUri: attributes.relationTypeUri,
+        direction: attributes.direction
+    }));
+    return {nodes, edges};
+};

package/src/components/HierarchyLayout/calculations.ts

@@ -0,0 +1,86 @@
+import {GraphLayout} from '@reltio/mdm-sdk';
+import {NodesHierarchy} from '../../types/graphDataTypes';
+
+const X_MARGIN = 10;
+const Y_MARGIN = 10;
+
+type CalculateYPosProps = {
+    quantityAtLvl: number;
+    rowNumber: number;
+    isEvenItem: boolean;
+    layout: GraphLayout;
+    shouldUseCheckboardPattern: boolean;
+};
+
+export const calculateYPos = ({
+    quantityAtLvl,
+    rowNumber,
+    isEvenItem,
+    layout,
+    shouldUseCheckboardPattern
+}: CalculateYPosProps) => {
+    const isVerticalHierarchy = layout === GraphLayout.VERTICAL_TB;
+    const hasSingleNodeAtLvl = quantityAtLvl === 1;
+    return shouldUseCheckboardPattern && isVerticalHierarchy && isEvenItem && !hasSingleNodeAtLvl
+        ? rowNumber * Y_MARGIN + Y_MARGIN / 2
+        : rowNumber * Y_MARGIN;
+};
+
+type CalculateXPosProps = {
+    quantityAtLvl: number;
+    posAtLvl: number;
+    max: number;
+    isEvenRow: boolean;
+    layout: GraphLayout;
+    shouldUseCheckboardPattern: boolean;
+};
+
+export const calculateXPos = ({
+    quantityAtLvl,
+    posAtLvl,
+    max,
+    isEvenRow,
+    layout,
+    shouldUseCheckboardPattern
+}: CalculateXPosProps) => {
+    const isHorizontalHierarchy = layout === GraphLayout.HORIZONTAL_LR;
+    const hasSingleNodeAtLvl = quantityAtLvl === 1;
+    const hasMaxNodesAtLvl = quantityAtLvl === max;
+
+    if (hasMaxNodesAtLvl) {
+        return shouldUseCheckboardPattern && isEvenRow && isHorizontalHierarchy
+            ? posAtLvl * X_MARGIN + X_MARGIN / 2
+            : posAtLvl * X_MARGIN;
+    }
+
+    if (hasSingleNodeAtLvl) {
+        return ((max - 1) * X_MARGIN) / 2;
+    }
+
+    return (((max - 1) * X_MARGIN) / (quantityAtLvl + 1)) * (posAtLvl + 1);
+};
+
+export const getAngleOfRotation = (layout: GraphLayout) => {
+    switch (layout) {
+        case GraphLayout.VERTICAL_TB:
+            return 180;
+        case GraphLayout.HORIZONTAL_LR:
+            return 270;
+    }
+};
+
+export const getMaxLvlSize = (hierarchyNodes: NodesHierarchy) => {
+    const sizes = hierarchyNodes.map((nodes) => nodes.length);
+    return Math.max(...sizes);
+};
+
+export const isSimpleGraph = (nodesLength: number) => nodesLength < 100;
+
+export const getMaxQuantityNodesOnOneLvl = (nodesLength: number, layout: GraphLayout) => {
+    if (isSimpleGraph(nodesLength)) {
+        return 10;
+    }
+
+    const multiplier = layout === GraphLayout.VERTICAL_TB ? 1.5 : 0.7;
+    return Math.round(Math.sqrt(nodesLength) * multiplier);
+};

package/src/components/RightPanelEntityDetails/RightPanelEntityDetails.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {pick} from 'ramda';
+import {Entity} from '@reltio/mdm-sdk';
+import {AttributesView, withContext, LinearLoadIndicator} from '@reltio/components';
+import {GraphStateContext} from '../../contexts/GraphStateContext';
+
+import {useStyles} from './styles';
+import i18n from 'ui-i18n';
+
+type Props = {
+    selectedEntity?: Entity;
+    selectedEntityLoading?: boolean;
+};
+
+const RightPanelEntityDetails = ({selectedEntity, selectedEntityLoading}: Props) => {
+    const styles = useStyles();
+    return (
+        <div className={styles.wrapper}>
+            {selectedEntityLoading && <LinearLoadIndicator />}
+            <AttributesView
+                entity={selectedEntity}
+                caption={i18n.text('Entity details')}
+                className={styles.noShadowBlock}
+            />
+        </div>
+    );
+};
+
+export default withContext(
+    GraphStateContext,
+    pick(['selectedEntity', 'selectedEntityLoading']),
+    RightPanelEntityDetails
+);

package/src/components/RightPanelEntityDetails/__tests__/RightPanelEntityDetails.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {AttributesView} from '@reltio/components';
+
+import RightPanelEntityDetails from '../RightPanelEntityDetails';
+import {GraphStateContext} from '../../../contexts/GraphStateContext';
+import {GraphState} from '../../../types/graphDataTypes';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    AttributesView: () => null
+}));
+
+const setUp = ({selectedEntity = null, selectedEntityLoading = false} = {}) =>
+    mount(
+        <GraphStateContext.Provider value={{selectedEntity, selectedEntityLoading} as GraphState}>
+            <RightPanelEntityDetails />
+        </GraphStateContext.Provider>
+    );
+
+describe('RightPanelEntityDetails tests', () => {
+    it('should render AttributesView with selectedEntity from context', () => {
+        const selectedEntity = {uri: 'uri1'};
+        const component = setUp({selectedEntity});
+        const attributesView = component.find(AttributesView);
+        expect(attributesView).toHaveLength(1);
+        expect(attributesView.prop('entity')).toBe(selectedEntity);
+        expect(attributesView.prop('caption')).toBe('Entity details');
+        expect(attributesView.prop('className')).toContain('noShadowBlock');
+    });
+
+    it('should render empty AttributesView while entity is loading', () => {
+        const component = setUp({selectedEntityLoading: true});
+        const attributesView = component.find(AttributesView);
+        expect(attributesView).toHaveLength(1);
+        expect(attributesView.prop('entity')).toBe(null);
+        expect(attributesView.prop('caption')).toBe('Entity details');
+    });
+});

package/src/components/RightPanelEntityDetails/styles.ts

@@ -0,0 +1,12 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    noShadowBlock: {
+        boxShadow: 'none'
+    },
+    wrapper: {
+        position: 'relative',
+        paddingRight: '1px',
+        overflow: 'auto'
+    }
+});

package/src/components/RightPanelProfileBand/RightPanelProfileBand.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {pick} from 'ramda';
+import {useSelector} from 'react-redux';
+import {Entity, getEntityUriForLink} from '@reltio/mdm-sdk';
+import {EntityUriLink, ProfileBand, withContext} from '@reltio/components';
+import mdmModule from '@reltio/mdm-module';
+import {GraphStateContext} from '../../contexts/GraphStateContext';
+import {useStyles} from './styles';
+
+type Props = {
+    selectedEntity?: Entity;
+};
+
+const RightPanelProfileBand = ({selectedEntity}: Props) => {
+    const styles = useStyles();
+
+    const entityUri = useSelector(mdmModule.selectors.getEntityUri);
+    const selectedEntityUri = selectedEntity?.uri;
+
+    const renderLabel = (label: string) => {
+        if (entityUri === selectedEntityUri) return label;
+
+        return (
+            <EntityUriLink className={styles.link} value={getEntityUriForLink(selectedEntity)} screen="graph">
+                {label}
+            </EntityUriLink>
+        );
+    };
+
+    return <ProfileBand entity={selectedEntity} renderLabel={renderLabel} />;
+};
+
+export default withContext(GraphStateContext, pick(['selectedEntity']), RightPanelProfileBand);

package/src/components/RightPanelProfileBand/__tests__/RightPanelProfileBand.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {mount, ReactWrapper} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {EntityUriLink, ProfileBand} from '@reltio/components';
+
+import RightPanelProfileBand from '../RightPanelProfileBand';
+import {GraphStateContext} from '../../../contexts/GraphStateContext';
+import {GraphState} from '../../../types/graphDataTypes';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    ProfileBand: () => null,
+    EntityUriLink: () => null
+}));
+
+const store = {
+    profile: {
+        entity: {
+            uri: 'uri1'
+        }
+    }
+};
+
+const setUp = ({selectedEntity = null} = {}) =>
+    mount(
+        <GraphStateContext.Provider value={{selectedEntity} as GraphState}>
+            <RightPanelProfileBand />
+        </GraphStateContext.Provider>
+    );
+
+describe('RightPanelProfileBand tests', () => {
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    afterAll(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render ProfileBand with selectedEntity from context', () => {
+        const selectedEntity = {uri: 'uri2'};
+        const component = setUp({selectedEntity});
+        const profileBand = component.find(ProfileBand);
+        expect(profileBand).toHaveLength(1);
+        expect(profileBand.prop('entity')).toBe(selectedEntity);
+    });
+
+    it('should render standart label if selected entity equals current entity', () => {
+        const selectedEntity = {uri: store.profile.entity.uri};
+        const component = setUp({selectedEntity});
+        const label = component.find(ProfileBand).prop('renderLabel')('label');
+        expect(label).toBe('label');
+    });
+
+    it('should wrap label to EntityUriLink with correct props if selected entity does not equal current entity', () => {
+        const selectedEntity = {uri: 'uri2'};
+        const component = setUp({selectedEntity});
+        const label = new ReactWrapper(component.find(ProfileBand).prop('renderLabel')('label') as React.ReactElement);
+        expect(label.find(EntityUriLink)).toHaveLength(1);
+        expect(label.props()).toEqual({
+            className: 'link',
+            value: 'uri2',
+            screen: 'graph',
+            children: 'label'
+        });
+    });
+});

package/src/components/RightPanelProfileBand/styles.ts

@@ -0,0 +1,8 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    link: {
+        textDecoration: 'none',
+        color: theme.palette.primary.main
+    }
+}));

package/src/components/RightPanelRelationship/RightPanelRelationship.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+
+import i18n from 'ui-i18n';
+import RelationshipTable from './components/RelationshipTable/RelationshipTable';
+import RelationshipsFilters from './components/RelationshipsFilters/RelationshipsFilters';
+import GraphAddRelationButton from './components/GraphAddRelationDialog/GraphAddRelationButton';
+import {useStyles} from './styles';
+
+const RightPanelRelationship = () => {
+    const styles = useStyles();
+
+    return (
+        <div className={styles.wrapper}>
+            <div className={styles.caption}>
+                <Typography variant="subtitle1">{i18n.text('Relationships')}</Typography>
+                <GraphAddRelationButton />
+            </div>
+            <RelationshipsFilters />
+            <RelationshipTable />
+        </div>
+    );
+};
+
+export default RightPanelRelationship;

package/src/components/RightPanelRelationship/__tests__/RightPanelRelationship.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import RightPanelRelationship from '../RightPanelRelationship';
+import RelationshipTable from '../components/RelationshipTable/RelationshipTable';
+import RelationshipsFilters from '../components/RelationshipsFilters/RelationshipsFilters';
+import GraphAddRelationButton from '../components/GraphAddRelationDialog/GraphAddRelationButton';
+
+const setUp = () => shallow(<RightPanelRelationship />);
+
+describe('RightPanelRelationship tests', () => {
+    it('should render main components', () => {
+        const component = setUp();
+        expect(component.find(GraphAddRelationButton)).toHaveLength(1);
+        expect(component.find(RelationshipsFilters)).toHaveLength(1);
+        expect(component.find(RelationshipTable)).toHaveLength(1);
+    });
+});