@reltio/interactions 1.4.1585 → 1.4.1586-mui5

package/src/InteractionsTableView/__tests__/InteractionsTableView.test.js

@@ -0,0 +1,570 @@
+import React from 'react';
+import {act, render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {mount} from 'enzyme';
+import * as components from '@reltio/components';
+import {EmptyStub} from '@reltio/components';
+import mdmModule from '@reltio/mdm-module';
+import * as reactRedux from 'react-redux';
+import InteractionsTableView from '../index';
+import {DataTypes, getInteractions} from '@reltio/mdm-sdk';
+import * as tableHelpers from '../helpers/tableHelpers';
+import {
+    ACTORS_COLUMN_ID,
+    ATTRIBUTES_COLUMN_ID,
+    DEFAULT_COLUMNS,
+    INTERACTION_TYPE_COLUMN_ID
+} from '../helpers/tableHelpers';
+import * as InteractionsTable from '../InteractionsTable/InteractionsTable';
+import * as InteractionsTableHeader from '../InteractionsTableHeader/InteractionsTableHeader';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual('@reltio/mdm-sdk'),
+    getInteractions: jest.fn()
+}));
+
+describe('InteractionTableView tests', () => {
+    const INTERACTIONS_MOCK = {
+        interactions: [
+            {
+                uri: 'interactions/1',
+                type: 'configuration/interactionTypes/1',
+                timestamp: 132234324525
+            }
+        ],
+        totalFetched: 1
+    };
+    const COLUMNS_DATA_MOCK = [
+        {
+            id: 'timestamp',
+            dataTypeDefinition: {
+                type: DataTypes.TYPE_TIMESTAMP
+            }
+        },
+        {
+            id: INTERACTION_TYPE_COLUMN_ID,
+            dataTypeDefinition: {
+                type: DataTypes.TYPE_SELECT
+            }
+        },
+        {
+            id: ACTORS_COLUMN_ID,
+            dataTypeDefinition: {
+                type: DataTypes.TYPE_STRING
+            }
+        },
+        {id: ATTRIBUTES_COLUMN_ID}
+    ];
+
+    let resolveSavedState;
+    let resolveInteractions;
+    let InteractionsTableHeaderSpy;
+    let getColumnsDataSpy;
+    beforeAll(() => {
+        InteractionsTableHeaderSpy = jest.spyOn(InteractionsTableHeader, 'default').mockImplementation(EmptyStub);
+        jest.spyOn(InteractionsTable, 'default').mockImplementation(EmptyStub);
+        getInteractions.mockImplementation(
+            () =>
+                new Promise((_resolve) => {
+                    resolveInteractions = _resolve;
+                })
+        );
+        getColumnsDataSpy = jest.spyOn(tableHelpers, 'getColumnsData').mockReturnValue(COLUMNS_DATA_MOCK);
+    });
+
+    const metadata = {
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/1',
+                label: 'EntityType1'
+            },
+            {
+                uri: 'configuration/entityTypes/2',
+                label: 'EntityType2'
+            }
+        ],
+        interactionTypes: [
+            {
+                uri: 'configuration/interactionTypes/1',
+                label: 'InteractionType',
+                memberTypes: [
+                    {
+                        objectTypeURI: 'configuration/entityTypes/1'
+                    }
+                ]
+            },
+            {
+                uri: 'configuration/interactionTypes/2',
+                label: 'InteractionType',
+                memberTypes: [
+                    {
+                        objectTypeURI: 'configuration/entityTypes/1'
+                    }
+                ]
+            }
+        ]
+    };
+    const entity = {
+        type: 'configuration/entityTypes/1',
+        uri: 'entities/1'
+    };
+    let entitySpy;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector({}));
+        entitySpy = jest.spyOn(mdmModule.selectors, 'getEntity').mockReturnValue(entity);
+        jest.spyOn(mdmModule.selectors, 'getMetadata').mockReturnValue(metadata);
+    });
+
+    const props = {
+        config: {
+            caption: 'Interactions',
+            sortOrder: 'asc'
+        },
+        getSavedState: jest.fn(
+            () =>
+                new Promise((_resolve) => {
+                    resolveSavedState = _resolve;
+                })
+        ),
+        saveState: jest.fn()
+    };
+
+    it('should render correctly', async () => {
+        const wrapper = mount(<InteractionsTableView {...props} />);
+        await act(async () => {
+            resolveSavedState(null);
+        });
+        await act(async () => {
+            resolveInteractions(INTERACTIONS_MOCK);
+        });
+        wrapper.update();
+
+        expect(wrapper.find(InteractionsTableHeader.default).props()).toMatchObject({
+            title: props.config.caption,
+            total: INTERACTIONS_MOCK.totalFetched,
+            columnsData: COLUMNS_DATA_MOCK,
+            selectedColumns: DEFAULT_COLUMNS,
+            filtersEnabled: false,
+            interactionTypes: metadata.interactionTypes,
+            currentInteractionType: null
+        });
+        expect(wrapper.find(InteractionsTable.default).props()).toMatchObject({
+            columnsData: COLUMNS_DATA_MOCK,
+            interactions: INTERACTIONS_MOCK.interactions,
+            metadata: metadata,
+            filters: null,
+            sorting: {
+                order: 'asc',
+                field: 'timestamp'
+            }
+        });
+        expect(wrapper.find(components.BasicTablePagination).props()).toMatchObject({
+            count: INTERACTIONS_MOCK.totalFetched,
+            rowsPerPage: 15,
+            page: 0
+        });
+    });
+
+    it('should request interactions on current interaction type change', async () => {
+        const wrapper = mount(<InteractionsTableView {...props} />);
+        await act(async () => {
+            resolveSavedState(null);
+        });
+
+        expect(getInteractions).toBeCalledWith({
+            entityUri: entity.uri,
+            offset: 0,
+            max: 15,
+            filter: '',
+            sort: 'timestamp',
+            order: 'asc'
+        });
+        await act(async () => {
+            resolveInteractions(INTERACTIONS_MOCK);
+        });
+
+        act(() => {
+            wrapper.find(InteractionsTableHeader.default).prop('onInteractionTypeChange')(
+                'configuration/interactionTypes/1'
+            );
+        });
+        expect(getInteractions).toBeCalledWith({
+            entityUri: entity.uri,
+            offset: 0,
+            max: 15,
+            filter: "equals(type,'configuration/interactionTypes/1')",
+            sort: 'timestamp',
+            order: 'asc'
+        });
+    });
+
+    it('should not request interactions on toggle filtering', async () => {
+        const wrapper = mount(<InteractionsTableView {...props} />);
+        await act(async () => {
+            resolveSavedState(null);
+        });
+        await act(async () => {
+            resolveInteractions(INTERACTIONS_MOCK);
+        });
+
+        getInteractions.mockClear();
+        act(() => {
+            wrapper.find(InteractionsTableHeader.default).prop('onToggleFilters')();
+        });
+        expect(getInteractions).not.toBeCalled();
+        act(() => {
+            wrapper.find(InteractionsTableHeader.default).prop('onToggleFilters')();
+        });
+        expect(getInteractions).not.toBeCalled();
+    });
+
+    it('should not fail if entity is null', () => {
+        const wrapper = mount(<InteractionsTableView {...props} entity={null} />);
+        expect(wrapper).not.toBe(null);
+    });
+
+    it('should send desc sorting by default', async () => {
+        mount(<InteractionsTableView {...props} config={{caption: 'Interactions'}} />);
+        await act(async () => {
+            resolveSavedState(null);
+        });
+        expect(getInteractions).toBeCalledWith({
+            entityUri: entity.uri,
+            offset: 0,
+            max: 15,
+            filter: '',
+            sort: 'timestamp',
+            order: 'desc'
+        });
+    });
+
+    it('should reset page on entity change', async () => {
+        const user = userEvent.setup();
+        const {rerender} = render(<InteractionsTableView {...props} />);
+        await act(async () => {
+            resolveSavedState(null);
+        });
+        await act(async () => {
+            resolveInteractions({...INTERACTIONS_MOCK, totalFetched: 100});
+        });
+        await user.click(screen.getByRole('button', {name: 'Go to next page'}));
+        expect(screen.getByText('16-30 of 100')).toBeInTheDocument();
+        entitySpy.mockReturnValue({
+            uri: 'entities/2',
+            type: 'configuration/entityTypes/2'
+        });
+        rerender(<InteractionsTableView {...props} />);
+        await act(async () => {
+            resolveInteractions({...INTERACTIONS_MOCK, totalFetched: 100});
+        });
+        expect(screen.getByText('1-15 of 100')).toBeInTheDocument();
+    });
+
+    describe('saved state scenario', () => {
+        describe('apply saved state behavior', () => {
+            it('should request saved state and apply it on mount', async () => {
+                render(<InteractionsTableView {...props} />);
+                expect(props.getSavedState).toBeCalled();
+                expect(getInteractions).not.toBeCalled();
+                const savedState = {
+                    [entity.type]: {
+                        currentInteractionType: null,
+                        visibleColumns: ['timestamp', INTERACTION_TYPE_COLUMN_ID],
+                        filters: {
+                            [INTERACTION_TYPE_COLUMN_ID]: {
+                                filter: 'equals',
+                                value: 'configuration/interactionTypes/2'
+                            }
+                        },
+                        sorting: {
+                            field: 'timestamp',
+                            order: 'asc'
+                        }
+                    }
+                };
+                await act(async () => {
+                    resolveSavedState(savedState);
+                });
+                expect(getInteractions).toBeCalledWith({
+                    entityUri: entity.uri,
+                    offset: 0,
+                    max: 15,
+                    filter: "equals(type,'configuration/interactionTypes/2')",
+                    sort: 'timestamp',
+                    order: 'asc'
+                });
+            });
+
+            it('should change saved state and apply it on entity type change', async () => {
+                const {rerender} = render(<InteractionsTableView {...props} />);
+                const savedState = {
+                    ['configuration/entityTypes/2']: {
+                        currentInteractionType: null,
+                        visibleColumns: ['timestamp', INTERACTION_TYPE_COLUMN_ID],
+                        filters: {
+                            [INTERACTION_TYPE_COLUMN_ID]: {
+                                filter: 'equals',
+                                value: 'configuration/interactionTypes/2'
+                            }
+                        },
+                        sorting: {
+                            field: 'timestamp',
+                            order: 'asc'
+                        }
+                    }
+                };
+                await act(async () => {
+                    resolveSavedState(savedState);
+                });
+                await act(async () => {
+                    resolveInteractions(INTERACTIONS_MOCK);
+                });
+
+                props.getSavedState.mockClear();
+                getInteractions.mockClear();
+                entitySpy.mockReturnValue({
+                    uri: 'entities/2',
+                    type: 'configuration/entityTypes/2'
+                });
+                rerender(<InteractionsTableView {...props} />);
+                expect(props.getSavedState).not.toBeCalled();
+                expect(getInteractions).toBeCalledWith({
+                    entityUri: 'entities/2',
+                    offset: 0,
+                    max: 15,
+                    filter: "equals(type,'configuration/interactionTypes/2')",
+                    sort: 'timestamp',
+                    order: 'asc'
+                });
+            });
+
+            it('should not apply saved state if no appropriate interactions type', async () => {
+                getColumnsDataSpy.mockRestore();
+                render(<InteractionsTableView {...props} />);
+                const savedState = {
+                    ['configuration/entityTypes/1']: {
+                        currentInteractionType: 'configuration/interactionTypes/NON_EXISTING_TYPE',
+                        visibleColumns: ['timestamp', INTERACTION_TYPE_COLUMN_ID],
+                        filters: {
+                            [INTERACTION_TYPE_COLUMN_ID]: {
+                                filter: 'equals',
+                                value: 'configuration/interactionTypes/NON_EXISTING_TYPE'
+                            }
+                        },
+                        sorting: {
+                            field: 'timestamp',
+                            order: 'asc'
+                        }
+                    }
+                };
+                await act(async () => {
+                    resolveSavedState(savedState);
+                });
+                await act(async () => {
+                    resolveInteractions(INTERACTIONS_MOCK);
+                });
+                expect(getInteractions).toBeCalledWith({
+                    entityUri: 'entities/1',
+                    offset: 0,
+                    max: 15,
+                    filter: '',
+                    sort: 'timestamp',
+                    order: 'asc'
+                });
+                getColumnsDataSpy.mockReturnValue(COLUMNS_DATA_MOCK);
+            });
+
+            it('should preserve changed state locally on entity type change', async () => {
+                InteractionsTableHeaderSpy.mockImplementation(({onInteractionTypeChange}) => (
+                    <div onClick={() => onInteractionTypeChange('configuration/interactionTypes/1')} role="header" />
+                ));
+                const user = userEvent.setup();
+                const {rerender} = render(<InteractionsTableView {...props} />);
+                const savedState = {
+                    ['configuration/entityTypes/2']: {
+                        currentInteractionType: null,
+                        visibleColumns: ['timestamp', INTERACTION_TYPE_COLUMN_ID],
+                        filters: {
+                            [INTERACTION_TYPE_COLUMN_ID]: {
+                                filter: 'equals',
+                                value: 'configuration/interactionTypes/2'
+                            }
+                        },
+                        sorting: {
+                            field: 'timestamp',
+                            order: 'asc'
+                        }
+                    }
+                };
+                await act(async () => {
+                    resolveSavedState(savedState);
+                });
+                await act(async () => {
+                    resolveInteractions(INTERACTIONS_MOCK);
+                });
+
+                await user.click(screen.getByRole('header'));
+                await act(async () => {
+                    resolveInteractions({interactions: [], totalFetched: 0});
+                });
+
+                entitySpy.mockReturnValue({
+                    uri: 'entities/2',
+                    type: 'configuration/entityTypes/2'
+                });
+                rerender(<InteractionsTableView {...props} />);
+                await act(async () => {
+                    resolveInteractions({interactions: [], totalFetched: 0});
+                });
+                entitySpy.mockReturnValue({
+                    uri: 'entities/1',
+                    type: 'configuration/entityTypes/1'
+                });
+                rerender(<InteractionsTableView {...props} />);
+                expect(getInteractions).toHaveBeenLastCalledWith({
+                    entityUri: 'entities/1',
+                    offset: 0,
+                    max: 15,
+                    filter: "equals(type,'configuration/interactionTypes/1')",
+                    sort: 'timestamp',
+                    order: 'asc'
+                });
+                InteractionsTableHeaderSpy.mockImplementation(EmptyStub);
+            });
+
+            it('should work correctly on entity type change with no saved state', async () => {
+                const {rerender} = render(<InteractionsTableView {...props} />);
+                await act(async () => {
+                    resolveSavedState(null);
+                });
+                await act(async () => {
+                    resolveInteractions(INTERACTIONS_MOCK);
+                });
+
+                getInteractions.mockClear();
+                entitySpy.mockReturnValue({
+                    uri: 'entities/2',
+                    type: 'configuration/entityTypes/2'
+                });
+                rerender(<InteractionsTableView {...props} />);
+                expect(getInteractions).toBeCalledWith({
+                    entityUri: 'entities/2',
+                    offset: 0,
+                    max: 15,
+                    filter: '',
+                    sort: 'timestamp',
+                    order: 'asc'
+                });
+            });
+        });
+
+        describe('save state behavior', () => {
+            it('should call props.saveState on interaction type change', async () => {
+                const wrapper = mount(<InteractionsTableView {...props} />);
+                await act(async () => {
+                    resolveSavedState(null);
+                });
+                act(() => {
+                    wrapper.find(InteractionsTableHeader.default).prop('onInteractionTypeChange')(
+                        'configuration/interactionTypes/1'
+                    );
+                });
+                expect(props.saveState).toBeCalledWith({
+                    'configuration/entityTypes/1': {
+                        currentInteractionType: 'configuration/interactionTypes/1',
+                        visibleColumnsForInteractionTypes: {
+                            null: DEFAULT_COLUMNS,
+                            'configuration/interactionTypes/1': ['timestamp', ACTORS_COLUMN_ID]
+                        },
+                        filters: null,
+                        sorting: {
+                            field: 'timestamp',
+                            order: 'asc'
+                        }
+                    }
+                });
+            });
+
+            it('should call props.saveState on columns change', async () => {
+                const wrapper = mount(<InteractionsTableView {...props} />);
+                await act(async () => {
+                    resolveSavedState(null);
+                });
+                act(() => {
+                    wrapper.find(InteractionsTableHeader.default).prop('onChangeColumns')(['timestamp']);
+                });
+                expect(props.saveState).toBeCalledWith({
+                    'configuration/entityTypes/1': {
+                        currentInteractionType: null,
+                        visibleColumnsForInteractionTypes: {
+                            null: ['timestamp']
+                        },
+                        filters: null,
+                        sorting: {
+                            field: 'timestamp',
+                            order: 'asc'
+                        }
+                    }
+                });
+            });
+
+            it('should call props.saveState on filters change', async () => {
+                const wrapper = mount(<InteractionsTableView {...props} />);
+                await act(async () => {
+                    resolveSavedState(null);
+                });
+                act(() => {
+                    wrapper.find(InteractionsTable.default).prop('onFilter')({
+                        columnId: INTERACTION_TYPE_COLUMN_ID,
+                        filter: {
+                            value: 'configuration/interactionTypes/1',
+                            filter: 'equals'
+                        }
+                    });
+                });
+                expect(props.saveState).toBeCalledWith({
+                    'configuration/entityTypes/1': {
+                        currentInteractionType: null,
+                        visibleColumnsForInteractionTypes: {
+                            null: DEFAULT_COLUMNS
+                        },
+                        filters: {
+                            [INTERACTION_TYPE_COLUMN_ID]: {
+                                value: 'configuration/interactionTypes/1',
+                                filter: 'equals'
+                            }
+                        },
+                        sorting: {
+                            field: 'timestamp',
+                            order: 'asc'
+                        }
+                    }
+                });
+            });
+
+            it('should call props.saveState on sorting change', async () => {
+                const wrapper = mount(<InteractionsTableView {...props} />);
+                await act(async () => {
+                    resolveSavedState(null);
+                });
+                act(() => {
+                    wrapper.find(InteractionsTable.default).prop('onSort')('timestamp');
+                });
+                expect(props.saveState).toBeCalledWith({
+                    'configuration/entityTypes/1': {
+                        currentInteractionType: null,
+                        visibleColumnsForInteractionTypes: {
+                            null: DEFAULT_COLUMNS
+                        },
+                        filters: null,
+                        sorting: {
+                            field: 'timestamp',
+                            order: 'desc'
+                        }
+                    }
+                });
+            });
+        });
+    });
+});