From b7b02566d1944573efdbfe6a7da4ab2a61f26e71 Mon Sep 17 00:00:00 2001 From: Carlos Jimenez Ruiz Date: Mon, 18 May 2020 10:05:54 +0200 Subject: [PATCH] fixed tooltip unit test for Jest --- front/core/components/tooltip/tooltip.spec.js | 179 +++++++++++------- 1 file changed, 107 insertions(+), 72 deletions(-) diff --git a/front/core/components/tooltip/tooltip.spec.js b/front/core/components/tooltip/tooltip.spec.js index 881e9c5e0..62e021bd1 100644 --- a/front/core/components/tooltip/tooltip.spec.js +++ b/front/core/components/tooltip/tooltip.spec.js @@ -2,119 +2,154 @@ import './tooltip'; describe('Component vnTooltip', () => { let $element; - let controller; + let tooltip; + let tooltipCtrl; let $parent; - let element; let window; beforeEach(ngModule('vnCore')); - beforeEach(inject(($componentController, $compile, $templateRequest, $document) => { - $element = angular.element(``); + beforeEach(inject(($rootScope, $compile, $document) => { + let scope = $rootScope.$new(); + $element = $compile(`test`)(scope); $document.find('body').append($element); - controller = $componentController('vnTooltip', {$document, $compile, $templateRequest, $element}); - element = $element[0]; - window = controller.window; + tooltip = $element[0]; + tooltipCtrl = tooltip.$ctrl; + window = tooltipCtrl.window; + $parent = angular.element('
'); - $parent = angular.element('
'); - $parent.css({ - backgroundColor: 'red', - position: 'absolute', - width: '100px', - height: '100px', - top: '0', - left: '0' - }); $document.find('body').append($parent); - })); - afterEach(() => { - $element.remove(); - $parent.remove(); - }); + $parent[0].getBoundingClientRect = () => {}; + + jest.spyOn(tooltip, 'getBoundingClientRect').mockReturnValue({bottom: 0, height: 40, left: 0, right: 0, top: 0, width: 40}); + })); describe('show()', () => { it(`should check that tooltip is visible into the screen`, () => { - expect(element.classList).not.toContain('show'); + jest.spyOn($parent[0], 'getBoundingClientRect').mockReturnValue({ + height: window.innerHeight - 120, + width: window.innerWidth - 120, + top: 60, + left: 60, + }); - controller.show($parent[0]); + expect(tooltip.classList).not.toContain('show'); - let rect = element.getBoundingClientRect(); + tooltipCtrl.show($parent[0]); - expect(element.classList).toContain('show'); + let tooltipStyle = tooltip.style; - expect(0).toBeLessThanOrEqual(rect.top); - expect(0).toBeLessThanOrEqual(rect.left); - expect(window.innerHeight).toBeGreaterThan(rect.bottom); - expect(window.innerWidth).toBeGreaterThan(rect.right); + let tooltipTop = parseInt(tooltipStyle['top']); + let tooltipLeft = parseInt(tooltipStyle['left']); + + expect(tooltip.classList).toContain('show'); + + expect(tooltipTop).toBeLessThanOrEqual(window.innerHeight); + expect(tooltipTop).toBeGreaterThanOrEqual(0); + expect(tooltipLeft).toBeLessThanOrEqual(window.innerWidth); + expect(tooltipLeft).toBeGreaterThanOrEqual(0); }); }); describe('hide()', () => { - it(`should check that tooltip is not visible`, () => { - controller.show($parent[0]); + it('should check that tooltip is not visible', () => { + jest.spyOn($parent[0], 'getBoundingClientRect').mockReturnValue({ + height: window.innerHeight, + width: window.innerWidth - 80, + top: 0, + left: 60, + }); + tooltipCtrl.show($parent[0]); - expect(element.classList).toContain('show'); - controller.hide(); + expect(tooltip.classList).toContain('show'); + tooltipCtrl.hide(); - expect(element.classList).not.toContain('show'); + expect(tooltip.classList).not.toContain('show'); }); }); - // #1892 reparar unitarios front tooltip.js describe('relocate()', () => { - it(`should reallocate tooltip on top-left`, () => { - controller.show($parent[0]); - let rect = element.getBoundingClientRect(); + it('should reallocate tooltip to the left', () => { + jest.spyOn($parent[0], 'getBoundingClientRect').mockReturnValue({ + height: window.innerHeight, + width: window.innerWidth - 80, + top: 0, + left: 60, + }); - expect(controller.margin).toBeLessThan(rect.top); - expect(controller.margin).toEqual(rect.left); + tooltipCtrl.position = 'left'; + tooltipCtrl.show($parent[0]); + + let tooltipStyle = tooltip.style; + + let tooltipTop = parseInt(tooltipStyle['top']); + let tooltipLeft = parseInt(tooltipStyle['left']); + + expect(tooltipTop).toEqual((window.innerHeight / 2) - (tooltipCtrl.margin * 2)); + expect(tooltipLeft).toEqual(tooltipCtrl.margin); }); - it(`should reallocate tooltip on bottom-left`, () => { - $parent.css({ - top: `${window.innerHeight}px` + it('should reallocate tooltip on bottom', () => { + let parentHeight = window.innerHeight - 80; + jest.spyOn($parent[0], 'getBoundingClientRect').mockReturnValue({ + height: parentHeight, + width: window.innerWidth, + top: 0, + left: 0, }); - controller.show($parent[0]); - let rect = element.getBoundingClientRect(); - expect(window.innerHeight).toBeGreaterThan(rect.top); - expect(controller.margin).toEqual(rect.left); + tooltipCtrl.position = 'bottom'; + tooltipCtrl.show($parent[0]); + + let tooltipStyle = tooltip.style; + + let tooltipTop = parseInt(tooltipStyle['top']); + let tooltipLeft = parseInt(tooltipStyle['left']); + + expect(tooltipLeft).toEqual((window.innerWidth / 2) - (tooltipCtrl.margin * 2)); + expect(tooltipTop).toEqual(parentHeight + tooltipCtrl.margin); }); - it(`should reallocate tooltip on bottom-right`, () => { - $parent.css({ - top: `${window.innerHeight}px`, - left: `${window.innerWidth}px` + it(`should reallocate tooltip on right`, () => { + let parentWidth = window.innerWidth - 80; + jest.spyOn($parent[0], 'getBoundingClientRect').mockReturnValue({ + height: window.innerHeight, + width: parentWidth, + top: 0, + left: 0, }); - controller.show($parent[0]); - let rect = element.getBoundingClientRect(); - expect(window.innerWidth).toBeGreaterThan(rect.left); - expect(window.innerWidth - controller.margin).toEqual(rect.right); + tooltipCtrl.position = 'right'; + tooltipCtrl.show($parent[0]); + + let tooltipStyle = tooltip.style; + + let tooltipTop = parseInt(tooltipStyle['top']); + let tooltipLeft = parseInt(tooltipStyle['left']); + + expect(tooltipLeft).toEqual(parentWidth + tooltipCtrl.margin); + expect(tooltipTop).toEqual((window.innerHeight / 2) - (tooltipCtrl.margin * 2)); }); - it(`should reallocate tooltip on top-right`, () => { - $parent.css({ - left: `${window.innerWidth}px` + it(`should reallocate tooltip on top`, () => { + jest.spyOn($parent[0], 'getBoundingClientRect').mockReturnValue({ + height: window.innerHeight - 80, + width: window.innerWidth, + top: 60, + left: 0, }); - controller.show($parent[0]); - let rect = element.getBoundingClientRect(); - expect(controller.margin).toBeLessThan(rect.top); - expect(window.innerWidth - controller.margin).toEqual(rect.right); - }); + tooltipCtrl.position = 'top'; + tooltipCtrl.show($parent[0]); - it(`should reallocate tooltip on center`, () => { - $parent.css({ - top: `${window.window.innerHeight / 2}px`, - left: `${window.window.innerWidth / 2}px` - }); - controller.show($parent[0]); - let rect = element.getBoundingClientRect(); + let tooltipStyle = tooltip.style; - expect(window.innerHeight / 2).toBeLessThan(rect.top); - expect(window.innerWidth / 2).toBeGreaterThan(rect.left); + let tooltipTop = parseInt(tooltipStyle['top']); + let tooltipLeft = parseInt(tooltipStyle['left']); + + expect(tooltipLeft).toEqual((window.innerWidth / 2) - (tooltipCtrl.margin * 2)); + expect(tooltipTop).toEqual(tooltipCtrl.margin); }); }); });