client side unit test for textfield
This commit is contained in:
parent
dd004fdc89
commit
1b47d85828
|
@ -13,6 +13,7 @@ export function directive(vnPopover) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
module.directive('vnPopover', directive);
|
module.directive('vnPopover', directive);
|
||||||
|
|
||||||
export class Popover {
|
export class Popover {
|
||||||
|
@ -69,6 +70,7 @@ export class Popover {
|
||||||
width = innerWidth - dblMargin;
|
width = innerWidth - dblMargin;
|
||||||
style.width = width + 'px';
|
style.width = width + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (height + dblMargin > innerHeight) {
|
if (height + dblMargin > innerHeight) {
|
||||||
height = innerHeight - dblMargin;
|
height = innerHeight - dblMargin;
|
||||||
style.height = height + 'px';
|
style.height = height + 'px';
|
||||||
|
@ -82,11 +84,13 @@ export class Popover {
|
||||||
|
|
||||||
if (left + width > innerWidth)
|
if (left + width > innerWidth)
|
||||||
left -= (left + width) - innerWidth + margin;
|
left -= (left + width) - innerWidth + margin;
|
||||||
|
|
||||||
if (top + height > innerHeight)
|
if (top + height > innerHeight)
|
||||||
top -= height + parentNode.offsetHeight + spacing * 2;
|
top -= height + parentNode.offsetHeight + spacing * 2;
|
||||||
|
|
||||||
if (left < 0)
|
if (left < 0)
|
||||||
left = screenMargin;
|
left = screenMargin;
|
||||||
|
|
||||||
if (top < 0)
|
if (top < 0)
|
||||||
top = screenMargin;
|
top = screenMargin;
|
||||||
|
|
||||||
|
@ -102,6 +106,7 @@ export class Popover {
|
||||||
}
|
}
|
||||||
return popoverId;
|
return popoverId;
|
||||||
}
|
}
|
||||||
|
|
||||||
showComponent(childComponent, $scope, parent) {
|
showComponent(childComponent, $scope, parent) {
|
||||||
let childElement = this.document.createElement(childComponent);
|
let childElement = this.document.createElement(childComponent);
|
||||||
let id = 'popover-' + this.popOpens;
|
let id = 'popover-' + this.popOpens;
|
||||||
|
@ -111,12 +116,14 @@ export class Popover {
|
||||||
this.show(childElement, parent, id);
|
this.show(childElement, parent, id);
|
||||||
return childElement;
|
return childElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
_checkOpens() {
|
_checkOpens() {
|
||||||
this.popOpens = this.document.querySelectorAll('*[id^="popover-"]').length;
|
this.popOpens = this.document.querySelectorAll('*[id^="popover-"]').length;
|
||||||
if (this.popOpens === 0) {
|
if (this.popOpens === 0) {
|
||||||
this._destroy();
|
this._destroy();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_removeElement(val) {
|
_removeElement(val) {
|
||||||
if (!val) return;
|
if (!val) return;
|
||||||
let element = angular.element(val);
|
let element = angular.element(val);
|
||||||
|
@ -136,6 +143,7 @@ export class Popover {
|
||||||
}
|
}
|
||||||
this._checkOpens();
|
this._checkOpens();
|
||||||
}
|
}
|
||||||
|
|
||||||
hideChilds(id) {
|
hideChilds(id) {
|
||||||
let popovers = this.document.querySelectorAll('*[id^="popover-"]');
|
let popovers = this.document.querySelectorAll('*[id^="popover-"]');
|
||||||
let idNumber = parseInt(id.split('-')[1], 10);
|
let idNumber = parseInt(id.split('-')[1], 10);
|
||||||
|
@ -147,6 +155,7 @@ export class Popover {
|
||||||
);
|
);
|
||||||
this._checkOpens();
|
this._checkOpens();
|
||||||
}
|
}
|
||||||
|
|
||||||
hideAll() {
|
hideAll() {
|
||||||
let popovers = this.document.querySelectorAll('*[id^="popover-"]');
|
let popovers = this.document.querySelectorAll('*[id^="popover-"]');
|
||||||
popovers.forEach(
|
popovers.forEach(
|
||||||
|
@ -156,6 +165,7 @@ export class Popover {
|
||||||
);
|
);
|
||||||
this._checkOpens();
|
this._checkOpens();
|
||||||
}
|
}
|
||||||
|
|
||||||
_findPopOver(node) {
|
_findPopOver(node) {
|
||||||
while (node != null) {
|
while (node != null) {
|
||||||
if (node.id && node.id.startsWith('popover-')) {
|
if (node.id && node.id.startsWith('popover-')) {
|
||||||
|
@ -165,6 +175,7 @@ export class Popover {
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
onDocMouseDown(event) {
|
onDocMouseDown(event) {
|
||||||
let targetId = this._findPopOver(event.target);
|
let targetId = this._findPopOver(event.target);
|
||||||
if (targetId) {
|
if (targetId) {
|
||||||
|
@ -173,6 +184,7 @@ export class Popover {
|
||||||
this.hideAll();
|
this.hideAll();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onDocKeyDown(event) {
|
onDocKeyDown(event) {
|
||||||
if (event.keyCode === 27) {
|
if (event.keyCode === 27) {
|
||||||
let targetId = this._findPopOver(this.lastTarget);
|
let targetId = this._findPopOver(this.lastTarget);
|
||||||
|
@ -184,9 +196,12 @@ export class Popover {
|
||||||
this.lastTarget = null;
|
this.lastTarget = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onPopoverMouseDown(event) {
|
onPopoverMouseDown(event) {
|
||||||
this.lastTarget = event.target;
|
this.lastTarget = event.target;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Popover.$inject = ['$document', '$compile', '$transitions'];
|
Popover.$inject = ['$document', '$compile', '$transitions'];
|
||||||
|
|
||||||
module.service('vnPopover', Popover);
|
module.service('vnPopover', Popover);
|
||||||
|
|
|
@ -48,6 +48,7 @@ export default class TextfieldController extends Component {
|
||||||
this.input.focus();
|
this.input.focus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
TextfieldController.$inject = ['$element', '$scope', '$attrs', '$timeout', normalizerFactory.NAME];
|
TextfieldController.$inject = ['$element', '$scope', '$attrs', '$timeout', normalizerFactory.NAME];
|
||||||
|
|
||||||
module.component('vnTextfield', {
|
module.component('vnTextfield', {
|
||||||
|
|
|
@ -0,0 +1,47 @@
|
||||||
|
import './textfield.js';
|
||||||
|
|
||||||
|
describe('Component vnTextfield', () => {
|
||||||
|
let $componentController;
|
||||||
|
let $scope;
|
||||||
|
let $attrs;
|
||||||
|
let $timeout;
|
||||||
|
let $element;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
angular.mock.module('client');
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$timeout_) => {
|
||||||
|
$componentController = _$componentController_;
|
||||||
|
$scope = $rootScope.$new();
|
||||||
|
$attrs = {};
|
||||||
|
$timeout = _$timeout_;
|
||||||
|
$element = angular.element('<div><input></div>');
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe('value() setter', () => {
|
||||||
|
it(`should set _value, input.value and hasValue properties to null, '' and false then call mdlUpdate()`, () => {
|
||||||
|
let controller = $componentController('vnTextfield', {$scope, $element, $attrs, $timeout});
|
||||||
|
spyOn(controller, 'mdlUpdate');
|
||||||
|
let testValue = '';
|
||||||
|
controller.value = testValue;
|
||||||
|
|
||||||
|
expect(controller._value).toEqual(null);
|
||||||
|
expect(controller.input.value).toEqual(testValue);
|
||||||
|
expect(controller.hasValue).toEqual(Boolean(testValue));
|
||||||
|
expect(controller.mdlUpdate).toHaveBeenCalledWith();
|
||||||
|
});
|
||||||
|
|
||||||
|
it(`should set _value, input.value and hasValue propertiest to test, test and true then call mdlUpdate()`, () => {
|
||||||
|
let controller = $componentController('vnTextfield', {$scope, $element, $attrs, $timeout});
|
||||||
|
spyOn(controller, 'mdlUpdate');
|
||||||
|
let testValue = 'test';
|
||||||
|
controller.value = testValue;
|
||||||
|
|
||||||
|
expect(controller._value).toEqual(testValue);
|
||||||
|
expect(controller.input.value).toEqual(testValue);
|
||||||
|
expect(controller.hasValue).toEqual(Boolean(testValue));
|
||||||
|
expect(controller.mdlUpdate).toHaveBeenCalledWith();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue