@reltio/components 1.4.1999 → 1.4.2001

package/esm/features/crosswalks/AttributesTable/AttributesTable.test.js

@@ -9,394 +9,755 @@ 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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import i18n from 'ui-i18n';
-import Button from '@mui/material/Button';
-import { BasicTable } from '../../../BasicTable';
-import { ColumnsSettings } from '../../../ColumnsSettings';
-import { BasicViewHeader } from '../../../BasicViewHeader';
-import { LinearLoadIndicator } from '../../../LinearLoadIndicator';
-import { EmptyStub } from '../../../EmptyStub';
-import { useMdmMetadata } from '../../../contexts/MdmModuleContext';
-import * as helpers from './helpers';
-import { COLUMNS_DATA, DEFAULT_VISIBLE_COLUMNS } from './helpers';
-import { AttributesFactory } from './components/AttributesFactory';
-import { OvValuesRenderer } from './components/OvValuesRenderer';
-import { RuleTypeRenderer } from './components/RuleTypeRenderer';
-import { ConfirmEditIgnoredDialog } from './components/ConfirmEditIgnoredDialog';
+import { render, fireEvent, within, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DndProvider } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import { config } from 'react-transition-group';
+import { mockBasicTableSizing } from '../../../test-utils';
+import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
+import { createEntity, createMetadata, selectedAttributeTypes } from './AttributesTable.test-data';
 import AttributesTable from './AttributesTable';
-jest.mock('react-virtualized-auto-sizer', function () {
-    return jest.fn().mockImplementation(function (_a) {
-        var children = _a.children;
-        return React.createElement("div", null, children());
-    });
-});
-jest.mock('./components/OvValuesRenderer', function () { return ({
-    OvValuesRenderer: jest.fn()
-}); });
-jest.mock('./components/RuleTypeRenderer', function () { return ({
-    RuleTypeRenderer: jest.fn()
-}); });
-jest.mock('./components/ConfirmEditIgnoredDialog', function () { return ({
-    ConfirmEditIgnoredDialog: jest.fn()
-}); });
-jest.mock('../../../contexts/MdmModuleContext', function () { return (__assign(__assign({}, jest.requireActual('../../../contexts/MdmModuleContext')), { useMdmMetadata: jest.fn() })); });
-describe('AttributesTable tests', function () {
-    var metadata = {
-        entityTypes: [
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { debounce: function (x) { return x; } })); });
+var visibleColumns = ['ovValues', 'values'];
+var crosswalksMap = {
+    entity: {
+        'entities/01L2n5z/attributes/Boolean/5nmc3Cp': [
             {
-                uri: 'configuration/entityTypes/HCP',
-                label: 'HCP',
                 attributes: [
-                    {
-                        label: 'Country Code',
-                        name: 'CountryCode',
-                        type: 'String',
-                        uri: 'configuration/entityTypes/HCP/attributes/CountryCode'
-                    },
-                    {
-                        label: 'Date',
-                        name: 'Date',
-                        type: 'Date',
-                        uri: 'configuration/entityTypes/HCP/attributes/Date'
-                    },
-                    {
-                        label: 'Affiliated with',
-                        name: 'affiliatedwith',
-                        type: 'String',
-                        uri: 'configuration/entityTypes/HCP/attributes/affiliatedwith',
-                        hidden: true
-                    }
-                ]
+                    'entities/01L2n5z/attributes/TextField/5noU1aB',
+                    'entities/01L2n5z/attributes/Boolean/5nmc3Cp'
+                ],
+                type: 'configuration/sources/Reltio',
+                uri: 'entities/01L2n5z/crosswalks/7F10sMx',
+                value: '01L2n5z'
+            }
+        ],
+        'entities/01L2n5z/attributes/TextField/5noU1aB': [
+            {
+                attributes: [
+                    'entities/01L2n5z/attributes/TextField/5noU1aB',
+                    'entities/01L2n5z/attributes/Boolean/5nmc3Cp'
+                ],
+                type: 'configuration/sources/Reltio',
+                uri: 'entities/01L2n5z/crosswalks/7F10sMx',
+                value: '01L2n5z'
             }
         ]
+    },
+    relation: {}
+};
+var metadata = createMetadata();
+var defaultProps = {
+    entity: createEntity(),
+    isLoading: false,
+    crosswalksMap: crosswalksMap,
+    visibleColumns: visibleColumns,
+    onChangeVisibleColumns: function () { },
+    readOnly: false,
+    onDelete: function () { },
+    onPin: function () { },
+    onIgnore: function () { },
+    onEdit: function () { },
+    onAdd: function () { },
+    selectedAttributeTypes: selectedAttributeTypes,
+    onSelectAttributeTypes: function () { },
+    additionalHeaderItems: null,
+    className: 'className',
+    emptyTempAttributeUris: []
+};
+var setUp = function (props) {
+    var user = userEvent.setup({ delay: null, skipHover: true });
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (React.createElement(DndProvider, { backend: HTML5Backend },
+            React.createElement(MdmModuleProvider, { values: { metadata: metadata } }, children)));
     };
-    var props = {
-        entity: {
-            attributes: {
-                FirstName: [
-                    {
-                        uri: 'entities/1/attributes/FirstName/1',
-                        type: 'configuration/entityTypes/HCP/attributes/FirstName',
-                        ov: true,
-                        value: '90909'
-                    }
-                ],
-                CountryCode: [
-                    {
-                        uri: 'entities/1/attributes/CountryCode/1',
-                        type: 'configuration/entityTypes/HCP/attributes/CountryCode',
-                        value: 'Italy',
-                        lookupCode: 'IT',
-                        ov: true
-                    }
-                ],
-                Date: [
-                    {
-                        uri: 'entities/1/attributes/Date/1',
-                        type: 'configuration/entityTypes/HCP/attributes/Date',
-                        value: '123456',
-                        ov: false
-                    }
-                ],
-                affiliatedwith: [
-                    {
-                        uri: 'entities/1/attributes/affiliatedWith/1',
-                        type: 'configuration/entityTypes/HCP/attributes/affiliatedwith',
-                        value: 'value',
-                        ov: true
-                    }
-                ],
-                paging: {
-                    'configuration/entityTypes/HCP/attributes/affiliatedwith': {
-                        totalValues: 6,
-                        totalOvValues: 1
-                    }
+    var renderer = render(React.createElement(AttributesTable, __assign({}, props)), { wrapper: Providers });
+    return __assign(__assign({}, renderer), { user: user });
+};
+describe('attribute table tests', function () {
+    var getRowByIndex = function (index) {
+        var fixHeadAndFirstColumnContainer = screen.queryByTestId('fix-head-and-fix-column-container');
+        return within(fixHeadAndFirstColumnContainer).queryAllByTestId("base-cell-".concat(index));
+    };
+    var getCellByIndexes = function (rowIndex, columnIndex) {
+        var row = getRowByIndex(rowIndex);
+        return row[columnIndex];
+    };
+    var editTextFieldAttribute = function (user_1) {
+        var args_1 = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args_1[_i - 1] = arguments[_i];
+        }
+        return __awaiter(void 0, __spreadArray([user_1], args_1, true), void 0, function (user, valueIndex) {
+            var attribute;
+            if (valueIndex === void 0) { valueIndex = 0; }
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        attribute = within(getCellByIndexes(0, 1)).getByTestId("value-index-".concat(valueIndex));
+                        return [4 /*yield*/, user.hover(attribute)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(within(attribute).queryByRole('button', { name: 'More actions' }))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Edit'))];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(screen.getByRole('textbox'), ' newValue')];
+                    case 4:
+                        _a.sent();
+                        return [4 /*yield*/, user.keyboard('[Enter]')];
+                    case 5:
+                        _a.sent();
+                        return [2 /*return*/];
                 }
-            },
-            type: 'configuration/entityTypes/HCP',
-            uri: 'entities/1'
-        },
-        crosswalksMap: {
-            entity: {},
-            relation: {}
-        },
-        isLoading: false,
-        onChangeVisibleColumns: jest.fn(),
-        onDelete: jest.fn(),
-        onPin: jest.fn(),
-        onIgnore: jest.fn(),
-        onEdit: jest.fn(),
-        onAdd: jest.fn(),
-        selectedAttributeTypes: [
-            {
-                label: 'Country Code',
-                name: 'CountryCode',
-                type: 'String',
-                uri: 'configuration/entityTypes/HCP/attributes/CountryCode'
-            },
-            {
-                label: 'Date',
-                name: 'Date',
-                type: 'Date',
-                uri: 'configuration/entityTypes/HCP/attributes/Date'
-            }
-        ],
-        activeSurvivorshipGroupUri: 'activeSurvivorshipGroupUri',
-        onSelectAttributeTypes: jest.fn(),
-        emptyTempAttributeUris: []
+            });
+        });
+    };
+    var checkBasicTableElements = function () {
+        expect(screen.getByText('Sources')).toBeInTheDocument();
+        expect(screen.getByLabelText('Show/hide columns')).toBeInTheDocument();
+        expect(screen.getByText('Attributes & OV')).toBeInTheDocument();
+        expect(screen.getByText('Attribute values')).toBeInTheDocument();
+        expect(screen.getByText('Winner source systems')).toBeInTheDocument();
+        expect(screen.getByText('Rule type')).toBeInTheDocument();
+        expect(screen.getByText('Count')).toBeInTheDocument();
+        expect(screen.getByText('Count')).toBeInTheDocument();
+        expect(screen.getByText('Attribute values')).toBeInTheDocument();
+    };
+    var checkDefaultAttributes = function () {
+        expect(within(getCellByIndexes(0, 0)).getByText('String Label')).toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 0)).getByText('text field value')).toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 0)).queryByText('another text value')).not.toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 1)).getByText('Reltio')).toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 2)).getByText('Recency')).toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 3)).getByText('2')).toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 4)).getByText('text field value')).toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 4)).getByText('another text value')).toBeInTheDocument();
+        expect(within(within(getCellByIndexes(0, 4)).getByTestId('value-index-1')).getByTestId('SvgIgnored')).toBeInTheDocument();
+        expect(within(getCellByIndexes(1, 0)).getByText('Boolean')).toBeInTheDocument();
+        expect(within(getCellByIndexes(1, 0)).getByText('Yes')).toBeInTheDocument();
+        expect(within(getCellByIndexes(1, 1)).getByText('Reltio')).toBeInTheDocument();
+        expect(within(getCellByIndexes(1, 2)).getByText('Frequency')).toBeInTheDocument();
+        expect(within(getCellByIndexes(1, 3)).getByText('1')).toBeInTheDocument();
+        expect(within(getCellByIndexes(1, 4)).getByText('Yes')).toBeInTheDocument();
+        expect(within(getCellByIndexes(2, 0)).getByText('Nested attribute')).toBeInTheDocument();
+        expect(within(getCellByIndexes(2, 0)).getByText('Nested Label')).toBeInTheDocument();
+        expect(within(getCellByIndexes(2, 1)).queryByText(/./)).not.toBeInTheDocument();
+        expect(within(getCellByIndexes(2, 2)).getByText('Source system')).toBeInTheDocument();
+        expect(within(getCellByIndexes(2, 3)).getByText('1')).toBeInTheDocument();
+        expect(within(getCellByIndexes(2, 4)).getByText('Nested Label')).toBeInTheDocument();
+        expect(within(getCellByIndexes(3, 0)).getByText('Address')).toBeInTheDocument();
+        expect(within(getCellByIndexes(3, 0)).getByText('Reference Address')).toBeInTheDocument();
+        expect(within(getCellByIndexes(3, 0)).getByText('new address')).toBeInTheDocument();
+        expect(within(getCellByIndexes(3, 1)).queryByText(/./)).not.toBeInTheDocument();
+        expect(within(getCellByIndexes(3, 2)).getByText('Minimum value')).toBeInTheDocument();
+        expect(within(getCellByIndexes(3, 3)).getByText('1')).toBeInTheDocument();
+        expect(within(getCellByIndexes(3, 4)).getByText('Reference Address')).toBeInTheDocument();
+        expect(within(getCellByIndexes(3, 4)).getByText('new address')).toBeInTheDocument();
+        expect(within(getCellByIndexes(4, 0)).getByText('Image Gallery')).toBeInTheDocument();
+        expect(within(getCellByIndexes(4, 1)).queryByText(/./)).not.toBeInTheDocument();
+        expect(within(getCellByIndexes(4, 2)).getByText('Other Attribute Winner Crosswalk')).toBeInTheDocument();
+        expect(within(getCellByIndexes(4, 3)).getByText('1')).toBeInTheDocument();
+        expect(within(getCellByIndexes(4, 4)).getByRole('img')).toHaveAttribute('src', 'https://s3.amazonaws.com/reltio.qa.ih/thumbnailInew/5iWrjreLxiT2avDKoX3fQmqCu.png');
     };
-    var COLUMNS_DATA_MOCK = [
-        { id: '1', label: 'col 1' },
-        { id: '2', label: 'col 2' }
-    ];
-    var ROWS_DATA_MOCK = [{ 1: 'col 1 row 1', 2: 'col 2 row 2' }];
     beforeAll(function () {
-        useMdmMetadata.mockReturnValue(metadata);
-        OvValuesRenderer.mockImplementation(EmptyStub);
-        RuleTypeRenderer.mockImplementation(EmptyStub);
-        ConfirmEditIgnoredDialog.mockImplementation(EmptyStub);
-        jest.spyOn(AttributesFactory, 'build').mockReturnValue(null);
+        config.disabled = true;
+    });
+    afterAll(function () {
+        config.disabled = false;
     });
     afterEach(function () {
         jest.clearAllMocks();
     });
-    it('should render basic table correctly', function () {
-        jest.spyOn(helpers, 'getBasicTableColumnsData').mockReturnValueOnce(COLUMNS_DATA_MOCK);
-        jest.spyOn(helpers, 'getBasicTableRowsData').mockReturnValueOnce(ROWS_DATA_MOCK);
-        var wrapper = shallow(React.createElement(AttributesTable, __assign({}, props)));
-        expect(wrapper.find(BasicTable).props()).toMatchObject({
-            fixFirstColumn: true,
-            rowsData: ROWS_DATA_MOCK,
-            columnsData: COLUMNS_DATA_MOCK
+    it('should render basic table correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing;
+        return __generator(this, function (_a) {
+            unmockTableSizing = mockBasicTableSizing();
+            setUp(__assign(__assign({}, defaultProps), { visibleColumns: ['ovValues', 'values', 'ruleType', 'count', 'winnerSources'] }));
+            expect(screen.getByText('Attribute')).toBeInTheDocument();
+            expect(screen.queryByTestId('reltio-linear-load-indicator')).not.toBeInTheDocument();
+            checkBasicTableElements();
+            checkDefaultAttributes();
+            unmockTableSizing();
+            return [2 /*return*/];
         });
-        expect(helpers.getBasicTableRowsData).toHaveBeenCalledWith(metadata, 'configuration/entityTypes/HCP', props.selectedAttributeTypes, DEFAULT_VISIBLE_COLUMNS, props.crosswalksMap, props.entity.attributes, props.activeSurvivorshipGroupUri);
-        expect(helpers.getBasicTableColumnsData).toHaveBeenCalledWith(DEFAULT_VISIBLE_COLUMNS.map(function (columnId) { return COLUMNS_DATA.find(function (_a) {
-            var id = _a.id;
-            return id === columnId;
-        }); }));
-        expect(wrapper.find(BasicViewHeader).prop('title')).toBe(i18n.text('Sources'));
-    });
+    }); });
+    it('should render basic table correctly in readOnly mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, user, attribute;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    unmockTableSizing = mockBasicTableSizing();
+                    user = setUp(__assign(__assign({}, defaultProps), { visibleColumns: ['ovValues', 'values', 'ruleType', 'count', 'winnerSources'], readOnly: true })).user;
+                    expect(screen.queryByText('Attribute')).not.toBeInTheDocument();
+                    checkBasicTableElements();
+                    checkDefaultAttributes();
+                    attribute = within(getCellByIndexes(0, 4)).getByTestId('value-index-0');
+                    return [4 /*yield*/, user.hover(attribute)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(within(attribute).queryByRole('button', { name: 'More actions' }))];
+                case 2:
+                    _a.sent();
+                    expect(screen.getByRole('menuitem', { name: 'Edit' })).toHaveClass('Mui-disabled');
+                    expect(screen.getByRole('menuitem', { name: 'Delete' })).toHaveClass('Mui-disabled');
+                    unmockTableSizing();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should show linear loader correctly', function () {
-        var wrapper = shallow(React.createElement(AttributesTable, __assign({}, props, { isLoading: false })));
-        expect(wrapper.find(LinearLoadIndicator).length).toBe(0);
-        wrapper.setProps({ isLoading: true });
-        expect(wrapper.find(LinearLoadIndicator).length).toBe(1);
+        setUp(__assign(__assign({}, defaultProps), { isLoading: true }));
+        expect(screen.getByTestId('reltio-linear-load-indicator')).toBeInTheDocument();
     });
     it('should select initial attribute types when props.selectedAttributeTypes is nil', function () {
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props)));
-        expect(props.onSelectAttributeTypes).not.toHaveBeenCalled();
-        wrapper.setProps({ selectedAttributeTypes: undefined });
-        expect(props.onSelectAttributeTypes).toHaveBeenCalledTimes(1);
-        expect(props.onSelectAttributeTypes).toHaveBeenCalledWith([
+        var onSelectAttributeTypes = jest.fn();
+        setUp(__assign(__assign({}, defaultProps), { onSelectAttributeTypes: onSelectAttributeTypes, selectedAttributeTypes: undefined }));
+        expect(onSelectAttributeTypes).toHaveBeenCalledWith([
             {
-                label: 'Country Code',
-                name: 'CountryCode',
+                label: 'Boolean',
+                name: 'Boolean',
+                type: 'Boolean',
+                uri: 'configuration/entityTypes/HCP/attributes/Boolean'
+            },
+            {
+                label: 'String Label',
+                name: 'TextField',
                 type: 'String',
-                uri: 'configuration/entityTypes/HCP/attributes/CountryCode'
+                uri: 'configuration/entityTypes/HCP/attributes/TextField'
             },
             {
-                label: 'Date',
-                name: 'Date',
-                type: 'Date',
-                uri: 'configuration/entityTypes/HCP/attributes/Date'
+                label: 'Nested attribute',
+                name: 'DeepNested',
+                type: 'Nested',
+                uri: 'configuration/entityTypes/HCP/attributes/DeepNested'
             }
         ]);
     });
     it('should not render rows if entity is undefined', function () {
-        var wrapper = shallow(React.createElement(AttributesTable, __assign({}, props, { entity: undefined })));
-        expect(wrapper.find(BasicTable).prop('rowsData')).toEqual([]);
-    });
-    it('should render ColumnsSettings in the header and change columns correctly', function () {
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props)));
-        var columnsSettings = wrapper.find(ColumnsSettings);
-        expect(columnsSettings.prop('selectedColumns')).toEqual(DEFAULT_VISIBLE_COLUMNS);
-        expect(columnsSettings.prop('columnsData')).toEqual(COLUMNS_DATA);
-        var nextVisibleColumns = DEFAULT_VISIBLE_COLUMNS.slice(0, -1);
-        act(function () {
-            columnsSettings.prop('onChangeColumns')(nextVisibleColumns);
-        });
-        expect(props.onChangeVisibleColumns).toHaveBeenCalledWith(nextVisibleColumns);
-        wrapper.setProps({ visibleColumns: nextVisibleColumns });
-        expect(wrapper.find(ColumnsSettings).prop('selectedColumns')).toEqual(nextVisibleColumns);
-        expect(wrapper
-            .find(BasicTable)
-            .prop('columnsData')
-            .map(function (_a) {
-            var id = _a.id;
-            return id;
-        })).toEqual(nextVisibleColumns);
-    });
-    it('should pass props.onPin to AttributeValuesRenderer', function () {
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props)));
-        var onPin = wrapper.find('AttributeValuesRenderer').at(0).prop('onPin');
-        expect(onPin).toBe(props.onPin);
+        var unmockTableSizing = mockBasicTableSizing();
+        setUp(__assign(__assign({}, defaultProps), { entity: undefined }));
+        expect(screen.queryByText(selectedAttributeTypes[0].label)).not.toBeInTheDocument();
+        expect(screen.queryByText(selectedAttributeTypes[1].label)).not.toBeInTheDocument();
+        expect(screen.queryByText('text field value')).not.toBeInTheDocument();
+        expect(screen.queryByText('Yes')).not.toBeInTheDocument();
+        unmockTableSizing();
     });
-    it('should pass props.onIgnore to AttributeValuesRenderer', function () {
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props)));
-        var onIgnore = wrapper.find('AttributeValuesRenderer').at(0).prop('onIgnore');
-        expect(onIgnore).toBe(props.onIgnore);
+    it('should render default columns', function () {
+        var unmockTableSizing = mockBasicTableSizing();
+        setUp(__assign(__assign({}, defaultProps), { visibleColumns: undefined }));
+        expect(screen.getByText('Rule type')).toBeInTheDocument();
+        expect(within(screen.getAllByTestId('column-name-ruleType')[0]).getByText('Recency')).toBeInTheDocument();
+        expect(within(screen.getAllByTestId('column-name-ruleType')[1]).getByText('Frequency')).toBeInTheDocument();
+        expect(within(screen.getAllByTestId('column-name-ruleType')[2]).getByText('Source system')).toBeInTheDocument();
+        unmockTableSizing();
     });
-    it('should call props.onDelete after confirmation on attribute delete', function () {
-        var _a, _b;
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props)));
-        expect(wrapper.find('ConfirmDeleteDialog').prop('open')).toBe(false);
-        var onDelete = wrapper.find('AttributeValuesRenderer').at(0).prop('onDelete');
-        var deleteEvent = {
-            attributeValue: (_b = (_a = props.entity) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b['CountryCode'][0],
-            attributeType: metadata.entityTypes[0].attributes[0],
-            crosswalks: []
-        };
-        act(function () {
-            onDelete(deleteEvent);
-        });
-        wrapper.update();
-        expect(wrapper.find('ConfirmDeleteDialog').prop('open')).toBe(true);
-        act(function () {
-            wrapper
-                .find('ConfirmDeleteDialog')
-                .find(Button)
-                .filterWhere(function (button) { return button.text() === 'Yes'; })
-                .find('button')
-                .simulate('click');
-        });
-        wrapper.update();
-        expect(wrapper.find('ConfirmDeleteDialog').prop('open')).toBe(false);
-        expect(props.onDelete).toHaveBeenCalledWith(deleteEvent);
-    });
-    it('should not call props.onDelete without confirmation on attribute delete', function () {
-        var _a, _b;
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props)));
-        expect(wrapper.find('ConfirmDeleteDialog').prop('open')).toBe(false);
-        var onDelete = wrapper.find('AttributeValuesRenderer').at(0).prop('onDelete');
-        var deleteEvent = {
-            attributeValue: (_b = (_a = props.entity) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b['CountryCode'][0],
-            attributeType: metadata.entityTypes[0].attributes[0],
-            crosswalks: []
-        };
-        act(function () {
-            onDelete(deleteEvent);
-        });
-        wrapper.update();
-        expect(wrapper.find('ConfirmDeleteDialog').prop('open')).toBe(true);
-        act(function () {
-            wrapper
-                .find('ConfirmDeleteDialog')
-                .find(Button)
-                .filterWhere(function (button) { return button.text() === 'No'; })
-                .find('button')
-                .simulate('click');
-        });
-        wrapper.update();
-        expect(wrapper.find('ConfirmDeleteDialog').prop('open')).toBe(false);
-        expect(props.onDelete).not.toHaveBeenCalled();
-    });
-    it('should call props.onEdit on not ignored attribute edit', function () {
-        var _a, _b;
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props)));
-        var onEdit = wrapper.find('AttributeValuesRenderer').at(0).prop('onEdit');
-        var editEvent = {
-            attributeValue: __assign(__assign({}, (_b = (_a = props.entity) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b['CountryCode'][0]), { value: 'Russisa', lookupCode: 'RU' }),
-            attributeType: metadata.entityTypes[0].attributes[0],
-            crosswalk: {
-                uri: 'entities/1/crosswalks/1',
-                type: 'configuration/sources/Reltio',
-                value: 'cw1'
+    it('should render Source sequence after clicking view details button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    unmockTableSizing = mockBasicTableSizing();
+                    user = setUp(__assign(__assign({}, defaultProps), { visibleColumns: undefined })).user;
+                    return [4 /*yield*/, user.click(screen.getAllByRole('button', { name: 'View details' })[0])];
+                case 1:
+                    _a.sent();
+                    expect(within(screen.getByRole('presentation')).getByText('Source sequence')).toBeInTheDocument();
+                    expect(within(screen.getByRole('presentation')).getByText('Reltio')).toBeInTheDocument();
+                    return [4 /*yield*/, user.click(within(screen.getByRole('presentation')).getByRole('button'))];
+                case 2:
+                    _a.sent();
+                    expect(screen.queryByText('Source sequence')).not.toBeInTheDocument();
+                    unmockTableSizing();
+                    return [2 /*return*/];
             }
-        };
-        act(function () {
-            onEdit(editEvent);
         });
-        expect(props.onEdit).toHaveBeenCalledWith(editEvent);
-    });
-    it('should show confirmation dialog on ignored attribute edit', function () {
-        var _a, _b;
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props)));
-        expect(wrapper.find(ConfirmEditIgnoredDialog).prop('open')).toBe(false);
-        var onEdit = wrapper.find('AttributeValuesRenderer').at(0).prop('onEdit');
-        var editEvent = {
-            attributeValue: __assign(__assign({}, (_b = (_a = props.entity) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b['CountryCode'][0]), { value: 'Russisa', lookupCode: 'RU', ignored: true }),
-            attributeType: metadata.entityTypes[0].attributes[0],
-            crosswalk: {
-                uri: 'entities/1/crosswalks/1',
-                type: 'configuration/sources/Reltio',
-                value: 'cw1'
+    }); });
+    it('should call onChangeVisibleColumns on change columns', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onChangeVisibleColumns, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onChangeVisibleColumns = jest.fn();
+                    user = setUp(__assign(__assign({}, defaultProps), { onChangeVisibleColumns: onChangeVisibleColumns })).user;
+                    return [4 /*yield*/, user.click(screen.getByLabelText('Show/hide columns'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('Winner source systems'))];
+                case 2:
+                    _a.sent();
+                    expect(onChangeVisibleColumns).toHaveBeenCalledWith(['ovValues', 'values', 'winnerSources']);
+                    return [2 /*return*/];
             }
-        };
-        act(function () {
-            onEdit(editEvent);
         });
-        wrapper.update();
-        expect(props.onEdit).not.toHaveBeenCalled();
-        expect(wrapper.find(ConfirmEditIgnoredDialog).prop('open')).toBe(true);
+    }); });
+    it.skip('should drag and drop rows correctly', function () {
+        jest.useFakeTimers();
+        var unmockTableSizing = mockBasicTableSizing();
+        var onSelectAttributeTypes = jest.fn();
+        var props = __assign(__assign({}, defaultProps), { onSelectAttributeTypes: onSelectAttributeTypes });
+        setUp(props);
+        expect(within(getCellByIndexes(1, 0)).queryByText('Yes')).toBeInTheDocument();
+        expect(within(getCellByIndexes(1, 0)).queryByText('Boolean')).toBeInTheDocument();
+        expect(within(getCellByIndexes(1, 1)).queryByText('Yes')).toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 0)).queryByText('text field value')).toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 0)).queryByText('<h1>String</h1>')).toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 1)).queryByText('text field value')).toBeInTheDocument();
+        var dragIndicator = getCellByIndexes(0, 0).querySelector('.dragIndicator');
+        fireEvent.dragStart(dragIndicator);
+        jest.runAllTimers();
+        expect(within(getCellByIndexes(1, 0)).queryByText('Yes')).not.toBeInTheDocument();
+        expect(within(getCellByIndexes(1, 0)).queryByText('Boolean')).toBeInTheDocument();
+        expect(within(getCellByIndexes(1, 1)).queryByText('Yes')).not.toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 0)).queryByText('text field value')).not.toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 0)).queryByText('<h1>String</h1>')).toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 1)).queryByText('text field value')).not.toBeInTheDocument();
+        var dropRow = getCellByIndexes(1, 0);
+        fireEvent.dragEnter(dropRow);
+        expect(within(getCellByIndexes(0, 0)).queryByText('Boolean')).toBeInTheDocument();
+        expect(within(getCellByIndexes(1, 0)).queryByText('<h1>String</h1>')).toBeInTheDocument();
+        fireEvent.dragEnd(dropRow);
+        expect(onSelectAttributeTypes).toHaveBeenCalledWith([selectedAttributeTypes[1], selectedAttributeTypes[0]]);
+        unmockTableSizing();
     });
-    it('should call props.onEdit if confirmed editing attribute with ignored', function () {
-        var _a, _b;
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props)));
-        var onEdit = wrapper.find('AttributeValuesRenderer').at(0).prop('onEdit');
-        var editEvent = {
-            attributeValue: __assign(__assign({}, (_b = (_a = props.entity) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b['CountryCode'][0]), { value: 'Russisa', lookupCode: 'RU', ignored: true }),
-            attributeType: metadata.entityTypes[0].attributes[0],
-            crosswalk: {
-                uri: 'entities/1/crosswalks/1',
-                type: 'configuration/sources/Reltio',
-                value: 'cw1'
+    it('should pin and ignore attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, onPin, onIgnore, props, user, attribute, pinButton, ignoreButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    unmockTableSizing = mockBasicTableSizing();
+                    onPin = jest.fn();
+                    onIgnore = jest.fn();
+                    props = __assign(__assign({}, defaultProps), { onPin: onPin, onIgnore: onIgnore });
+                    user = setUp(props).user;
+                    attribute = within(getCellByIndexes(0, 1)).getByTestId('value-index-0');
+                    return [4 /*yield*/, user.hover(attribute)];
+                case 1:
+                    _a.sent();
+                    pinButton = within(attribute).getByLabelText('Pin').querySelector('button');
+                    ignoreButton = within(attribute).getByLabelText('Ignore').querySelector('button');
+                    return [4 /*yield*/, user.click(pinButton)];
+                case 2:
+                    _a.sent();
+                    expect(onPin).toHaveBeenCalled();
+                    return [4 /*yield*/, user.click(ignoreButton)];
+                case 3:
+                    _a.sent();
+                    expect(onIgnore).toHaveBeenCalled();
+                    unmockTableSizing();
+                    return [2 /*return*/];
             }
-        };
-        act(function () {
-            onEdit(editEvent);
         });
-        wrapper.update();
-        wrapper.find(ConfirmEditIgnoredDialog).prop('onConfirmEditWithIgnore')();
-        expect(props.onEdit).toHaveBeenCalledWith(editEvent);
-        expect(props.onIgnore).not.toHaveBeenCalled();
-    });
-    it('should call props.onEdit and props.onIgnore if confirmed editing attribute without ignored', function () {
-        var _a, _b;
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props)));
-        var onEdit = wrapper.find('AttributeValuesRenderer').at(0).prop('onEdit');
-        var editEvent = {
-            attributeValue: __assign(__assign({}, (_b = (_a = props.entity) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b['CountryCode'][0]), { value: 'Russisa', lookupCode: 'RU', ignored: true }),
-            attributeType: metadata.entityTypes[0].attributes[0],
-            crosswalk: {
-                uri: 'entities/1/crosswalks/1',
-                type: 'configuration/sources/Reltio',
-                value: 'cw1'
+    }); });
+    it('should pin and ignore auto generated attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, onPin, onIgnore, selectedAttributeTypes, props, user, attribute, pinButton, ignoreButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    unmockTableSizing = mockBasicTableSizing();
+                    onPin = jest.fn();
+                    onIgnore = jest.fn();
+                    selectedAttributeTypes = [
+                        {
+                            description: 'Yes or No',
+                            label: 'Boolean',
+                            name: 'Boolean',
+                            type: 'Boolean',
+                            uri: 'configuration/entityTypes/HCP/attributes/Boolean',
+                            autoGenerated: true
+                        }
+                    ];
+                    props = __assign(__assign({}, defaultProps), { selectedAttributeTypes: selectedAttributeTypes, onPin: onPin, onIgnore: onIgnore });
+                    user = setUp(props).user;
+                    attribute = within(getCellByIndexes(0, 1)).getByTestId('value-index-0');
+                    return [4 /*yield*/, user.hover(attribute)];
+                case 1:
+                    _a.sent();
+                    pinButton = within(attribute).getByLabelText('Pin').querySelector('button');
+                    ignoreButton = within(attribute).getByLabelText('Ignore').querySelector('button');
+                    expect(within(attribute).queryByRole('button', { name: 'More actions' })).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click(pinButton)];
+                case 2:
+                    _a.sent();
+                    expect(onPin).toHaveBeenCalled();
+                    return [4 /*yield*/, user.click(ignoreButton)];
+                case 3:
+                    _a.sent();
+                    expect(onIgnore).toHaveBeenCalled();
+                    unmockTableSizing();
+                    return [2 /*return*/];
             }
-        };
-        act(function () {
-            onEdit(editEvent);
         });
-        wrapper.update();
-        wrapper.find(ConfirmEditIgnoredDialog).prop('onConfirmEditWithoutIgnore')();
-        expect(props.onEdit).toHaveBeenCalledWith(__assign(__assign({}, editEvent), { clearAttributeFlags: true }));
-        expect(props.onIgnore).not.toHaveBeenCalled();
-    });
-    it('should pass props.onAdd to AttributeValuesRenderer', function () {
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props)));
-        var onAdd = wrapper.find('AttributeValuesRenderer').at(0).prop('onAdd');
-        expect(onAdd).toBe(props.onAdd);
+    }); });
+    describe('Edit attributes', function () {
+        it('should edit attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var unmockTableSizing, entity, onEdit, props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        unmockTableSizing = mockBasicTableSizing();
+                        entity = createEntity();
+                        onEdit = jest.fn();
+                        props = __assign(__assign({}, defaultProps), { onEdit: onEdit });
+                        user = setUp(props).user;
+                        return [4 /*yield*/, editTextFieldAttribute(user)];
+                    case 1:
+                        _a.sent();
+                        expect(onEdit).toHaveBeenCalledWith({
+                            attributeType: selectedAttributeTypes[0],
+                            attributeValue: __assign(__assign({}, entity.attributes.TextField[0]), { value: 'text field value newValue' }),
+                            crosswalk: crosswalksMap.entity['entities/01L2n5z/attributes/TextField/5noU1aB'][0]
+                        });
+                        unmockTableSizing();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should show confirmation dialog on edit ignored attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var unmockTableSizing, props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        unmockTableSizing = mockBasicTableSizing();
+                        props = __assign({}, defaultProps);
+                        user = setUp(props).user;
+                        return [4 /*yield*/, editTextFieldAttribute(user, 1)];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByText('You are attempting to change a value that is presently ignored.')).toBeInTheDocument();
+                        expect(screen.getByText('Please choose an option:')).toBeInTheDocument();
+                        expect(screen.getByText('Save without Ignore')).toBeInTheDocument();
+                        expect(screen.getByText('Save and apply Ignore to new value')).toBeInTheDocument();
+                        expect(screen.getByText('Ok')).toBeInTheDocument();
+                        expect(screen.getByText('Cancel')).toBeInTheDocument();
+                        return [4 /*yield*/, user.click(screen.getByText('Cancel'))];
+                    case 2:
+                        _a.sent();
+                        expect(screen.queryByText('You are attempting to change a value that is presently ignored.')).not.toBeInTheDocument();
+                        unmockTableSizing();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should call onEdit in case of applying ignore to new value', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var unmockTableSizing, entity, onEdit, props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        unmockTableSizing = mockBasicTableSizing();
+                        entity = createEntity();
+                        onEdit = jest.fn();
+                        props = __assign(__assign({}, defaultProps), { onEdit: onEdit });
+                        user = setUp(props).user;
+                        return [4 /*yield*/, editTextFieldAttribute(user, 1)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Save and apply Ignore to new value'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Ok'))];
+                    case 3:
+                        _a.sent();
+                        expect(onEdit).toHaveBeenCalledWith({
+                            attributeType: selectedAttributeTypes[0],
+                            attributeValue: __assign(__assign({}, entity.attributes.TextField[1]), { value: 'another text value newValue' }),
+                            crosswalk: crosswalksMap.entity['entities/01L2n5z/attributes/TextField/5noU1aB'][0]
+                        });
+                        unmockTableSizing();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should call onEdit in without applying ignore to new value', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var unmockTableSizing, entity, onEdit, props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        unmockTableSizing = mockBasicTableSizing();
+                        entity = createEntity();
+                        onEdit = jest.fn();
+                        props = __assign(__assign({}, defaultProps), { onEdit: onEdit });
+                        user = setUp(props).user;
+                        return [4 /*yield*/, editTextFieldAttribute(user, 1)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Save without Ignore'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Ok'))];
+                    case 3:
+                        _a.sent();
+                        expect(onEdit).toHaveBeenCalledWith({
+                            attributeType: selectedAttributeTypes[0],
+                            attributeValue: __assign(__assign({}, entity.attributes.TextField[1]), { value: 'another text value newValue' }),
+                            crosswalk: crosswalksMap.entity['entities/01L2n5z/attributes/TextField/5noU1aB'][0],
+                            clearAttributeFlags: true
+                        });
+                        unmockTableSizing();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should call on edit only once in case of dblClick on "Safe without ignore"', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onEdit, unmockTableSizing, entity, props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onEdit = jest.fn();
+                        unmockTableSizing = mockBasicTableSizing();
+                        entity = createEntity();
+                        entity.attributes.TextField[0].ignored = true;
+                        props = __assign(__assign({}, defaultProps), { entity: entity, onEdit: onEdit });
+                        user = setUp(props).user;
+                        return [4 /*yield*/, editTextFieldAttribute(user)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.dblClick(screen.getByText('Ok'))];
+                    case 2:
+                        _a.sent();
+                        expect(onEdit).toHaveBeenCalledTimes(1);
+                        unmockTableSizing();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should call on edit only once in case of dblClick on "Save and apply Ignore to new value"', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onEdit, unmockTableSizing, entity, props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onEdit = jest.fn();
+                        unmockTableSizing = mockBasicTableSizing();
+                        entity = createEntity();
+                        entity.attributes.TextField[0].ignored = true;
+                        props = __assign(__assign({}, defaultProps), { entity: entity, onEdit: onEdit });
+                        user = setUp(props).user;
+                        return [4 /*yield*/, editTextFieldAttribute(user)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.dblClick(screen.getByText('Save and apply Ignore to new value'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.dblClick(screen.getByText('Ok'))];
+                    case 3:
+                        _a.sent();
+                        expect(onEdit).toHaveBeenCalledTimes(1);
+                        unmockTableSizing();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
-    it('should pass entity uri to AttributeValuesRenderer', function () {
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props)));
-        var parentUri = wrapper.find('AttributeValuesRenderer').at(0).prop('parentUri');
-        expect(parentUri).toBe(props.entity.uri);
+    describe('Delete attributes', function () {
+        it('should show confirmation dialog', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var unmockTableSizing, onDelete, props, user, attribute;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        unmockTableSizing = mockBasicTableSizing();
+                        onDelete = jest.fn();
+                        props = __assign(__assign({}, defaultProps), { onDelete: onDelete });
+                        user = setUp(props).user;
+                        attribute = within(getCellByIndexes(0, 1)).getByTestId('value-index-0');
+                        return [4 /*yield*/, user.hover(attribute)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(within(attribute).queryByRole('button', { name: 'More actions' }))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Delete'))];
+                    case 3:
+                        _a.sent();
+                        expect(screen.getByText('Are you sure you want to delete this?')).toBeInTheDocument();
+                        expect(within(screen.getByRole('dialog')).getByText('Yes')).toBeInTheDocument();
+                        expect(within(screen.getByRole('dialog')).getByText('No')).toBeInTheDocument();
+                        return [4 /*yield*/, user.click(within(screen.getByRole('dialog')).getByText('No'))];
+                    case 4:
+                        _a.sent();
+                        expect(screen.queryByText('Are you sure you want to delete this?')).not.toBeInTheDocument();
+                        unmockTableSizing();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should delete attribute', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var unmockTableSizing, entity, onDelete, props, user, attribute;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        unmockTableSizing = mockBasicTableSizing();
+                        entity = createEntity();
+                        onDelete = jest.fn();
+                        props = __assign(__assign({}, defaultProps), { onDelete: onDelete });
+                        user = setUp(props).user;
+                        attribute = within(getCellByIndexes(0, 1)).getByTestId('value-index-0');
+                        return [4 /*yield*/, user.hover(attribute)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(within(attribute).queryByRole('button', { name: 'More actions' }))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Delete'))];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(within(screen.getByRole('dialog')).getByText('Yes'))];
+                    case 4:
+                        _a.sent();
+                        expect(onDelete).toHaveBeenCalledWith({
+                            attributeType: selectedAttributeTypes[0],
+                            attributeValue: entity.attributes.TextField[0],
+                            crosswalks: crosswalksMap.entity['entities/01L2n5z/attributes/TextField/5noU1aB']
+                        });
+                        unmockTableSizing();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should not call onDelete when user clicks No and then Yes in confirmation dialog on deleting attribute', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var unmockTableSizing, onDelete, props, user, attribute, moreButton, deleteButton, dialog, declineButton, confirmButton;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        unmockTableSizing = mockBasicTableSizing();
+                        onDelete = jest.fn();
+                        props = __assign(__assign({}, defaultProps), { onDelete: onDelete });
+                        user = setUp(props).user;
+                        attribute = within(getCellByIndexes(1, 1)).getByTestId('value-index-0');
+                        return [4 /*yield*/, user.hover(attribute)];
+                    case 1:
+                        _a.sent();
+                        moreButton = within(attribute).getByRole('button', { name: 'More actions' });
+                        return [4 /*yield*/, user.click(moreButton)];
+                    case 2:
+                        _a.sent();
+                        deleteButton = screen.getByText('Delete');
+                        return [4 /*yield*/, user.click(deleteButton)];
+                    case 3:
+                        _a.sent();
+                        dialog = screen.getByRole('dialog');
+                        declineButton = within(dialog).getByText('No');
+                        confirmButton = within(dialog).getByText('Yes');
+                        fireEvent.click(declineButton);
+                        fireEvent.click(confirmButton);
+                        expect(onDelete).not.toHaveBeenCalled();
+                        unmockTableSizing();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
-    it('should pass correct props to AddAttributesButton', function () {
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props)));
-        var buttonProps = wrapper.find('AddAttributesButton').props();
-        expect(buttonProps).toEqual({
-            parentUri: props.entity.uri,
-            parentTypeUri: props.entity.type,
-            selectedAttributeTypes: props.selectedAttributeTypes,
-            onSelectAttributeTypes: props.onSelectAttributeTypes,
-            onAdd: props.onAdd
+    it('should add attribute to beginning on simple attribute select', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onAdd, onSelectAttributeTypes, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onAdd = jest.fn();
+                    onSelectAttributeTypes = jest.fn();
+                    user = setUp(__assign(__assign({}, defaultProps), { onAdd: onAdd, onSelectAttributeTypes: onSelectAttributeTypes })).user;
+                    return [4 /*yield*/, user.click(screen.getByText('Attribute'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByText('Image')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Address')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click(screen.getByText('String Label 2'))];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.keyboard('{Escape}')];
+                case 3:
+                    _a.sent();
+                    expect(onSelectAttributeTypes).toHaveBeenCalledWith(__spreadArray([
+                        {
+                            label: 'String Label 2',
+                            name: 'TextField 2',
+                            type: 'String',
+                            uri: 'configuration/entityTypes/HCP/attributes/TextField2'
+                        }
+                    ], selectedAttributeTypes, true));
+                    expect(onAdd).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-    });
-    it('should pass correct props to AttributesHeadCellRenderer', function () {
-        var wrapper = mount(React.createElement(AttributesTable, __assign({}, props, { readOnly: true })));
-        expect(wrapper.find('AttributesHeadCellRenderer').prop('readOnly')).toBe(true);
-    });
+    }); });
+    it('should add attribute to beginning on nested attribute select', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onAdd, onSelectAttributeTypes, user, selectedNested;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onAdd = jest.fn();
+                    onSelectAttributeTypes = jest.fn();
+                    user = setUp(__assign(__assign({}, defaultProps), { onAdd: onAdd, onSelectAttributeTypes: onSelectAttributeTypes })).user;
+                    return [4 /*yield*/, user.click(screen.getByText('Attribute'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('Nested'))];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.keyboard('{Escape}')];
+                case 3:
+                    _a.sent();
+                    selectedNested = {
+                        label: 'Nested',
+                        name: 'Nested',
+                        type: 'Nested',
+                        uri: 'configuration/entityTypes/HCP/attributes/Nested'
+                    };
+                    expect(onSelectAttributeTypes).toHaveBeenCalledWith(__spreadArray([selectedNested], selectedAttributeTypes, true));
+                    expect(onAdd).toHaveBeenCalledWith({
+                        attributeType: selectedNested,
+                        parentUri: 'entities/01L2n5z'
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });