verdnatura/salix
verdnatura
/
salix
3
5
Fork 0
Code Issues Pull Requests 66 Releases Wiki Activity

vnTooltip test code improved

This commit is contained in:
Juan 2018-10-19 09:33:12 +02:00
parent 2e0d5f2bde
commit 74e234a099
4 changed files with 88 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/core/src/components/autocomplete/autocomplete.js
View File

@ -59,6 +59,7 @@ export default class Autocomplete extends Input {
set url(value) { set url(value) {
this.dropDownAssign({url: value}); this.dropDownAssign({url: value});
this.refreshSelection();
} }
dropDownAssign(props) { dropDownAssign(props) {
@ -97,6 +98,15 @@ export default class Autocomplete extends Input {
this.refreshDisplayed(); this.refreshDisplayed();
} }
get initialData() {
return this._initialData;
}
set initialData(value) {
this._initialData = value;
this.refreshSelection();
}
selectionIsValid(selection) { selectionIsValid(selection) {
return selection return selection
&& selection[this.valueField] == this._field && selection[this.valueField] == this._field

12
client/core/src/components/autocomplete/autocomplete.spec.js
View File

@ -31,33 +31,31 @@ describe('Component vnAutocomplete', () => {
}); });
describe('selection property', () => { describe('selection property', () => {
beforeEach(() => {
$ctrl.field = data.id;
});
it(`should set selection finding an existing item in the initialData property`, () => { it(`should set selection finding an existing item in the initialData property`, () => {
$ctrl.initialData = data; $ctrl.initialData = data;
$ctrl.field = data.id;
expect($ctrl.selection).toEqual(data); expect($ctrl.selection).toEqual(data);
}); });
it(`should set selection finding an existing item in the data property`, () => { it(`should set selection finding an existing item in the data property`, () => {
$ctrl.data = [data]; $ctrl.data = [data];
$ctrl.field = data.id;
expect($ctrl.selection).toEqual(data); expect($ctrl.selection).toEqual(data);
}); });
it(`should perform a query if the item id isn't present in the data property`, inject($httpBackend => { it(`should perform a query if the item id isn't present in the data property`, inject($httpBackend => {
$httpBackend.whenGET(/testUrl.*/).respond([data]);
$ctrl.url = 'testUrl'; $ctrl.url = 'testUrl';
$httpBackend.whenGET(new RegExp(`testUrl.*`)).respond([data]);
$ctrl.field = data.id;
$httpBackend.flush(); $httpBackend.flush();
expect($ctrl.selection).toEqual(data); expect($ctrl.selection).toEqual(data);
})); }));
it(`should set selection to null when can't find an existing item in the data property`, () => { it(`should set selection to null when can't find an existing item in the data property`, () => {
$ctrl.field = data.id;
expect($ctrl.selection).toEqual(null); expect($ctrl.selection).toEqual(null);
}); });
}); });

4
client/core/src/components/popover/popover.spec.js
View File

@ -7,7 +7,7 @@ describe('Component vnPopover', () => {
beforeEach(ngModule('vnCore')); beforeEach(ngModule('vnCore'));
beforeEach(inject(($compile, $rootScope, $document) => { beforeEach(inject(($compile, $rootScope, $document) => {
$element = $compile(`<vn-popover>Test</vn-popover>`)($rootScope); $element = $compile(`<vn-popover>test</vn-popover>`)($rootScope);
$document.find('body').append($element); $document.find('body').append($element);
$ctrl = $element.controller('vnPopover'); $ctrl = $element.controller('vnPopover');
@ -49,7 +49,7 @@ describe('Component vnPopover', () => {
$ctrl.show($parent[0]); $ctrl.show($parent[0]);
let rect = $ctrl.popover.getBoundingClientRect(); let rect = $ctrl.popover.getBoundingClientRect();
let style = window.getComputedStyle($ctrl.element); let style = $ctrl.window.getComputedStyle($ctrl.element);
expect(style.visibility).toEqual('visible'); expect(style.visibility).toEqual('visible');
expect(style.display).not.toEqual('none'); expect(style.display).not.toEqual('none');

142
client/core/src/components/tooltip/tooltip.spec.js
View File

@ -1,55 +1,60 @@
import './tooltip'; import './tooltip';
import template from './tooltip.html';
describe('Component vnTooltip', () => { describe('Component vnTooltip', () => {
let $element; let $element;
let $scope; let $ctrl;
let $httpBackend; let $parent;
let $timeout; let element;
let controller; let window;
let $tooltip;
let $controller;
let parent;
beforeEach(() => { beforeEach(ngModule('vnCore'));
angular.mock.module('client');
});
beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$timeout_, $compile, $document) => { beforeEach(inject(($compile, $rootScope, $document) => {
$scope = $rootScope.$new(); $element = $compile(`<vn-tooltip class="text">test</span></vn-tooltip>`)($rootScope);
$timeout = _$timeout_; $document.find('body').append($element);
$element = angular.element(`<div>${template}</div>`); $ctrl = $element.controller('vnTooltip');
$tooltip = $compile(`<vn-tooltip class="text">test</span></vn-tooltip>`)($rootScope); element = $element[0];
$document.find('body').append($tooltip); window = $ctrl.window;
$httpBackend = _$httpBackend_;
$httpBackend.when('GET', /\/locale\/\w+\/[a-z]{2}\.json/).respond({}); $parent = angular.element('<div/>');
controller = _$componentController_('vnTooltip', {$element, $scope, $timeout, $transclude: null}); $parent.css({
$controller = $tooltip[0].$ctrl; backgroundColor: 'red',
parent = angular.element('<div/>')[0]; position: 'absolute',
width: '10px',
height: '10px',
top: '0',
left: '0'
});
$document.find('body').append($parent);
})); }));
afterEach(() => {
$element.remove();
$parent.remove();
});
describe('show()', () => { describe('show()', () => {
it(`should check that tooltip is visible into the screen`, () => { it(`should check that tooltip is visible into the screen`, () => {
$controller.show(parent); $ctrl.show($parent[0]);
let clientRect = $controller.element.getBoundingClientRect(); let rect = element.getBoundingClientRect();
let style = window.getComputedStyle($controller.element); let style = window.getComputedStyle(element);
expect(style.visibility).toEqual('visible'); expect(style.visibility).toEqual('visible');
expect(style.display).not.toEqual('none'); expect(style.display).not.toEqual('none');
expect(0).toBeLessThanOrEqual(clientRect.top); expect(0).toBeLessThanOrEqual(rect.top);
expect(0).toBeLessThanOrEqual(clientRect.left); expect(0).toBeLessThanOrEqual(rect.left);
expect($controller.window.innerHeight).toBeGreaterThan(clientRect.bottom); expect(window.innerHeight).toBeGreaterThan(rect.bottom);
expect($controller.window.innerWidth).toBeGreaterThan(clientRect.right); expect(window.innerWidth).toBeGreaterThan(rect.right);
}); });
}); });
describe('hide()', () => { describe('hide()', () => {
it(`should check that tooltip is not visible`, () => { it(`should check that tooltip is not visible`, () => {
$controller.show(parent); $ctrl.show($parent[0]);
$controller.hide(); $ctrl.hide();
let style = window.getComputedStyle($controller.element); let style = window.getComputedStyle(element);
expect(style.display).toEqual('none'); expect(style.display).toEqual('none');
}); });
@ -57,62 +62,57 @@ describe('Component vnTooltip', () => {
describe('relocate()', () => { describe('relocate()', () => {
it(`should reallocate tooltip on top-left`, () => { it(`should reallocate tooltip on top-left`, () => {
let parent = {getBoundingClientRect() { $ctrl.show($parent[0]);
return {top: 0, left: 0, height: 10, width: 10}; let rect = element.getBoundingClientRect();
}};
$controller.show(parent);
let clientRect = $controller.element.getBoundingClientRect();
expect($controller.margin).toBeLessThan(clientRect.top); expect($ctrl.margin).toBeLessThan(rect.top);
expect($controller.margin).toEqual(clientRect.left); expect($ctrl.margin).toEqual(rect.left);
}); });
it(`should reallocate tooltip on bottom-left`, () => { it(`should reallocate tooltip on bottom-left`, () => {
let parent = { $parent.css({
getBoundingClientRect() { top: `${window.innerHeight}px`
return {top: $controller.window.innerHeight, left: 0, height: 10, width: 10}; });
}}; $ctrl.show($parent[0]);
$controller.show(parent); let rect = element.getBoundingClientRect();
let clientRect = $controller.element.getBoundingClientRect();
expect($controller.window.innerHeight).toBeGreaterThan(clientRect.top); expect(window.innerHeight).toBeGreaterThan(rect.top);
expect($controller.margin).toEqual(clientRect.left); expect($ctrl.margin).toEqual(rect.left);
}); });
it(`should reallocate tooltip on bottom-right`, () => { it(`should reallocate tooltip on bottom-right`, () => {
let parent = { $parent.css({
getBoundingClientRect() { top: `${window.innerHeight}px`,
return {top: $controller.window.innerHeight, left: $controller.window.innerWidth, height: 10, width: 10}; left: `${window.innerWidth}px`
}}; });
$controller.show(parent); $ctrl.show($parent[0]);
let clientRect = $controller.element.getBoundingClientRect(); let rect = element.getBoundingClientRect();
expect($controller.window.innerWidth).toBeGreaterThan(clientRect.left); expect(window.innerWidth).toBeGreaterThan(rect.left);
expect($controller.window.innerWidth - $controller.margin).toEqual(clientRect.right); expect(window.innerWidth - $ctrl.margin).toEqual(rect.right);
}); });
it(`should reallocate tooltip on top-right`, () => { it(`should reallocate tooltip on top-right`, () => {
let parent = { $parent.css({
getBoundingClientRect() { left: `${window.innerWidth}px`
return {top: 0, left: $controller.window.innerWidth, height: 10, width: 10}; });
}}; $ctrl.show($parent[0]);
$controller.show(parent); let rect = element.getBoundingClientRect();
let clientRect = $controller.element.getBoundingClientRect();
expect($controller.margin).toBeLessThan(clientRect.top); expect($ctrl.margin).toBeLessThan(rect.top);
expect($controller.window.innerWidth - $controller.margin).toEqual(clientRect.right); expect(window.innerWidth - $ctrl.margin).toEqual(rect.right);
}); });
it(`should reallocate tooltip on center`, () => { it(`should reallocate tooltip on center`, () => {
let parent = { $parent.css({
getBoundingClientRect() { top: `${window.window.innerHeight / 2}px`,
return {top: $controller.window.innerHeight / 2, left: $controller.window.innerWidth / 2, height: 10, width: 10}; left: `${window.window.innerWidth / 2}px`
}}; });
$controller.show(parent); $ctrl.show($parent[0]);
let clientRect = $controller.element.getBoundingClientRect(); let rect = element.getBoundingClientRect();
expect($controller.window.innerHeight / 2).toBeLessThan(clientRect.top); expect(window.innerHeight / 2).toBeLessThan(rect.top);
expect($controller.window.innerWidth / 2).toBeGreaterThan(clientRect.left); expect(window.innerWidth / 2).toBeGreaterThan(rect.left);
}); });
}); });
}); });