@reltio/components 1.4.2051 → 1.4.2053

package/InlineSimpleAttribute/InlineSimpleAttribute.spec.js

@@ -46,36 +46,65 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import React from 'react';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { DataTypeValue } from '../DataTypeValue';
-import { DropDownMenuButton } from '../DropDownMenuButton';
-import { IgnoreButton } from '../IgnoreButton';
-import { PinButton } from '../PinButton';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { InlineSimpleAttribute } from './InlineSimpleAttribute';
 import * as crosswalksDisplay from '../contexts/CrosswalksDisplayContext';
-import { InlineSimpleAttributeEditor } from '../InlineSimpleAttributeEditor';
-import { createNewAttribute, isCrosswalkDisabled } from '@reltio/mdm-sdk';
+import { createNewAttribute } from '@reltio/mdm-sdk';
 import { MdmModuleProvider } from '../contexts/MdmModuleContext';
-jest.mock('../InlineSimpleAttributeEditor', function () { return ({
-    InlineSimpleAttributeEditor: jest.fn().mockReturnValue(React.createElement(React.Fragment, null))
-}); });
-jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { debounce: function (x) { return x; }, isCrosswalkDisabled: jest.fn() })); });
-var setUp = function (props) {
-    var Component = function (props) {
-        return (React.createElement(MdmModuleProvider, { values: {} },
-            React.createElement(InlineSimpleAttribute, __assign({}, props))));
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { debounce: function (x) { return x; } })); });
+var defaultProps = {
+    attributeValue: {
+        type: 'configuration/entityTypes/Franchise/attributes/String',
+        ov: true,
+        value: 'Test',
+        uri: 'entities/123/attributes/String/123'
+    },
+    attributeType: {
+        label: 'String',
+        access: ['CREATE', 'UPDATE', 'DELETE', 'READ'],
+        type: 'String',
+        name: 'String',
+        uri: 'configuration/entityTypes/Franchise/attributes/String'
+    },
+    crosswalk: {
+        uri: 'entities/10wb4hEF/crosswalks/1PPwRPuk.3h28qA5Qw',
+        type: 'configuration/sources/Reltio',
+        value: '1PPwRPuk',
+        attributes: ['123/attributes/String/123']
+    },
+    isEmpty: false,
+    onIgnore: jest.fn(),
+    onEdit: jest.fn(),
+    onPin: jest.fn(),
+    onDelete: jest.fn()
+};
+var metadata = {
+    entityTypes: [],
+    sources: []
+};
+var setUp = function (props, skipHover) {
+    if (props === void 0) { props = {}; }
+    if (skipHover === void 0) { skipHover = false; }
+    var user = userEvent.setup({ skipHover: skipHover });
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (React.createElement(MdmModuleProvider, { values: { metadata: metadata } }, children));
     };
-    return mount(React.createElement(Component, __assign({}, props)));
+    return __assign({ user: user }, render(React.createElement(InlineSimpleAttribute, __assign({}, defaultProps, props)), { wrapper: Providers }));
 };
 describe('Inline simple attribute tests', function () {
-    var actions, value, attributeType;
     var color = '#ff00ff';
     var highlightCrosswalk = jest.fn();
     var removeHighlight = jest.fn();
-    beforeAll(function () {
+    var toggleCrosswalkFocus = jest.fn();
+    beforeEach(function () {
+        jest.clearAllMocks();
         jest.spyOn(crosswalksDisplay, 'useCrosswalkColor').mockReturnValue(color);
+        jest.spyOn(crosswalksDisplay, 'useCrosswalkFocus').mockReturnValue({
+            isFocused: false,
+            toggleCrosswalkFocus: toggleCrosswalkFocus
+        });
         jest.spyOn(crosswalksDisplay, 'useCrosswalkHighlight').mockReturnValue({
             isHighlighted: true,
             isDimmed: true,
@@ -83,372 +112,349 @@ describe('Inline simple attribute tests', function () {
             removeHighlight: removeHighlight
         });
     });
-    beforeEach(function () {
-        actions = {
-            onIgnore: jest.fn(),
-            onEdit: jest.fn(),
-            onPin: jest.fn(),
-            onDelete: jest.fn()
-        };
-        value = {
-            type: 'configuration/entityTypes/Franchise/attributes/String',
-            ov: true,
-            value: 'Test',
-            uri: 'entities/123/attributes/String/123'
-        };
-        attributeType = {
-            label: 'String',
-            access: ['CREATE', 'UPDATE', 'DELETE', 'READ'],
-            type: 'String',
-            name: 'String',
-            uri: 'configuration/entityTypes/Franchise/attributes/String'
-        };
-        isCrosswalkDisabled.mockReturnValue(false);
-    });
-    var crosswalk = {
-        uri: 'entities/10wb4hEF/crosswalks/1PPwRPuk.3h28qA5Qw',
-        type: 'configuration/sources/Reltio',
-        value: '1PPwRPuk',
-        createDate: '2021-05-14T05:21:14.532Z',
-        updateDate: '2021-05-14T05:21:14.532Z',
-        reltioLoadDate: '2019-07-24T06:18:18.041Z',
-        singleAttributeUpdateDates: {
-            '123/attributes/String/123': '2021-07-08T07:09:14.781Z'
-        },
-        attributes: ['123/attributes/String/123']
-    };
     it('should render attribute and hide actions', function () {
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk }, actions);
-        var wrapper = setUp(props);
-        expect(wrapper.find(DataTypeValue).prop('value')).toBe('Test');
-        expect(wrapper.find(PinButton).length).toBe(0);
-        expect(wrapper.find(IgnoreButton).length).toBe(0);
-        expect(wrapper.find(DropDownMenuButton).length).toBe(0);
-        expect(crosswalksDisplay.useCrosswalkColor).toHaveBeenCalledWith(crosswalk);
-        expect(wrapper.find(InlineSimpleAttributeEditor)).toHaveLength(0);
-    });
-    it('should render actions on hover', function () {
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        act(function () {
-            wrapper.find('.root').simulate('mouseenter');
-        });
-        wrapper.update();
-        expect(wrapper.find(DataTypeValue).prop('value')).toBe('Test');
-        expect(wrapper.find(PinButton).length).toBe(1);
-        expect(wrapper.find(IgnoreButton).length).toBe(1);
-        expect(wrapper.find(DropDownMenuButton).prop('buttonProps')).toMatchObject({
-            icon: MoreVertIcon,
-            tooltipTitle: 'More actions'
-        });
-        expect(highlightCrosswalk).toHaveBeenCalledTimes(1);
+        setUp();
+        expect(screen.getByText('Test')).toBeInTheDocument();
+        expect(screen.queryByLabelText('Pin')).not.toBeInTheDocument();
+        expect(screen.queryByLabelText('Ignore')).not.toBeInTheDocument();
+        expect(screen.queryByLabelText('More actions')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('masking-switcher')).not.toBeInTheDocument();
+        expect(crosswalksDisplay.useCrosswalkColor).toHaveBeenCalledWith(defaultProps.crosswalk);
+        expect(screen.queryByTestId('inline-simple-attribute-editor')).not.toBeInTheDocument();
     });
-    it('should hide actions on mouse leave', function () {
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        act(function () {
-            wrapper.find('.root').simulate('mouseenter');
+    it('should render actions on hover', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByText('Test')).toBeInTheDocument();
+                    expect(screen.getByLabelText('Pin')).toBeInTheDocument();
+                    expect(screen.getByTestId('SvgPinOutlined')).toBeInTheDocument();
+                    expect(screen.getByLabelText('Ignore')).toBeInTheDocument();
+                    expect(screen.getByTestId('SvgIgnoredOutlined')).toBeInTheDocument();
+                    expect(screen.getByLabelText('More actions')).toBeInTheDocument();
+                    expect(highlightCrosswalk).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        act(function () {
-            wrapper.find('.root').simulate('mouseleave');
+    }); });
+    it('should hide actions on mouse leave', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByLabelText('Pin')).toBeInTheDocument();
+                    expect(highlightCrosswalk).toHaveBeenCalledTimes(1);
+                    return [4 /*yield*/, user.unhover(screen.getByText('Test'))];
+                case 2:
+                    _a.sent();
+                    expect(screen.queryByLabelText('Pin')).not.toBeInTheDocument();
+                    expect(removeHighlight).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        expect(wrapper.find(PinButton).length).toBe(0);
-        expect(wrapper.find(IgnoreButton).length).toBe(0);
-        expect(wrapper.find(DropDownMenuButton).length).toBe(0);
-        expect(removeHighlight).toHaveBeenCalledTimes(1);
-    });
+    }); });
     it('should show pin in pinned state even if no hover', function () {
-        value.pin = true;
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        expect(wrapper.find(PinButton).length).toBe(1);
-        expect(wrapper.find(PinButton).prop('isPinned')).toBeTruthy();
-        expect(wrapper.find(PinButton).prop('disabled')).toBeFalsy();
+        setUp({ attributeValue: __assign(__assign({}, defaultProps.attributeValue), { pin: true }) });
+        expect(screen.getByLabelText('Pin')).not.toBeDisabled();
+        expect(screen.getByTestId('SvgPin')).toBeInTheDocument();
     });
     it('should show ignore in ignored state even if no hover', function () {
-        value.ignored = true;
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        expect(wrapper.find(IgnoreButton).length).toBe(1);
-        expect(wrapper.find(IgnoreButton).prop('isIgnored')).toBeTruthy();
-        expect(wrapper.find(IgnoreButton).prop('disabled')).toBeFalsy();
-    });
-    it('should show actions with all actions if attribute type allows actions', function () {
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        var event = {};
-        act(function () {
-            var _a;
-            (_a = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter')) === null || _a === void 0 ? void 0 : _a(event);
-        });
-        wrapper.update();
-        var actionsItems = wrapper.find(DropDownMenuButton).prop('menuItems');
-        expect(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems[1]).toMatchObject({
-            disabled: false,
-            text: 'Edit',
-            tooltip: null
-        });
-        expect(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems[2]).toMatchObject({
-            disabled: false,
-            text: 'Delete',
-            tooltip: null
-        });
-        expect(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems[0]).toStrictEqual({
-            color: color,
-            crosswalk: crosswalk
-        });
-    });
-    it('should disable actions based on attribute type permissions', function () {
-        attributeType.access = ['READ'];
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        var event = {};
-        act(function () {
-            var _a;
-            (_a = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter')) === null || _a === void 0 ? void 0 : _a(event);
-        });
-        wrapper.update();
-        var actionsItems = wrapper.find(DropDownMenuButton).prop('menuItems');
-        expect(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems[1]).toMatchObject({
-            disabled: true,
-            text: 'Edit',
-            tooltip: "You don't have permissions to edit"
-        });
-        expect(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems[2]).toMatchObject({
-            disabled: true,
-            text: 'Delete',
-            tooltip: "You don't have permissions to delete"
-        });
-        expect(wrapper.find(IgnoreButton).length).toBe(0);
-        expect(wrapper.find(PinButton).length).toBe(0);
-        wrapper.setProps({
-            attributeValue: __assign(__assign({}, value), { pin: true, ignored: true })
-        });
-        expect(wrapper.find(IgnoreButton).prop('disabled')).toBe(true);
-        expect(wrapper.find(PinButton).prop('disabled')).toBe(true);
-    });
-    it('should disable delete action if props.disableDelete is true', function () {
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute', disableDelete: true }, actions);
-        var wrapper = setUp(props);
-        var event = {};
-        act(function () {
-            var _a;
-            (_a = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter')) === null || _a === void 0 ? void 0 : _a(event);
-        });
-        wrapper.update();
-        var actionsItems = wrapper.find(DropDownMenuButton).prop('menuItems');
-        expect(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems[1]).toMatchObject({
-            disabled: false,
-            text: 'Edit',
-            tooltip: null
-        });
-        expect(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems[2]).toMatchObject({
-            disabled: true,
-            text: 'Delete',
-            tooltip: "You don't have permissions to delete"
-        });
-        expect(wrapper.find(IgnoreButton).length).toBe(1);
-        expect(wrapper.find(PinButton).length).toBe(1);
+        setUp({ attributeValue: __assign(__assign({}, defaultProps.attributeValue), { ignored: true }) });
+        expect(screen.getByLabelText('Ignore')).not.toBeDisabled();
+        expect(screen.getByTestId('SvgIgnored')).toBeInTheDocument();
     });
-    it('should disable edit, pin and ignore actions if props.disableEdit is true', function () {
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute', disableEdit: true }, actions);
-        var wrapper = setUp(props);
-        var event = {};
-        act(function () {
-            var _a;
-            (_a = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter')) === null || _a === void 0 ? void 0 : _a(event);
-        });
-        wrapper.update();
-        var actionsItems = wrapper.find(DropDownMenuButton).prop('menuItems');
-        expect(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems[1]).toMatchObject({
-            disabled: true,
-            text: 'Edit',
-            tooltip: "You don't have permissions to edit"
+    it('should show actions with all actions if attribute type allows actions', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({}, true).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    expect(screen.getByLabelText('Focus')).toBeInTheDocument();
+                    expect(screen.getByText('Edit')).not.toBeDisabled();
+                    expect(screen.getByText('Delete')).not.toBeDisabled();
+                    return [2 /*return*/];
+            }
         });
-        expect(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems[2]).toMatchObject({
-            disabled: false,
-            text: 'Delete',
-            tooltip: null
+    }); });
+    it('should disable actions based on attribute type permissions', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, user, rerender, editButton, deleteButton;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp({ attributeType: __assign(__assign({}, defaultProps.attributeType), { access: ['READ'] }) }, true), user = _a.user, rerender = _a.rerender;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
+                case 2:
+                    _b.sent();
+                    editButton = screen.getByLabelText("You don't have permissions to edit");
+                    expect(editButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(editButton).toHaveTextContent('Edit');
+                    deleteButton = screen.getByLabelText("You don't have permissions to delete");
+                    expect(deleteButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(deleteButton).toHaveTextContent('Delete');
+                    rerender(React.createElement(InlineSimpleAttribute, __assign({}, defaultProps, { attributeValue: __assign(__assign({}, defaultProps.attributeValue), { pin: true, ignored: true }), attributeType: __assign(__assign({}, defaultProps.attributeType), { access: ['CREATE'] }) })));
+                    expect(screen.getByLabelText("You don't have permissions to pin").children[0]).toBeDisabled();
+                    expect(screen.getByLabelText("You don't have permissions to ignore").children[0]).toBeDisabled();
+                    return [2 /*return*/];
+            }
         });
-        expect(wrapper.find(IgnoreButton).length).toBe(0);
-        expect(wrapper.find(PinButton).length).toBe(0);
-    });
-    it('should call props.onDelete on Delete button click correctly', function () {
-        var _a, _b;
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        var event = {};
-        act(function () {
-            var _a;
-            (_a = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter')) === null || _a === void 0 ? void 0 : _a(event);
+    }); });
+    it('should disable delete action if props.disableDelete is true', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, deleteButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ disableDelete: true }, true).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    deleteButton = screen.getByLabelText("You don't have permissions to delete");
+                    expect(deleteButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(deleteButton).toHaveTextContent('Delete');
+                    expect(screen.getByText('Edit').parentElement).not.toHaveAttribute('aria-disabled', 'true');
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        var actionItems = wrapper.find(DropDownMenuButton).prop('menuItems');
-        (_b = (_a = actionItems[2]).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-        expect(actions.onDelete).toHaveBeenCalledWith({
-            attributeType: attributeType,
-            attributeValue: value,
-            crosswalks: [crosswalk]
+    }); });
+    it('should disable edit, pin and ignore actions if props.disableEdit is true', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, editButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ disableEdit: true }, true).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByLabelText('Ignore')).not.toBeInTheDocument();
+                    expect(screen.queryByLabelText('Pin')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    editButton = screen.getByLabelText("You don't have permissions to edit");
+                    expect(editButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(editButton).toHaveTextContent('Edit');
+                    expect(screen.getByText('Delete').parentElement).not.toHaveAttribute('aria-disabled', 'true');
+                    return [2 /*return*/];
+            }
         });
-    });
-    it('should call props.onPin on Pin button click correctly', function () {
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        var event = {};
-        act(function () {
-            var _a;
-            (_a = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter')) === null || _a === void 0 ? void 0 : _a(event);
+    }); });
+    it('should toggle crosswalk focus on click Focus', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({}, true).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('Focus'))];
+                case 3:
+                    _a.sent();
+                    expect(toggleCrosswalkFocus).toHaveBeenCalledWith();
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        wrapper.find(PinButton).prop('onClick')();
-        expect(actions.onPin).toHaveBeenCalledWith({
-            attributeValue: value
+    }); });
+    it('should call props.onDelete on Delete button click correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({}, true).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('Delete'))];
+                case 3:
+                    _a.sent();
+                    expect(defaultProps.onDelete).toHaveBeenCalledWith({
+                        attributeType: defaultProps.attributeType,
+                        attributeValue: defaultProps.attributeValue,
+                        crosswalks: [defaultProps.crosswalk]
+                    });
+                    return [2 /*return*/];
+            }
         });
-    });
-    it('should call props.onIgnore on Ignore button click correctly', function () {
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        var event = {};
-        act(function () {
-            var _a;
-            (_a = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter')) === null || _a === void 0 ? void 0 : _a(event);
+    }); });
+    it('should call props.onPin on Pin button click correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({}, true).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('Pin').childNodes[0])];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onPin).toHaveBeenCalledWith({
+                        attributeValue: defaultProps.attributeValue
+                    });
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        wrapper.find(IgnoreButton).prop('onClick')();
-        expect(actions.onIgnore).toHaveBeenCalledWith({
-            attributeValue: value
+    }); });
+    it('should call props.onIgnore on Ignore button click correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({}, true).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('Ignore').childNodes[0])];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onIgnore).toHaveBeenCalledWith({
+                        attributeValue: defaultProps.attributeValue
+                    });
+                    return [2 /*return*/];
+            }
         });
-    });
+    }); });
     it('should render InlineSimpleAttributeEditor on Edit menu item click', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var props, wrapper, onMouseEnter, actionItems;
+        var user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-                    wrapper = setUp(props);
-                    onMouseEnter = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter');
-                    act(function () {
-                        onMouseEnter();
-                    });
-                    wrapper.update();
-                    actionItems = wrapper.find(DropDownMenuButton).prop('menuItems');
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            var _a, _b;
-                            return __generator(this, function (_c) {
-                                (_b = (_a = actionItems[1]).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    user = setUp({}, true).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    expect(wrapper.find(InlineSimpleAttributeEditor)).toHaveLength(1);
+                    return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('Edit'))];
+                case 3:
+                    _a.sent();
+                    expect(screen.getByTestId('inline-simple-attribute-editor')).toBeInTheDocument();
                     return [2 /*return*/];
             }
         });
     }); });
     it('should call props.onEdit when call onEdit prop of InlineSimpleAttributeEditor', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var props, wrapper, event, actionItems, newAttributeValue;
+        var user, backdrop;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-                    wrapper = setUp(props);
-                    event = {};
-                    act(function () {
-                        var _a;
-                        (_a = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter')) === null || _a === void 0 ? void 0 : _a(event);
-                    });
-                    wrapper.update();
-                    actionItems = wrapper.find(DropDownMenuButton).prop('menuItems');
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            var _a, _b;
-                            return __generator(this, function (_c) {
-                                (_b = (_a = actionItems[1]).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    user = setUp({}, true).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    newAttributeValue = {
-                        uri: 'entities/123/attributes/String/123',
-                        value: 'Test update'
-                    };
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                wrapper.find(InlineSimpleAttributeEditor).prop('onEdit')(newAttributeValue);
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
                 case 2:
                     _a.sent();
-                    expect(actions.onEdit).toHaveBeenCalledWith({
-                        attributeType: attributeType,
-                        attributeValue: newAttributeValue,
-                        crosswalk: crosswalk
+                    return [4 /*yield*/, user.click(screen.getByText('Edit'))];
+                case 3:
+                    _a.sent();
+                    expect(screen.getByTestId('inline-simple-attribute-editor')).toBeInTheDocument();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), ' update')];
+                case 4:
+                    _a.sent();
+                    backdrop = screen.getByRole('presentation').childNodes[0];
+                    return [4 /*yield*/, user.click(backdrop)];
+                case 5:
+                    _a.sent();
+                    expect(defaultProps.onEdit).toHaveBeenCalledWith({
+                        attributeType: defaultProps.attributeType,
+                        attributeValue: __assign(__assign({}, defaultProps.attributeValue), { uri: defaultProps.attributeValue.uri, value: 'Test update' }),
+                        crosswalk: defaultProps.crosswalk
                     });
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should disable edit, pin, delete and ignore actions if it is system attribute', function () {
-        var props = __assign({ attributeValue: value, attributeType: __assign(__assign({}, attributeType), { system: true }), crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        var event = {};
-        act(function () {
-            var _a;
-            (_a = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter')) === null || _a === void 0 ? void 0 : _a(event);
-        });
-        wrapper.update();
-        var actionsItems = wrapper.find(DropDownMenuButton).prop('menuItems');
-        expect(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems[1]).toMatchObject({
-            disabled: true,
-            text: 'Edit',
-            tooltip: "You don't have permissions to edit"
-        });
-        expect(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems[2]).toMatchObject({
-            disabled: true,
-            text: 'Delete',
-            tooltip: "You don't have permissions to delete"
-        });
-        expect(wrapper.find(IgnoreButton).length).toBe(0);
-        expect(wrapper.find(PinButton).length).toBe(0);
-    });
-    it('should hide pin and ignore button for temporary attribute', function () {
-        var props = __assign({ attributeValue: createNewAttribute({ parentUri: 'entities/123', attributeType: attributeType }), attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        act(function () {
-            wrapper.find('.root').simulate('mouseenter');
-        });
-        wrapper.update();
-        expect(wrapper.find(IgnoreButton).length).toBe(0);
-        expect(wrapper.find(PinButton).length).toBe(0);
-    });
-    it('should disable edit, pin, delete and ignore actions if crosswalk is disabled', function () {
-        isCrosswalkDisabled.mockReturnValue(true);
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        var event = {};
-        act(function () {
-            var _a;
-            (_a = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter')) === null || _a === void 0 ? void 0 : _a(event);
+    it('should disable edit, pin, delete and ignore actions if it is system attribute', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, editButton, deleteButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ attributeType: __assign(__assign({}, defaultProps.attributeType), { system: true }) }, true).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByLabelText('Ignore')).not.toBeInTheDocument();
+                    expect(screen.queryByLabelText('Pin')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    editButton = screen.getByLabelText("You don't have permissions to edit");
+                    expect(editButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(editButton).toHaveTextContent('Edit');
+                    deleteButton = screen.getByLabelText("You don't have permissions to delete");
+                    expect(deleteButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(deleteButton).toHaveTextContent('Delete');
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        var actionsItems = wrapper.find(DropDownMenuButton).prop('menuItems');
-        expect(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems[1]).toMatchObject({
-            disabled: true,
-            text: 'Edit',
-            tooltip: "You don't have permissions to edit"
+    }); });
+    it('should hide pin and ignore button for temporary attribute', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({
+                        attributeValue: __assign(__assign({}, createNewAttribute({ parentUri: 'entities/123', attributeType: defaultProps.attributeType })), { value: 'Test' })
+                    }).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByLabelText('Ignore')).not.toBeInTheDocument();
+                    expect(screen.queryByLabelText('Pin')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
         });
-        expect(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems[2]).toMatchObject({
-            disabled: true,
-            text: 'Delete',
-            tooltip: "You don't have permissions to delete"
+    }); });
+    it('should disable edit, pin, delete and ignore actions if crosswalk is disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, editButton, deleteButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ crosswalk: __assign(__assign({}, defaultProps.crosswalk), { deleteDate: Date.now() - 2000 }) }, true).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByLabelText('Ignore')).not.toBeInTheDocument();
+                    expect(screen.queryByLabelText('Pin')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    editButton = screen.getByLabelText("You don't have permissions to edit");
+                    expect(editButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(editButton).toHaveTextContent('Edit');
+                    deleteButton = screen.getByLabelText("You don't have permissions to delete");
+                    expect(deleteButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(deleteButton).toHaveTextContent('Delete');
+                    return [2 /*return*/];
+            }
         });
-        expect(wrapper.find(IgnoreButton).length).toBe(0);
-        expect(wrapper.find(PinButton).length).toBe(0);
-    });
+    }); });
 });