@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/components/select-ng/select-ng.test.js

@@ -1,620 +0,0 @@
-/* global inject */
-/* eslint-disable no-magic-numbers */
-
-import angular from 'angular';
-import 'angular-mocks';
-
-import Select from '../select/select';
-import styles from '../select/select.css';
-
-import SelectNg from './select-ng';
-
-describe('Select Ng', () => {
-  let scope;
-  let element;
-  let ctrl;
-  let $compile;
-
-  const fakeItems = [
-    {id: 1, name: '11'},
-    {id: 2, name: '22'},
-    {id: 3, name: '33'}
-  ];
-
-  beforeEach(window.module(SelectNg));
-
-  function compileTemplate(template) {
-    element = $compile(template)(scope);
-    ctrl = element.controller('rgSelect');
-    scope.$digest();
-  }
-
-  beforeEach(inject(($rootScope, _$compile_) => {
-    scope = $rootScope.$new();
-    $compile = _$compile_;
-
-    scope.items = angular.copy(fakeItems);
-    scope.selectedItem = scope.items[2];
-    scope.selectedItems = scope.items.slice(1);
-
-    compileTemplate('<rg-select options="item.name for item in items track by item.id" ng-model="selectedItem"></rg-select>');
-  }));
-
-  describe('DOM', () => {
-    it('Should place container for select inside directive', () => {
-      element[0].should.contain('span');
-    });
-
-    it('Should render select inside container', () => {
-      element[0].should.contain('[data-test=ring-select]');
-    });
-
-    it('Should not render select if type=dropdown', () => {
-      compileTemplate('<rg-select options="item.name for item in items track by item.id" ng-model="selectedItem" type="dropdown"></rg-select>');
-
-      element[0].should.not.contain('[data-test=ring-select]');
-    });
-  });
-
-  describe('Interface', () => {
-    function selected(_ctrl) {
-      return _ctrl.selectInstance.props.selected;
-    }
-
-    it('Should unmount react component on destroy', () => {
-      initializeReactSelect(element[0]);
-      ctrl.$onDestroy();
-      should.not.exist(ctrl.selectInstance.node);
-    });
-
-    it('Should receive ngModel controller', () => {
-      ctrl.ngModelCtrl.should.exist;
-    });
-
-    it('Should extend passed config', () => {
-      scope.config = {someField: 'test'};
-      compileTemplate('<rg-select options="item.name for item in items track by item.id" ng-model="selectedItem" config="config"></rg-select>');
-
-      ctrl.config.someField.should.equal('test');
-    });
-
-    it('Should work without ng-model', () => {
-      function initDirective() {
-        compileTemplate('<rg-select options="item.name for item in items track by item.id"></rg-select>');
-      }
-
-      initDirective.should.not.throw;
-    });
-
-    it('Should update selected item on ngModel updates', () => {
-      const newLabel = 'Some new label';
-      scope.selectedItem.name = newLabel;
-      scope.$digest();
-      selected(ctrl).label.should.equal(newLabel);
-    });
-
-    it('Should clear selected item on ngModel clearing', () => {
-      scope.selectedItem = null;
-      scope.$digest();
-      should.not.exist(selected(ctrl));
-    });
-
-    it('Should not get options on on initialization', () => {
-      ctrl.selectInstance.props.data.length.should.equal(0);
-    });
-
-    it('Should get options on open', () => {
-      ctrl.config.onBeforeOpen();
-      scope.$digest();
-      ctrl.selectInstance.props.data.length.should.equal(fakeItems.length);
-    });
-
-    it('Should convert ngModel to select supported object', () => {
-      selected(ctrl).key.should.equal(scope.selectedItem.id);
-      selected(ctrl).label.should.equal(scope.selectedItem.name);
-    });
-
-    it('Should convert options to select supported objects', () => {
-      ctrl.loadOptionsToSelect();
-      scope.$digest();
-      ctrl.selectInstance.props.data[0].key.should.equal(fakeItems[0].id);
-      ctrl.selectInstance.props.data[0].label.should.equal(fakeItems[0].name);
-    });
-
-    it('Should reject promise on loading error', inject($q => {
-      const onError = sandbox.spy();
-      sandbox.stub(ctrl, 'getOptions').returns($q.reject());
-      ctrl.loadOptionsToSelect().catch(onError);
-      scope.$digest();
-      onError.should.be.called;
-    }));
-
-    it('Should use default type "Button" if type is not passed', () => {
-      compileTemplate('<rg-select options="item.name for item in items track by item.id" ng-model="selectedItem"></rg-select>');
-      ctrl.selectInstance.props.type.should.equal(Select.Type.BUTTON);
-    });
-
-    it('Should support type "input"', () => {
-      compileTemplate('<rg-select options="item.name for item in items track by item.id" ng-model="selectedItem" type="input"></rg-select>');
-      ctrl.selectInstance.props.type.should.equal(Select.Type.INPUT);
-    });
-
-    it('Should support type "dropdown', () => {
-      compileTemplate('<rg-select options="item.name for item in items track by item.id" ng-model="selectedItem" type="dropdown"></rg-select>');
-      ctrl.selectInstance.props.type.should.equal(Select.Type.CUSTOM);
-    });
-
-    it('Should support selectedLabelField customization', () => {
-      scope.selectedItem.testField = 'test';
-      compileTemplate('<rg-select options="item.name select as item.testField for item in items track by item.id" ng-model="selectedItem"></rg-select>');
-      selected(ctrl).selectedLabel.should.equal('test');
-    });
-
-    it('Should support selected formatter function', () => {
-      scope.formatter = sandbox.stub().returns('Formatted label');
-
-      compileTemplate('<rg-select options="item.name select as formatter(item) for item in items track by item.id" external-filter="true" ng-model="selectedItem"></rg-select>');
-
-      selected(ctrl).selectedLabel.should.equal('Formatted label');
-    });
-
-    it('Should support description customization', () => {
-      scope.selectedItem.testField = 'test';
-      compileTemplate('<rg-select options="item.name describe as item.testField for item in items track by item.id" ng-model="selectedItem"></rg-select>');
-
-      selected(ctrl).description.should.equal('test');
-    });
-
-    it('Should support description and selected label customization together', () => {
-      scope.selectedItem.selectText = 'test';
-      scope.selectedItem.descriptionText = 'description';
-      compileTemplate('<rg-select options="item.name select as item.selectText describe as item.descriptionText for item in items track by item.id" ng-model="selectedItem"></rg-select>');
-
-      selected(ctrl).selectedLabel.should.equal(scope.selectedItem.selectText);
-      selected(ctrl).description.should.equal(scope.selectedItem.descriptionText);
-    });
-
-    it('Should not call get option by value for description customization', () => {
-      scope.selectedItem.descriptionText = 'description';
-
-      element = $compile('<rg-select options="item.name describe as item.descriptionText for item in items track by item.id" ng-model="selectedItem"></rg-select>')(scope);
-      ctrl = element.controller('rgSelect');
-      sandbox.spy(ctrl.optionsParser, 'getOptions');
-      scope.$digest();
-
-      ctrl.optionsParser.getOptions.should.not.called;
-    });
-
-    it('Should not call get option by value for select label customization', () => {
-      scope.selectedItem.selectText = 'Test';
-
-      element = $compile('<rg-select options="item.name select as item.descriptionText for item in items track by item.id" ng-model="selectedItem"></rg-select>')(scope);
-      ctrl = element.controller('rgSelect');
-      sandbox.spy(ctrl.optionsParser, 'getOptions');
-      scope.$digest();
-
-      ctrl.optionsParser.getOptions.should.not.called;
-    });
-
-    it('Should not call get option by value for description and selected label customization together', () => {
-      scope.selectedItem.selectText = 'test';
-      scope.selectedItem.descriptionText = 'description';
-
-      element = $compile('<rg-select options="item.name select as item.selectText describe as item.descriptionText for item in items track by item.id" ng-model="selectedItem"></rg-select>')(scope);
-      ctrl = element.controller('rgSelect');
-      sandbox.spy(ctrl.optionsParser, 'getOptions');
-      scope.$digest();
-
-      ctrl.optionsParser.getOptions.should.not.called;
-    });
-
-    it('Should save original model in select items', () => {
-      ctrl.loadOptionsToSelect();
-      scope.$digest();
-      ctrl.selectInstance.props.data[0].originalModel.should.deep.equal(fakeItems[0]);
-    });
-
-    it('Should update ng-model on selecting', () => {
-      ctrl.config.onChange({originalModel: fakeItems[0]});
-      scope.$digest();
-      scope.selectedItem.should.equal(fakeItems[0]);
-    });
-
-    it('Should clear ng-model on clearing select', () => {
-      ctrl.config.onChange(null);
-      scope.$digest();
-      should.not.exist(scope.selectedItem);
-    });
-
-    it('Should call datasource on opening', () => {
-      scope.dataSource = sandbox.stub().returns(fakeItems);
-
-      compileTemplate('<rg-select options="item.name for item in dataSource(query) track by item.id" external-filter="true" ng-model="selectedItem"></rg-select>');
-
-      ctrl.config.onBeforeOpen();
-      scope.$digest();
-      scope.dataSource.should.have.been.called;
-    });
-
-    it('Should call datasource on filtering if external filter enabled', () => {
-      scope.dataSource = sandbox.stub().returns(fakeItems);
-
-      compileTemplate('<rg-select options="item.name for item in dataSource(query) track by item.id" external-filter="true" ng-model="selectedItem"></rg-select>');
-
-      ctrl.config.onFilter('test');
-      scope.$digest();
-      scope.dataSource.should.have.been.calledWith('test');
-    });
-
-    it('Should reload options with a controller query', () => {
-      const queryMock = 'query';
-      ctrl.query = queryMock;
-      sandbox.spy(ctrl, 'loadOptionsToSelect');
-
-      ctrl.config.reloadOptions();
-      scope.$digest();
-
-      ctrl.loadOptionsToSelect.should.have.been.calledWith(queryMock);
-    });
-
-    it('Should reload options with a provided query parameter', () => {
-      const queryMock = 'query';
-      ctrl.query = 'ctrlQuery';
-      sandbox.spy(ctrl, 'loadOptionsToSelect');
-
-      ctrl.config.reloadOptions(queryMock);
-      scope.$digest();
-
-      ctrl.loadOptionsToSelect.should.have.been.calledWith(queryMock);
-    });
-
-    it('If externalFilter enabled should provide custom filter.fn which should always return true', () => {
-      compileTemplate('<rg-select options="item.name for item in items track by item.id" external-filter="true" ng-model="selectedItem"></rg-select>');
-
-      ctrl.filter.fn().should.be.true;
-    });
-
-    it('Should be disabled if disabled', () => {
-      compileTemplate('<rg-select options="item.name for item in items track by item.id" ng-model="selectedItem" ng-disabled="true"></rg-select>');
-
-      element[0].should.contain(`.${styles.disabled}`);
-    });
-
-    it('Should hide on route changes ($locationChangeSuccess)', () => {
-      sandbox.stub(ctrl.selectInstance._popup, 'isVisible').returns(true);
-      ctrl.selectInstance._hidePopup = sandbox.stub();
-
-      scope.$broadcast('$locationChangeSuccess');
-      ctrl.selectInstance._hidePopup.should.have.been.called;
-    });
-
-    it('Should not try to hide on route changes if not showed ($locationChangeSuccess)', () => {
-      sandbox.stub(ctrl.selectInstance._popup, 'isVisible').returns(false);
-      ctrl.selectInstance._hidePopup = sandbox.stub();
-
-      scope.$broadcast('$locationChangeSuccess');
-      ctrl.selectInstance._hidePopup.should.not.have.been.called;
-    });
-
-    it('Should extend select model with properties from ng model', () => {
-      const selectModel = ctrl.convertNgModelToSelect({ext: 'test'});
-      selectModel.ext.should.equal('test');
-    });
-
-    it('Should not try to extend select model with string', () => {
-      sandbox.spy(angular, 'extend');
-      const stringValue = 'str-value';
-      ctrl.convertNgModelToSelect(stringValue);
-      angular.extend.should.been.calledWith(sandbox.match({}), null);
-    });
-
-    it('Should use select-type if defined', () => {
-      compileTemplate('<button rg-select="" options="itemvar in items track by itemvar.id" select-type="dropdown" type="submit"></button>');
-
-      ctrl.selectInstance.props.type.should.equal(Select.Type.CUSTOM);
-    });
-
-    it('Should use "multiple" attribute and provide it to select', () => {
-      compileTemplate('<rg-select options="item.name for item in items track by item.id" multiple="true" ng-model="selectedItems"></rg-select>');
-
-      ctrl.selectInstance.props.multiple.should.be.true;
-    });
-
-    it('Should watch "multiple" and update select after change', () => {
-      scope.selectMultiple = false;
-      compileTemplate('<rg-select options="item.name for item in items track by item.id" multiple="selectMultiple" ng-model="selectedItems"></rg-select>');
-
-      scope.selectMultiple = true;
-      scope.$digest();
-      ctrl.selectInstance.props.multiple.should.be.true;
-    });
-
-    it('Should return deselected item', () => {
-      scope.selectedItem = scope.items[1];
-      ctrl.config.onDeselect({originalModel: fakeItems[1]});
-      scope.$digest();
-
-      ctrl.selectInstance.props.selected.label.should.equal(fakeItems[1].name);
-    });
-
-    it('Should rerender with new config if config changed and autosync enabled', () => {
-      scope.config = {};
-      compileTemplate('<rg-select options="item.name for item in items track by item.id" ng-model="selectedItem" config="config" config-auto-update="true"></rg-select>');
-
-      sandbox.spy(ctrl.selectInstance, 'rerender');
-      scope.config.add = {label: 'fooo'};
-      scope.$digest();
-
-      ctrl.selectInstance.rerender.should.have.been.calledWith(sinon.match({add: {label: 'fooo'}}));
-    });
-
-
-    it('Should correctly reinitialize select with config', () => {
-      const template = '<rg-select type="dropdown" options="item.name for item in items track by item.id" ng-model="selectedItem" config="config" config-auto-update="true"></rg-select>';
-      scope.config = {};
-
-      compileTemplate(template);
-      initializeReactSelect(element[0]);
-      scope.$digest();
-      ctrl.$onDestroy();
-
-      compileTemplate(template);
-      initializeReactSelect(element[0]);
-      scope.$digest();
-    });
-
-
-    it('Should update config and do not loose new selected items', () => {
-      scope.config = {someField: 'AAA'};
-      scope.selectedItem = [scope.items[1]];
-      compileTemplate('<rg-select multiple=true options="item.name for item in items track by item.id" ng-model="selectedItem" config="config" config-auto-update="true"></rg-select>');
-
-      selected(ctrl).length.should.equal(1);
-
-      const newItems = [scope.items[0], scope.items[1]];
-      scope.selectedItem = newItems;
-      scope.$digest();
-      selected(ctrl).length.should.equal(newItems.length);
-
-      scope.config.someField = 'BBB';
-      scope.$digest();
-
-      selected(ctrl).length.should.equal(newItems.length);
-    });
-  });
-
-  describe('Options parser', () => {
-    it('Should support syntax "item in items"', () => {
-      scope.items = [{key: 1, label: 'test1'}];
-      scope.selectedItem = scope.items[0];
-
-      compileTemplate('<rg-select options="item in items" ng-model="selectedItem"></rg-select>');
-      ctrl.config.onBeforeOpen();
-      scope.$digest();
-      ctrl.selectInstance.props.data.length.should.equal(1);
-    });
-
-    it('Should support "item for item in items"', () => {
-      scope.items = [{key: 1, label: 'test1'}];
-      scope.selectedItem = scope.items[0];
-      compileTemplate('<rg-select options="item as item.label for item in items" ng-model="selectedItem"></rg-select>');
-      ctrl.config.onBeforeOpen();
-      scope.$digest();
-      ctrl.selectInstance.props.data[0].key.should.equal(scope.items[0].key);
-    });
-
-    it('Should support labeling item', () => {
-      compileTemplate('<rg-select options="item.name for item in items track by item.id" ng-model="selectedItem"></rg-select>');
-      ctrl.selectInstance.props.selected.label.should.equal(fakeItems[2].name);
-    });
-
-    it('Should support labeling item simple syntax', () => {
-      scope.items = [{key: 1, name: 'test1'}];
-      scope.selectedItem = scope.items[0];
-      compileTemplate('<rg-select options="item.name for item in items" ng-model="selectedItem"></rg-select>');
-      ctrl.selectInstance.props.selected.label.should.equal('test1');
-    });
-
-    it('Should support function as label', () => {
-      scope.getLabel = sandbox.stub().returns('test label');
-
-      compileTemplate('<rg-select options="getLabel(item) for item in items track by item.id" ng-model="selectedItem"></rg-select>');
-
-      ctrl.optionsParser.getLabel(fakeItems[0]).should.equal('test label');
-      scope.getLabel.should.been.calledWith(fakeItems[0]);
-    });
-
-    it('Should support custom key field with "track by" expression', () => {
-      scope.items = [{id: 1, label: 'test1'}];
-      scope.selectedItem = scope.items[0];
-      compileTemplate('<rg-select options="item in items track by item.id" ng-model="selectedItem"></rg-select>');
-
-      ctrl.optionsParser.getKey(scope.selectedItem).should.equal(scope.selectedItem.id);
-    });
-
-    it('Should support custom label field', () => {
-      scope.options = [{key: 1, name: 'testname'}];
-
-      compileTemplate('<rg-select options="item.name for item in options"></rg-select>');
-
-      ctrl.optionsParser.getLabel(scope.options[0]).should.equal(scope.options[0].name);
-    });
-
-    it('Should support description', () => {
-      scope.options = [{key: 1, fullText: 'testname'}];
-
-      compileTemplate('<rg-select options="item.name select as item.fullText for item in options"></rg-select>');
-
-      ctrl.optionsParser.getSelectedLabel(scope.options[0]).should.equal(scope.options[0].fullText);
-    });
-
-    it('Should support selected label customization', () => {
-      scope.options = [{key: 1, fullText: 'testname'}];
-
-      compileTemplate('<rg-select options="item.name select as item.fullText for item in options"></rg-select>');
-
-      ctrl.optionsParser.getSelectedLabel(scope.options[0]).should.equal(scope.options[0].fullText);
-    });
-
-    it('Should pass selected to callback', () => {
-      scope.options = [{key: 1, label: 'test'}];
-      const selectedModel = {originalModel: scope.options[0]};
-      scope.callback = sandbox.spy();
-
-      compileTemplate('<rg-select options="item in options" on-select="callback(selected)"></rg-select>');
-      ctrl.config.onSelect(selectedModel);
-      scope.$digest();
-
-      scope.callback.should.have.been.calledWith(selectedModel);
-    });
-
-    it('Should pass an event to a callback as a second parameter', () => {
-      scope.event = {};
-      scope.onSelect = sandbox.spy();
-      scope.onDeselect = sandbox.spy();
-      scope.onChange = sandbox.spy();
-      scope.options = [{}];
-      const model = {originalModel: scope.options[0]};
-
-      compileTemplate('<rg-select options="item in options" on-change="onChange(selected,event)" on-select="onSelect(selected,event)" on-deselect="onDeselect(deselected,event)"></rg-select>');
-      ctrl.config.onSelect(model, scope.event);
-      ctrl.config.onChange(model, scope.event);
-      ctrl.config.onDeselect(model, scope.event);
-      scope.$digest();
-
-      scope.onSelect.should.have.been.calledWith(model, scope.event);
-      scope.onDeselect.should.have.been.calledWith(model, scope.event);
-      scope.onChange.should.have.been.calledWith(model, scope.event);
-    });
-
-    it('Should take just plain option as label if option is string', () => {
-      ctrl.optionsParser.getLabel('test').should.equal('test');
-    });
-
-    it('Should return no label if option is object and no valid label mapping provided', () => {
-      should.not.exist(ctrl.optionsParser.getLabel({foo: 'bar'}));
-    });
-
-    it('Should support custom property for ng-model', () => {
-      const optionMock = {value: 1, label: 'label'};
-      scope.options = [optionMock];
-      scope.selectedOption = null;
-
-      compileTemplate('<rg-select ng-model="selectedOption" options="item.value as item.label for item in options"></rg-select>');
-      ctrl.config.onChange({originalModel: optionMock});
-
-      scope.selectedOption.should.equal(optionMock.value);
-    });
-
-    it('Should update select if we pass custom ng-model', () => {
-      const optionMock = {value: 1, label: 'label'};
-      scope.options = [optionMock];
-      scope.selectedOption = optionMock.value;
-
-      compileTemplate('<rg-select ng-model="selectedOption" options="item.value as item.label for item in options" lazy="false"></rg-select>');
-
-      ctrl.selectInstance.props.selected.label.should.equal(optionMock.label);
-    });
-
-    it('Should call only once data source function for primitive ng-model', () => {
-      function createOptionMock(value) {
-        return {
-          value,
-          label: `label ${value}`
-        };
-      }
-
-      scope.options = [
-        createOptionMock(1),
-        createOptionMock(2),
-        createOptionMock(3),
-        createOptionMock(4)
-      ];
-
-      scope.selectedOption = scope.options[0];
-      scope.getOptions = sandbox.stub().returns(scope.options);
-
-      compileTemplate('<rg-select ng-model="selectedOption" options="item.value as item.label for item in getOptions()"></rg-select>');
-      ctrl.loadOptionsToSelect('');
-      scope.$digest();
-
-      scope.getOptions.should.been.calledOnce;
-    });
-
-    it('Should correct update select if options have  "track by" with "for" expressions without "as"', () => {
-      compileTemplate('<rg-select ng-model="selectedItem" options="item.name for item in items track by item.id"></rg-select>');
-      ctrl.config.onChange({originalModel: fakeItems[0]});
-      scope.$digest();
-
-      scope.selectedItem.should.equal(fakeItems[0]);
-    });
-
-    it('Should update select if list of options load after ng-model', () => {
-
-      /**
-       * In case `lazy=false` rg-select behave like angular select
-       * It will watch options collection on every digest that may slowdown performance
-       */
-      scope.items = null;
-      scope.selectedItem = fakeItems[0].id;
-      compileTemplate('<rg-select ng-model="selectedItem" lazy="false" options="item.id as item.name for item in items track by item.id"></rg-select>');
-      scope.$digest();
-
-      scope.items = angular.copy(fakeItems);
-      scope.$digest();
-
-      ctrl.selectInstance.props.selected.label.should.equal(fakeItems[0].name);
-    });
-
-    it('Should update select if list of options load after ng-model and update existing array not changing reference', () => {
-      scope.items = [];
-      scope.selectedItem = fakeItems[0].id;
-      compileTemplate('<rg-select ng-model="selectedItem" lazy="false" options="item.id as item.name for item in items track by item.id"></rg-select>');
-      scope.$digest();
-
-      scope.items = angular.extend(scope.items, fakeItems);
-      scope.$digest();
-
-      ctrl.selectInstance.props.selected.label.should.equal(fakeItems[0].name);
-    });
-
-    it('Should throw exception if we have two options with same ng-model value', () => {
-      const optionMock = {value: 1, label: 'label'};
-      scope.options = [optionMock, optionMock];
-      scope.selectedOption = optionMock.value;
-
-      function compile() {
-        compileTemplate('<rg-select ng-model="selectedOption" options="item.value as item.label for item in options" lazy="false"></rg-select>');
-      }
-
-      compile.should.throw(Error);
-    });
-
-    it('Should parse option variable name', () => {
-      compileTemplate('<rg-select options="itemvar in items track by itemvar.id"></rg-select>');
-
-      ctrl.optionsParser.optionVariableName.should.be.equal('itemvar');
-    });
-
-    it('should clear last query on close', () => {
-      ctrl.query = 'query';
-      ctrl.config.onClose();
-      scope.$digest();
-
-      should.not.exist(ctrl.query);
-    });
-  });
-
-  function initializeReactSelect(node) {
-    simulateClick(findContainerNode(node));
-  }
-
-  function simulateClick(node) {
-    const clickEvent = new CustomEvent('click');
-    node.dispatchEvent(clickEvent);
-  }
-
-  function findContainerNode(node) {
-    return node.querySelector('span');
-  }
-});