@reltio/components 1.4.2070 → 1.4.2072

package/MetadataTypesSelector/MetadataTypesSelector.test.js

@@ -55,35 +55,16 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React from 'react';
-import { shallow, mount } from 'enzyme';
 import { screen, render, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { act } from 'react-dom/test-utils';
-import TextField from '@mui/material/TextField';
-import { AttributeListItem } from '../AttributeListItem';
-import { Highlighter } from '../Highlighter';
-import { SelectionPopup } from '../SelectionPopup';
-import { rerenderWrapper } from '../test-utils';
-import { ListLabel } from './components/ListLabel';
-import { SelectMetadataTypesList } from './components/SelectMetadataTypesList';
+import { countHiddenItems } from './components/ListLabel/helpers';
 import { MetadataTypesSelector } from './MetadataTypesSelector';
+jest.mock('./components/ListLabel/helpers', function () { return (__assign(__assign({}, jest.requireActual('./components/ListLabel/helpers')), { countHiddenItems: jest.fn() })); });
 var items = [
-    {
-        uri: 'configuration/entityTypes/HCP',
-        label: 'HCP Label',
-        attributes: []
-    },
-    {
-        uri: 'configuration/entityTypes/HCA',
-        attributes: [],
-        label: 'HCA Label',
-        analyticsAttributes: []
-    }
+    { uri: 'configuration/entityTypes/HCP', label: 'HCP Label', attributes: [] },
+    { uri: 'configuration/entityTypes/HCA', attributes: [], label: 'HCA Label' },
+    { uri: 'configuration/entityTypes/Company', attributes: [], label: 'Company Label' }
 ];
-var setUp = function (method, _a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.selectedItemsUris, selectedItemsUris = _c === void 0 ? [] : _c, _d = _b.onChange, onChange = _d === void 0 ? jest.fn() : _d, single = _b.single, placeholder = _b.placeholder, enableEmptyValueUnderline = _b.enableEmptyValueUnderline;
-    return method(React.createElement(MetadataTypesSelector, { items: items, selectedItemsUris: selectedItemsUris, onChange: onChange, single: single, placeholder: placeholder, enableEmptyValueUnderline: enableEmptyValueUnderline, label: "Entity Type", dataReltioId: "entity-type-selector", selectionPopupTitle: 'Select entity types' }));
-};
 var defaultProps = {
     items: items,
     selectedItemsUris: [],
@@ -97,180 +78,202 @@ var setUpRTL = function (props) {
     var user = userEvent.setup();
     return __assign({ user: user }, render(React.createElement(MetadataTypesSelector, __assign({}, defaultProps, props))));
 };
-describe('MetadataTypesSelector tests', function () {
-    it('should render correctly', function () {
-        var selectedItemsUris = ['configuration/entityTypes/HCP'];
-        var wrapper = setUp(shallow, { selectedItemsUris: selectedItemsUris });
-        expect(wrapper.find(TextField)).toHaveLength(1);
-        expect(wrapper.find(TextField).prop('InputProps').readOnly).toBe(true);
-        expect(wrapper.find(SelectionPopup).props()).toMatchObject({
-            title: 'Select entity types',
-            open: false
-        });
-        expect(wrapper.find(SelectMetadataTypesList).props()).toMatchObject({
-            items: [
-                {
-                    item: {
-                        item: items[0]
-                    },
-                    index: 0
-                },
-                {
-                    item: {
-                        item: items[1]
-                    },
-                    index: 1
-                }
-            ],
-            selectedItems: selectedItemsUris
-        });
+describe('Metadata types selector tests', function () {
+    var originalRange = document.createRange;
+    beforeEach(function () {
+        countHiddenItems.mockReturnValue(0);
+        document.createRange = function () {
+            var range = new Range();
+            range.getBoundingClientRect = jest.fn(function () { return ({ width: 0 }); });
+            return range;
+        };
     });
-    it('should filter types on search input change and highlight the searchText', function () {
-        var wrapper = setUp(mount);
-        act(function () {
-            wrapper.find(TextField).prop('onClick')();
+    afterEach(function () {
+        jest.clearAllMocks();
+        document.createRange = originalRange;
+    });
+    it('should render correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, menuItems;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUpRTL({ selectedItemsUris: ['configuration/entityTypes/HCP'] }).user;
+                    screen.getByText('Entity Type');
+                    screen.getAllByText('HCP Label');
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    screen.getByText('Select entity types');
+                    menuItems = screen.getAllByRole('menuitem');
+                    expect(menuItems).toHaveLength(3);
+                    expect(menuItems[0]).toHaveTextContent('HCP Label');
+                    expect(within(menuItems[0]).getByRole('checkbox')).toBeChecked();
+                    expect(menuItems[1]).toHaveTextContent('HCA Label');
+                    expect(within(menuItems[1]).getByRole('checkbox')).not.toBeChecked();
+                    expect(menuItems[2]).toHaveTextContent('Company Label');
+                    expect(within(menuItems[2]).getByRole('checkbox')).not.toBeChecked();
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        expect(wrapper.find(SelectionPopup).prop('open')).toBe(true);
-        wrapper.update();
-        var filterText = 'HCA';
-        act(function () {
-            wrapper.find(SelectionPopup).prop('onSearch')(filterText);
+    }); });
+    it('should filter types on search input change and highlight the searchText', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, menuItems;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUpRTL().user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'HCA')];
+                case 2:
+                    _a.sent();
+                    menuItems = screen.getAllByRole('menuitem');
+                    expect(menuItems).toHaveLength(1);
+                    expect(menuItems[0]).toHaveTextContent('HCA Label');
+                    expect(within(menuItems[0]).getByText('HCA')).toHaveClass('highlight');
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        expect(wrapper.find(SelectMetadataTypesList).prop('items')).toEqual([
-            {
-                item: {
-                    item: __assign(__assign({}, items[1]), { filterText: filterText })
-                },
-                index: 0
+    }); });
+    it('should toggle popup correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUpRTL().user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    screen.getByRole('presentation');
+                    return [4 /*yield*/, user.keyboard('{Escape}')];
+                case 2:
+                    _a.sent();
+                    expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
+                    return [2 /*return*/];
             }
-        ]);
-        var attributeListItems = wrapper.find(AttributeListItem);
-        expect(attributeListItems.length).toBe(1);
-        var highlighter = attributeListItems.find(Highlighter);
-        expect(highlighter.prop('text')).toBe(items[1].label);
-        expect(highlighter.prop('highlight')).toBe(filterText);
-    });
-    it('should toggle popup correctly', function () {
-        var wrapper = setUp(shallow);
-        wrapper.find(TextField).simulate('click');
-        rerenderWrapper(wrapper);
-        expect(wrapper.find(SelectionPopup).prop('open')).toBe(true);
-        wrapper.find(SelectionPopup).prop('onClose')();
-        rerenderWrapper(wrapper);
-        expect(wrapper.find(SelectionPopup).prop('open')).toBe(false);
-    });
-    it('should not render startAdornment if no types selected and placeholder prop is not set', function () {
-        var wrapper = setUp(shallow);
-        expect(wrapper.find(TextField).prop('value')).toBe('');
-        expect(wrapper.find(TextField).prop('InputProps').startAdornment).toBe(null);
+        });
+    }); });
+    it('should not render start adornment if no types selected and placeholder prop is not set', function () {
+        setUpRTL();
+        expect(screen.queryByTestId('metadata-types-selector-start-adornment')).not.toBeInTheDocument();
     });
     it('should render placeholder if no types selected and placeholder prop is set', function () {
-        var wrapper = setUp(shallow, { placeholder: 'All' });
-        expect(wrapper.find(TextField).prop('value')).toBe('');
-        expect(wrapper.find(TextField).prop('InputProps').startAdornment).toStrictEqual(React.createElement("div", { className: "inputText" },
-            React.createElement("div", null, "All")));
-    });
-    it('should set InputProps.disableUnderline as true if there are no types selected and enableEmptyValueUnderline prop is unset', function () {
-        var wrapper = setUp(shallow);
-        expect(wrapper.find(TextField).prop('InputProps').disableUnderline).toBe(true);
-    });
-    it('should set InputProps.disableUnderline as false if there are some selected types', function () {
-        var wrapper = setUp(shallow, { selectedItemsUris: ['configuration/entityTypes/HCP'] });
-        expect(wrapper.find(TextField).prop('InputProps').disableUnderline).toBe(false);
-    });
-    it('should set InputProps.disableUnderline as false if there are no types selected and enableEmptyValueUnderline prop is true', function () {
-        var wrapper = setUp(shallow, { enableEmptyValueUnderline: true });
-        expect(wrapper.find(TextField).prop('InputProps').disableUnderline).toBe(false);
-    });
-    it('should render not empty placeholder value prop if no types selected', function () {
-        var wrapper = setUp(shallow, { placeholder: '123' });
-        expect(wrapper.find(TextField).prop('value')).toBe('');
-        expect(wrapper.find(TextField).prop('InputProps').startAdornment).toStrictEqual(React.createElement("div", { className: "inputText" },
-            React.createElement("div", null, "123")));
+        setUpRTL({ placeholder: 'Placeholder' });
+        screen.getByText('Placeholder');
+        expect(screen.getByRole('textbox')).toHaveValue('');
     });
-    it('should render ListLabel if not all types are selected', function () {
-        var selectedItemsUris = ['configuration/entityTypes/HCP'];
-        var wrapper = setUp(shallow, { selectedItemsUris: selectedItemsUris });
-        expect(wrapper.find(TextField).prop('InputProps').startAdornment).toStrictEqual(React.createElement("div", { className: "inputText" },
-            React.createElement(ListLabel, { list: ['HCP Label'] })));
-        expect(wrapper.find(TextField).prop('value')).toBe('');
-    });
-    it('should call props.onChange correctly on item select', function () {
-        var onChange = jest.fn();
-        var wrapper = setUp(shallow, { selectedItemsUris: [], onChange: onChange });
-        wrapper.find(TextField).simulate('click');
-        rerenderWrapper(wrapper);
-        expect(wrapper.find(SelectionPopup).prop('open')).toBe(true);
-        wrapper.find(SelectMetadataTypesList).prop('onItemClick')(items[0], true);
-        rerenderWrapper(wrapper);
-        expect(onChange).toHaveBeenCalledWith([items[0].uri]);
-        expect(wrapper.find(SelectionPopup).prop('open')).toBe(true);
-    });
-    it('should call props.onChange correctly and close popup on item select in single mode', function () {
-        var onChange = jest.fn();
-        var wrapper = setUp(shallow, { selectedItemsUris: [], onChange: onChange, single: true });
-        wrapper.find(TextField).simulate('click');
-        rerenderWrapper(wrapper);
-        expect(wrapper.find(SelectionPopup).prop('open')).toBe(true);
-        wrapper.find(SelectMetadataTypesList).prop('onItemClick')(items[0], true);
-        rerenderWrapper(wrapper);
-        expect(onChange).toHaveBeenCalledWith([items[0].uri]);
-        expect(wrapper.find(SelectionPopup).prop('open')).toBe(false);
-    });
-    it('should call props.onChange correctly on item deselect', function () {
-        var onChange = jest.fn();
-        var wrapper = setUp(shallow, { selectedItemsUris: [items[0].uri], onChange: onChange });
-        wrapper.find(SelectMetadataTypesList).prop('onItemClick')(items[0], false);
-        expect(onChange).toHaveBeenCalledWith([]);
-    });
-    describe('MetadataTypesSelector behavior with RTL', function () {
-        var originalRange = document.createRange;
-        beforeEach(function () {
-            document.createRange = function () {
-                var range = new Range();
-                range.getBoundingClientRect = jest.fn(function () {
-                    return { width: 0 };
-                });
-                return range;
-            };
+    it('should call props.onChange correctly on item select', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onChange, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onChange = jest.fn();
+                    user = setUpRTL({ selectedItemsUris: [], onChange: onChange }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('HCP Label'))];
+                case 2:
+                    _a.sent();
+                    expect(onChange).toHaveBeenCalledWith(['configuration/entityTypes/HCP']);
+                    screen.getByRole('presentation');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call props.onChange correctly and close popup on item select in single mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onChange, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onChange = jest.fn();
+                    user = setUpRTL({ selectedItemsUris: [], onChange: onChange, single: true }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('HCA Label'))];
+                case 2:
+                    _a.sent();
+                    expect(onChange).toHaveBeenCalledWith(['configuration/entityTypes/HCA']);
+                    expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
         });
-        afterEach(function () {
-            document.createRange = originalRange;
+    }); });
+    it('should call props.onChange correctly on item deselect', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onChange, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onChange = jest.fn();
+                    user = setUpRTL({ selectedItemsUris: ['configuration/entityTypes/HCP'], onChange: onChange }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByRole('menuitem', { name: 'HCP Label' }))];
+                case 2:
+                    _a.sent();
+                    expect(onChange).toHaveBeenCalledWith([]);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not throw an error on clicking list item if entity does not have a label', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var itemWithoutLabel, selectedItemsUris, user, button, popover, blankListItem, checkbox;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    itemWithoutLabel = {
+                        uri: 'configuration/entityTypes/CompanyUri',
+                        attributes: []
+                    };
+                    selectedItemsUris = [itemWithoutLabel.uri];
+                    user = setUpRTL({ selectedItemsUris: selectedItemsUris, items: __spreadArray(__spreadArray([], items, true), [itemWithoutLabel], false) }).user;
+                    expect(screen.getAllByText('CompanyUri')[0]).toBeInTheDocument();
+                    button = screen.getByRole('button');
+                    return [4 /*yield*/, user.click(button)];
+                case 1:
+                    _a.sent();
+                    popover = screen.getByRole('presentation');
+                    expect(popover).toBeInTheDocument();
+                    expect(within(popover).getByText('Select entity types')).toBeInTheDocument();
+                    blankListItem = screen.getAllByRole('menuitem')[3];
+                    expect(blankListItem).toHaveTextContent('CompanyUri');
+                    checkbox = within(blankListItem).getByRole('checkbox');
+                    return [4 /*yield*/, user.click(checkbox)];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.keyboard('[Escape]')];
+                case 3:
+                    _a.sent();
+                    expect(popover).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render all items if they do not overflow', function () {
+        setUpRTL({
+            selectedItemsUris: [
+                'configuration/entityTypes/HCP',
+                'configuration/entityTypes/HCA',
+                'configuration/entityTypes/Company'
+            ]
+        });
+        expect(screen.getAllByText('HCP Label, HCA Label, Company Label')).toHaveLength(2);
+    });
+    it('should render only visible items, hidden count and tooltip if they overflow', function () {
+        countHiddenItems.mockReturnValue(1);
+        setUpRTL({
+            selectedItemsUris: [
+                'configuration/entityTypes/HCP',
+                'configuration/entityTypes/HCA',
+                'configuration/entityTypes/Company'
+            ]
         });
-        it('should not throw an error on clicking list item if entity does not have a label', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var itemWithoutLabel, selectedItemsUris, user, button, popover, blankListItem, checkbox;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        itemWithoutLabel = {
-                            uri: 'configuration/entityTypes/CompanyUri',
-                            attributes: []
-                        };
-                        selectedItemsUris = [itemWithoutLabel.uri];
-                        user = setUpRTL({ selectedItemsUris: selectedItemsUris, items: __spreadArray(__spreadArray([], items, true), [itemWithoutLabel], false) }).user;
-                        expect(screen.getAllByText('CompanyUri')[0]).toBeInTheDocument();
-                        button = screen.getByRole('button');
-                        return [4 /*yield*/, user.click(button)];
-                    case 1:
-                        _a.sent();
-                        popover = screen.getByRole('presentation');
-                        expect(popover).toBeInTheDocument();
-                        expect(within(popover).getByText('Select entity types')).toBeInTheDocument();
-                        blankListItem = screen.getAllByRole('menuitem')[2];
-                        expect(blankListItem).toHaveTextContent('CompanyUri');
-                        checkbox = within(blankListItem).getByRole('checkbox');
-                        return [4 /*yield*/, user.click(checkbox)];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, user.keyboard('[Escape]')];
-                    case 3:
-                        _a.sent();
-                        expect(popover).not.toBeInTheDocument();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
+        screen.getByLabelText('HCP Label, HCA Label, Company Label');
+        screen.getByText('HCP Label, HCA Label, Company Label');
+        screen.getByText('HCP Label, HCA Label');
+        screen.getByText('+1');
     });
 });

package/MetadataTypesSelector/components/SelectMetadataTypesList/SelectMetadataTypesList.d.ts

@@ -1,18 +1,17 @@
 import React from 'react';
 import { TEntityType, TRelationType } from '@reltio/mdm-sdk';
 import { AttributeListItem } from '../../../AttributeListItem';
+import { VirtualGroupedListMainItem } from '../../../VirtualGroupedList';
 type AttributeListItemProps = React.ComponentPropsWithoutRef<typeof AttributeListItem>;
-type Item = {
-    item: {
-        item: TEntityType | TRelationType;
-    };
-    index: number;
+type Item = (TEntityType | TRelationType) & {
+    filterText?: string;
+    LogoIcon?: React.ComponentType;
 };
 type Props = {
     selectedItems: string[];
     onItemClick: AttributeListItemProps['onClick'];
     focusIndex: number;
-    items: Item[];
+    items: VirtualGroupedListMainItem<Item>[];
     width: number;
     height: number;
 };