@reltio/components 1.4.2051 → 1.4.2053

package/cjs/InlineSimpleAttribute/InlineSimpleAttribute.spec.js

@@ -74,36 +74,65 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
-var test_utils_1 = require("react-dom/test-utils");
-var MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
-var DataTypeValue_1 = require("../DataTypeValue");
-var DropDownMenuButton_1 = require("../DropDownMenuButton");
-var IgnoreButton_1 = require("../IgnoreButton");
-var PinButton_1 = require("../PinButton");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var InlineSimpleAttribute_1 = require("./InlineSimpleAttribute");
 var crosswalksDisplay = __importStar(require("../contexts/CrosswalksDisplayContext"));
-var InlineSimpleAttributeEditor_1 = require("../InlineSimpleAttributeEditor");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
-jest.mock('../InlineSimpleAttributeEditor', function () { return ({
-    InlineSimpleAttributeEditor: jest.fn().mockReturnValue(react_1.default.createElement(react_1.default.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_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: {} },
-            react_1.default.createElement(InlineSimpleAttribute_1.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 = user_event_1.default.setup({ skipHover: skipHover });
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { metadata: metadata } }, children));
     };
-    return (0, enzyme_1.mount)(react_1.default.createElement(Component, __assign({}, props)));
+    return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(InlineSimpleAttribute_1.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,
@@ -111,372 +140,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'
-        };
-        mdm_sdk_1.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_1.DataTypeValue).prop('value')).toBe('Test');
-        expect(wrapper.find(PinButton_1.PinButton).length).toBe(0);
-        expect(wrapper.find(IgnoreButton_1.IgnoreButton).length).toBe(0);
-        expect(wrapper.find(DropDownMenuButton_1.DropDownMenuButton).length).toBe(0);
-        expect(crosswalksDisplay.useCrosswalkColor).toHaveBeenCalledWith(crosswalk);
-        expect(wrapper.find(InlineSimpleAttributeEditor_1.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);
-        (0, test_utils_1.act)(function () {
-            wrapper.find('.root').simulate('mouseenter');
-        });
-        wrapper.update();
-        expect(wrapper.find(DataTypeValue_1.DataTypeValue).prop('value')).toBe('Test');
-        expect(wrapper.find(PinButton_1.PinButton).length).toBe(1);
-        expect(wrapper.find(IgnoreButton_1.IgnoreButton).length).toBe(1);
-        expect(wrapper.find(DropDownMenuButton_1.DropDownMenuButton).prop('buttonProps')).toMatchObject({
-            icon: MoreVert_1.default,
-            tooltipTitle: 'More actions'
-        });
-        expect(highlightCrosswalk).toHaveBeenCalledTimes(1);
+        setUp();
+        expect(react_2.screen.getByText('Test')).toBeInTheDocument();
+        expect(react_2.screen.queryByLabelText('Pin')).not.toBeInTheDocument();
+        expect(react_2.screen.queryByLabelText('Ignore')).not.toBeInTheDocument();
+        expect(react_2.screen.queryByLabelText('More actions')).not.toBeInTheDocument();
+        expect(react_2.screen.queryByTestId('masking-switcher')).not.toBeInTheDocument();
+        expect(crosswalksDisplay.useCrosswalkColor).toHaveBeenCalledWith(defaultProps.crosswalk);
+        expect(react_2.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);
-        (0, test_utils_1.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(react_2.screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByText('Test')).toBeInTheDocument();
+                    expect(react_2.screen.getByLabelText('Pin')).toBeInTheDocument();
+                    expect(react_2.screen.getByTestId('SvgPinOutlined')).toBeInTheDocument();
+                    expect(react_2.screen.getByLabelText('Ignore')).toBeInTheDocument();
+                    expect(react_2.screen.getByTestId('SvgIgnoredOutlined')).toBeInTheDocument();
+                    expect(react_2.screen.getByLabelText('More actions')).toBeInTheDocument();
+                    expect(highlightCrosswalk).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        (0, test_utils_1.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(react_2.screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByLabelText('Pin')).toBeInTheDocument();
+                    expect(highlightCrosswalk).toHaveBeenCalledTimes(1);
+                    return [4 /*yield*/, user.unhover(react_2.screen.getByText('Test'))];
+                case 2:
+                    _a.sent();
+                    expect(react_2.screen.queryByLabelText('Pin')).not.toBeInTheDocument();
+                    expect(removeHighlight).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        expect(wrapper.find(PinButton_1.PinButton).length).toBe(0);
-        expect(wrapper.find(IgnoreButton_1.IgnoreButton).length).toBe(0);
-        expect(wrapper.find(DropDownMenuButton_1.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_1.PinButton).length).toBe(1);
-        expect(wrapper.find(PinButton_1.PinButton).prop('isPinned')).toBeTruthy();
-        expect(wrapper.find(PinButton_1.PinButton).prop('disabled')).toBeFalsy();
+        setUp({ attributeValue: __assign(__assign({}, defaultProps.attributeValue), { pin: true }) });
+        expect(react_2.screen.getByLabelText('Pin')).not.toBeDisabled();
+        expect(react_2.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_1.IgnoreButton).length).toBe(1);
-        expect(wrapper.find(IgnoreButton_1.IgnoreButton).prop('isIgnored')).toBeTruthy();
-        expect(wrapper.find(IgnoreButton_1.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 = {};
-        (0, test_utils_1.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_1.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 = {};
-        (0, test_utils_1.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_1.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_1.IgnoreButton).length).toBe(0);
-        expect(wrapper.find(PinButton_1.PinButton).length).toBe(0);
-        wrapper.setProps({
-            attributeValue: __assign(__assign({}, value), { pin: true, ignored: true })
-        });
-        expect(wrapper.find(IgnoreButton_1.IgnoreButton).prop('disabled')).toBe(true);
-        expect(wrapper.find(PinButton_1.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 = {};
-        (0, test_utils_1.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_1.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_1.IgnoreButton).length).toBe(1);
-        expect(wrapper.find(PinButton_1.PinButton).length).toBe(1);
+        setUp({ attributeValue: __assign(__assign({}, defaultProps.attributeValue), { ignored: true }) });
+        expect(react_2.screen.getByLabelText('Ignore')).not.toBeDisabled();
+        expect(react_2.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 = {};
-        (0, test_utils_1.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_1.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(react_2.screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    expect(react_2.screen.getByLabelText('Focus')).toBeInTheDocument();
+                    expect(react_2.screen.getByText('Edit')).not.toBeDisabled();
+                    expect(react_2.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(react_2.screen.getByText('Test'))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('More actions'))];
+                case 2:
+                    _b.sent();
+                    editButton = react_2.screen.getByLabelText("You don't have permissions to edit");
+                    expect(editButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(editButton).toHaveTextContent('Edit');
+                    deleteButton = react_2.screen.getByLabelText("You don't have permissions to delete");
+                    expect(deleteButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(deleteButton).toHaveTextContent('Delete');
+                    rerender(react_1.default.createElement(InlineSimpleAttribute_1.InlineSimpleAttribute, __assign({}, defaultProps, { attributeValue: __assign(__assign({}, defaultProps.attributeValue), { pin: true, ignored: true }), attributeType: __assign(__assign({}, defaultProps.attributeType), { access: ['CREATE'] }) })));
+                    expect(react_2.screen.getByLabelText("You don't have permissions to pin").children[0]).toBeDisabled();
+                    expect(react_2.screen.getByLabelText("You don't have permissions to ignore").children[0]).toBeDisabled();
+                    return [2 /*return*/];
+            }
         });
-        expect(wrapper.find(IgnoreButton_1.IgnoreButton).length).toBe(0);
-        expect(wrapper.find(PinButton_1.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 = {};
-        (0, test_utils_1.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(react_2.screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    deleteButton = react_2.screen.getByLabelText("You don't have permissions to delete");
+                    expect(deleteButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(deleteButton).toHaveTextContent('Delete');
+                    expect(react_2.screen.getByText('Edit').parentElement).not.toHaveAttribute('aria-disabled', 'true');
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        var actionItems = wrapper.find(DropDownMenuButton_1.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(react_2.screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.queryByLabelText('Ignore')).not.toBeInTheDocument();
+                    expect(react_2.screen.queryByLabelText('Pin')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    editButton = react_2.screen.getByLabelText("You don't have permissions to edit");
+                    expect(editButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(editButton).toHaveTextContent('Edit');
+                    expect(react_2.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 = {};
-        (0, test_utils_1.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(react_2.screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('Focus'))];
+                case 3:
+                    _a.sent();
+                    expect(toggleCrosswalkFocus).toHaveBeenCalledWith();
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        wrapper.find(PinButton_1.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(react_2.screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(react_2.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 = {};
-        (0, test_utils_1.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(react_2.screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('Pin').childNodes[0])];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onPin).toHaveBeenCalledWith({
+                        attributeValue: defaultProps.attributeValue
+                    });
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        wrapper.find(IgnoreButton_1.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(react_2.screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(react_2.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');
-                    (0, test_utils_1.act)(function () {
-                        onMouseEnter();
-                    });
-                    wrapper.update();
-                    actionItems = wrapper.find(DropDownMenuButton_1.DropDownMenuButton).prop('menuItems');
-                    return [4 /*yield*/, (0, test_utils_1.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(react_2.screen.getByText('Test'))];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    expect(wrapper.find(InlineSimpleAttributeEditor_1.InlineSimpleAttributeEditor)).toHaveLength(1);
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(react_2.screen.getByText('Edit'))];
+                case 3:
+                    _a.sent();
+                    expect(react_2.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 = {};
-                    (0, test_utils_1.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_1.DropDownMenuButton).prop('menuItems');
-                    return [4 /*yield*/, (0, test_utils_1.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(react_2.screen.getByText('Test'))];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    newAttributeValue = {
-                        uri: 'entities/123/attributes/String/123',
-                        value: 'Test update'
-                    };
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                wrapper.find(InlineSimpleAttributeEditor_1.InlineSimpleAttributeEditor).prop('onEdit')(newAttributeValue);
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('More actions'))];
                 case 2:
                     _a.sent();
-                    expect(actions.onEdit).toHaveBeenCalledWith({
-                        attributeType: attributeType,
-                        attributeValue: newAttributeValue,
-                        crosswalk: crosswalk
+                    return [4 /*yield*/, user.click(react_2.screen.getByText('Edit'))];
+                case 3:
+                    _a.sent();
+                    expect(react_2.screen.getByTestId('inline-simple-attribute-editor')).toBeInTheDocument();
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), ' update')];
+                case 4:
+                    _a.sent();
+                    backdrop = react_2.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 = {};
-        (0, test_utils_1.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_1.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_1.IgnoreButton).length).toBe(0);
-        expect(wrapper.find(PinButton_1.PinButton).length).toBe(0);
-    });
-    it('should hide pin and ignore button for temporary attribute', function () {
-        var props = __assign({ attributeValue: (0, mdm_sdk_1.createNewAttribute)({ parentUri: 'entities/123', attributeType: attributeType }), attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        (0, test_utils_1.act)(function () {
-            wrapper.find('.root').simulate('mouseenter');
-        });
-        wrapper.update();
-        expect(wrapper.find(IgnoreButton_1.IgnoreButton).length).toBe(0);
-        expect(wrapper.find(PinButton_1.PinButton).length).toBe(0);
-    });
-    it('should disable edit, pin, delete and ignore actions if crosswalk is disabled', function () {
-        mdm_sdk_1.isCrosswalkDisabled.mockReturnValue(true);
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        var event = {};
-        (0, test_utils_1.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(react_2.screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.queryByLabelText('Ignore')).not.toBeInTheDocument();
+                    expect(react_2.screen.queryByLabelText('Pin')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    editButton = react_2.screen.getByLabelText("You don't have permissions to edit");
+                    expect(editButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(editButton).toHaveTextContent('Edit');
+                    deleteButton = react_2.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_1.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({}, (0, mdm_sdk_1.createNewAttribute)({ parentUri: 'entities/123', attributeType: defaultProps.attributeType })), { value: 'Test' })
+                    }).user;
+                    return [4 /*yield*/, user.hover(react_2.screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.queryByLabelText('Ignore')).not.toBeInTheDocument();
+                    expect(react_2.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(react_2.screen.getByText('Test'))];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.queryByLabelText('Ignore')).not.toBeInTheDocument();
+                    expect(react_2.screen.queryByLabelText('Pin')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    editButton = react_2.screen.getByLabelText("You don't have permissions to edit");
+                    expect(editButton.children[0]).toHaveAttribute('aria-disabled', 'true');
+                    expect(editButton).toHaveTextContent('Edit');
+                    deleteButton = react_2.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_1.IgnoreButton).length).toBe(0);
-        expect(wrapper.find(PinButton_1.PinButton).length).toBe(0);
-    });
+    }); });
 });