diff --git a/client/core/src/components/tooltip/tooltip.js b/client/core/src/components/tooltip/tooltip.js
index 3f221c107..e0bc323eb 100644
--- a/client/core/src/components/tooltip/tooltip.js
+++ b/client/core/src/components/tooltip/tooltip.js
@@ -15,6 +15,7 @@ export default class Tooltip extends Component {
this.$timeout = $timeout;
$element.addClass('vn-tooltip mdl-shadow--4dp');
this.position = 'down';
+ this.margin = 10;
}
/**
@@ -64,8 +65,8 @@ export default class Tooltip extends Component {
axis = 'y';
}
- let arrowSize = 10;
- let tipMargin = arrowSize;
+ let arrowSize = this.margin;
+ let tipMargin = this.margin;
let rect = this.parent.getBoundingClientRect();
let tipRect = this.element.getBoundingClientRect();
@@ -73,8 +74,8 @@ export default class Tooltip extends Component {
let bgColor = tipComputed.getPropertyValue('background-color');
let min = tipMargin;
- let maxTop = window.innerHeight - tipRect.height - tipMargin;
- let maxLeft = window.innerWidth - tipRect.width - tipMargin;
+ let maxTop = this.window.innerHeight - tipRect.height - tipMargin;
+ let maxLeft = this.window.innerWidth - tipRect.width - tipMargin;
// Coordinates
diff --git a/client/core/src/components/tooltip/tooltip.spec.js b/client/core/src/components/tooltip/tooltip.spec.js
index b3d62a12e..2a7df9bc7 100644
--- a/client/core/src/components/tooltip/tooltip.spec.js
+++ b/client/core/src/components/tooltip/tooltip.spec.js
@@ -7,59 +7,112 @@ describe('Component vnTooltip', () => {
let $httpBackend;
let $timeout;
let controller;
+ let $tooltip;
+ let $controller;
+ let parent;
beforeEach(() => {
angular.mock.module('client');
});
- beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$timeout_) => {
+ beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$timeout_, $compile, $document) => {
$scope = $rootScope.$new();
$timeout = _$timeout_;
$element = angular.element(`
${template}
`);
+ $tooltip = $compile(`test`)($rootScope);
+ $document.find('body').append($tooltip);
$httpBackend = _$httpBackend_;
$httpBackend.when('GET', /\/locale\/\w+\/[a-z]{2}\.json/).respond({});
controller = _$componentController_('vnTooltip', {$element, $scope, $timeout, $transclude: null});
+ $controller = $tooltip[0].$ctrl;
+ parent = angular.element('')[0];
}));
describe('show()', () => {
- it(`should define parent property and add a class named 'show' to the element`, () => {
- spyOn(controller, 'relocate');
- spyOn(controller, 'cancelTimeout');
+ it(`should check that tooltip is visible into the screen`, () => {
+ $controller.show(parent);
- controller.show({name: 'parentElement'});
+ let clientRect = $controller.element.getBoundingClientRect();
+ let style = window.getComputedStyle($controller.element);
- expect(controller.parent).toEqual({name: 'parentElement'});
- expect($element[0].classList).toContain('show');
+ expect(style.visibility).toEqual('visible');
+ expect(style.display).not.toEqual('none');
+
+ expect(0).toBeLessThanOrEqual(clientRect.top);
+ expect(0).toBeLessThanOrEqual(clientRect.left);
+ expect($controller.window.innerHeight).toBeGreaterThan(clientRect.bottom);
+ expect($controller.window.innerWidth).toBeGreaterThan(clientRect.right);
});
});
describe('hide()', () => {
- it(`should remove a class named 'show' from the element`, () => {
- spyOn(controller, 'cancelTimeout');
+ it(`should check that tooltip is not visible`, () => {
+ $controller.show(parent);
+ $controller.hide();
+ let style = window.getComputedStyle($controller.element);
- controller.hide();
-
- expect($element[0].classList).not.toContain('show');
+ expect(style.display).toEqual('none');
});
});
- describe('cancelTimeout()', () => {
- it(`should call $timeout cancel method and unset relocateTimeout property`, () => {
- spyOn(controller.$timeout, 'cancel');
- controller.relocateTimeout = {name: 'MyTimeout'};
+ describe('relocate()', () => {
+ it(`should reallocate tooltip on top-left`, () => {
+ let parent = {getBoundingClientRect() {
+ return {top: 0, left: 0, height: 10, width: 10};
+ }};
+ $controller.show(parent);
+ let clientRect = $controller.element.getBoundingClientRect();
- controller.cancelTimeout();
-
- expect(controller.$timeout.cancel).toHaveBeenCalledWith({name: 'MyTimeout'});
- expect(controller.relocateTimeout).toBeNull();
+ expect($controller.margin).toBeLessThan(clientRect.top);
+ expect($controller.margin).toEqual(clientRect.left);
});
- it(`should not call $timeout cancel method`, () => {
- spyOn(controller.$timeout, 'cancel');
- controller.relocateTimeout = {name: 'MyTimeout'};
+ it(`should reallocate tooltip on bottom-left`, () => {
+ let parent = {
+ getBoundingClientRect() {
+ return {top: $controller.window.innerHeight, left: 0, height: 10, width: 10};
+ }};
+ $controller.show(parent);
+ let clientRect = $controller.element.getBoundingClientRect();
- expect(controller.$timeout.cancel).not.toHaveBeenCalledWith();
- expect(controller.relocateTimeout).toBeDefined();
+ expect($controller.window.innerHeight).toBeGreaterThan(clientRect.top);
+ expect($controller.margin).toEqual(clientRect.left);
+ });
+
+ it(`should reallocate tooltip on bottom-right`, () => {
+ let parent = {
+ getBoundingClientRect() {
+ return {top: $controller.window.innerHeight, left: $controller.window.innerWidth, height: 10, width: 10};
+ }};
+ $controller.show(parent);
+ let clientRect = $controller.element.getBoundingClientRect();
+
+ expect($controller.window.innerWidth).toBeGreaterThan(clientRect.left);
+ expect($controller.window.innerWidth - $controller.margin).toEqual(clientRect.right);
+ });
+
+ it(`should reallocate tooltip on top-right`, () => {
+ let parent = {
+ getBoundingClientRect() {
+ return {top: 0, left: $controller.window.innerWidth, height: 10, width: 10};
+ }};
+ $controller.show(parent);
+ let clientRect = $controller.element.getBoundingClientRect();
+
+ expect($controller.margin).toBeLessThan(clientRect.top);
+ expect($controller.window.innerWidth - $controller.margin).toEqual(clientRect.right);
+ });
+
+ it(`should reallocate tooltip on center`, () => {
+ let parent = {
+ getBoundingClientRect() {
+ return {top: $controller.window.innerHeight / 2, left: $controller.window.innerWidth / 2, height: 10, width: 10};
+ }};
+ $controller.show(parent);
+ let clientRect = $controller.element.getBoundingClientRect();
+
+ expect($controller.window.innerHeight / 2).toBeLessThan(clientRect.top);
+ expect($controller.window.innerWidth / 2).toBeGreaterThan(clientRect.left);
});
});
});