diff --git a/client/core/src/drop-down/drop-down.js b/client/core/src/drop-down/drop-down.js index 8164e0eb5..90a02e857 100644 --- a/client/core/src/drop-down/drop-down.js +++ b/client/core/src/drop-down/drop-down.js @@ -35,7 +35,7 @@ export default class DropDown { } set search(value) { - let val = (value === undefined && value === '') ? null : value; + let val = (value === undefined || value === '') ? null : value; this._search = val; if (this.filterAction) @@ -68,7 +68,9 @@ export default class DropDown { } onFilterRest() { - this.filterAction({search: this.search}); + if (this.filterAction) { + this.filterAction({search: this.search}); + } } $onChanges(changesObj) { diff --git a/client/core/src/drop-down/drop-down.spec.js b/client/core/src/drop-down/drop-down.spec.js new file mode 100644 index 000000000..40944b872 --- /dev/null +++ b/client/core/src/drop-down/drop-down.spec.js @@ -0,0 +1,287 @@ +import './drop-down.js'; + +describe('Component vnDropDown', () => { + let $componentController; + let $timeout; + let $element; + let $filter; + + beforeEach(() => { + angular.mock.module('client'); + }); + + beforeEach(angular.mock.inject((_$componentController_, _$timeout_, _$filter_) => { + $componentController = _$componentController_; + $element = angular.element('
'); + $timeout = _$timeout_; + $filter = _$filter_; + })); + + describe('show() setter', () => { + it(`should define controllers _show using the value received as argument`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + controller._show = 'old value'; + controller.show = 'new value'; + + expect(controller._show).toEqual('new value'); + }); + }); + + describe('search()', () => { + it(`should set controllers _search property with the value received`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + controller.search = 'some filter valiue'; + + expect(controller._search).toEqual('some filter valiue'); + }); + + it(`should set controllers _search property to null as the value received is an empty string`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + controller.search = ''; + + expect(controller._search).toEqual(null); + }); + + it(`should call onFilterRest() if controllers filterAction is defined`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + controller.filterAction = true; + spyOn(controller, 'onFilterRest'); + controller.search = 'some filter valiue'; + + expect(controller.onFilterRest).toHaveBeenCalledWith(); + }); + + it(`should call filterItems() if controllers filterAction is undefined`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + controller.filterAction = undefined; + spyOn(controller, 'filterItems'); + controller.search = 'some filter valiue'; + + expect(controller.filterItems).toHaveBeenCalledWith(); + }); + }); + + describe('activeOption() setter', () => { + it(`should set _activeOption as items.length if showLoadMore is defined if activeOption is bigger than items.length then call loadItems()`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + spyOn(controller, 'loadItems'); + controller.showLoadMore = true; + controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}]; + controller.activeOption = 10; + $timeout.flush(); + + expect(controller._activeOption).toEqual(4); + expect(controller.loadItems).toHaveBeenCalledWith(); + }); + + it(`should set _activeOption as activeOption if showLoadMore is defined if activeOption is smaller than items.length then call loadItems()`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + spyOn(controller, 'loadItems'); + controller.showLoadMore = true; + controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}]; + controller.activeOption = 2; + $timeout.flush(); + + expect(controller._activeOption).toEqual(2); + expect(controller.loadItems).toHaveBeenCalledWith(); + }); + + it(`should set _activeOption as items.length -1 if showLoadMore is not defined then call loadItems()`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + spyOn(controller, 'loadItems'); + controller.showLoadMore = undefined; + controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}]; + controller.activeOption = 10; + $timeout.flush(); + + expect(controller._activeOption).toEqual(3); + expect(controller.loadItems).toHaveBeenCalledWith(); + }); + + it(`should define _activeOption as activeOption and never call loadItems()`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + spyOn(controller, 'loadItems'); + controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}, {id: 5, name: 'Doctor X'}]; + controller.activeOption = 1; + $timeout.flush(); + + expect(controller._activeOption).toEqual(1); + expect(controller.loadItems).not.toHaveBeenCalledWith(); + }); + }); + + describe('filterItems() setter', () => { + it(`should set _itemsFiltered using the value of items`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + controller.items = [{id: 1, name: 'Batman'}]; + controller.filterItems(); + + expect(controller.itemsFiltered).toEqual(controller.items); + }); + + it(`should set _itemsFiltered with the filtered value of items`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}]; + controller.search = 'Batman'; + controller.filterItems(); + + expect(controller.itemsFiltered).toEqual([Object({id: 1, name: 'Batman'})]); + }); + + it(`should set _itemsFiltered an empty array`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}]; + controller.search = 'the Joker'; + + expect(controller.itemsFiltered.length).toEqual(0); + }); + }); + + describe('onFilterRest()', () => { + it(`should call the filterAction() with a constructed object as argument`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}, {filterAction: () => {}}); + controller.search = 'Batman'; + spyOn(controller, 'filterAction'); + controller.onFilterRest(); + + expect(controller.filterAction).toHaveBeenCalledWith({search: controller.search}); + }); + }); + + describe('$onChanges()', () => { + it(`should set the top css of the $element`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + let argumentObject = {show: true, top: {currentValue: 100}}; + spyOn(controller.$element, 'css'); + controller.$onChanges(argumentObject); + + expect(controller.$element.css).toHaveBeenCalledWith('top', '100px'); + }); + + it(`should set the width css of the $element`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + let argumentObject = {show: true, itemWidth: {currentValue: 100}}; + spyOn(controller.$element, 'css'); + controller.$onChanges(argumentObject); + + expect(controller.$element.css).toHaveBeenCalledWith('width', '100px'); + }); + + it(`should set the width css of the $element`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + let argumentObject = {items: {id: 1, name: 'Batman'}}; + spyOn(controller, 'filterItems'); + controller.$onChanges(argumentObject); + + expect(controller.filterItems).toHaveBeenCalledWith(); + }); + }); + + describe('clearSearch()', () => { + it(`should set the controllers search property to null`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + controller.search = true; + controller.clearSearch(); + + expect(controller.search).toEqual(null); + }); + }); + + describe('selectOption()', () => { + it(`should set controllers selected and show properties then call clearSearch() as _activeOption is smaller than items.length`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + spyOn(controller, 'clearSearch'); + controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}]; + controller._activeOption = 0; + controller.selectOption(); + + expect(controller.selected).toEqual(controller.items[controller._activeOption]); + expect(controller._show).toEqual(false); + expect(controller.clearSearch).toHaveBeenCalledWith(); + }); + + it(`should not set controllers selected, show and never call clearSearch() as _activeOption is bigger than items.length`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + spyOn(controller, 'clearSearch'); + controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}]; + controller._activeOption = 100; + controller.selectOption(); + + expect(controller.selected).not.toBeDefined(); + expect(controller._show).not.toBeDefined(); + expect(controller.clearSearch).not.toHaveBeenCalledWith(); + }); + + it(`should call loadMore() if the activeValue equals items.length`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}, {loadMore: () => {}}); + spyOn(controller, 'loadMore'); + controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}]; + controller._activeOption = 4; + controller.showLoadMore = 4; + controller.selectOption(); + + expect(controller.loadMore).toHaveBeenCalledWith(); + }); + }); + + describe('onKeydown()', () => { + it(`should call selectOption() and preventDefault() if Enter key is pressed`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + spyOn(controller, 'selectOption'); + controller._show = true; + controller.element = document.createElement('div'); + let event = {target: controller.element, preventDefault: () => {}}; + event.keyCode = 13; + spyOn(event, 'preventDefault'); + controller.onKeydown(event); + $timeout.flush(); + + expect(controller.selectOption).toHaveBeenCalledWith(); + expect(event.preventDefault).toHaveBeenCalledWith(); + }); + + it(`should call clearSearch() Esc key is pressed`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + spyOn(controller, 'clearSearch'); + controller._show = true; + controller.element = document.createElement('div'); + let event = {target: controller.element}; + event.keyCode = 27; + controller.onKeydown(event); + + expect(controller.clearSearch).toHaveBeenCalledWith(); + }); + + it(`should call clearSearch() Esc key is pressed and take off 1 from _activeOption`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}]; + spyOn(controller, 'setScrollPosition'); + controller._show = true; + controller.element = document.createElement('div'); + let event = {target: controller.element}; + event.keyCode = 38; + controller._activeOption = 1; + controller.onKeydown(event); + $timeout.flush(); + + expect(controller.setScrollPosition).toHaveBeenCalledWith(); + expect(controller._activeOption).toEqual(0); + }); + + it(`should call clearSearch() Esc key is pressed and take off 1 from _activeOption`, () => { + let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); + controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}]; + spyOn(controller, 'setScrollPosition'); + controller._show = true; + controller.element = document.createElement('div'); + let event = {target: controller.element}; + event.keyCode = 40; + controller._activeOption = 1; + controller.onKeydown(event); + $timeout.flush(); + + expect(controller.setScrollPosition).toHaveBeenCalledWith(); + expect(controller._activeOption).toEqual(2); + }); + }); +});