#492 tooltip test

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
 

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(`<div>${template}</div>`);
+        $tooltip = $compile(`<vn-tooltip class="text">test</span></vn-tooltip>`)($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('<div/>')[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);
         });
     });
 });