@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfilePerspectiveView/__tests__/IntegrationProfilePerspective.test.tsx

@@ -0,0 +1,417 @@
+import React, {ReactNode} from 'react';
+import {mockResizeObserver} from 'jsdom-testing-mocks';
+import {act, render, screen, waitFor, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {Provider} from 'react-redux';
+import {ActionsHookProvider, EntityLoadingIndicationProvider} from '@reltio/components';
+import {profile} from '@reltio/mdm-module';
+import {
+    getPagedEntity,
+    ProfileViewTypes,
+    getTotals,
+    getFilteredEntities,
+    Mode,
+    ProfilePerspectiveConfig,
+    getEntityUpdatedTime
+} from '@reltio/mdm-sdk';
+import * as mdmSdkModule from '@reltio/mdm-sdk';
+import * as BackgroundDelay from '../hooks/data/backgroundUpdateDalay';
+import {createActionsHookExtension, createTestStore} from '../../../../../../__mocks__/store-utils';
+import {ProfilePerspectiveView} from '../ProfilePerspectiveView';
+import {createInitialState} from './data/store.data';
+import {createEntities} from './data/entities.data';
+import {TestStylesProvider} from '../../../../../../test/TestStylesProvider';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getPagedEntity: jest.fn(),
+    getAllUsersForTenant: jest.fn().mockReturnValue(Promise.resolve([])),
+    saveTemporaryEntity: jest.fn().mockReturnValue('entities/123'),
+    getTotals: jest.fn(),
+    getFilteredEntities: jest.fn(),
+    getEntityUpdatedTime: jest.fn().mockResolvedValue({updatedTime: '678678676786'}),
+    entityCumulativeUpdate: jest.fn().mockResolvedValue({
+        uri: 'entities/1ywlDdLM',
+        type: 'configuration/entityTypes/HCP',
+        label: 'Entity label',
+        updatedTime: 678678676786
+    })
+}));
+
+const defaultConfig: ProfilePerspectiveConfig = {
+    id: 'ProfileView',
+    layout: [{minHeight: 10, x: 0, width: 2, y: 0, id: 'attributesView', height: 10}],
+    views: [
+        {
+            class: ProfileViewTypes.Attributes,
+            'react-class': 'AttributesView',
+            includeUris: ['configuration/entityTypes/HCP/attributes/SimpleRequiredString'],
+            point: 'com.reltio.plugins.ui.view' as const,
+            id: 'attributesView'
+        }
+    ],
+    sidePanelViews: []
+};
+
+const defaultSavedState = {
+    views: defaultConfig.views,
+    layout: defaultConfig.layout
+};
+
+const defaultProps = {
+    config: defaultConfig,
+    saveState: jest.fn(),
+    getSavedState: jest.fn().mockResolvedValue(defaultSavedState),
+    commentId: '000066U'
+};
+
+const setUp = ({props = defaultProps, initialState = createInitialState()} = {}) => {
+    const user = userEvent.setup();
+    const {getActionsHookExtension, actionsHook} = createActionsHookExtension();
+    const store = createTestStore(initialState, [getActionsHookExtension()]);
+    jest.spyOn(store, 'dispatch');
+
+    const Providers = ({children}: {children: ReactNode}) => (
+        <Provider store={store}>
+            <TestStylesProvider>
+                <ActionsHookProvider hook={actionsHook}>
+                    <EntityLoadingIndicationProvider>{children}</EntityLoadingIndicationProvider>
+                </ActionsHookProvider>
+            </TestStylesProvider>
+        </Provider>
+    );
+    return {...render(<ProfilePerspectiveView {...props} />, {wrapper: Providers}), store, user};
+};
+
+describe('ProfilePerspectiveView integration tests', () => {
+    const resizeObserver = mockResizeObserver();
+    const resizeElement = (element, {width = 400, height = 400}) => {
+        resizeObserver.mockElementSize(element, {contentBoxSize: {inlineSize: width, blockSize: height}});
+        act(() => {
+            resizeObserver.resize();
+        });
+    };
+
+    beforeEach(() => {
+        (getPagedEntity as jest.Mock).mockImplementation(() => Promise.resolve([]));
+        (getTotals as jest.Mock).mockResolvedValue({total: 483});
+        (getFilteredEntities as jest.Mock).mockResolvedValue(createEntities());
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should create profiles without errors', async () => {
+        const saveTemporaryEntity = jest.spyOn(mdmSdkModule, 'saveTemporaryEntity');
+        const initialState = createInitialState({isEmptyProfile: true, mode: Mode.Editing});
+
+        const {store, user} = setUp({initialState});
+
+        store.dispatch(
+            profile.entity.actions.entityCreationRequested({entityTypeUri: 'configuration/entityTypes/HCP'})
+        );
+        const grid = await screen.findByTestId('reltio-profile-grid');
+        resizeObserver.mockElementSize(grid, {contentBoxSize: {inlineSize: 400, blockSize: 400}});
+        act(() => {
+            resizeObserver.resize();
+        });
+
+        await screen.findByTestId('attributesView');
+        const input = screen.getByRole('textbox');
+        await user.type(input, 'abc');
+        await user.click(screen.getByRole('button', {name: 'Save'}));
+        await waitFor(() => expect(saveTemporaryEntity).toHaveBeenCalled());
+        expect(saveTemporaryEntity.mock.calls[0][0]).toMatchObject({
+            attributes: {
+                SimpleRequiredString: [
+                    {
+                        type: 'configuration/entityTypes/HCP/attributes/SimpleRequiredString',
+                        uri: expect.any(String),
+                        value: 'abc'
+                    }
+                ]
+            },
+            type: 'configuration/entityTypes/HCP',
+            uri: expect.any(String),
+            timestamp: expect.any(Number)
+        });
+    });
+
+    it('should show empty state and loading indicator for profile layout loading', async () => {
+        setUp();
+        expect(screen.queryByText('No data to display.')).toBeInTheDocument();
+        expect(screen.queryByTestId('reltio-linear-load-indicator')).toBeInTheDocument();
+        expect(screen.queryByText('Entity label')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('reltio-profile-grid')).not.toBeInTheDocument();
+        await waitFor(() => expect(defaultProps.getSavedState).toHaveBeenCalled());
+        expect(screen.queryByText('No data to display.')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('reltio-linear-load-indicator')).not.toBeInTheDocument();
+        expect(screen.queryByText('Entity label')).toBeInTheDocument();
+        expect(screen.queryByTestId('reltio-profile-grid')).toBeInTheDocument();
+    });
+
+    it('should render Reset button and reset layout correct', async () => {
+        const savedState = {
+            'configuration/entityTypes/HCP': {
+                views: [{...defaultConfig.views[0], id: 'attributesView1'}],
+                layout: [{minHeight: 5, x: 0, width: 2, y: 0, id: 'attributesView1', height: 5}],
+                configHash: '48722d402695ad36168a618c521c5c6c0d688b92'
+            }
+        };
+        const props = {...defaultProps, getSavedState: jest.fn().mockResolvedValue(savedState)};
+        const {user} = setUp({props});
+        const grid = await screen.findByTestId('reltio-profile-grid');
+        resizeObserver.mockElementSize(grid, {contentBoxSize: {inlineSize: 400, blockSize: 400}});
+        act(() => {
+            resizeObserver.resize();
+        });
+
+        await screen.findByTestId('attributesView1');
+        expect(screen.queryByTestId('attributesView')).not.toBeInTheDocument();
+
+        await user.click(screen.getByTestId('reltio-profile-header-menu'));
+        await user.click(
+            screen.getByRole('menuitem', {name: 'Reset layout Restore the default layout without saving any changes'})
+        );
+        await screen.findByTestId('attributesView');
+        expect(screen.queryByTestId('attributesView1')).not.toBeInTheDocument();
+
+        await user.click(screen.getByRole('button', {name: 'Undo'}));
+        await screen.findByTestId('attributesView1');
+        expect(screen.queryByTestId('attributesView0')).not.toBeInTheDocument();
+    });
+
+    it('should show empty state while navigating between entities', async () => {
+        let resolveGetFilteredEntities;
+        (getFilteredEntities as jest.Mock).mockImplementation(
+            () =>
+                new Promise((resolve) => {
+                    resolveGetFilteredEntities = () => resolve(createEntities());
+                })
+        );
+
+        const {user} = setUp();
+        await waitFor(() => expect(defaultProps.getSavedState).toHaveBeenCalled());
+        expect(screen.queryByText('Loading')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('reltio-profile-grid')).toBeInTheDocument();
+        await user.click(within(screen.queryByLabelText('Go to next profile')).queryByRole('button'));
+        expect(screen.queryByText('Loading')).toBeInTheDocument();
+        expect(screen.queryByTestId('reltio-profile-grid')).not.toBeInTheDocument();
+
+        await act(async () => {
+            resolveGetFilteredEntities();
+        });
+
+        expect(screen.queryByText('Loading')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('reltio-profile-grid')).toBeInTheDocument();
+    });
+
+    describe('Frozen layout behavior', () => {
+        const layout = [
+            {x: 0, width: 2, y: 0, id: 'attributesView', height: 1, autosizing: true},
+            {x: 3, width: 1, y: 0, id: 'attributesView2', height: 1, autosizing: true}
+        ];
+        const views = [
+            {
+                class: ProfileViewTypes.Attributes,
+                includeUris: ['configuration/entityTypes/HCP/attributes/SimpleRequiredString'],
+                point: 'com.reltio.plugins.ui.view' as const,
+                id: 'attributesView'
+            },
+            {
+                class: ProfileViewTypes.Attributes,
+                includeUris: ['configuration/entityTypes/HCP/attributes/SimpleString'],
+                point: 'com.reltio.plugins.ui.view' as const,
+                id: 'attributesView2'
+            }
+        ];
+
+        it('should freeze layout if "frozen" is true', async () => {
+            const frozen = true;
+            const props = {
+                ...defaultProps,
+                config: {
+                    ...defaultProps.config,
+                    views,
+                    layout,
+                    frozen
+                }
+            };
+            setUp({props});
+            const grid = await screen.findByTestId('reltio-profile-grid');
+            resizeElement(grid, {width: 1200, height: 1000});
+            await screen.findByTestId('attributesView');
+            const attributesView = screen.getByTestId('attributesView');
+            const autosizeContainer = within(attributesView).getByTestId('profile-view-container');
+            const initialHeight = attributesView.style.height;
+            resizeElement(autosizeContainer, {height: 400});
+            await waitFor(() => expect(attributesView.style.height).not.toBe(initialHeight));
+
+            const attributesView2 = screen.getByTestId('attributesView2');
+            expect(attributesView.style.height).toBe(attributesView2.style.height);
+            expect(attributesView).toHaveClass('static');
+            expect(attributesView2).toHaveClass('static');
+        });
+
+        it('should not freeze layout if "frozen" is falsy', async () => {
+            const frozen = undefined;
+            const props = {
+                ...defaultProps,
+                config: {
+                    ...defaultProps.config,
+                    views,
+                    layout,
+                    frozen
+                }
+            };
+            setUp({props});
+            const grid = await screen.findByTestId('reltio-profile-grid');
+            resizeElement(grid, {width: 1200, height: 1000});
+            await screen.findByTestId('attributesView');
+            const attributesView = screen.getByTestId('attributesView');
+            const autosizeContainer = within(attributesView).getByTestId('profile-view-container');
+            const initialHeight = attributesView.style.height;
+            resizeElement(autosizeContainer, {height: 400});
+            await waitFor(() => expect(attributesView.style.height).not.toBe(initialHeight));
+
+            const attributesView2 = screen.getByTestId('attributesView2');
+            expect(attributesView.style.height).not.toBe(attributesView2.style.height);
+            expect(attributesView).not.toHaveClass('static');
+            expect(attributesView2).not.toHaveClass('static');
+        });
+
+        it('should not set the same height for right column element as for rest elements in row if it has different y coordinate', async () => {
+            const layout = [
+                {x: 0, width: 2, y: 0, id: 'attributesView', height: 1, autosizing: true},
+                {x: 2, width: 1, y: 0, id: 'attributesView2', height: 1, autosizing: true},
+                {x: 3, width: 1, y: 1, id: 'attributesView3', height: 1, autosizing: true}
+            ];
+            const views = [
+                {
+                    class: ProfileViewTypes.Attributes,
+                    includeUris: ['configuration/entityTypes/HCP/attributes/SimpleRequiredString'],
+                    point: 'com.reltio.plugins.ui.view' as const,
+                    id: 'attributesView'
+                },
+                {
+                    class: ProfileViewTypes.Attributes,
+                    includeUris: ['configuration/entityTypes/HCP/attributes/SimpleString'],
+                    point: 'com.reltio.plugins.ui.view' as const,
+                    id: 'attributesView2'
+                },
+                {
+                    class: ProfileViewTypes.Attributes,
+                    includeUris: ['configuration/entityTypes/HCP/attributes/SimpleString'],
+                    point: 'com.reltio.plugins.ui.view' as const,
+                    id: 'attributesView3'
+                }
+            ];
+            const frozen = true;
+            const props = {
+                ...defaultProps,
+                config: {
+                    ...defaultProps.config,
+                    views,
+                    layout,
+                    frozen
+                }
+            };
+            setUp({props});
+            const grid = await screen.findByTestId('reltio-profile-grid');
+            resizeElement(grid, {width: 1200, height: 1000});
+            await screen.findByTestId('attributesView');
+            const attributesView = screen.getByTestId('attributesView');
+            const autosizeContainer = within(attributesView).getByTestId('profile-view-container');
+            const initialHeight = attributesView.style.height;
+            resizeElement(autosizeContainer, {height: 400});
+            await waitFor(() => expect(attributesView.style.height).not.toBe(initialHeight));
+
+            const attributesView2 = screen.getByTestId('attributesView2');
+            const attributesView3 = screen.getByTestId('attributesView3');
+            expect(attributesView.style.height).toBe(attributesView2.style.height);
+            expect(attributesView.style.height).not.toBe(attributesView3.style.height);
+            expect(attributesView2.style.height).not.toBe(attributesView3.style.height);
+            expect(attributesView).toHaveClass('static');
+            expect(attributesView2).toHaveClass('static');
+            expect(attributesView3).toHaveClass('static');
+        });
+    });
+
+    describe('Background update indicator for edit entity', () => {
+        const setUpForBackgroundUpdate = async (initialState?) => {
+            const {store, user} = setUp({initialState});
+            act(() => {
+                store.dispatch(profile.mode.actions.modeUpdated(Mode.Editing));
+            });
+            await waitFor(() => expect(defaultProps.getSavedState).toHaveBeenCalled());
+            expect(screen.queryByText('Loading')).not.toBeInTheDocument();
+
+            const grid = await screen.findByTestId('reltio-profile-grid');
+            resizeObserver.mockElementSize(grid, {contentBoxSize: {inlineSize: 400, blockSize: 400}});
+            act(() => {
+                resizeObserver.resize();
+            });
+
+            await screen.findByTestId('attributesView');
+            const input = screen.getByRole('textbox');
+            await user.type(input, 'abc');
+            await user.click(screen.getByTestId('reltio-profile-save-profile'));
+
+            return {store, user};
+        };
+
+        it('should open background indicator with loading state after saving profile', async () => {
+            await setUpForBackgroundUpdate();
+            await screen.findByText('Loading background process...');
+        });
+
+        it('should close background indicator with loading state after clicking on close button', async () => {
+            const {user} = await setUpForBackgroundUpdate();
+            await screen.findByText('Loading background process...');
+            await user.click(screen.getByLabelText('Close'));
+            expect(screen.queryByText('Loading background process...')).not.toBeInTheDocument();
+        });
+
+        it('should open background indicator with error state after saving new profile', async () => {
+            jest.spyOn(BackgroundDelay, 'getBackgroundUpdateDelay').mockReturnValue(10);
+            const {user} = await setUpForBackgroundUpdate();
+            await screen.findByText('Loading background process...');
+            await screen.findByText(
+                'UI attempted to check for updates but no update received in the last 30 seconds. Try refreshing the page manually.'
+            );
+            await user.click(screen.getByLabelText('Close'));
+            expect(screen.queryByText('Loading background process...')).not.toBeInTheDocument();
+        });
+
+        it('should open background indicator with success state after saving existing profile', async () => {
+            jest.spyOn(BackgroundDelay, 'getBackgroundUpdateDelay').mockReturnValue(10);
+            const {user} = await setUpForBackgroundUpdate();
+            (getEntityUpdatedTime as jest.Mock).mockResolvedValueOnce({updatedTime: '678678676788'});
+            await screen.findByText('Loading background process...');
+            await screen.findByTestId('background-update-success');
+
+            await user.click(screen.getByLabelText('Close'));
+            expect(screen.queryByTestId('background-update-success')).not.toBeInTheDocument();
+        });
+
+        it('should refresh entity and close background indicator after saving new profile if autoUpdateInReadMode is true', async () => {
+            jest.spyOn(BackgroundDelay, 'getBackgroundUpdateDelay').mockReturnValue(10);
+
+            const initialState = createInitialState();
+            initialState.ui.newConfig.properties.profileCheckUpdate.autoUpdateInReadMode = [
+                'configuration/entityTypes/HCP'
+            ];
+            const {store} = await setUpForBackgroundUpdate(initialState);
+            (getEntityUpdatedTime as jest.Mock).mockResolvedValueOnce({updatedTime: '678678676788'});
+            await screen.findByText('Loading background process...');
+            await waitFor(() => expect(screen.queryByText('Loading background process...')).not.toBeInTheDocument());
+            expect(screen.queryByTestId('background-update-success')).not.toBeInTheDocument();
+            await waitFor(() =>
+                expect(store.dispatch).toHaveBeenCalledWith(
+                    profile.entity.actions.loadEntity({uri: 'entities/1ywlDdLM', viewId: null})
+                )
+            );
+        });
+    });
+});