@reltio/profile 1.4.1584 → 1.4.1586-mui5

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

@@ -0,0 +1,547 @@
+import React from 'react';
+import * as reactRedux from 'react-redux';
+import ReactResizeDetector from 'react-resize-detector';
+import {act} from 'react-dom/test-utils';
+import {mount, ReactWrapper} from 'enzyme';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {FeaturesContext, ReactSortableTree} from '@reltio/components';
+import {ui} from '@reltio/mdm-module';
+import {getPathsTree, HierarchyPathsViewConfig, ProfileViewTypes} from '@reltio/mdm-sdk';
+import Typography from '@mui/material/Typography';
+import {HierarchyPathsView} from '../HierarchyPathsView';
+import {Node} from '../Node';
+import {theme} from '../theme';
+
+const BasicView = ({children}) => <>{children}</>;
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    BasicView,
+    ReactSortableTree: () => null
+}));
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getPathsTree: jest.fn()
+}));
+jest.mock('../Node', () => ({
+    Node: () => null
+}));
+
+const treePaths = {
+    entities: {
+        'entities/1HonRdLo': {
+            uri: 'entities/1HonRdLo',
+            type: 'configuration/entityTypes/OrganizationM',
+            label: 'NATALINE DILCHAND'
+        },
+        'entities/1WFdeovr': {
+            uri: 'entities/1WFdeovr',
+            type: 'configuration/entityTypes/OrganizationM',
+            label: 'MainRoot Test 100 levels'
+        },
+        'entities/1WFdfAF9': {
+            uri: 'entities/1WFdfAF9',
+            type: 'configuration/entityTypes/OrganizationM',
+            label: 'PHILIS AURELIO\r'
+        },
+        'entities/1WFdf1id': {
+            uri: 'entities/1WFdf1id',
+            type: 'configuration/entityTypes/OrganizationM',
+            label: 'JANINE GSTOHL\r'
+        },
+        'entities/pO7S74k': {
+            uri: 'entities/pO7S74k',
+            type: 'configuration/entityTypes/OrganizationM',
+            label: 'Name_0_1'
+        },
+        'entities/1WFdfEVP': {
+            uri: 'entities/1WFdfEVP',
+            type: 'configuration/entityTypes/OrganizationM',
+            label: 'AME HANINGTON\r'
+        }
+    },
+    parentPaths: [
+        [
+            {
+                entityUri: 'entities/1HonRdLo'
+            },
+            {
+                entityUri: 'entities/1WFdfAF9'
+            },
+            {
+                entityUri: 'entities/1WFdf1id'
+            },
+            {
+                entityUri: 'entities/1WFdeovr'
+            }
+        ],
+        [
+            {
+                entityUri: 'entities/1HonRdLo'
+            },
+            {
+                entityUri: 'entities/pO7S74k'
+            },
+            {
+                entityUri: 'entities/1WFdfEVP'
+            }
+        ]
+    ]
+};
+
+const treeData = [
+    {
+        entity: {
+            uri: 'entities/1WFdeovr',
+            type: 'configuration/entityTypes/OrganizationM',
+            label: 'MainRoot Test 100 levels'
+        },
+        children: [
+            {
+                entity: {
+                    uri: 'entities/1WFdf1id',
+                    type: 'configuration/entityTypes/OrganizationM',
+                    label: 'JANINE GSTOHL\r'
+                },
+                children: [
+                    {
+                        entity: {
+                            uri: 'entities/1WFdfAF9',
+                            type: 'configuration/entityTypes/OrganizationM',
+                            label: 'PHILIS AURELIO\r'
+                        },
+                        children: [
+                            {
+                                entity: {
+                                    uri: 'entities/1HonRdLo',
+                                    type: 'configuration/entityTypes/OrganizationM',
+                                    label: 'NATALINE DILCHAND'
+                                },
+                                children: [],
+                                nodeId: expect.any(Number),
+                                expanded: true
+                            }
+                        ],
+                        nodeId: expect.any(Number),
+                        expanded: true
+                    }
+                ],
+                nodeId: expect.any(Number),
+                expanded: true
+            }
+        ],
+        nodeId: expect.any(Number),
+        expanded: true,
+        root: true,
+        rootIndex: 1
+    },
+    {
+        entity: {
+            uri: 'entities/1WFdfEVP',
+            type: 'configuration/entityTypes/OrganizationM',
+            label: 'AME HANINGTON\r'
+        },
+        children: [
+            {
+                entity: {
+                    uri: 'entities/pO7S74k',
+                    type: 'configuration/entityTypes/OrganizationM',
+                    label: 'Name_0_1'
+                },
+                children: [
+                    {
+                        entity: {
+                            uri: 'entities/1HonRdLo',
+                            type: 'configuration/entityTypes/OrganizationM',
+                            label: 'NATALINE DILCHAND'
+                        },
+                        children: [],
+                        nodeId: expect.any(Number),
+                        expanded: true
+                    }
+                ],
+                nodeId: expect.any(Number),
+                expanded: true
+            }
+        ],
+        nodeId: expect.any(Number),
+        expanded: true,
+        root: true,
+        rootIndex: 2
+    }
+];
+
+const defaultProps = {
+    config: {
+        point: 'com.reltio.plugins.ui.view',
+        class: ProfileViewTypes.HierarchyPaths,
+        id: 'com.reltio.plugins.entity.HierarchyPathsView.78fe-51a8-c9d00c59',
+        caption: 'Hierarchy Paths View Test',
+        graph: {
+            type: 'configuration/graphTypes/PharmaCompanyHierarchy'
+        }
+    } as HierarchyPathsViewConfig
+};
+
+const setUp = (props = defaultProps) => mount(<HierarchyPathsView {...props} />);
+
+describe('HierarchyPathsView', () => {
+    const dispatch = jest.fn();
+    let store;
+
+    beforeEach(() => {
+        store = {
+            profile: {
+                entity: {
+                    uri: 'entities/1HonRdLo',
+                    type: 'configuration/entityTypes/OrganizationM',
+                    label: 'NATALINE DILCHAND'
+                }
+            }
+        };
+    });
+
+    beforeEach(() => {
+        jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => dispatch);
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+        (getPathsTree as jest.Mock).mockResolvedValue(treePaths);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render "Show Graph" button if component is not wrapped in FeaturesContext', () => {
+        render(<HierarchyPathsView {...defaultProps} />);
+        expect(screen.queryByLabelText('Show Graph')).toBeInTheDocument();
+    });
+
+    it('should not render "Show Graph" button if showNavigateToGraph prop from FeaturesContext is false', () => {
+        const Providers = ({children}: {children: React.ReactNode}) => {
+            return <FeaturesContext.Provider value={{showNavigateToGraph: false}}>{children}</FeaturesContext.Provider>;
+        };
+        render(<HierarchyPathsView {...defaultProps} />, {wrapper: Providers});
+        expect(screen.queryByLabelText('Show Graph')).not.toBeInTheDocument();
+    });
+
+    it('should not render "Show Graph" button if config has "_showNavigateToGraph" prop equals false', () => {
+        const Providers = ({children}: {children: React.ReactNode}) => {
+            return <FeaturesContext.Provider value={{showNavigateToGraph: true}}>{children}</FeaturesContext.Provider>;
+        };
+        const props = {...defaultProps, config: {...defaultProps.config, _showNavigateToGraph: false}};
+        render(<HierarchyPathsView {...props} />, {wrapper: Providers});
+        expect(screen.queryByLabelText('Show Graph')).not.toBeInTheDocument();
+    });
+
+    it('should render "Show Graph" button if showNavigateToGraph prop from FeaturesContext is true', () => {
+        const Providers = ({children}: {children: React.ReactNode}) => {
+            return <FeaturesContext.Provider value={{showNavigateToGraph: true}}>{children}</FeaturesContext.Provider>;
+        };
+        render(<HierarchyPathsView {...defaultProps} />, {wrapper: Providers});
+        expect(screen.queryByLabelText('Show Graph')).toBeInTheDocument();
+    });
+
+    it('should call openGraph action with correct props after click to "Show Graph" button if config has not graph field', async () => {
+        const props = {config: {...defaultProps.config, graph: undefined}};
+        const user = userEvent.setup();
+        render(<HierarchyPathsView {...props} />);
+        await user.click(screen.queryByLabelText('Show Graph'));
+        const action = ui.actions.openGraph({
+            viewId: props.config.id,
+            graphType: undefined,
+            entityUri: store.profile.entity.uri
+        });
+        expect(dispatch).toHaveBeenCalledWith(action);
+    });
+
+    it('should call openGraph action with correct props after click to "Show Graph" button', async () => {
+        const user = userEvent.setup();
+        render(<HierarchyPathsView {...defaultProps} />);
+        await user.click(screen.queryByLabelText('Show Graph'));
+        const action = ui.actions.openGraph({
+            viewId: defaultProps.config.id,
+            graphType: defaultProps.config.graph.type,
+            entityUri: store.profile.entity.uri
+        });
+        expect(dispatch).toHaveBeenCalledWith(action);
+    });
+
+    it('should render view title correctly', () => {
+        render(<HierarchyPathsView {...defaultProps} />);
+        screen.getByText(defaultProps.config.caption);
+    });
+
+    it('should call getPathsTree on mount', () => {
+        setUp();
+        expect(getPathsTree).toHaveBeenCalledWith({
+            uri: 'entities/1HonRdLo',
+            graphUri: 'configuration/graphTypes/PharmaCompanyHierarchy'
+        });
+    });
+
+    it('should call getPathsTree with correctly params if config has not graph field', () => {
+        const props = {config: {...defaultProps.config, graph: undefined}};
+        setUp(props);
+        expect(getPathsTree).toHaveBeenCalledWith({
+            uri: 'entities/1HonRdLo',
+            graphUri: undefined
+        });
+    });
+
+    it('should set error message if getPathsTree has been rejected and reset it after next success request', async () => {
+        const error = {errorMessage: 'Tree operation filter contains empty graphTypeURIs set'};
+        (getPathsTree as jest.Mock).mockRejectedValue(error);
+
+        const component = setUp();
+        expect(component.find(ReactSortableTree)).toHaveLength(1);
+        expect(component.find('.tree').find(Typography)).toHaveLength(0);
+
+        await act(async () => {
+            await Promise.resolve();
+        });
+
+        component.update();
+
+        expect(component.find(ReactSortableTree)).toHaveLength(0);
+        expect(component.find('.tree').find(Typography).props()).toEqual({
+            children: error.errorMessage,
+            className: 'errorMessage'
+        });
+
+        (getPathsTree as jest.Mock).mockResolvedValue(treeData);
+
+        const newProps = {config: {...defaultProps.config, graph: 'configuration/graphTypes/SomeHierarchy'}};
+        component.setProps(newProps);
+
+        await act(async () => {
+            await Promise.resolve();
+        });
+
+        component.update();
+
+        expect(component.find(ReactSortableTree)).toHaveLength(1);
+        expect(component.find('.tree').find(Typography)).toHaveLength(0);
+    });
+
+    it('should not call getPathsTree on mount for temp entity', () => {
+        store.profile.entity.uri = 'uri$$Temp';
+        setUp();
+        expect(getPathsTree).not.toHaveBeenCalled();
+    });
+
+    it('should pass simple props to ReactSortableTree', async () => {
+        const component = setUp();
+        expect(component.find(ReactSortableTree)).toHaveLength(1);
+        expect(component.find(ReactSortableTree).prop('isVirtualized')).toBeFalsy();
+        expect(component.find(ReactSortableTree).prop('canDrag')).toBeFalsy();
+        expect(component.find(ReactSortableTree).prop('theme')).toBe(theme);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(ReactSortableTree).prop('treeData')).toEqual(treeData);
+    });
+
+    it('should return nodeId on getNodeKey', () => {
+        const component = setUp();
+        expect(component.find(ReactSortableTree)).toHaveLength(1);
+        const getNodeKey = component.find(ReactSortableTree).prop('getNodeKey');
+        expect(getNodeKey({node: {nodeId: 'Node7'}})).toBe('Node7');
+    });
+
+    it('should set newTree on expand node triggered by onChange', async () => {
+        const component = setUp();
+        expect(component.find(ReactSortableTree)).toHaveLength(1);
+        const onChange = component.find(ReactSortableTree).prop('onChange');
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        const renderedTreeData = component.find(ReactSortableTree).prop('treeData');
+        const newTree = [
+            renderedTreeData[0],
+            {
+                ...renderedTreeData[1],
+                children: [{...renderedTreeData[1].children[0], expanded: !renderedTreeData[1].children[0].expanded}]
+            }
+        ];
+        onChange(newTree);
+        component.update();
+        expect(component.find(ReactSortableTree).prop('treeData')).toEqual(newTree);
+    });
+
+    it('generateNodeProps should render Node', () => {
+        const component = setUp();
+        expect(component.find(ReactSortableTree)).toHaveLength(1);
+        const generateNodeProps = component.find(ReactSortableTree).prop('generateNodeProps');
+
+        const rowInfo = {
+            node: {
+                entity: {label: 'Node Title', type: 'entityType', uri: 'uri'},
+                children: [],
+                nodeId: 1,
+                expanded: true
+            }
+        };
+        const nodeProps = generateNodeProps(rowInfo);
+        const title = new ReactWrapper(nodeProps.title);
+        expect(title.find(ReactResizeDetector).find(Node).prop('node')).toBe(rowInfo.node);
+    });
+
+    it('should set "rowHeight" prop for ReactSortableTree', () => {
+        const component = setUp();
+        expect(component.find(ReactSortableTree)).toHaveLength(1);
+        const rowHeight = component.find(ReactSortableTree).prop('getNodeKey');
+        expect(rowHeight).toEqual(expect.any(Function));
+    });
+
+    it('should measure nodes heights', () => {
+        const component = setUp();
+        expect(component.find(ReactSortableTree)).toHaveLength(1);
+        const generateNodeProps = component.find(ReactSortableTree).prop('generateNodeProps');
+
+        const rowInfo1 = {
+            node: {
+                entity: {label: 'Node Title', type: 'entityType', uri: 'uri'},
+                children: [],
+                nodeId: 1,
+                expanded: true
+            }
+        };
+        const rowInfo2 = {
+            node: {
+                entity: {label: 'Node Title2', type: 'entityType', uri: 'uri2'},
+                children: [],
+                nodeId: 2,
+                expanded: true
+            }
+        };
+        const node1Height = 30;
+        const node1Props = generateNodeProps(rowInfo1);
+        const title1 = new ReactWrapper(node1Props.title);
+        act(() => {
+            (title1.find(ReactResizeDetector).prop('onResize') as (width: number, height: number) => void)(
+                1,
+                node1Height
+            );
+        });
+        component.update();
+        expect(component.find(ReactSortableTree).prop('rowHeight')(rowInfo1)).toBe(node1Height);
+
+        const node2Height = 20;
+        const node2Props = generateNodeProps(rowInfo2);
+        const title2 = new ReactWrapper(node2Props.title);
+        act(() => {
+            (title2.find(ReactResizeDetector).prop('onResize') as (width: number, height: number) => void)(
+                1,
+                node2Height
+            );
+        });
+        component.update();
+        expect(component.find(ReactSortableTree).prop('rowHeight')(rowInfo2)).toBe(theme.rowHeight);
+    });
+
+    it('should update tree after updating entity', async () => {
+        const component = setUp();
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(ReactSortableTree).prop('treeData')).toEqual(treeData);
+        store = {
+            profile: {
+                entity: {
+                    uri: 'entities/1HonRdLo',
+                    type: 'configuration/entityTypes/OrganizationM',
+                    label: 'Another label',
+                    updatedTime: 1234
+                }
+            }
+        };
+        component.setProps({...defaultProps, className: 'class'});
+        component.update();
+        const treeDataWithUpdatedEntity = [
+            {
+                entity: {
+                    uri: 'entities/1WFdeovr',
+                    type: 'configuration/entityTypes/OrganizationM',
+                    label: 'MainRoot Test 100 levels'
+                },
+                children: [
+                    {
+                        entity: {
+                            uri: 'entities/1WFdf1id',
+                            type: 'configuration/entityTypes/OrganizationM',
+                            label: 'JANINE GSTOHL\r'
+                        },
+                        children: [
+                            {
+                                entity: {
+                                    uri: 'entities/1WFdfAF9',
+                                    type: 'configuration/entityTypes/OrganizationM',
+                                    label: 'PHILIS AURELIO\r'
+                                },
+                                children: [
+                                    {
+                                        entity: {
+                                            uri: 'entities/1HonRdLo',
+                                            type: 'configuration/entityTypes/OrganizationM',
+                                            label: 'Another label'
+                                        },
+                                        children: [],
+                                        nodeId: expect.any(Number),
+                                        expanded: true
+                                    }
+                                ],
+                                nodeId: expect.any(Number),
+                                expanded: true
+                            }
+                        ],
+                        nodeId: expect.any(Number),
+                        expanded: true
+                    }
+                ],
+                nodeId: expect.any(Number),
+                expanded: true,
+                root: true,
+                rootIndex: 1
+            },
+            {
+                entity: {
+                    uri: 'entities/1WFdfEVP',
+                    type: 'configuration/entityTypes/OrganizationM',
+                    label: 'AME HANINGTON\r'
+                },
+                children: [
+                    {
+                        entity: {
+                            uri: 'entities/pO7S74k',
+                            type: 'configuration/entityTypes/OrganizationM',
+                            label: 'Name_0_1'
+                        },
+                        children: [
+                            {
+                                entity: {
+                                    uri: 'entities/1HonRdLo',
+                                    type: 'configuration/entityTypes/OrganizationM',
+                                    label: 'Another label'
+                                },
+                                children: [],
+                                nodeId: expect.any(Number),
+                                expanded: true
+                            }
+                        ],
+                        nodeId: expect.any(Number),
+                        expanded: true
+                    }
+                ],
+                nodeId: expect.any(Number),
+                expanded: true,
+                root: true,
+                rootIndex: 2
+            }
+        ];
+        expect(component.find(ReactSortableTree).prop('treeData')).toEqual(treeDataWithUpdatedEntity);
+    });
+});

package/src/components/HierarchyPathsView/__tests__/IntegrationHierarchyPathsView.test.tsx

@@ -0,0 +1,47 @@
+import React, {ReactNode} from 'react';
+import {Provider} from 'react-redux';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {getPathsTree, HierarchyPathsViewConfig, ProfileViewTypes} from '@reltio/mdm-sdk';
+import {HierarchyPathsView} from '../HierarchyPathsView';
+import {createInitialState} from './data/store.data';
+import {createTestStore} from '../../../../../../__mocks__/store-utils';
+import {createTreePaths} from './data/treePaths.data';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getPathsTree: jest.fn()
+}));
+
+const defaultProps = {
+    config: {
+        point: 'com.reltio.plugins.ui.view',
+        class: ProfileViewTypes.HierarchyPaths,
+        id: 'com.reltio.plugins.entity.HierarchyPathsView.78fe-51a8-c9d00c59',
+        caption: 'Hierarchy Paths View Test',
+        graph: {
+            type: 'configuration/graphTypes/PharmaCompanyHierarchy'
+        }
+    } as HierarchyPathsViewConfig
+};
+
+const setUp = ({props = defaultProps, initialState = createInitialState()} = {}) => {
+    const user = userEvent.setup();
+    const store = createTestStore(initialState);
+    const Providers = ({children}: {children: ReactNode}) => <Provider store={store}>{children}</Provider>;
+    return {...render(<HierarchyPathsView {...props} />, {wrapper: Providers}), user};
+};
+
+describe('HierarchyPathsView integration tests', () => {
+    beforeEach(() => {
+        (getPathsTree as jest.Mock).mockResolvedValue(createTreePaths());
+    });
+
+    it('should show loading indicator and hide it after tree is loaded', async () => {
+        setUp();
+        expect(screen.getByTestId('reltio-linear-load-indicator')).toBeInTheDocument();
+        expect(screen.queryByText('MainRoot Test 100 levels')).not.toBeInTheDocument();
+        expect(await screen.findByText('MainRoot Test 100 levels')).toBeInTheDocument();
+        expect(screen.queryByTestId('reltio-linear-load-indicator')).not.toBeInTheDocument();
+    });
+});