@jetbrains/ring-ui 5.1.23 → 5.1.25

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

@@ -0,0 +1,620 @@
+/* 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');
+  }
+});