@reltio/components 1.4.2044 → 1.4.2046

package/cjs/DependentLookupEditor/DependentLookupEditor.test.js

@@ -51,285 +51,112 @@ 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 mdm_sdk_1 = require("@reltio/mdm-sdk");
-var ReactSelect_1 = require("../ReactSelect");
-var DependentLookupAutopopulationContext_1 = require("../contexts/DependentLookupAutopopulationContext");
-var ReactSelectOptionWithCheckIcon_1 = require("../ReactSelectOptionWithCheckIcon");
-var helpers_1 = require("./helpers");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var DependentLookupEditor_1 = require("./DependentLookupEditor");
-jest.mock('react-dom', function () { return (__assign(__assign({}, jest.requireActual('react-dom')), { createPortal: function (value) { return value; } })); });
+var DependentLookupAutopopulationContext_1 = require("../contexts/DependentLookupAutopopulationContext");
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { debounce: jest.fn() })); });
-var originalDebounce = jest.requireActual('@reltio/mdm-sdk').debounce;
-var fakeDebounce = function (func) { return func; };
-describe('DependentLookupEditor', function () {
-    var props, resolveOptions, props2;
+var allLookups = {
+    AR: { displayName: 'Argentina' },
+    BG: { displayName: 'Bulgaria' },
+    CN: { displayName: 'China' },
+    PT: { displayName: 'Portugal' }
+};
+var defaultProps = {
+    value: { value: 'Portugal', lookupCode: 'PT' },
+    lookups: { COUNTRY_CD: { PT: { displayName: 'Portugal' } } },
+    lookupCode: 'COUNTRY_CD',
+    error: false,
+    parents: [],
+    disabled: false,
+    placeholder: '',
+    TextFieldProps: {},
+    onChange: jest.fn(),
+    resolveLookups: jest.fn(),
+    getLookups: jest.fn().mockResolvedValue(allLookups)
+};
+var setUp = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.CustomProviders, CustomProviders = _d === void 0 ? react_1.default.Fragment : _d;
+    var user = user_event_1.default.setup();
+    var Providers = function (_a) {
+        var children = _a.children;
+        return react_1.default.createElement(CustomProviders, null, children);
+    };
+    var result = (0, react_2.render)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props)), { wrapper: Providers });
+    var rerender = function (newProps) { return result.rerender(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, newProps))); };
+    return __assign(__assign({ user: user }, result), { rerender: rerender });
+};
+describe('Dependent lookup editor tests', function () {
     beforeEach(function () {
-        mdm_sdk_1.debounce.mockImplementation(fakeDebounce);
-        var requestPromise = new Promise(function (_resolve) {
-            resolveOptions = _resolve;
-        });
-        props = {
-            lookupCode: 'COUNTRY_CD',
-            getLookups: jest.fn(function (_, __, ___) { return requestPromise; }),
-            onChange: jest.fn(),
-            parents: [],
-            lookups: {},
-            resolveLookups: jest.fn()
-        };
-        props2 = {
-            lookupCode: 'COUNTRY_CD',
-            getLookups: jest.fn(function (_, __, ___) { return requestPromise; }),
-            onChange: jest.fn(),
-            parents: [],
-            lookups: {},
-            resolveLookups: jest.fn(),
-            disabled: false
-        };
+        mdm_sdk_1.debounce.mockImplementation(function (val) { return val; });
     });
     afterEach(function () {
         jest.clearAllMocks();
     });
-    it('should render ReactSelect with correct properties in single mode', function () {
-        var value = { lookupCode: 'RU', value: 'Russia' };
-        var multiple = false;
-        var placeholder = '123';
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { multiple: multiple, value: value, placeholder: placeholder })));
-        var select = wrapper.find(ReactSelect_1.ReactSelect);
-        expect(select.props()).toMatchObject({
-            isMulti: multiple,
-            value: value,
-            placeholder: placeholder
-        });
-    });
-    it('should render ReactSelect with correct properties in multiple mode', function () {
-        var value = [
-            { lookupCode: 'RU', value: 'Russia' },
-            { lookupCode: 'CN', value: 'China' }
-        ];
-        var multiple = true;
-        var placeholder = '123';
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { multiple: multiple, value: value, placeholder: placeholder })));
-        var select = wrapper.find(ReactSelect_1.ReactSelect);
-        expect(select.props()).toMatchObject({
-            isMulti: multiple,
-            value: value,
-            placeholder: placeholder
-        });
-    });
-    it('should reset inputValue and options on input blur in multiple mode', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var value, wrapper, newInputValue;
-        return __generator(this, function (_a) {
-            value = [
-                { lookupCode: 'RU', value: 'Russia' },
-                { lookupCode: 'CN', value: 'China' }
-            ];
-            wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value, multiple: true })));
-            newInputValue = 'u';
-            (0, test_utils_1.act)(function () {
-                wrapper.find(ReactSelect_1.ReactSelect).prop('onInputChange')(newInputValue, { action: 'input-change' });
-            });
-            wrapper.update();
-            expect(wrapper.find(ReactSelect_1.ReactSelect).find('Input').last().prop('value')).toBe(newInputValue);
-            expect(props.onChange).not.toHaveBeenCalled();
-            expect(props.getLookups).toHaveBeenCalledWith({
-                type: 'COUNTRY_CD',
-                parents: [],
-                displayNamePrefix: newInputValue,
-                max: 51,
-                offset: 0
-            });
-            (0, test_utils_1.act)(function () {
-                wrapper.find(ReactSelect_1.ReactSelect).prop('onInputChange')('', { action: 'input-blur' });
-            });
-            wrapper.update();
-            expect(wrapper.find(ReactSelect_1.ReactSelect).find('Input').last().prop('value')).toBe('');
-            expect(props.onChange).not.toHaveBeenCalled();
-            expect(props.getLookups).toHaveBeenCalledWith({
-                type: 'COUNTRY_CD',
-                parents: [],
-                displayNamePrefix: '',
-                max: 51,
-                offset: 0
-            });
-            return [2 /*return*/];
-        });
-    }); });
-    it('should not reset inputValue on menu-close in multiple mode', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var value, wrapper, newInputValue;
-        return __generator(this, function (_a) {
-            value = [
-                { lookupCode: 'RU', value: 'Russia' },
-                { lookupCode: 'CN', value: 'China' }
-            ];
-            wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value, multiple: true })));
-            newInputValue = 'u';
-            (0, test_utils_1.act)(function () {
-                wrapper.find(ReactSelect_1.ReactSelect).prop('onInputChange')(newInputValue, { action: 'input-change' });
-            });
-            wrapper.update();
-            expect(wrapper.find(ReactSelect_1.ReactSelect).find('Input').last().prop('value')).toBe(newInputValue);
-            expect(props.onChange).not.toHaveBeenCalled();
-            (0, test_utils_1.act)(function () {
-                wrapper.find(ReactSelect_1.ReactSelect).prop('onInputChange')('', { action: 'menu-close' });
-            });
-            wrapper.update();
-            expect(wrapper.find(ReactSelect_1.ReactSelect).find('Input').last().prop('value')).toBe('u');
-            expect(props.onChange).not.toHaveBeenCalled();
-            return [2 /*return*/];
-        });
-    }); });
-    it('should set inputValue as value property on input blur, if inputValue is not empty', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var value, wrapper, newInputValue;
-        return __generator(this, function (_a) {
-            value = { lookupCode: 'RU', value: 'Russia' };
-            wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value, multiple: false })));
-            newInputValue = 'u';
-            (0, test_utils_1.act)(function () {
-                wrapper.find(ReactSelect_1.ReactSelect).prop('onInputChange')(newInputValue, { action: 'input-change' });
-            });
-            wrapper.update();
-            expect(wrapper.find(ReactSelect_1.ReactSelect).find('Input').last().prop('value')).toBe(newInputValue);
-            expect(props.onChange).not.toHaveBeenCalled();
-            expect(props.getLookups).toHaveBeenCalledWith({
-                type: 'COUNTRY_CD',
-                parents: [],
-                displayNamePrefix: newInputValue,
-                max: 51,
-                offset: 0
-            });
-            (0, test_utils_1.act)(function () {
-                wrapper.find(ReactSelect_1.ReactSelect).prop('onInputChange')('', { action: 'input-blur' });
-            });
-            wrapper.update();
-            expect(wrapper.find(ReactSelect_1.ReactSelect).find('Input').last().prop('value')).toBe((0, helpers_1.getOptionLabel)(value));
-            expect(props.onChange).not.toHaveBeenCalled();
-            expect(props.getLookups).toHaveBeenCalledWith({
-                type: 'COUNTRY_CD',
-                parents: [],
-                displayNamePrefix: '',
-                max: 51,
-                offset: 0
-            });
-            return [2 /*return*/];
-        });
-    }); });
-    it('should set inputValue as value property on menu close, if inputValue is not empty', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var value, wrapper, newInputValue;
-        return __generator(this, function (_a) {
-            value = { lookupCode: 'RU', value: 'Russia' };
-            wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value, multiple: false })));
-            newInputValue = 'u';
-            (0, test_utils_1.act)(function () {
-                wrapper.find(ReactSelect_1.ReactSelect).prop('onInputChange')(newInputValue, { action: 'input-change' });
-            });
-            wrapper.update();
-            expect(wrapper.find(ReactSelect_1.ReactSelect).find('Input').last().prop('value')).toBe(newInputValue);
-            expect(props.onChange).not.toHaveBeenCalled();
-            expect(props.getLookups).toHaveBeenCalledWith({
-                type: 'COUNTRY_CD',
-                parents: [],
-                displayNamePrefix: newInputValue,
-                max: 51,
-                offset: 0
-            });
-            (0, test_utils_1.act)(function () {
-                wrapper.find(ReactSelect_1.ReactSelect).prop('onInputChange')('', { action: 'menu-close' });
-            });
-            wrapper.update();
-            expect(wrapper.find(ReactSelect_1.ReactSelect).find('Input').last().prop('value')).toBe((0, helpers_1.getOptionLabel)(value));
-            expect(props.onChange).not.toHaveBeenCalled();
-            expect(props.getLookups).toHaveBeenCalledWith({
-                type: 'COUNTRY_CD',
-                parents: [],
-                displayNamePrefix: '',
-                max: 51,
-                offset: 0
-            });
-            return [2 /*return*/];
-        });
-    }); });
-    var findLoadMoreButton = function (component) {
-        var menuListFooter = component.find(ReactSelect_1.ReactSelect).prop('menuListFooter');
-        if (menuListFooter) {
-            return new enzyme_1.ReactWrapper(menuListFooter);
-        }
-    };
-    it('should not render menuListFooter if options number is less or equal to max value', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper;
+    it('should render correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, options;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { max: 2 })));
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                resolveOptions({
-                                    CN: { displayName: 'China' },
-                                    PT: { displayName: 'Portugal' }
-                                });
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    user = setUp().user;
+                    expect(react_2.screen.getByRole('combobox')).toHaveValue('Portugal (PT)');
+                    expect(defaultProps.getLookups).toHaveBeenCalledWith({
+                        type: defaultProps.lookupCode,
+                        parents: defaultProps.parents,
+                        displayNamePrefix: '',
+                        max: 51,
+                        offset: 0
+                    });
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('combobox'))];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    expect(findLoadMoreButton(wrapper)).toBeUndefined();
-                    expect(wrapper.find(ReactSelect_1.ReactSelect).prop('options').length).toBe(2);
+                    options = react_2.screen.getAllByRole('option');
+                    expect(options).toHaveLength(4);
+                    expect(options[0]).toHaveTextContent('Argentina (AR)');
+                    expect(options[1]).toHaveTextContent('Bulgaria (BG)');
+                    expect(options[2]).toHaveTextContent('China (CN)');
+                    expect(options[3]).toHaveTextContent('Portugal (PT)');
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should render menuListFooter with ReactSelectLoadMoreButton if there are more options available', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper, optionsProp, options, loadMoreButton;
+    it('should render correctly in multiple mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var value, props;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { max: 2 })));
-                    expect(findLoadMoreButton(wrapper)).toBeUndefined();
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                    value = [
+                        { value: 'Portugal', lookupCode: 'PT' },
+                        { lookupCode: 'CN', value: 'China' }
+                    ];
+                    props = __assign(__assign({}, defaultProps), { value: value, multiple: true });
+                    setUp({ props: props });
+                    return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
-                                resolveOptions({
-                                    CN: { displayName: 'China' },
-                                    PT: { displayName: 'Portugal' },
-                                    RU: { displayName: 'Russia' }
-                                });
-                                return [2 /*return*/];
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, Promise.resolve()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
                             });
                         }); })];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    optionsProp = wrapper.find(ReactSelect_1.ReactSelect).prop('options');
-                    expect(optionsProp.length).toBe(2);
-                    expect(optionsProp[0].value).toBe('China');
-                    expect(optionsProp[1].value).toBe('Portugal');
-                    wrapper.find('input').simulate('keyDown', { key: 'ArrowDown' });
-                    options = wrapper.find(ReactSelectOptionWithCheckIcon_1.ReactSelectOptionWithCheckIcon);
-                    expect(options.length).toBe(2);
-                    expect(options.at(0).text()).toBe('China (CN)');
-                    expect(options.at(1).text()).toBe('Portugal (PT)');
-                    loadMoreButton = findLoadMoreButton(wrapper);
-                    expect(loadMoreButton.length).toBe(1);
-                    expect(loadMoreButton.text()).toEqual('Load more');
+                    expect(react_2.screen.getByRole('combobox')).toHaveValue('');
+                    react_2.screen.getByText('Portugal (PT)');
+                    react_2.screen.getByText('China (CN)');
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should load next options page on load more button click, button should exist if not all options are loaded', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var getLookups, value, wrapper;
+    it('should show input value when select is disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    getLookups = jest.fn();
-                    getLookups.mockReturnValue(Promise.resolve({
-                        CN: { displayName: 'China' },
-                        PT: { displayName: 'Portugal' },
-                        RU: { displayName: 'Russia' }
-                    }));
-                    value = { lookupCode: 'US', value: 'USA' };
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, max: 2 })));
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                    setUp({ props: __assign(__assign({}, defaultProps), { disabled: true }) });
+                    return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
                                     case 0: return [4 /*yield*/, Promise.resolve()];
@@ -341,177 +168,260 @@ describe('DependentLookupEditor', function () {
                         }); })];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    expect(wrapper.find(ReactSelect_1.ReactSelect).prop('options').length).toBe(2);
-                    expect(findLoadMoreButton(wrapper).exists()).toBeTruthy();
-                    getLookups.mockReturnValueOnce(Promise.resolve({
-                        RU: { displayName: 'Russia' },
-                        USA: { displayName: 'USA' },
-                        MEX: { displayName: 'MEXICO' }
-                    }));
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                findLoadMoreButton(wrapper).find('button').simulate('click');
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    expect(react_2.screen.getByRole('combobox')).toHaveValue('Portugal (PT)');
+                    expect(react_2.screen.getByRole('combobox')).toHaveAttribute('disabled');
+                    expect(react_2.screen.getByRole('combobox')).toBeVisible();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should reset inputValue and options on input blur in multiple mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var value, props, _a, user, container, input;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    value = [
+                        { value: 'Portugal', lookupCode: 'PT' },
+                        { lookupCode: 'CN', value: 'China' }
+                    ];
+                    props = __assign(__assign({}, defaultProps), { value: value, multiple: true });
+                    _a = setUp({ props: props }), user = _a.user, container = _a.container;
+                    input = react_2.screen.getByRole('combobox');
+                    return [4 /*yield*/, user.type(input, 'u')];
+                case 1:
+                    _b.sent();
+                    expect(input).toHaveValue('u');
+                    expect(props.onChange).not.toHaveBeenCalled();
+                    expect(props.getLookups).toHaveBeenCalledWith({
+                        type: 'COUNTRY_CD',
+                        parents: [],
+                        displayNamePrefix: 'u',
+                        max: 51,
+                        offset: 0
+                    });
+                    return [4 /*yield*/, user.click(container)];
                 case 2:
+                    _b.sent();
+                    expect(input).toHaveValue('');
+                    expect(props.onChange).not.toHaveBeenCalled();
+                    expect(props.getLookups).toHaveBeenCalledWith({
+                        type: 'COUNTRY_CD',
+                        parents: [],
+                        displayNamePrefix: '',
+                        max: 51,
+                        offset: 0
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not reset inputValue on menu-close in multiple mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var value, props, user, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    value = [
+                        { value: 'Portugal', lookupCode: 'PT' },
+                        { lookupCode: 'CN', value: 'China' }
+                    ];
+                    props = __assign(__assign({}, defaultProps), { value: value, multiple: true });
+                    user = setUp({ props: props }).user;
+                    input = react_2.screen.getByRole('combobox');
+                    return [4 /*yield*/, user.type(input, 'u')];
+                case 1:
                     _a.sent();
-                    // loaded options length is equal to (max + 1) so there are more options exist
-                    expect(getLookups).toHaveBeenCalledWith({
-                        type: props.lookupCode,
-                        parents: props.parents,
+                    expect(input).toHaveValue('u');
+                    expect(props.onChange).not.toHaveBeenCalled();
+                    return [4 /*yield*/, user.keyboard('{Escape}')];
+                case 2:
+                    _a.sent();
+                    expect(input).toHaveValue('u');
+                    expect(props.onChange).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should set inputValue as value property on input blur, if inputValue is not empty', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, user, container, input;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp(), user = _a.user, container = _a.container;
+                    input = react_2.screen.getByRole('combobox');
+                    return [4 /*yield*/, user.type(input, 'u')];
+                case 1:
+                    _b.sent();
+                    expect(input).toHaveValue('Portugal (PT)u');
+                    expect(defaultProps.onChange).not.toHaveBeenCalled();
+                    expect(defaultProps.getLookups).toHaveBeenCalledWith({
+                        type: 'COUNTRY_CD',
+                        parents: [],
+                        displayNamePrefix: 'Portugal (PT)u',
+                        max: 51,
+                        offset: 0
+                    });
+                    return [4 /*yield*/, user.click(container)];
+                case 2:
+                    _b.sent();
+                    expect(input).toHaveValue('Portugal (PT)');
+                    expect(defaultProps.onChange).not.toHaveBeenCalled();
+                    expect(defaultProps.getLookups).toHaveBeenLastCalledWith({
+                        type: 'COUNTRY_CD',
+                        parents: [],
                         displayNamePrefix: '',
-                        max: 3,
-                        offset: 2
+                        max: 51,
+                        offset: 0
                     });
-                    wrapper.update();
-                    expect(wrapper.find(ReactSelect_1.ReactSelect).prop('options').length).toBe(4);
-                    expect(findLoadMoreButton(wrapper).exists()).toBeTruthy();
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should load next options page on load more button click, load more button disappears if all options loaded', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var getLookups, value, wrapper;
+    it('should set inputValue as value property on menu close, if inputValue is not empty', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, input;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    getLookups = jest.fn();
-                    getLookups.mockReturnValue(Promise.resolve({
-                        CN: { displayName: 'China' },
-                        PT: { displayName: 'Portugal' },
-                        RU: { displayName: 'Russia' }
-                    }));
-                    value = { lookupCode: 'US', value: 'USA' };
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, max: 2 })));
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0: return [4 /*yield*/, Promise.resolve()];
-                                    case 1:
-                                        _a.sent();
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); })];
+                    user = setUp().user;
+                    input = react_2.screen.getByRole('combobox');
+                    return [4 /*yield*/, user.type(input, 'u')];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    expect(wrapper.find(ReactSelect_1.ReactSelect).prop('options').length).toBe(2);
-                    expect(findLoadMoreButton(wrapper).length).toBe(1);
-                    // loaded options length is less than (max + 1)
-                    getLookups.mockReturnValueOnce(Promise.resolve({
-                        RU: { displayName: 'Russia' },
-                        USA: { displayName: 'USA' }
-                    }));
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                findLoadMoreButton(wrapper).find('button').simulate('click');
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    expect(input).toHaveValue('Portugal (PT)u');
+                    expect(defaultProps.onChange).not.toHaveBeenCalled();
+                    expect(defaultProps.getLookups).toHaveBeenCalledWith({
+                        type: 'COUNTRY_CD',
+                        parents: [],
+                        displayNamePrefix: 'Portugal (PT)u',
+                        max: 51,
+                        offset: 0
+                    });
+                    return [4 /*yield*/, user.keyboard('{Escape}')];
                 case 2:
                     _a.sent();
-                    wrapper.update();
-                    expect(wrapper.find(ReactSelect_1.ReactSelect).prop('options').length).toBe(4);
-                    expect(findLoadMoreButton(wrapper)).toBeUndefined();
+                    expect(input).toHaveValue('Portugal (PT)');
+                    expect(defaultProps.onChange).not.toHaveBeenCalled();
+                    expect(defaultProps.getLookups).toHaveBeenLastCalledWith({
+                        type: 'COUNTRY_CD',
+                        parents: [],
+                        displayNamePrefix: '',
+                        max: 51,
+                        offset: 0
+                    });
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should not fail on focus', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper;
+    it('should not render menu list footer if options number is less or equal to max value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: { value: 'RU' } })));
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                resolveOptions({
-                                    PT: { displayName: 'Portugal' },
-                                    RU: { displayName: 'Russia' }
-                                });
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    props = __assign(__assign({}, defaultProps), { max: 2, getLookups: jest.fn().mockResolvedValue({ CN: { displayName: 'China' }, PT: { displayName: 'Portugal' } }) });
+                    user = setUp({ props: props }).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('combobox'))];
                 case 1:
                     _a.sent();
-                    wrapper.find(ReactSelect_1.ReactSelect).prop('onFocus')();
+                    expect(react_2.screen.queryByText('Load more')).not.toBeInTheDocument();
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should render correct select options', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper, options;
+    it('should render menu list footer with load more button if there are more options available', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props)));
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                resolveOptions({
-                                    CN: { displayName: 'China' },
-                                    RU: { displayName: 'Russia' }
-                                });
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    props = __assign(__assign({}, defaultProps), { max: 2 });
+                    user = setUp({ props: props }).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('combobox'))];
                 case 1:
                     _a.sent();
-                    wrapper.find('input').simulate('keyDown', { key: 'ArrowDown' });
-                    options = wrapper.find(ReactSelectOptionWithCheckIcon_1.ReactSelectOptionWithCheckIcon);
-                    expect(options.length).toBe(2);
-                    expect(options.at(0).text()).toBe('China (CN)');
-                    expect(options.at(1).text()).toBe('Russia (RU)');
+                    react_2.screen.getByText('Load more');
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should request default options on mount', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper;
+    it('should load next options page on load more button click, button should exist if not all options are loaded', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, options;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props)));
-                    expect(wrapper.find(ReactSelect_1.ReactSelect).prop('options')).toEqual([]);
+                    props = __assign(__assign({}, defaultProps), { max: 2, getLookups: jest.fn().mockResolvedValue(allLookups) });
+                    user = setUp({ props: props }).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('combobox'))];
+                case 1:
+                    _a.sent();
+                    options = react_2.screen.getAllByRole('option');
+                    expect(options).toHaveLength(2);
+                    expect(options[0]).toHaveTextContent('Argentina (AR)');
+                    expect(options[1]).toHaveTextContent('Bulgaria (BG)');
+                    props.getLookups.mockResolvedValue({
+                        RU: { displayName: 'Russia' },
+                        USA: { displayName: 'USA' },
+                        MEX: { displayName: 'MEXICO' }
+                    });
+                    return [4 /*yield*/, user.click(react_2.screen.getByText('Load more'))];
+                case 2:
+                    _a.sent();
                     expect(props.getLookups).toHaveBeenCalledWith({
                         type: props.lookupCode,
                         parents: props.parents,
                         displayNamePrefix: '',
-                        max: 51,
-                        offset: 0
+                        max: 3,
+                        offset: 2
                     });
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                resolveOptions({
-                                    CN: { displayName: 'China' },
-                                    RU: { displayName: 'Russia' }
-                                });
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    options = react_2.screen.getAllByRole('option');
+                    expect(options).toHaveLength(4);
+                    expect(options[0]).toHaveTextContent('Argentina (AR)');
+                    expect(options[1]).toHaveTextContent('Bulgaria (BG)');
+                    expect(options[2]).toHaveTextContent('MEXICO (MEX)');
+                    expect(options[3]).toHaveTextContent('Russia (RU)');
+                    react_2.screen.getByText('Load more');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should load next options page on load more button click, load more button disappears if all options loaded', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, options;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { max: 2, getLookups: jest.fn().mockResolvedValue(allLookups) });
+                    user = setUp({ props: props }).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('combobox'))];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    expect(wrapper.find(ReactSelect_1.ReactSelect).prop('options')).toEqual([
-                        { lookupCode: 'CN', value: 'China' },
-                        { lookupCode: 'RU', value: 'Russia' }
-                    ]);
+                    options = react_2.screen.getAllByRole('option');
+                    expect(options).toHaveLength(2);
+                    expect(options[0]).toHaveTextContent('Argentina (AR)');
+                    expect(options[1]).toHaveTextContent('Bulgaria (BG)');
+                    props.getLookups.mockResolvedValue({ RU: { displayName: 'Russia' }, USA: { displayName: 'USA' } });
+                    return [4 /*yield*/, user.click(react_2.screen.getByText('Load more'))];
+                case 2:
+                    _a.sent();
+                    options = react_2.screen.getAllByRole('option');
+                    expect(options).toHaveLength(4);
+                    expect(options[0]).toHaveTextContent('Argentina (AR)');
+                    expect(options[1]).toHaveTextContent('Bulgaria (BG)');
+                    expect(options[2]).toHaveTextContent('Russia (RU)');
+                    expect(options[3]).toHaveTextContent('USA');
+                    expect(react_2.screen.queryByText('Load more')).not.toBeInTheDocument();
                     return [2 /*return*/];
             }
         });
     }); });
     it('should request default options on props.lookupCode change', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var props, _a, user, rerender, options;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props)));
+                    props = __assign(__assign({}, defaultProps), { getLookups: jest.fn().mockResolvedValue(allLookups) });
+                    _a = setUp({ props: props }), user = _a.user, rerender = _a.rerender;
                     props.getLookups.mockClear();
-                    wrapper.setProps({
-                        lookupCode: 'SPEC'
-                    });
+                    props.getLookups
+                        .mockClear()
+                        .mockResolvedValue({ GERO: { displayName: 'Gerontology' }, IMMU: { displayName: 'Immunology' } });
+                    rerender({ lookupCode: 'SPEC' });
                     expect(props.getLookups).toHaveBeenCalledWith({
                         type: 'SPEC',
                         parents: [],
@@ -519,148 +429,72 @@ describe('DependentLookupEditor', function () {
                         max: 51,
                         offset: 0
                     });
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                resolveOptions({
-                                    GERO: { displayName: 'Gerontology' },
-                                    IMMU: { displayName: 'Immunology' }
-                                });
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('combobox'))];
                 case 1:
-                    _a.sent();
-                    wrapper.update();
-                    expect(wrapper.find(ReactSelect_1.ReactSelect).prop('options')).toEqual([
-                        { lookupCode: 'GERO', value: 'Gerontology' },
-                        { lookupCode: 'IMMU', value: 'Immunology' }
-                    ]);
+                    _b.sent();
+                    options = react_2.screen.getAllByRole('option');
+                    expect(options).toHaveLength(2);
+                    expect(options[0]).toHaveTextContent('Gerontology (GERO)');
+                    expect(options[1]).toHaveTextContent('Immunology (IMMU)');
                     return [2 /*return*/];
             }
         });
     }); });
     it('should call props.onChange with correct value on option click', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper;
+        var user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props)));
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                resolveOptions({
-                                    CN: { displayName: 'China' },
-                                    RU: { displayName: 'Russia' }
-                                });
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    user = setUp().user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('combobox'))];
                 case 1:
                     _a.sent();
-                    wrapper.find('input').simulate('keyDown', { key: 'ArrowDown' });
-                    expect(props.onChange).not.toHaveBeenCalled();
-                    wrapper.find(ReactSelectOptionWithCheckIcon_1.ReactSelectOptionWithCheckIcon).at(1).find('div').at(0).simulate('click');
-                    expect(props.onChange).toHaveBeenCalledWith({
-                        value: 'Russia',
-                        lookupCode: 'RU'
-                    });
-                    return [2 /*return*/];
-            }
-        });
-    }); });
-    it('should call props.getLookups with correct values on select input change', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper, newInputValue;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props)));
-                    newInputValue = 'Ch';
-                    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('Select').prop('onInputChange')(newInputValue, { action: 'input-change' });
-                                return [2 /*return*/];
-                            });
-                        }); })];
-                case 1:
+                    return [4 /*yield*/, user.click(react_2.screen.getByText('Argentina (AR)'))];
+                case 2:
                     _a.sent();
-                    expect(props.getLookups).toHaveBeenCalledWith({
-                        type: props.lookupCode,
-                        parents: props.parents,
-                        displayNamePrefix: newInputValue,
-                        max: 51,
-                        offset: 0
-                    });
+                    expect(defaultProps.onChange).toHaveBeenCalledWith({ value: 'Argentina', lookupCode: 'AR' });
                     return [2 /*return*/];
             }
         });
     }); });
     it('should call props.getLookups with correct values on select input change and set offset to default', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var getLookups, value, wrapper, newInputValue, nextNewInputValue;
+        var props, user, input;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    getLookups = jest.fn();
-                    getLookups.mockReturnValue(Promise.resolve({
-                        CN: { displayName: 'China' },
-                        PT: { displayName: 'Portugal' },
-                        RU: { displayName: 'Russia' }
-                    }));
-                    value = { lookupCode: 'US', value: 'USA' };
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, max: 2 })));
-                    newInputValue = 'Ch';
-                    (0, test_utils_1.act)(function () {
-                        wrapper.find('Select').prop('onInputChange')(newInputValue, { action: 'input-change' });
-                    });
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0: return [4 /*yield*/, Promise.resolve()];
-                                    case 1:
-                                        _a.sent();
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); })];
+                    props = __assign(__assign({}, defaultProps), { max: 2, getLookups: jest.fn().mockResolvedValue(allLookups) });
+                    user = setUp({ props: props }).user;
+                    input = react_2.screen.getByRole('combobox');
+                    return [4 /*yield*/, user.type(input, 'Ch')];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    expect(getLookups).toHaveBeenCalledWith({
+                    expect(props.getLookups).toHaveBeenCalledWith({
                         type: props.lookupCode,
                         parents: props.parents,
-                        displayNamePrefix: newInputValue,
+                        displayNamePrefix: 'Portugal (PT)Ch',
                         max: 3,
                         offset: 0
                     });
-                    expect(findLoadMoreButton(wrapper).exists()).toBeTruthy();
-                    getLookups.mockReturnValueOnce(Promise.resolve({
-                        RU: { displayName: 'Russia' },
-                        USA: { displayName: 'USA' },
-                        MEX: { displayName: 'MEXICO' }
-                    }));
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                findLoadMoreButton(wrapper).find('button').simulate('click');
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    props.getLookups.mockReturnValue(Promise.resolve({ RU: { displayName: 'Russia' }, USA: { displayName: 'USA' }, MEX: { displayName: 'MEXICO' } }));
+                    return [4 /*yield*/, user.click(react_2.screen.getByText('Load more'))];
                 case 2:
                     _a.sent();
                     // offset === max
-                    expect(getLookups).toHaveBeenCalledWith({
+                    expect(props.getLookups).toHaveBeenCalledWith({
                         type: props.lookupCode,
                         parents: props.parents,
-                        displayNamePrefix: newInputValue,
+                        displayNamePrefix: 'Portugal (PT)Ch',
                         max: 3,
                         offset: 2
                     });
-                    nextNewInputValue = 'Chi';
-                    (0, test_utils_1.act)(function () {
-                        wrapper.find('Select').prop('onInputChange')(nextNewInputValue, { action: 'input-change' });
-                    });
+                    return [4 /*yield*/, user.type(input, 'i')];
+                case 3:
+                    _a.sent();
                     // set offset to default: 0
-                    expect(getLookups).toHaveBeenCalledWith({
+                    expect(props.getLookups).toHaveBeenCalledWith({
                         type: props.lookupCode,
                         parents: props.parents,
-                        displayNamePrefix: nextNewInputValue,
+                        displayNamePrefix: 'Portugal (PT)Chi',
                         max: 3,
                         offset: 0
                     });
@@ -668,19 +502,71 @@ describe('DependentLookupEditor', function () {
             }
         });
     }); });
-    it.skip('should call props.getLookups with default offset = 0 after LookupCode updated', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var getLookups, wrapper, newLookupCode;
+    it('should render empty state if there is no options', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { getLookups: jest.fn().mockReturnValue(Promise.resolve({})) });
+                    user = setUp({ props: props }).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('combobox'))];
+                case 1:
+                    _a.sent();
+                    react_2.screen.getByText('No results found');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should save focus on select after changing disable props', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, user, rerender, input;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp(), user = _a.user, rerender = _a.rerender;
+                    input = react_2.screen.getByRole('combobox');
+                    return [4 /*yield*/, user.click(input)];
+                case 1:
+                    _b.sent();
+                    rerender({ disabled: true });
+                    expect(input).toHaveFocus();
+                    rerender({ disabled: false });
+                    expect(input).toHaveFocus();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should change inputValue, call onChange property to remove value property and call getLookups as well on input clear', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    input = react_2.screen.getByRole('combobox');
+                    return [4 /*yield*/, user.clear(input)];
+                case 1:
+                    _a.sent();
+                    expect(input).toHaveValue('');
+                    expect(defaultProps.onChange).toHaveBeenCalledWith('');
+                    expect(defaultProps.getLookups).toHaveBeenCalledWith({
+                        type: 'COUNTRY_CD',
+                        parents: [],
+                        displayNamePrefix: '',
+                        max: 51,
+                        offset: 0
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call props.onChange if lookup is unresolved but has resolved value in lookups', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var value, props;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    getLookups = jest.fn();
-                    getLookups.mockReturnValue(Promise.resolve({
-                        CN: { displayName: 'China' },
-                        PT: { displayName: 'Portugal' },
-                        RU: { displayName: 'Russia' }
-                    }));
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { getLookups: getLookups, max: 2 })));
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                    value = { value: '', lookupCode: 'PT' };
+                    props = __assign(__assign({}, defaultProps), { value: value });
+                    setUp({ props: props });
+                    return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
                                     case 0: return [4 /*yield*/, Promise.resolve()];
@@ -692,355 +578,213 @@ describe('DependentLookupEditor', function () {
                         }); })];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    expect(getLookups).toHaveBeenCalledWith({
-                        type: props.lookupCode,
-                        parents: props.parents,
-                        displayNamePrefix: '',
-                        max: 3,
-                        offset: 0
-                    });
-                    expect(findLoadMoreButton(wrapper).exists()).toBeTruthy();
-                    getLookups.mockReturnValueOnce(Promise.resolve({
-                        RU: { displayName: 'Russia' },
-                        USA: { displayName: 'USA' },
-                        MEX: { displayName: 'MEXICO' }
-                    }));
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                    expect(props.onChange).toHaveBeenCalledWith({ lookupCode: 'PT', value: 'Portugal' });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call props.resolveLookups if lookup is unresolved and has no resolved value in lookups', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var value, props;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    value = { lookupCode: 'AR', value: '' };
+                    props = __assign(__assign({}, defaultProps), { value: value });
+                    setUp({ props: props });
+                    return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
-                                findLoadMoreButton(wrapper).find('button').simulate('click');
-                                return [2 /*return*/];
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, Promise.resolve()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
                             });
                         }); })];
-                case 2:
+                case 1:
                     _a.sent();
-                    expect(getLookups).toHaveBeenCalledWith({
-                        type: props.lookupCode,
-                        parents: props.parents,
-                        displayNamePrefix: '',
-                        max: 3,
-                        offset: 2
-                    });
-                    newLookupCode = {
-                        CODE: {
-                            NC: {
-                                displayName: 'some code'
-                            }
-                        }
-                    };
-                    wrapper.setProps({ lookupCode: newLookupCode });
-                    // set offset to default: 0
-                    expect(getLookups).toHaveBeenCalledWith({
-                        type: newLookupCode,
-                        parents: props.parents,
-                        displayNamePrefix: '',
-                        max: 3,
-                        offset: 0
-                    });
+                    expect(props.resolveLookups).toHaveBeenCalledWith(props.lookupCode, ['AR']);
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should render empty state if there is no options', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var getLookups, wrapper, newInputValue;
+    it('should call props.resolveLookups once if lookup is unresolved and has no resolved value in lookups and has no resolved value in response', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var value, props, rerender;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    getLookups = jest.fn();
-                    getLookups.mockReturnValue(Promise.resolve({}));
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { getLookups: getLookups })));
-                    newInputValue = 'Ch';
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                    value = { lookupCode: 'AR', value: '' };
+                    props = __assign(__assign({}, defaultProps), { value: value });
+                    rerender = setUp({ props: props }).rerender;
+                    return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
-                                wrapper.find('Select').prop('onInputChange')(newInputValue, { action: 'input-change' });
-                                return [2 /*return*/];
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, Promise.resolve()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
                             });
                         }); })];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    wrapper.find('input').simulate('keyDown', { key: 'ArrowDown' });
-                    expect(wrapper.find('MenuList').last().text()).toBe('No results found');
+                    rerender({ value: __assign({}, value) });
+                    expect(props.resolveLookups).toHaveBeenCalledTimes(1);
+                    expect(props.resolveLookups).toHaveBeenCalledWith(props.lookupCode, ['AR']);
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should save focus on select after changing disable props', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper, inputNode, spy;
-        return __generator(this, function (_a) {
-            wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props2)), { attachTo: document.body });
-            inputNode = wrapper.find('input').getDOMNode();
-            spy = jest.spyOn(wrapper.find('Select').instance(), 'focus');
-            (0, test_utils_1.act)(function () {
-                wrapper.find('Select').instance().focus();
-                wrapper.setProps(__assign(__assign({}, props2), { disabled: true }));
-            });
-            expect(spy).toHaveBeenCalledTimes(1);
-            wrapper.setProps(__assign(__assign({}, props2), { disabled: false }));
-            expect(document.activeElement).toBe(inputNode);
-            expect(spy).toHaveBeenCalledTimes(2);
-            return [2 /*return*/];
-        });
-    }); });
-    it('should change inputValue, not call onChange property, call getLookups as well on input change', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var getLookups, value, wrapper, newInputValue;
+    it('should disable editor according "disabled" prop', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    getLookups = jest.fn();
-                    getLookups.mockReturnValue(Promise.resolve({
-                        US: { displayName: 'USA' },
-                        RU: { displayName: 'Russia' }
-                    }));
-                    value = { lookupCode: 'US', value: 'USA' };
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { getLookups: getLookups, value: value, multiple: false })));
-                    expect(wrapper.find(ReactSelect_1.ReactSelect).find('Input').last().prop('value')).toBe('USA (US)');
-                    newInputValue = 'u';
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                    props = __assign(__assign({}, defaultProps), { disabled: true });
+                    setUp({ props: props });
+                    return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
-                                wrapper.find(ReactSelect_1.ReactSelect).prop('onInputChange')(newInputValue, { action: 'input-change' });
-                                return [2 /*return*/];
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, Promise.resolve()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
                             });
                         }); })];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    expect(wrapper.find(ReactSelect_1.ReactSelect).find('Input').last().prop('value')).toBe(newInputValue);
-                    expect(props.onChange).not.toHaveBeenCalled();
-                    expect(getLookups).toHaveBeenCalledWith({
-                        type: 'COUNTRY_CD',
-                        parents: [],
-                        displayNamePrefix: newInputValue,
-                        max: 51,
-                        offset: 0
-                    });
+                    expect(react_2.screen.getByRole('combobox')).toBeDisabled();
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should change inputValue, call onChange property to remove value property and call getLookups as well on input clear', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var getLookups, value, wrapper, newInputValue;
+    it('should use "parents" prop for lookups request', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var parents, props;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    getLookups = jest.fn();
-                    getLookups.mockReturnValue(Promise.resolve({
-                        US: { displayName: 'USA' },
-                        RU: { displayName: 'Russia' }
-                    }));
-                    value = { lookupCode: 'US', value: 'USA' };
-                    wrapper = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { getLookups: getLookups, value: value, multiple: false })));
-                    expect(wrapper.find(ReactSelect_1.ReactSelect).find('Input').last().prop('value')).toBe('USA (US)');
-                    newInputValue = '';
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                    parents = ['parent1', 'parent2'];
+                    props = __assign(__assign({}, defaultProps), { parents: parents });
+                    setUp({ props: props });
+                    return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
-                                wrapper.find(ReactSelect_1.ReactSelect).prop('onInputChange')(newInputValue, { action: 'input-change' });
-                                return [2 /*return*/];
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, Promise.resolve()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
                             });
                         }); })];
                 case 1:
                     _a.sent();
-                    wrapper.update();
-                    expect(wrapper.find(ReactSelect_1.ReactSelect).find('Input').last().prop('value')).toBe(newInputValue);
-                    expect(props.onChange).toHaveBeenCalledWith('');
-                    expect(getLookups).toHaveBeenCalledWith({
-                        type: 'COUNTRY_CD',
-                        parents: [],
+                    expect(props.getLookups).toHaveBeenCalledWith({
                         displayNamePrefix: '',
                         max: 51,
-                        offset: 0
+                        offset: 0,
+                        type: props.lookupCode,
+                        parents: parents
                     });
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should call props.onChange if lookup is unresolved but has resolved value in lookups', function () {
-        var lookups = {
-            COUNTRY_CD: {
-                DE: {
-                    displayName: 'Germany'
-                }
-            }
-        };
-        var value = { lookupCode: 'DE', value: '' };
-        (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { lookups: lookups, value: value })));
-        expect(props.onChange).toHaveBeenCalledWith({
-            lookupCode: 'DE',
-            value: 'Germany'
-        });
-    });
-    it('should call props.resolveLookups if lookup is unresolved and has no resolved value in lookups', function () {
-        var value = { lookupCode: 'DE', value: '' };
-        (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value })));
-        expect(props.resolveLookups).toHaveBeenCalledWith(props.lookupCode, ['DE']);
-    });
-    it('should call props.resolveLookups once if lookup is unresolved and has no resolved value in lookups and has no resolved value in response', function () {
-        var value = { lookupCode: 'DE', value: '' };
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value })));
-        component.setProps({ value: __assign({}, value) });
-        expect(props.resolveLookups).toHaveBeenCalledTimes(1);
-        expect(props.resolveLookups).toHaveBeenCalledWith(props.lookupCode, ['DE']);
-    });
-    it('should use debounced variant of loadOptions on input change', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var getLookups, component, select;
+    it('should not send lookups request if "parents" prop is null', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    jest.useFakeTimers();
-                    mdm_sdk_1.debounce.mockImplementation(originalDebounce);
-                    getLookups = jest.fn().mockReturnValue(Promise.resolve({
-                        US: { displayName: 'USA' },
-                        RU: { displayName: 'Russia' }
-                    }));
-                    component = (0, enzyme_1.shallow)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { getLookups: getLookups })));
-                    select = component.find(ReactSelect_1.ReactSelect);
-                    (0, test_utils_1.act)(function () {
-                        select.prop('onInputChange')('u', { action: 'input-change' });
-                    });
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                jest.advanceTimersByTime(DependentLookupEditor_1.DEBOUNCE_INTERVAL);
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    props = __assign(__assign({}, defaultProps), { parents: null });
+                    user = setUp({ props: props }).user;
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('combobox'), 'Ch')];
                 case 1:
                     _a.sent();
-                    expect(getLookups).toHaveBeenCalledTimes(1);
-                    expect(component.find(ReactSelect_1.ReactSelect).prop('options')).toEqual([
-                        {
-                            lookupCode: 'RU',
-                            value: 'Russia'
-                        },
-                        { lookupCode: 'US', value: 'USA' }
-                    ]);
-                    expect(mdm_sdk_1.debounce).toHaveBeenCalled();
-                    jest.useRealTimers();
+                    react_2.screen.getByText('No results found');
+                    expect(props.getLookups).not.toHaveBeenCalled();
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should disable editor according "disabled" prop', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { disabled: true })));
-        var select = component.find(ReactSelect_1.ReactSelect);
-        expect(select.prop('isDisabled')).toBe(true);
-        expect(select.prop('TextFieldProps').disabled).toBe(true);
-    });
-    it('should use "parents" prop for lookups request', function () {
-        var parents = [
-            {
-                type: 'PARENT',
-                codeValues: ['3', '4']
-            }
-        ];
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { parents: parents })));
-        var select = component.find(ReactSelect_1.ReactSelect);
-        (0, test_utils_1.act)(function () {
-            select.prop('onInputChange')('u', { action: 'input-change' });
-        });
-        expect(component.prop('isDisabled')).toBeFalsy();
-        expect(props.getLookups).toHaveBeenCalledTimes(1);
-        expect(props.getLookups).toHaveBeenCalledWith({
-            displayNamePrefix: 'u',
-            max: 51,
-            offset: 0,
-            type: props.lookupCode,
-            parents: parents
-        });
-    });
-    it('should not send lookups request if "parents" prop is null', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var parents, component, select;
+    it('should send lookups request if "parents" is undefined', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    parents = null;
-                    component = (0, enzyme_1.shallow)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { parents: parents })));
-                    select = component.find(ReactSelect_1.ReactSelect);
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                    props = __assign(__assign({}, defaultProps), { parents: undefined });
+                    setUp({ props: props });
+                    return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
-                                select.prop('onInputChange')('u', { action: 'input-change' });
-                                return [2 /*return*/];
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, Promise.resolve()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
                             });
                         }); })];
                 case 1:
                     _a.sent();
-                    expect(props.getLookups).not.toHaveBeenCalled();
-                    expect(component.find(ReactSelect_1.ReactSelect).prop('options')).toEqual([]);
+                    expect(props.getLookups).toHaveBeenCalledWith({
+                        displayNamePrefix: '',
+                        max: 51,
+                        offset: 0,
+                        type: props.lookupCode
+                    });
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should send lookups request if "parents" is undefined', function () {
-        var parents = undefined;
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { parents: parents })));
-        var select = component.find(ReactSelect_1.ReactSelect);
-        (0, test_utils_1.act)(function () {
-            select.prop('onInputChange')('u', { action: 'input-change' });
-        });
-        expect(props.getLookups).toHaveBeenCalledTimes(1);
-        expect(props.getLookups).toHaveBeenCalledWith({
-            displayNamePrefix: 'u',
-            max: 51,
-            offset: 0,
-            type: props.lookupCode,
-            parents: parents
-        });
-    });
     describe('Autopopulation behavior', function () {
-        var getLookups, resolveOptions;
-        beforeEach(function () {
-            var requestPromise = new Promise(function (_resolve) {
-                resolveOptions = _resolve;
-            });
-            getLookups = function () { return requestPromise; };
-        });
-        var defaultAutopopulationContextValue = {
-            id: 'id',
-            onTouch: jest.fn(),
-            isTouched: false
-        };
+        var defaultAutopopulationContextValue = { id: 'id', onTouch: jest.fn(), isTouched: false };
         it('should call onChange on component mount when there is only one possible option, value is empty and autopopulation is enabled', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var autopopulationId, value;
+            var props, CustomProviders;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        autopopulationId = 'uri1';
-                        value = { lookupCode: '', value: '' };
-                        (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext.Provider, { value: __assign(__assign({}, defaultAutopopulationContextValue), { id: autopopulationId }) },
-                            react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, autopopulationId: autopopulationId }))));
-                        expect(props.onChange).not.toHaveBeenCalled();
-                        return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        props = __assign(__assign({}, defaultProps), { value: { lookupCode: '', value: '' }, autopopulationId: defaultAutopopulationContextValue.id, getLookups: jest.fn().mockReturnValue(Promise.resolve({ AR: { displayName: 'Argentina' } })) });
+                        CustomProviders = function (_a) {
+                            var children = _a.children;
+                            return (react_1.default.createElement(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext.Provider, { value: defaultAutopopulationContextValue }, children));
+                        };
+                        setUp({ props: props, CustomProviders: CustomProviders });
+                        return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                                 return __generator(this, function (_a) {
-                                    resolveOptions({
-                                        RU: { displayName: 'Russia' }
-                                    });
-                                    return [2 /*return*/];
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, Promise.resolve()];
+                                        case 1:
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
                                 });
                             }); })];
                     case 1:
                         _a.sent();
-                        expect(props.onChange).toHaveBeenCalledWith({
-                            lookupCode: 'RU',
-                            value: 'Russia'
-                        });
+                        expect(props.onChange).toHaveBeenCalledWith({ lookupCode: 'AR', value: 'Argentina' });
                         return [2 /*return*/];
                 }
             });
         }); });
         it('should not autopopulate editor if autopopulationId is not set', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var autopopulationId, value;
+            var props, autopopulationContextValue, CustomProviders;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        autopopulationId = undefined;
-                        value = { lookupCode: '', value: '' };
-                        (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext.Provider, { value: __assign(__assign({}, defaultAutopopulationContextValue), { id: autopopulationId }) },
-                            react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, autopopulationId: autopopulationId }))));
-                        return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        props = __assign(__assign({}, defaultProps), { value: { lookupCode: '', value: '' }, getLookups: jest.fn().mockReturnValue(Promise.resolve({ AR: { displayName: 'Argentina' } })) });
+                        autopopulationContextValue = __assign(__assign({}, defaultAutopopulationContextValue), { id: undefined });
+                        CustomProviders = function (_a) {
+                            var children = _a.children;
+                            return (react_1.default.createElement(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext.Provider, { value: autopopulationContextValue }, children));
+                        };
+                        setUp({ props: props, CustomProviders: CustomProviders });
+                        return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                                 return __generator(this, function (_a) {
-                                    resolveOptions({
-                                        RU: { displayName: 'Russia' }
-                                    });
-                                    return [2 /*return*/];
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, Promise.resolve()];
+                                        case 1:
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
                                 });
                             }); })];
                     case 1:
@@ -1051,20 +795,24 @@ describe('DependentLookupEditor', function () {
             });
         }); });
         it('should not autopopulate editor if value is not empty', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var autopopulationId, value;
+            var props, CustomProviders;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        autopopulationId = 'uri2';
-                        value = { lookupCode: 'RU', value: '' };
-                        (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext.Provider, { value: __assign(__assign({}, defaultAutopopulationContextValue), { id: autopopulationId }) },
-                            react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, autopopulationId: autopopulationId }))));
-                        return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        props = __assign(__assign({}, defaultProps), { value: { lookupCode: 'AR', value: '' }, autopopulationId: defaultAutopopulationContextValue.id, getLookups: jest.fn().mockReturnValue(Promise.resolve({ AR: { displayName: 'Argentina' } })) });
+                        CustomProviders = function (_a) {
+                            var children = _a.children;
+                            return (react_1.default.createElement(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext.Provider, { value: defaultAutopopulationContextValue }, children));
+                        };
+                        setUp({ props: props, CustomProviders: CustomProviders });
+                        return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                                 return __generator(this, function (_a) {
-                                    resolveOptions({
-                                        RU: { displayName: 'Russia' }
-                                    });
-                                    return [2 /*return*/];
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, Promise.resolve()];
+                                        case 1:
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
                                 });
                             }); })];
                     case 1:
@@ -1075,21 +823,24 @@ describe('DependentLookupEditor', function () {
             });
         }); });
         it('should not autopopulate editor if there are more then one option', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var autopopulationId, value;
+            var props, CustomProviders;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        autopopulationId = 'uri3';
-                        value = { lookupCode: '', value: '' };
-                        (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext.Provider, { value: __assign(__assign({}, defaultAutopopulationContextValue), { id: autopopulationId }) },
-                            react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, autopopulationId: autopopulationId }))));
-                        return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        props = __assign(__assign({}, defaultProps), { value: { lookupCode: '', value: '' }, autopopulationId: defaultAutopopulationContextValue.id });
+                        CustomProviders = function (_a) {
+                            var children = _a.children;
+                            return (react_1.default.createElement(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext.Provider, { value: defaultAutopopulationContextValue }, children));
+                        };
+                        setUp({ props: props, CustomProviders: CustomProviders });
+                        return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                                 return __generator(this, function (_a) {
-                                    resolveOptions({
-                                        RU: { displayName: 'Russia' },
-                                        CN: { displayName: 'China' }
-                                    });
-                                    return [2 /*return*/];
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, Promise.resolve()];
+                                        case 1:
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
                                 });
                             }); })];
                     case 1:
@@ -1100,41 +851,27 @@ describe('DependentLookupEditor', function () {
             });
         }); });
         it('should not autopopulate editor if there is only one option but not for first time', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var autopopulationId, times, getLookups, value, component, select;
+            var times, getLookups, props, CustomProviders, user;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        autopopulationId = 'uri4';
                         times = 0;
                         getLookups = jest.fn().mockImplementation(function () {
-                            switch (times) {
-                                case 0:
-                                    return Promise.resolve({
-                                        RU: { displayName: 'Russia' },
-                                        CN: { displayName: 'China' }
-                                    });
-                                default:
-                                    return Promise.resolve({
-                                        RU: { displayName: 'Russia' }
-                                    });
+                            if (times === 0) {
+                                return Promise.resolve({ RU: { displayName: 'Russia' }, CN: { displayName: 'China' } });
+                            }
+                            else {
+                                return Promise.resolve({ RU: { displayName: 'Russia' } });
                             }
                         });
-                        value = { lookupCode: '', value: '' };
-                        component = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext.Provider, { value: __assign(__assign({}, defaultAutopopulationContextValue), { id: autopopulationId }) },
-                            react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, autopopulationId: autopopulationId }))));
-                        return [4 /*yield*/, (0, test_utils_1.act)(function () {
-                                return Promise.resolve();
-                            })];
+                        props = __assign(__assign({}, defaultProps), { value: { lookupCode: '', value: '' }, autopopulationId: defaultAutopopulationContextValue.id, getLookups: getLookups });
+                        CustomProviders = function (_a) {
+                            var children = _a.children;
+                            return (react_1.default.createElement(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext.Provider, { value: defaultAutopopulationContextValue }, children));
+                        };
+                        user = setUp({ props: props, CustomProviders: CustomProviders }).user;
+                        return [4 /*yield*/, user.type(react_2.screen.getByRole('combobox'), 'u')];
                     case 1:
-                        _a.sent();
-                        select = component.find(ReactSelect_1.ReactSelect);
-                        return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                                return __generator(this, function (_a) {
-                                    select.prop('onInputChange')('Ru', { action: 'input-change' });
-                                    return [2 /*return*/];
-                                });
-                            }); })];
-                    case 2:
                         _a.sent();
                         expect(getLookups).toHaveBeenCalledTimes(2);
                         expect(props.onChange).not.toHaveBeenCalled();
@@ -1142,51 +879,62 @@ describe('DependentLookupEditor', function () {
                 }
             });
         }); });
-        it('should not autopopulate manually cleared editor after its remounting (complex attribute collapse/expand case)', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var autopopulationId, onTouch, value, component;
+        it('should call onTouch on change value', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, CustomProviders, user;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        autopopulationId = 'uri5';
-                        onTouch = jest.fn();
-                        value = { lookupCode: '', value: '' };
-                        component = (0, enzyme_1.mount)(react_1.default.createElement(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext.Provider, { value: { id: autopopulationId, onTouch: onTouch, isTouched: false } },
-                            react_1.default.createElement(DependentLookupEditor_1.DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, autopopulationId: autopopulationId }))));
-                        expect(props.onChange).not.toHaveBeenCalled();
-                        return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        props = __assign(__assign({}, defaultProps), { value: { lookupCode: '', value: '' }, autopopulationId: defaultAutopopulationContextValue.id, getLookups: jest.fn().mockReturnValue(Promise.resolve({ AR: { displayName: 'Argentina' } })) });
+                        CustomProviders = function (_a) {
+                            var children = _a.children;
+                            return (react_1.default.createElement(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext.Provider, { value: defaultAutopopulationContextValue }, children));
+                        };
+                        user = setUp({ props: props, CustomProviders: CustomProviders }).user;
+                        return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                                 return __generator(this, function (_a) {
-                                    resolveOptions({
-                                        RU: { displayName: 'Russia' }
-                                    });
-                                    return [2 /*return*/];
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, Promise.resolve()];
+                                        case 1:
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
                                 });
                             }); })];
                     case 1:
                         _a.sent();
-                        expect(props.onChange).toHaveBeenCalledWith({
-                            lookupCode: 'RU',
-                            value: 'Russia'
-                        });
-                        expect(props.onChange).toHaveBeenCalledTimes(1);
-                        component.find(ReactSelect_1.ReactSelect).prop('onChange')(null);
-                        expect(props.onChange).toHaveBeenCalledTimes(2);
-                        expect(onTouch).toHaveBeenCalledWith(autopopulationId);
-                        component.setProps({
-                            value: { id: autopopulationId, onTouch: onTouch, isTouched: true }
-                        });
-                        component.unmount();
-                        component.mount();
-                        return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return [4 /*yield*/, user.type(react_2.screen.getByRole('combobox'), '{Backspace}{Enter}')];
+                    case 2:
+                        _a.sent();
+                        expect(defaultAutopopulationContextValue.onTouch).toHaveBeenCalledWith(defaultAutopopulationContextValue.id);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should not autopopulate editor if isTouched prop is true', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, autopopulationContextValue, CustomProviders;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = __assign(__assign({}, defaultProps), { value: { lookupCode: '', value: '' }, autopopulationId: defaultAutopopulationContextValue.id, getLookups: jest.fn().mockReturnValue(Promise.resolve({ AR: { displayName: 'Argentina' } })) });
+                        autopopulationContextValue = __assign(__assign({}, defaultAutopopulationContextValue), { isTouched: true });
+                        CustomProviders = function (_a) {
+                            var children = _a.children;
+                            return (react_1.default.createElement(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext.Provider, { value: autopopulationContextValue }, children));
+                        };
+                        setUp({ props: props, CustomProviders: CustomProviders });
+                        return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                                 return __generator(this, function (_a) {
-                                    resolveOptions({
-                                        RU: { displayName: 'Russia' }
-                                    });
-                                    return [2 /*return*/];
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, Promise.resolve()];
+                                        case 1:
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
                                 });
                             }); })];
-                    case 2:
+                    case 1:
                         _a.sent();
-                        expect(props.onChange).toHaveBeenCalledTimes(2);
+                        expect(props.onChange).not.toHaveBeenCalled();
                         return [2 /*return*/];
                 }
             });