@reltio/components 1.4.1818 → 1.4.1820

package/esm/DependentLookupEditor/DependentLookupEditor.test.js

@@ -0,0 +1,1126 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from 'react';
+import { mount, ReactWrapper, shallow } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import { debounce } from '@reltio/mdm-sdk';
+import { delayPromise } from '../test-utils';
+import Select from '../components/ReactSelect/Select';
+import { DependentLookupAutopopulationContext } from '../contexts/DependentLookupAutopopulationContext';
+import { ReactSelectOptionWithCheckIcon } from '../ReactSelectOptionWithCheckIcon';
+import { getOptionLabel } from './helpers';
+import { DependentLookupEditor, DEBOUNCE_INTERVAL } from './DependentLookupEditor';
+jest.mock('react-dom', function () { return (__assign(__assign({}, jest.requireActual('react-dom')), { createPortal: function (value) { return value; } })); });
+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;
+    beforeEach(function () {
+        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
+        };
+    });
+    afterEach(function () {
+        jest.resetAllMocks();
+    });
+    it('should render Select with correct properties in single mode', function () {
+        var value = { lookupCode: 'RU', value: 'Russia' };
+        var multiple = false;
+        var placeholder = '123';
+        var wrapper = shallow(React.createElement(DependentLookupEditor, __assign({}, props, { multiple: multiple, value: value, placeholder: placeholder })));
+        var select = wrapper.find(Select);
+        expect(select.props()).toMatchObject({
+            isMulti: multiple,
+            value: value,
+            placeholder: placeholder
+        });
+    });
+    it('should render Select 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 = shallow(React.createElement(DependentLookupEditor, __assign({}, props, { multiple: multiple, value: value, placeholder: placeholder })));
+        var select = wrapper.find(Select);
+        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 = mount(React.createElement(DependentLookupEditor, __assign({}, props, { value: value, multiple: true })));
+            newInputValue = 'u';
+            act(function () {
+                wrapper.find(Select).prop('onInputChange')(newInputValue, { action: 'input-change' });
+            });
+            wrapper.update();
+            expect(wrapper.find(Select).find('Input').last().text()).toBe(newInputValue);
+            expect(props.onChange).not.toHaveBeenCalled();
+            expect(props.getLookups).toBeCalledWith({
+                type: 'COUNTRY_CD',
+                parents: [],
+                displayNamePrefix: newInputValue,
+                max: 51,
+                offset: 0
+            });
+            act(function () {
+                wrapper.find(Select).prop('onInputChange')('', { action: 'input-blur' });
+            });
+            wrapper.update();
+            expect(wrapper.find(Select).find('Input').last().text()).toBe('');
+            expect(props.onChange).not.toHaveBeenCalled();
+            expect(props.getLookups).toBeCalledWith({
+                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 = mount(React.createElement(DependentLookupEditor, __assign({}, props, { value: value, multiple: true })));
+            newInputValue = 'u';
+            act(function () {
+                wrapper.find(Select).prop('onInputChange')(newInputValue, { action: 'input-change' });
+            });
+            wrapper.update();
+            expect(wrapper.find(Select).find('Input').last().text()).toBe(newInputValue);
+            expect(props.onChange).not.toHaveBeenCalled();
+            act(function () {
+                wrapper.find(Select).prop('onInputChange')('', { action: 'menu-close' });
+            });
+            wrapper.update();
+            expect(wrapper.find(Select).find('Input').last().text()).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 = mount(React.createElement(DependentLookupEditor, __assign({}, props, { value: value, multiple: false })));
+            newInputValue = 'u';
+            act(function () {
+                wrapper.find(Select).prop('onInputChange')(newInputValue, { action: 'input-change' });
+            });
+            wrapper.update();
+            expect(wrapper.find(Select).find('Input').last().text()).toBe(newInputValue);
+            expect(props.onChange).not.toHaveBeenCalled();
+            expect(props.getLookups).toBeCalledWith({
+                type: 'COUNTRY_CD',
+                parents: [],
+                displayNamePrefix: newInputValue,
+                max: 51,
+                offset: 0
+            });
+            act(function () {
+                wrapper.find(Select).prop('onInputChange')('', { action: 'input-blur' });
+            });
+            wrapper.update();
+            expect(wrapper.find(Select).find('Input').last().text()).toBe(getOptionLabel(value));
+            expect(props.onChange).not.toHaveBeenCalled();
+            expect(props.getLookups).toBeCalledWith({
+                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 = mount(React.createElement(DependentLookupEditor, __assign({}, props, { value: value, multiple: false })));
+            newInputValue = 'u';
+            act(function () {
+                wrapper.find(Select).prop('onInputChange')(newInputValue, { action: 'input-change' });
+            });
+            wrapper.update();
+            expect(wrapper.find(Select).find('Input').last().text()).toBe(newInputValue);
+            expect(props.onChange).not.toHaveBeenCalled();
+            expect(props.getLookups).toBeCalledWith({
+                type: 'COUNTRY_CD',
+                parents: [],
+                displayNamePrefix: newInputValue,
+                max: 51,
+                offset: 0
+            });
+            act(function () {
+                wrapper.find(Select).prop('onInputChange')('', { action: 'menu-close' });
+            });
+            wrapper.update();
+            expect(wrapper.find(Select).find('Input').last().text()).toBe(getOptionLabel(value));
+            expect(props.onChange).not.toHaveBeenCalled();
+            expect(props.getLookups).toBeCalledWith({
+                type: 'COUNTRY_CD',
+                parents: [],
+                displayNamePrefix: '',
+                max: 51,
+                offset: 0
+            });
+            return [2 /*return*/];
+        });
+    }); });
+    var findLoadMoreButton = function (component) {
+        var menuListFooter = component.find(Select).prop('menuListFooter');
+        if (menuListFooter) {
+            return new 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;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    wrapper = mount(React.createElement(DependentLookupEditor, __assign({}, props, { max: 2 })));
+                    return [4 /*yield*/, 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*/];
+                            });
+                        }); })];
+                case 1:
+                    _a.sent();
+                    wrapper.update();
+                    expect(findLoadMoreButton(wrapper)).toBeUndefined();
+                    expect(wrapper.find(Select).prop('options').length).toBe(2);
+                    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;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    wrapper = mount(React.createElement(DependentLookupEditor, __assign({}, props, { max: 2 })));
+                    expect(findLoadMoreButton(wrapper)).toBeUndefined();
+                    return [4 /*yield*/, 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*/];
+                            });
+                        }); })];
+                case 1:
+                    _a.sent();
+                    wrapper.update();
+                    optionsProp = wrapper.find(Select).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);
+                    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');
+                    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;
+        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 = mount(React.createElement(DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, max: 2 })));
+                    return [4 /*yield*/, delayPromise(1)];
+                case 1:
+                    _a.sent();
+                    wrapper.update();
+                    expect(wrapper.find(Select).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*/, 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*/];
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    // loaded options length is equal to (max + 1) so there are more options exist
+                    expect(getLookups).toBeCalledWith({
+                        type: props.lookupCode,
+                        parents: props.parents,
+                        displayNamePrefix: '',
+                        max: 3,
+                        offset: 2
+                    });
+                    return [4 /*yield*/, Promise.resolve()];
+                case 3:
+                    _a.sent();
+                    wrapper.update();
+                    expect(wrapper.find(Select).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;
+        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 = mount(React.createElement(DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, max: 2 })));
+                    return [4 /*yield*/, delayPromise(1)];
+                case 1:
+                    _a.sent();
+                    wrapper.update();
+                    expect(wrapper.find(Select).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*/, 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*/];
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, Promise.resolve()];
+                case 3:
+                    _a.sent();
+                    wrapper.update();
+                    expect(wrapper.find(Select).prop('options').length).toBe(4);
+                    expect(findLoadMoreButton(wrapper)).toBeUndefined();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not fail on focus', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var wrapper;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    wrapper = shallow(React.createElement(DependentLookupEditor, __assign({}, props, { value: { value: 'RU' } })));
+                    return [4 /*yield*/, 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*/];
+                            });
+                        }); })];
+                case 1:
+                    _a.sent();
+                    wrapper.find(Select).prop('onFocus')();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render correct select options', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var wrapper, options;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    wrapper = mount(React.createElement(DependentLookupEditor, __assign({}, props)));
+                    return [4 /*yield*/, 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*/];
+                            });
+                        }); })];
+                case 1:
+                    _a.sent();
+                    wrapper.find('input').simulate('keyDown', { key: 'ArrowDown' });
+                    options = wrapper.find(ReactSelectOptionWithCheckIcon);
+                    expect(options.length).toBe(2);
+                    expect(options.at(0).text()).toBe('China (CN)');
+                    expect(options.at(1).text()).toBe('Russia (RU)');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should request default options on mount', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var wrapper;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    wrapper = mount(React.createElement(DependentLookupEditor, __assign({}, props)));
+                    expect(wrapper.find(Select).prop('options')).toEqual([]);
+                    expect(props.getLookups).toBeCalledWith({
+                        type: props.lookupCode,
+                        parents: props.parents,
+                        displayNamePrefix: '',
+                        max: 51,
+                        offset: 0
+                    });
+                    return [4 /*yield*/, 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*/];
+                            });
+                        }); })];
+                case 1:
+                    _a.sent();
+                    wrapper.update();
+                    expect(wrapper.find(Select).prop('options')).toEqual([
+                        { lookupCode: 'CN', value: 'China' },
+                        { lookupCode: 'RU', value: 'Russia' }
+                    ]);
+                    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) {
+                case 0:
+                    wrapper = mount(React.createElement(DependentLookupEditor, __assign({}, props)));
+                    props.getLookups.mockClear();
+                    wrapper.setProps({
+                        lookupCode: 'SPEC'
+                    });
+                    expect(props.getLookups).toBeCalledWith({
+                        type: 'SPEC',
+                        parents: [],
+                        displayNamePrefix: '',
+                        max: 51,
+                        offset: 0
+                    });
+                    return [4 /*yield*/, 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*/];
+                            });
+                        }); })];
+                case 1:
+                    _a.sent();
+                    wrapper.update();
+                    expect(wrapper.find(Select).prop('options')).toEqual([
+                        { lookupCode: 'GERO', value: 'Gerontology' },
+                        { lookupCode: 'IMMU', value: 'Immunology' }
+                    ]);
+                    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;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    wrapper = mount(React.createElement(DependentLookupEditor, __assign({}, props)));
+                    return [4 /*yield*/, 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*/];
+                            });
+                        }); })];
+                case 1:
+                    _a.sent();
+                    wrapper.find('input').simulate('keyDown', { key: 'ArrowDown' });
+                    expect(props.onChange).not.toBeCalled();
+                    wrapper.find(ReactSelectOptionWithCheckIcon).at(1).find('div').at(0).simulate('click');
+                    expect(props.onChange).toBeCalledWith({
+                        value: 'Russia',
+                        lookupCode: 'RU'
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call props.getLookups with correct values on select input change', function () {
+        var wrapper = mount(React.createElement(DependentLookupEditor, __assign({}, props)));
+        var newInputValue = 'Ch';
+        act(function () {
+            wrapper.find('Select').prop('onInputChange')(newInputValue, { action: 'input-change' });
+        });
+        expect(props.getLookups).toHaveBeenCalledWith({
+            type: props.lookupCode,
+            parents: props.parents,
+            displayNamePrefix: newInputValue,
+            max: 51,
+            offset: 0
+        });
+    });
+    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;
+        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 = mount(React.createElement(DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, max: 2 })));
+                    newInputValue = 'Ch';
+                    act(function () {
+                        wrapper.find('Select').prop('onInputChange')(newInputValue, { action: 'input-change' });
+                    });
+                    return [4 /*yield*/, delayPromise(1)];
+                case 1:
+                    _a.sent();
+                    wrapper.update();
+                    expect(getLookups).toHaveBeenCalledWith({
+                        type: props.lookupCode,
+                        parents: props.parents,
+                        displayNamePrefix: newInputValue,
+                        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*/, 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*/];
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    // offset === max
+                    expect(getLookups).toBeCalledWith({
+                        type: props.lookupCode,
+                        parents: props.parents,
+                        displayNamePrefix: newInputValue,
+                        max: 3,
+                        offset: 2
+                    });
+                    nextNewInputValue = 'Chi';
+                    act(function () {
+                        wrapper.find('Select').prop('onInputChange')(nextNewInputValue, { action: 'input-change' });
+                    });
+                    // set offset to default: 0
+                    expect(getLookups).toHaveBeenCalledWith({
+                        type: props.lookupCode,
+                        parents: props.parents,
+                        displayNamePrefix: nextNewInputValue,
+                        max: 3,
+                        offset: 0
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('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;
+        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 = mount(React.createElement(DependentLookupEditor, __assign({}, props, { getLookups: getLookups, max: 2 })));
+                    return [4 /*yield*/, delayPromise(1)];
+                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*/, 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*/];
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    expect(getLookups).toBeCalledWith({
+                        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
+                    });
+                    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;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getLookups = jest.fn();
+                    getLookups.mockReturnValue(Promise.resolve({}));
+                    wrapper = mount(React.createElement(DependentLookupEditor, __assign({}, props, { getLookups: getLookups })));
+                    newInputValue = 'Ch';
+                    act(function () {
+                        wrapper.find('Select').prop('onInputChange')(newInputValue, { action: 'input-change' });
+                    });
+                    return [4 /*yield*/, delayPromise(1)];
+                case 1:
+                    _a.sent();
+                    wrapper.update();
+                    wrapper.find('input').simulate('keyDown', { key: 'ArrowDown' });
+                    expect(wrapper.find('MenuList').last().text()).toBe('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 wrapper, inputNode, spy;
+        return __generator(this, function (_a) {
+            wrapper = mount(React.createElement(DependentLookupEditor, __assign({}, props2)), { attachTo: document.body });
+            inputNode = wrapper.find('input').getDOMNode();
+            spy = jest.spyOn(wrapper.find('Select').instance(), 'focus');
+            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;
+        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 = mount(React.createElement(DependentLookupEditor, __assign({}, props, { getLookups: getLookups, value: value, multiple: false })));
+                    expect(wrapper.find(Select).find('Input').last().text()).toBe('USA (US)');
+                    newInputValue = 'u';
+                    act(function () {
+                        wrapper.find(Select).prop('onInputChange')(newInputValue, { action: 'input-change' });
+                    });
+                    return [4 /*yield*/, delayPromise(1)];
+                case 1:
+                    _a.sent();
+                    wrapper.update();
+                    expect(wrapper.find(Select).find('Input').last().text()).toBe(newInputValue);
+                    expect(props.onChange).not.toHaveBeenCalled();
+                    expect(getLookups).toBeCalledWith({
+                        type: 'COUNTRY_CD',
+                        parents: [],
+                        displayNamePrefix: newInputValue,
+                        max: 51,
+                        offset: 0
+                    });
+                    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;
+        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 = mount(React.createElement(DependentLookupEditor, __assign({}, props, { getLookups: getLookups, value: value, multiple: false })));
+                    expect(wrapper.find(Select).find('Input').last().text()).toBe('USA (US)');
+                    newInputValue = '';
+                    act(function () {
+                        wrapper.find(Select).prop('onInputChange')(newInputValue, { action: 'input-change' });
+                    });
+                    return [4 /*yield*/, delayPromise(1)];
+                case 1:
+                    _a.sent();
+                    wrapper.update();
+                    expect(wrapper.find(Select).find('Input').last().text()).toBe(newInputValue);
+                    expect(props.onChange).toHaveBeenCalledWith('');
+                    expect(getLookups).toBeCalledWith({
+                        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 () {
+        var lookups = {
+            COUNTRY_CD: {
+                DE: {
+                    displayName: 'Germany'
+                }
+            }
+        };
+        var value = { lookupCode: 'DE', value: '' };
+        mount(React.createElement(DependentLookupEditor, __assign({}, props, { lookups: lookups, value: value })));
+        expect(props.onChange).toBeCalledWith({
+            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: '' };
+        mount(React.createElement(DependentLookupEditor, __assign({}, props, { value: value })));
+        expect(props.resolveLookups).toBeCalledWith(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 = mount(React.createElement(DependentLookupEditor, __assign({}, props, { value: value })));
+        component.setProps({ value: __assign({}, value) });
+        expect(props.resolveLookups).toHaveBeenCalledTimes(1);
+        expect(props.resolveLookups).toBeCalledWith(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;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    debounce.mockImplementation(originalDebounce);
+                    getLookups = jest.fn().mockReturnValue(Promise.resolve({
+                        US: { displayName: 'USA' },
+                        RU: { displayName: 'Russia' }
+                    }));
+                    component = shallow(React.createElement(DependentLookupEditor, __assign({}, props, { getLookups: getLookups })));
+                    select = component.find(Select);
+                    select.prop('onInputChange')('u', { action: 'input-change' });
+                    select.prop('onInputChange')('u', { action: 'input-change' });
+                    return [4 /*yield*/, delayPromise(DEBOUNCE_INTERVAL)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, delayPromise(1)];
+                case 2:
+                    _a.sent();
+                    expect(getLookups).toHaveBeenCalledTimes(1);
+                    expect(component.find(Select).prop('options')).toEqual([
+                        {
+                            lookupCode: 'RU',
+                            value: 'Russia'
+                        },
+                        { lookupCode: 'US', value: 'USA' }
+                    ]);
+                    expect(debounce).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should disable editor according "disabled" prop', function () {
+        var component = shallow(React.createElement(DependentLookupEditor, __assign({}, props, { disabled: true })));
+        var select = component.find(Select);
+        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 = shallow(React.createElement(DependentLookupEditor, __assign({}, props, { parents: parents })));
+        var select = component.find(Select);
+        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;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    parents = null;
+                    component = shallow(React.createElement(DependentLookupEditor, __assign({}, props, { parents: parents })));
+                    select = component.find(Select);
+                    select.prop('onInputChange')('u', { action: 'input-change' });
+                    expect(props.getLookups).not.toHaveBeenCalled();
+                    return [4 /*yield*/, delayPromise(DEBOUNCE_INTERVAL)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, delayPromise(1)];
+                case 2:
+                    _a.sent();
+                    expect(component.find(Select).prop('options')).toEqual([]);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should send lookups request if "parents" is undefined', function () {
+        var parents = undefined;
+        var component = shallow(React.createElement(DependentLookupEditor, __assign({}, props, { parents: parents })));
+        var select = component.find(Select);
+        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
+        };
+        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;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        autopopulationId = 'uri1';
+                        value = { lookupCode: '', value: '' };
+                        mount(React.createElement(DependentLookupAutopopulationContext.Provider, { value: __assign(__assign({}, defaultAutopopulationContextValue), { id: autopopulationId }) },
+                            React.createElement(DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, autopopulationId: autopopulationId }))));
+                        expect(props.onChange).not.toHaveBeenCalled();
+                        return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    resolveOptions({
+                                        RU: { displayName: 'Russia' }
+                                    });
+                                    return [2 /*return*/];
+                                });
+                            }); })];
+                    case 1:
+                        _a.sent();
+                        expect(props.onChange).toHaveBeenCalledWith({
+                            lookupCode: 'RU',
+                            value: 'Russia'
+                        });
+                        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;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        autopopulationId = undefined;
+                        value = { lookupCode: '', value: '' };
+                        mount(React.createElement(DependentLookupAutopopulationContext.Provider, { value: __assign(__assign({}, defaultAutopopulationContextValue), { id: autopopulationId }) },
+                            React.createElement(DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, autopopulationId: autopopulationId }))));
+                        return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    resolveOptions({
+                                        RU: { displayName: 'Russia' }
+                                    });
+                                    return [2 /*return*/];
+                                });
+                            }); })];
+                    case 1:
+                        _a.sent();
+                        expect(props.onChange).not.toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should not autopopulate editor if value is not empty', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var autopopulationId, value;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        autopopulationId = 'uri2';
+                        value = { lookupCode: 'RU', value: '' };
+                        mount(React.createElement(DependentLookupAutopopulationContext.Provider, { value: __assign(__assign({}, defaultAutopopulationContextValue), { id: autopopulationId }) },
+                            React.createElement(DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, autopopulationId: autopopulationId }))));
+                        return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    resolveOptions({
+                                        RU: { displayName: 'Russia' }
+                                    });
+                                    return [2 /*return*/];
+                                });
+                            }); })];
+                    case 1:
+                        _a.sent();
+                        expect(props.onChange).not.toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        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;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        autopopulationId = 'uri3';
+                        value = { lookupCode: '', value: '' };
+                        mount(React.createElement(DependentLookupAutopopulationContext.Provider, { value: __assign(__assign({}, defaultAutopopulationContextValue), { id: autopopulationId }) },
+                            React.createElement(DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, autopopulationId: autopopulationId }))));
+                        return [4 /*yield*/, 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*/];
+                                });
+                            }); })];
+                    case 1:
+                        _a.sent();
+                        expect(props.onChange).not.toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        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;
+            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' }
+                                    });
+                            }
+                        });
+                        value = { lookupCode: '', value: '' };
+                        component = mount(React.createElement(DependentLookupAutopopulationContext.Provider, { value: __assign(__assign({}, defaultAutopopulationContextValue), { id: autopopulationId }) },
+                            React.createElement(DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, autopopulationId: autopopulationId }))));
+                        return [4 /*yield*/, act(function () {
+                                return Promise.resolve();
+                            })];
+                    case 1:
+                        _a.sent();
+                        select = component.find(Select);
+                        select.prop('onInputChange')('Ru', { action: 'input-change' });
+                        expect(getLookups).toHaveBeenCalledTimes(2);
+                        expect(props.onChange).not.toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        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;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        autopopulationId = 'uri5';
+                        onTouch = jest.fn();
+                        value = { lookupCode: '', value: '' };
+                        component = mount(React.createElement(DependentLookupAutopopulationContext.Provider, { value: { id: autopopulationId, onTouch: onTouch, isTouched: false } },
+                            React.createElement(DependentLookupEditor, __assign({}, props, { value: value, getLookups: getLookups, autopopulationId: autopopulationId }))));
+                        expect(props.onChange).not.toHaveBeenCalled();
+                        return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    resolveOptions({
+                                        RU: { displayName: 'Russia' }
+                                    });
+                                    return [2 /*return*/];
+                                });
+                            }); })];
+                    case 1:
+                        _a.sent();
+                        expect(props.onChange).toHaveBeenCalledWith({
+                            lookupCode: 'RU',
+                            value: 'Russia'
+                        });
+                        expect(props.onChange).toHaveBeenCalledTimes(1);
+                        component.find(Select).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*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    resolveOptions({
+                                        RU: { displayName: 'Russia' }
+                                    });
+                                    return [2 /*return*/];
+                                });
+                            }); })];
+                    case 2:
+                        _a.sent();
+                        expect(props.onChange).toHaveBeenCalledTimes(2);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+});