vnTooltip test code improved

This commit is contained in:
Juan 2018-10-19 09:33:12 +02:00
parent 2e0d5f2bde
commit 74e234a099
4 changed files with 88 additions and 80 deletions

View File

@ -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

View File

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

View File

@ -7,7 +7,7 @@ describe('Component vnPopover', () => {
beforeEach(ngModule('vnCore'));
beforeEach(inject(($compile, $rootScope, $document) => {
$element = $compile(`<vn-popover>Test</vn-popover>`)($rootScope);
$element = $compile(`<vn-popover>test</vn-popover>`)($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');

View File

@ -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(`<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];
beforeEach(inject(($compile, $rootScope, $document) => {
$element = $compile(`<vn-tooltip class="text">test</span></vn-tooltip>`)($rootScope);
$document.find('body').append($element);
$ctrl = $element.controller('vnTooltip');
element = $element[0];
window = $ctrl.window;
$parent = angular.element('<div/>');
$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);
});
});
});