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 add up 1 to _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); }); }); describe('setScrollPosition()', () => { it(`should call child.scrollIntoView if defined `, () => { $element[0].firstChild.setAttribute('class', 'dropdown'); let child = $element[0].firstChild.firstChild; child.scrollIntoView = () => {}; spyOn(child, 'scrollIntoView'); let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); controller._activeOption = 0; controller.setScrollPosition(); expect(child.scrollIntoView).toHaveBeenCalledWith(); }); }); describe('selectItem()', () => { it(`should pass item to selected and set controller._show to false`, () => { let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); let item = {id: 1, name: 'Batman'}; controller.selectItem(item); expect(controller.selected).toEqual(item); expect(controller._show).toEqual(false); }); it(`should pass item to selected and set controller._show to true if the controller.multiple is defined`, () => { let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); let item = {id: 1, name: 'Batman'}; controller.multiple = true; controller.selectItem(item); expect(controller.selected).toEqual(item); expect(controller._show).toEqual(true); }); }); describe('loadItems()', () => { it(`should set controller._show to true`, () => { let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); controller.loadItems(); expect(controller._show).toEqual(true); }); it(`should call loadMore() and then set controller._show to true`, () => { let controller = $componentController('vnDropDown', {$element, $timeout, $filter}, {showLoadMore: () => {}, loadMore: () => {}}); spyOn(controller, 'loadMore'); controller.loadItems(); expect(controller._show).toEqual(true); expect(controller.loadMore).toHaveBeenCalledWith(); }); }); describe('$onInit()', () => { it(`should add an event listener to the parent element`, () => { let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); spyOn(controller.parent, 'addEventListener'); controller.$onInit(); expect(controller.parent.addEventListener).toHaveBeenCalledWith('keydown', jasmine.any(Function)); }); }); describe('$onDestroy()', () => { it(`should remove an event listener from the parent element`, () => { let controller = $componentController('vnDropDown', {$element, $timeout, $filter}); spyOn(controller.parent, 'removeEventListener'); controller.$onDestroy(); expect(controller.parent.removeEventListener).toHaveBeenCalledWith('keydown', jasmine.any(Function)); }); }); });