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); }); }); });