client side unit test for dropdown until setScrollPosition
This commit is contained in:
Carlos
parent
1bc3a0bdd7
commit
3e44e927e8
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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('<div></div>');
|
||||
$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);
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue