@reltio/components 1.4.2070 → 1.4.2072

package/cjs/ProfilesList/ProfilesList.spec.js

@@ -10,232 +10,247 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
-var EmptyStub_1 = require("../EmptyStub");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
-var EntityUriLink_1 = require("../EntityUriLink");
-var EntityAvatar_1 = require("../EntityAvatar");
-var ProfilesList_1 = require("./ProfilesList");
 var types_1 = require("../types");
-var EntityAvatarMock = function () { return react_1.default.createElement("div", null); };
-jest.mock('../EntityAvatar', function () { return ({
-    EntityAvatar: EntityAvatarMock
-}); });
-describe('ProfilesList tests', function () {
-    var entities = [
-        {
-            attributes: {},
-            label: 'First entity',
-            secondaryLabel: 'secondary label',
-            type: 'configuration/entityTypes/HCP',
-            uri: 'entities/18TTRAuB',
-            defaultProfilePicValue: 'https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg'
-        },
-        {
-            attributes: {
-                BCard1: [
-                    {
-                        type: 'configuration/entityTypes/HCP/attributes/BCard1',
-                        ov: true,
-                        value: 'Business card 1 test',
-                        uri: 'entities/45TTRAfg/attributes/BCard1/1hPAy491H'
-                    }
-                ],
-                BCard2: [
-                    {
-                        type: 'configuration/entityTypes/HCP/attributes/BCard2',
-                        ov: true,
-                        value: 'Business card 2 test',
-                        uri: 'entities/45TTRAfg/attributes/BCard2/1hPAy491H',
-                        label: 'Main Label - Business card second',
-                        relationshipLabel: 'Relationship Label'
-                    }
-                ]
-            },
-            label: 'Second entity',
-            secondaryLabel: '',
-            type: 'configuration/entityTypes/HCP',
-            uri: 'entities/45TTRAfg'
+var ProfilesList_1 = require("./ProfilesList");
+var entities = [
+    {
+        attributes: {},
+        label: 'First entity',
+        secondaryLabel: 'secondary label',
+        type: 'configuration/entityTypes/HCP',
+        uri: 'entities/18TTRAuB',
+        defaultProfilePic: 'https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg',
+        endDate: Date.now() - 10
+    },
+    {
+        attributes: {
+            BCard1: [
+                {
+                    type: 'configuration/entityTypes/HCP/attributes/BCard1',
+                    ov: true,
+                    value: 'Business card 1 test',
+                    uri: 'entities/45TTRAfg/attributes/BCard1/1hPAy491H'
+                }
+            ],
+            BCard2: [
+                {
+                    type: 'configuration/entityTypes/HCP/attributes/BCard2',
+                    ov: true,
+                    value: 'Business card 2 test',
+                    uri: 'entities/45TTRAfg/attributes/BCard2/1hPAy491H',
+                    label: 'Main Label - Business card second',
+                    relationshipLabel: 'Relationship Label'
+                }
+            ]
         },
+        label: 'Second entity',
+        secondaryLabel: '',
+        type: 'configuration/entityTypes/HCP',
+        uri: 'entities/45TTRAfg'
+    },
+    {
+        attributes: {},
+        label: 'Third entity',
+        secondaryLabel: '',
+        type: 'configuration/entityTypes/HCP',
+        uri: 'DTSS/entities/14Pp52PY'
+    },
+    {
+        attributes: {},
+        label: 'Fourth entity',
+        secondaryLabel: 'secondary label',
+        type: 'configuration/entityTypes/HCP',
+        uri: 'entities/19TTRAuB',
+        dataTenant: 'dt1'
+    },
+    {
+        uri: 'entities/84Ks3mN',
+        attributes: {},
+        type: 'NO_LABEL'
+    }
+];
+var metadata = {
+    entityTypes: [
         {
-            attributes: {},
-            label: 'Third entity',
-            secondaryLabel: '',
-            type: 'configuration/entityTypes/HCP',
-            uri: 'DTSS/entities/14Pp52PY'
+            uri: 'configuration/entityTypes/HCP',
+            typeColor: '#676767',
+            attributes: [
+                {
+                    type: 'String',
+                    name: 'BCard1',
+                    label: 'BCard1',
+                    uri: 'configuration/entityTypes/HCP/attributes/BCard1'
+                },
+                {
+                    type: 'String',
+                    name: 'BCard2',
+                    label: 'BCard2',
+                    uri: 'configuration/entityTypes/HCP/attributes/BCard2'
+                },
+                {
+                    type: 'String',
+                    name: 'BCard3',
+                    label: 'BCard3',
+                    uri: 'configuration/entityTypes/HCP/attributes/BCard3'
+                }
+            ],
+            businessCardAttributeURIs: [
+                'configuration/entityTypes/HCP/attributes/BCard1',
+                'configuration/entityTypes/HCP/attributes/BCard2',
+                'configuration/entityTypes/HCP/attributes/BCard3',
+                'configuration/entityTypes/HCP/attributes/NotExistingBCard'
+            ],
+            label: 'HCP',
+            typeImage: 'images/defaultImage/neutral.png'
         },
         {
-            attributes: {},
-            label: 'Fourth entity',
-            secondaryLabel: 'secondary label',
-            type: 'configuration/entityTypes/HCP',
-            uri: 'entities/19TTRAuB',
-            dataTenant: 'dt1'
+            uri: 'NO_LABEL',
+            attributes: []
         }
-    ];
-    var findItem = function (component) { return component.find('.item'); };
-    var findInactiveItem = function (component) { return component.find('.item.inactive'); };
-    var findSelectedItem = function (component) { return component.find('.item.selected'); };
-    var findClickableItem = function (component) { return component.find('.item.clickable'); };
-    var findItemLink = function (item) { return item.find(EntityUriLink_1.EntityUriLink); };
-    var metadata = {
-        entityTypes: [
-            {
-                uri: 'configuration/entityTypes/HCP',
-                typeColor: '#676767',
-                attributes: [
-                    {
-                        name: 'BCard1',
-                        label: 'BCard1',
-                        uri: 'configuration/entityTypes/HCP/attributes/BCard1'
-                    },
-                    {
-                        name: 'BCard2',
-                        label: 'BCard2',
-                        uri: 'configuration/entityTypes/HCP/attributes/BCard2'
-                    },
-                    {
-                        name: 'BCard3',
-                        label: 'BCard3',
-                        uri: 'configuration/entityTypes/HCP/attributes/BCard3'
-                    }
-                ],
-                businessCardAttributeURIs: [
-                    'configuration/entityTypes/HCP/attributes/BCard1',
-                    'configuration/entityTypes/HCP/attributes/BCard2',
-                    'configuration/entityTypes/HCP/attributes/BCard3',
-                    'configuration/entityTypes/HCP/attributes/NotExistingBCard'
-                ],
-                label: 'entityType HCP Label',
-                typeImage: 'images/defaultImage/neutral.png'
-            },
-            {
-                uri: 'NO_LABEL',
-                attributes: []
-            }
-        ]
-    };
-    var mdmValues = { uiPath: 'https://reltio.com/ui', metadata: metadata };
-    var defaultProps = {
-        metadata: metadata,
-        entities: entities,
-        entitiesImportStatus: {},
-        onEntityImportStatusChange: jest.fn(),
-        entityButtonsRenderer: function (entity) {
-            return react_1.default.createElement(EmptyStub_1.EmptyStub, { entity: entity });
-        }
-    };
-    var setUp = function (props) {
-        if (props === void 0) { props = defaultProps; }
-        var Component = function (props) { return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues },
-            react_1.default.createElement(ProfilesList_1.ProfilesList, __assign({}, props)))); };
-        return (0, enzyme_1.mount)(react_1.default.createElement(Component, __assign({}, props)));
+    ]
+};
+var mdmValues = { uiPath: 'https://reltio.com/ui', metadata: metadata };
+var defaultProps = {
+    metadata: metadata,
+    entities: entities,
+    entitiesImportStatus: (_a = {},
+        _a[entities[1].uri] = types_1.ImportModes.Success,
+        _a),
+    selectedEntityUri: entities[2].uri,
+    entityToHighlight: entities[3].uri,
+    onEntityImportStatusChange: jest.fn(),
+    entityButtonsRenderer: jest.fn(function () { return null; })
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var user = user_event_1.default.setup();
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues }, children));
     };
-    it('should not fail when no props', function () {
-        var component = setUp({});
-        expect(findItem(component).length).toBe(0);
-    });
-    it('should render items', function () {
-        var component = setUp();
-        expect(findItem(component).length).toBe(defaultProps.entities.length);
-    });
-    it('should render main parts of item', function () {
-        var _a;
-        var entity = entities[0];
-        var props = __assign(__assign({}, defaultProps), { entities: [entity], entitiesImportStatus: (_a = {},
-                _a[entity.uri] = types_1.ImportModes.Progress,
-                _a) });
-        var component = setUp(props);
-        var item = findItem(component);
-        expect(item.length).toBe(1);
-        var avatar = item.find(EntityAvatar_1.EntityAvatar);
-        expect(avatar.length).toBe(1);
-        expect(avatar.prop('entity')).toBe(entity);
-        expect(item.text().includes('First entity')).toBe(true);
-        expect(item.text().includes('secondary label')).toBe(true);
-        expect(item.text().includes('entityType HCP Label')).toBe(true);
-        expect(item.text().includes('18TTRAuB')).toBe(true);
-        expect(item.text().includes('entities/18TTRAuB')).toBe(false);
-        expect(findInactiveItem(component).length).toBe(0);
-        expect(findClickableItem(component).length).toBe(0);
-        expect(findSelectedItem(component).length).toBe(0);
-        expect(item.find(EmptyStub_1.EmptyStub).length).toBe(1);
-        expect(item.find(EmptyStub_1.EmptyStub).props()).toEqual({ entity: entity });
-    });
-    it('should show full entityId when it does not start with "entities/"', function () {
-        var entity = entities[2];
-        var props = __assign(__assign({}, defaultProps), { entities: [entity] });
-        var component = setUp(props);
-        var item = findItem(component);
-        expect(item.text().includes('DTSS/entities/14Pp52PY')).toBe(true);
-    });
-    it('should show No label caption when there is no label', function () {
-        var entity = { uri: '1', attributes: {}, type: 'NO_LABEL' };
-        var props = __assign(__assign({}, defaultProps), { entities: [entity] });
-        var component = setUp(props);
-        var item = findItem(component);
-        expect(item.text().includes('<No label>')).toBe(true);
-    });
-    it('should render business card attributes', function () {
-        var entity = entities[1];
-        var props = __assign(__assign({}, defaultProps), { entities: [entity] });
-        var component = setUp(props);
-        expect(findItem(component)
-            .text()
-            .includes('Business card 1 test, Relationship Label, Main Label - Business card second')).toBe(true);
-    });
-    it('should render inactive items', function () {
-        var inactiveEntities = entities.map(function (entity) { return (__assign(__assign({}, entity), { endDate: Date.now() - 10 })); });
-        var props = __assign(__assign({}, defaultProps), { entities: inactiveEntities });
-        var component = setUp(props);
-        expect(findInactiveItem(component).length).toBe(entities.length);
-    });
-    it('should show highlight for entity if it has import status SUCCESS', function () {
-        var _a;
-        var entity = entities[3];
-        var entitiesImportStatus = (_a = {},
-            _a[entity.uri] = types_1.ImportModes.Success,
-            _a);
-        var props = __assign(__assign({}, defaultProps), { entities: [entity] });
-        var component = setUp(props);
-        expect(findItem(component).hasClass('justImported')).toBe(false);
-        component.setProps({ entitiesImportStatus: entitiesImportStatus });
-        expect(findItem(component).hasClass('justImported')).toBe(true);
+    return __assign(__assign({}, (0, react_2.render)(react_1.default.createElement(ProfilesList_1.ProfilesList, __assign({}, props)), { wrapper: Providers })), { user: user });
+};
+describe('Profiles list tests', function () {
+    it('should render correctly', function () {
+        setUp();
+        var items = react_2.screen.getAllByTestId('profiles-list-item');
+        expect(items).toHaveLength(5);
+        expect(items[0]).not.toHaveClass('clickable');
+        expect(items[0]).not.toHaveClass('highlighted');
+        expect(items[0]).not.toHaveClass('selected');
+        expect(items[0]).toHaveClass('inactive');
+        expect(items[0]).not.toHaveClass('justImported');
+        expect((0, react_2.within)(items[0]).getByRole('img')).toHaveAttribute('src', '/images/defaultImage/neutral.png');
+        expect((0, react_2.within)(items[0]).getByText('First entity')).toHaveAttribute('href', 'https://reltio.com/ui#p~com.reltio.plugins.entity.default.DefaultPerspective_e~entities/18TTRAuB');
+        (0, react_2.within)(items[0]).getByText('secondary label');
+        (0, react_2.within)(items[0]).getByText('HCP');
+        (0, react_2.within)(items[0]).getByText('18TTRAuB');
+        expect(items[1]).not.toHaveClass('clickable');
+        expect(items[1]).not.toHaveClass('highlighted');
+        expect(items[1]).not.toHaveClass('selected');
+        expect(items[1]).toHaveClass('justImported');
+        expect(items[1]).not.toHaveClass('inactive');
+        expect((0, react_2.within)(items[1]).getByRole('img')).toHaveAttribute('src', '/images/defaultImage/neutral.png');
+        expect((0, react_2.within)(items[1]).getByText('Second entity')).toHaveAttribute('href', 'https://reltio.com/ui#p~com.reltio.plugins.entity.default.DefaultPerspective_e~entities/45TTRAfg');
+        (0, react_2.within)(items[1]).getByText('Business card 1 test, Relationship Label, Main Label - Business card second');
+        (0, react_2.within)(items[1]).getByText('HCP');
+        (0, react_2.within)(items[1]).getByText('45TTRAfg');
+        expect(items[2]).not.toHaveClass('clickable');
+        expect(items[2]).not.toHaveClass('highlighted');
+        expect(items[2]).toHaveClass('selected');
+        expect(items[2]).not.toHaveClass('justImported');
+        expect(items[2]).not.toHaveClass('inactive');
+        expect((0, react_2.within)(items[2]).getByRole('img')).toHaveAttribute('src', '/images/defaultImage/neutral.png');
+        expect((0, react_2.within)(items[2]).getByText('Third entity')).toHaveAttribute('href', 'https://reltio.com/ui#p~com.reltio.plugins.entity.default.DefaultPerspective_e~DTSS/entities/14Pp52PY');
+        (0, react_2.within)(items[2]).getByText('HCP');
+        (0, react_2.within)(items[2]).getByText('DTSS/entities/14Pp52PY');
+        expect(items[3]).not.toHaveClass('clickable');
+        expect(items[3]).toHaveClass('highlighted');
+        expect(items[3]).not.toHaveClass('selected');
+        expect(items[3]).not.toHaveClass('justImported');
+        expect(items[3]).not.toHaveClass('inactive');
+        expect((0, react_2.within)(items[3]).getByRole('img')).toHaveAttribute('src', '/images/defaultImage/neutral.png');
+        expect((0, react_2.within)(items[3]).getByText('Fourth entity')).toHaveAttribute('href', 'https://reltio.com/ui#p~com.reltio.plugins.entity.default.DefaultPerspective_e~DTSS/dt1/entities/19TTRAuB');
+        (0, react_2.within)(items[3]).getByText('secondary label');
+        (0, react_2.within)(items[3]).getByText('HCP');
+        (0, react_2.within)(items[3]).getByText('DTSS/dt1/entities/19TTRAuB');
+        expect(items[4]).not.toHaveClass('clickable');
+        expect(items[4]).not.toHaveClass('highlighted');
+        expect(items[4]).not.toHaveClass('selected');
+        expect(items[4]).not.toHaveClass('justImported');
+        expect(items[4]).not.toHaveClass('inactive');
+        expect((0, react_2.within)(items[4]).getByText('<No label>')).toHaveAttribute('href', 'https://reltio.com/ui#p~com.reltio.plugins.entity.default.DefaultPerspective_e~entities/84Ks3mN');
+        (0, react_2.within)(items[4]).getByText('84Ks3mN');
     });
     it('should render items as clickable if onEntityClick prop is defined', function () {
         var props = __assign(__assign({}, defaultProps), { onEntityClick: function () { } });
-        var component = setUp(props);
-        expect(findClickableItem(component).length).toBe(entities.length);
-    });
-    it('should render selected item according selectedEntityUri prop', function () {
-        var props = __assign(__assign({}, defaultProps), { onEntityClick: function () { }, selectedEntityUri: entities[1].uri });
-        var component = setUp(props);
-        expect(findClickableItem(component).length).toBe(entities.length);
-        expect(findSelectedItem(component).length).toBe(1);
-    });
-    it('should render entity link uri component', function () {
-        var component = setUp();
-        var firstLink = findItemLink(findItem(component).at(0));
-        expect(firstLink.prop('value')).toBe('entities/18TTRAuB');
-        expect(firstLink.text()).toBe(entities[0].label);
-    });
-    it('should call "onEntityHover" prop with entity uri on item mouse enter', function () {
-        var onEntityHover = jest.fn();
-        var props = __assign(__assign({}, defaultProps), { onEntityHover: onEntityHover, entities: [entities[0]], selectedEntityUri: entities[1].uri });
-        var component = setUp(props);
-        findItem(component).prop('onMouseEnter')();
-        expect(onEntityHover).toHaveBeenCalledWith(entities[0].uri);
-    });
-    it('should call "onEntityHover" prop with null on item mouse leave', function () {
-        var onEntityHover = jest.fn();
-        var props = __assign(__assign({}, defaultProps), { onEntityHover: onEntityHover, entities: [entities[0]], selectedEntityUri: entities[1].uri });
-        var component = setUp(props);
-        findItem(component).prop('onMouseLeave')();
-        expect(onEntityHover).toHaveBeenCalledWith(null);
+        setUp(props);
+        var items = react_2.screen.getAllByTestId('profiles-list-item');
+        expect(items).toHaveLength(5);
+        items.forEach(function (item) { return expect(item).toHaveClass('clickable'); });
     });
+    it('should call "onEntityHover" prop on item mouse enter and mouse leave correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { onEntityHover: jest.fn() });
+                    user = setUp(props).user;
+                    return [4 /*yield*/, user.hover(react_2.screen.getByText('First entity'))];
+                case 1:
+                    _a.sent();
+                    expect(props.onEntityHover).toHaveBeenCalledWith('entities/18TTRAuB');
+                    return [4 /*yield*/, user.unhover(react_2.screen.getByText('First entity'))];
+                case 2:
+                    _a.sent();
+                    expect(props.onEntityHover).toHaveBeenCalledWith(null);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });