From 74e234a0993535fb7ceb36eeaef3acf5f23b8441 Mon Sep 17 00:00:00 2001 From: Juan Date: Fri, 19 Oct 2018 09:33:12 +0200 Subject: [PATCH] vnTooltip test code improved --- .../components/autocomplete/autocomplete.js | 10 ++ .../autocomplete/autocomplete.spec.js | 12 +- .../src/components/popover/popover.spec.js | 4 +- .../src/components/tooltip/tooltip.spec.js | 142 +++++++++--------- 4 files changed, 88 insertions(+), 80 deletions(-) diff --git a/client/core/src/components/autocomplete/autocomplete.js b/client/core/src/components/autocomplete/autocomplete.js index e7589313e8..a36693284e 100755 --- a/client/core/src/components/autocomplete/autocomplete.js +++ b/client/core/src/components/autocomplete/autocomplete.js @@ -59,6 +59,7 @@ export default class Autocomplete extends Input { set url(value) { this.dropDownAssign({url: value}); + this.refreshSelection(); } dropDownAssign(props) { @@ -97,6 +98,15 @@ export default class Autocomplete extends Input { this.refreshDisplayed(); } + get initialData() { + return this._initialData; + } + + set initialData(value) { + this._initialData = value; + this.refreshSelection(); + } + selectionIsValid(selection) { return selection && selection[this.valueField] == this._field diff --git a/client/core/src/components/autocomplete/autocomplete.spec.js b/client/core/src/components/autocomplete/autocomplete.spec.js index fe4cbbb524..6f35268c80 100644 --- a/client/core/src/components/autocomplete/autocomplete.spec.js +++ b/client/core/src/components/autocomplete/autocomplete.spec.js @@ -31,33 +31,31 @@ describe('Component vnAutocomplete', () => { }); describe('selection property', () => { + beforeEach(() => { + $ctrl.field = data.id; + }); + it(`should set selection finding an existing item in the initialData property`, () => { $ctrl.initialData = data; - $ctrl.field = data.id; expect($ctrl.selection).toEqual(data); }); it(`should set selection finding an existing item in the data property`, () => { $ctrl.data = [data]; - $ctrl.field = data.id; expect($ctrl.selection).toEqual(data); }); 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'; - - $httpBackend.whenGET(new RegExp(`testUrl.*`)).respond([data]); - $ctrl.field = data.id; $httpBackend.flush(); expect($ctrl.selection).toEqual(data); })); 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); }); }); diff --git a/client/core/src/components/popover/popover.spec.js b/client/core/src/components/popover/popover.spec.js index 135e1c5b7f..335792c1f0 100644 --- a/client/core/src/components/popover/popover.spec.js +++ b/client/core/src/components/popover/popover.spec.js @@ -7,7 +7,7 @@ describe('Component vnPopover', () => { beforeEach(ngModule('vnCore')); beforeEach(inject(($compile, $rootScope, $document) => { - $element = $compile(`Test`)($rootScope); + $element = $compile(`test`)($rootScope); $document.find('body').append($element); $ctrl = $element.controller('vnPopover'); @@ -49,7 +49,7 @@ describe('Component vnPopover', () => { $ctrl.show($parent[0]); 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.display).not.toEqual('none'); diff --git a/client/core/src/components/tooltip/tooltip.spec.js b/client/core/src/components/tooltip/tooltip.spec.js index 2a7df9bc7a..d895fc4c1d 100644 --- a/client/core/src/components/tooltip/tooltip.spec.js +++ b/client/core/src/components/tooltip/tooltip.spec.js @@ -1,55 +1,60 @@ import './tooltip'; -import template from './tooltip.html'; describe('Component vnTooltip', () => { let $element; - let $scope; - let $httpBackend; - let $timeout; - let controller; - let $tooltip; - let $controller; - let parent; + let $ctrl; + let $parent; + let element; + let window; - beforeEach(() => { - angular.mock.module('client'); - }); + beforeEach(ngModule('vnCore')); - 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]; + beforeEach(inject(($compile, $rootScope, $document) => { + $element = $compile(`test`)($rootScope); + $document.find('body').append($element); + $ctrl = $element.controller('vnTooltip'); + element = $element[0]; + window = $ctrl.window; + + $parent = angular.element('
'); + $parent.css({ + backgroundColor: 'red', + position: 'absolute', + width: '10px', + height: '10px', + top: '0', + left: '0' + }); + $document.find('body').append($parent); })); + afterEach(() => { + $element.remove(); + $parent.remove(); + }); + describe('show()', () => { it(`should check that tooltip is visible into the screen`, () => { - $controller.show(parent); + $ctrl.show($parent[0]); - let clientRect = $controller.element.getBoundingClientRect(); - let style = window.getComputedStyle($controller.element); + let rect = element.getBoundingClientRect(); + let style = window.getComputedStyle(element); 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); + expect(0).toBeLessThanOrEqual(rect.top); + expect(0).toBeLessThanOrEqual(rect.left); + expect(window.innerHeight).toBeGreaterThan(rect.bottom); + expect(window.innerWidth).toBeGreaterThan(rect.right); }); }); describe('hide()', () => { it(`should check that tooltip is not visible`, () => { - $controller.show(parent); - $controller.hide(); - let style = window.getComputedStyle($controller.element); + $ctrl.show($parent[0]); + $ctrl.hide(); + let style = window.getComputedStyle(element); expect(style.display).toEqual('none'); }); @@ -57,62 +62,57 @@ describe('Component vnTooltip', () => { 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(); + $ctrl.show($parent[0]); + let rect = element.getBoundingClientRect(); - expect($controller.margin).toBeLessThan(clientRect.top); - expect($controller.margin).toEqual(clientRect.left); + expect($ctrl.margin).toBeLessThan(rect.top); + expect($ctrl.margin).toEqual(rect.left); }); 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(); + $parent.css({ + top: `${window.innerHeight}px` + }); + $ctrl.show($parent[0]); + let rect = element.getBoundingClientRect(); - expect($controller.window.innerHeight).toBeGreaterThan(clientRect.top); - expect($controller.margin).toEqual(clientRect.left); + expect(window.innerHeight).toBeGreaterThan(rect.top); + expect($ctrl.margin).toEqual(rect.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(); + $parent.css({ + top: `${window.innerHeight}px`, + left: `${window.innerWidth}px` + }); + $ctrl.show($parent[0]); + let rect = element.getBoundingClientRect(); - expect($controller.window.innerWidth).toBeGreaterThan(clientRect.left); - expect($controller.window.innerWidth - $controller.margin).toEqual(clientRect.right); + expect(window.innerWidth).toBeGreaterThan(rect.left); + expect(window.innerWidth - $ctrl.margin).toEqual(rect.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(); + $parent.css({ + left: `${window.innerWidth}px` + }); + $ctrl.show($parent[0]); + let rect = element.getBoundingClientRect(); - expect($controller.margin).toBeLessThan(clientRect.top); - expect($controller.window.innerWidth - $controller.margin).toEqual(clientRect.right); + expect($ctrl.margin).toBeLessThan(rect.top); + expect(window.innerWidth - $ctrl.margin).toEqual(rect.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(); + $parent.css({ + top: `${window.window.innerHeight / 2}px`, + left: `${window.window.innerWidth / 2}px` + }); + $ctrl.show($parent[0]); + let rect = element.getBoundingClientRect(); - expect($controller.window.innerHeight / 2).toBeLessThan(clientRect.top); - expect($controller.window.innerWidth / 2).toBeGreaterThan(clientRect.left); + expect(window.innerHeight / 2).toBeLessThan(rect.top); + expect(window.innerWidth / 2).toBeGreaterThan(rect.left); }); }); });