Autocomplete spec updated, icon-menu spec completed and small refactors in dialog, drop-down and icon-menu

This commit is contained in:
Carlos 2017-10-04 08:47:16 +02:00
parent 024aca6c17
commit 946d7f8824
5 changed files with 101 additions and 11 deletions

View File

@ -155,18 +155,17 @@ describe('Component vnAutocomplete', () => {
});
describe('findItem()', () => {
it(`should return items array if the controller does not provide a url and nither it has items`, () => {
let controller = $componentController('vnAutocomplete', {$scope, $element, $httpBackend, $timeout});
controller.items = ['Batman', 'Bruce Wayne'];
it(`should return items empty array if the controller does not provide a url and have no items defined`, () => {
let controller = $componentController('vnIconMenu', {$scope, $element, $httpBackend, $timeout});
controller.findItems('some search value');
expect(controller.items.length).toEqual(2);
expect(controller.items).not.toBeDefined();
});
it(`should perform a query with the search value if the finding flag is false`, () => {
let controller = $componentController('vnAutocomplete', {$scope, $element, $httpBackend, $timeout});
it(`should return items array if the controller does not provide a url`, () => {
let controller = $componentController('vnIconMenu', {$scope, $element, $httpBackend, $timeout});
controller.items = ['Batman', 'Bruce Wayne'];
controller.findItems('Gotham');
controller.findItems('some search value');
expect(controller.items.length).toEqual(2);
});
@ -205,7 +204,7 @@ describe('Component vnAutocomplete', () => {
});
});
describe('getItem()', () => {
describe('getItems()', () => {
it(`should perfom a query to fill the items without filter`, () => {
let controller = $componentController('vnAutocomplete', {$scope, $element, $httpBackend, $timeout}, {url: 'test.com'});
$httpBackend.whenGET(`test.com?filter={"skip":0,"limit":10,"order":"name ASC"}`).respond([{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce Wayne'}]);

View File

@ -13,8 +13,7 @@ export default class Dialog extends Component {
super($element);
$element.addClass('vn-dialog');
this.dialog = $element[0].firstChild;
this.element.addEventListener('mousedown',
event => this.onBackgroundMouseDown(event));
this.element.addEventListener('mousedown', event => this.onBackgroundMouseDown(event));
}
/**
* Displays the dialog to the user.
@ -66,12 +65,14 @@ export default class Dialog extends Component {
cancel = this.onResponse({response: response});
return cancel;
}
realHide() {
this.element.style.display = 'none';
this.document.removeEventListener('keypress',
this.keypressHandler);
this.lastEvent = null;
}
onButtonClick(event) {
let buttonBar = this.element.querySelector('.button-bar');
let buttons = buttonBar.querySelector('tpl-buttons');
@ -86,13 +87,16 @@ export default class Dialog extends Component {
let cancel = this.fireResponse(response);
if (cancel !== false) this.realHide();
}
onDialogMouseDown(event) {
this.lastEvent = event;
}
onBackgroundMouseDown(event) {
if (event != this.lastEvent)
this.hide();
}
onKeypress(event) {
if (event.keyCode == 27) // Esc
this.hide();

View File

@ -16,6 +16,7 @@ export default class DropDown {
get show() {
return this._show;
}
set show(value) {
let oldValue = this.show;
this._show = value;
@ -28,9 +29,11 @@ export default class DropDown {
}, 250);
}
}
get search() {
return this._search;
}
set search(value) {
let val = (value === undefined && value === '') ? null : value;
this._search = val;
@ -40,9 +43,11 @@ export default class DropDown {
else
this.filterItems();
}
get activeOption() {
return this._activeOption;
}
set activeOption(value) {
if (value < 0) {
value = 0;
@ -117,6 +122,7 @@ export default class DropDown {
}
}
}
setScrollPosition() {
let dropdown = this.$element[0].querySelector('ul.dropdown');
let child = dropdown ? dropdown.childNodes[this.activeOption] : null;
@ -151,6 +157,7 @@ export default class DropDown {
this.parent.removeEventListener('keydown', e => this.onKeydown(e));
}
}
DropDown.$inject = ['$element', '$filter', '$timeout'];
module.component('vnDropDown', {

View File

@ -11,12 +11,15 @@ export default class IconMenu {
this.findMore = false;
this.element = $element[0];
}
get showDropDown() {
return this._showDropDown;
}
set showDropDown(value) {
this._showDropDown = value;
}
findItems(search) {
if (!this.url)
return this.items ? this.items : [];
@ -40,6 +43,7 @@ export default class IconMenu {
this.getItems();
}
}
getItems() {
let filter = {};
@ -66,6 +70,7 @@ export default class IconMenu {
}
);
}
$onInit() {
if (!this.items && this.url) {
this.items = [];
@ -104,6 +109,7 @@ export default class IconMenu {
this.$element.unbind('focusout');
}
}
IconMenu.$inject = ['$element', '$http', '$timeout'];
module.component('vnIconMenu', {

View File

@ -0,0 +1,74 @@
import './icon-menu.js';
describe('Component vnIconMenu', () => {
let $componentController;
let $element;
let $httpBackend;
let $timeout;
let $scope;
beforeEach(() => {
angular.mock.module('client');
});
beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$timeout_) => {
$componentController = _$componentController_;
$httpBackend = _$httpBackend_;
$timeout = _$timeout_;
$scope = $rootScope.$new();
$element = angular.element('<div></div>');
}));
describe('component vnIconMenu', () => {
describe('findItem()', () => {
it(`should return items empty array if the controller does not provide a url and have no items defined`, () => {
let controller = $componentController('vnIconMenu', {$scope, $element, $httpBackend, $timeout});
controller.findItems('some search value');
expect(controller.items).not.toBeDefined();
});
it(`should return items array if the controller does not provide a url`, () => {
let controller = $componentController('vnIconMenu', {$scope, $element, $httpBackend, $timeout});
controller.items = ['Batman', 'Bruce Wayne'];
controller.findItems('some search value');
expect(controller.items.length).toEqual(2);
});
it(`should perform a search and store the result in controller items`, () => {
let controller = $componentController('vnIconMenu', {$scope, $element, $httpBackend, $timeout}, {url: 'test.com'});
let search = 'The Joker';
let json = JSON.stringify({where: {name: {regexp: search}}});
$httpBackend.whenGET(`test.com?filter=${json}`).respond([{id: 3, name: 'The Joker'}]);
$httpBackend.expectGET(`test.com?filter=${json}`);
controller.findItems(search);
$httpBackend.flush();
expect(controller.items[0]).toEqual({id: 3, name: 'The Joker'});
});
it(`should call getItems function if there's no search value`, () => {
let controller = $componentController('vnIconMenu', {$scope, $element, $httpBackend, $timeout}, {url: 'test.com'});
spyOn(controller, 'getItems');
controller.findItems();
expect(controller.getItems).toHaveBeenCalledWith();
});
});
// implementation pending.
// describe('getItems()', () => {
// it(`should perfom a query to fill the items without filter`, () => {
// let controller = $componentController('vnIconMenu', {$scope, $element, $httpBackend, $timeout}, {url: 'test.com'});
// $httpBackend.whenGET(`test.com?filter={}`).respond([{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce Wayne'}]);
// $httpBackend.expectGET(`test.com?filter={}`);
// controller.getItems();
// $httpBackend.flush();
// expect(controller.items).toEqual([{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce Wayne'}]);
// });
// });
});
});