119 lines
3.8 KiB
JavaScript
119 lines
3.8 KiB
JavaScript
import './tooltip';
|
|
|
|
describe('Component vnTooltip', () => {
|
|
let $element;
|
|
let controller;
|
|
let $parent;
|
|
let element;
|
|
let window;
|
|
|
|
beforeEach(ngModule('vnCore'));
|
|
|
|
beforeEach(inject(($compile, $rootScope, $document) => {
|
|
$element = $compile(`<vn-tooltip class="text">test</span></vn-tooltip>`)($rootScope);
|
|
$document.find('body').append($element);
|
|
controller = $element.controller('vnTooltip');
|
|
element = $element[0];
|
|
window = controller.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[0]);
|
|
|
|
let rect = element.getBoundingClientRect();
|
|
let style = window.getComputedStyle(element);
|
|
|
|
expect(style.visibility).toEqual('visible');
|
|
expect(style.display).not.toEqual('none');
|
|
|
|
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[0]);
|
|
controller.hide();
|
|
let style = window.getComputedStyle(element);
|
|
|
|
expect(style.display).toEqual('none');
|
|
});
|
|
});
|
|
|
|
describe('relocate()', () => {
|
|
it(`should reallocate tooltip on top-left`, () => {
|
|
controller.show($parent[0]);
|
|
let rect = element.getBoundingClientRect();
|
|
|
|
expect(controller.margin).toBeLessThan(rect.top);
|
|
expect(controller.margin).toEqual(rect.left);
|
|
});
|
|
|
|
it(`should reallocate tooltip on bottom-left`, () => {
|
|
$parent.css({
|
|
top: `${window.innerHeight}px`
|
|
});
|
|
controller.show($parent[0]);
|
|
let rect = element.getBoundingClientRect();
|
|
|
|
expect(window.innerHeight).toBeGreaterThan(rect.top);
|
|
expect(controller.margin).toEqual(rect.left);
|
|
});
|
|
|
|
it(`should reallocate tooltip on bottom-right`, () => {
|
|
$parent.css({
|
|
top: `${window.innerHeight}px`,
|
|
left: `${window.innerWidth}px`
|
|
});
|
|
controller.show($parent[0]);
|
|
let rect = element.getBoundingClientRect();
|
|
|
|
expect(window.innerWidth).toBeGreaterThan(rect.left);
|
|
expect(window.innerWidth - controller.margin).toEqual(rect.right);
|
|
});
|
|
|
|
it(`should reallocate tooltip on top-right`, () => {
|
|
$parent.css({
|
|
left: `${window.innerWidth}px`
|
|
});
|
|
controller.show($parent[0]);
|
|
let rect = element.getBoundingClientRect();
|
|
|
|
expect(controller.margin).toBeLessThan(rect.top);
|
|
expect(window.innerWidth - controller.margin).toEqual(rect.right);
|
|
});
|
|
|
|
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();
|
|
|
|
expect(window.innerHeight / 2).toBeLessThan(rect.top);
|
|
expect(window.innerWidth / 2).toBeGreaterThan(rect.left);
|
|
});
|
|
});
|
|
});
|