salix/client/core/src/components/tooltip/tooltip.spec.js

import './tooltip';

describe('Component vnTooltip', () => {
    let $element;
    let $ctrl;
    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);
        $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`, () => {
            $ctrl.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`, () => {
            $ctrl.show($parent[0]);
            $ctrl.hide();
            let style = window.getComputedStyle(element);

            expect(style.display).toEqual('none');
        });
    });

    describe('relocate()', () => {
        it(`should reallocate tooltip on top-left`, () => {
            $ctrl.show($parent[0]);
            let rect = element.getBoundingClientRect();

            expect($ctrl.margin).toBeLessThan(rect.top);
            expect($ctrl.margin).toEqual(rect.left);
        });

        it(`should reallocate tooltip on bottom-left`, () => {
            $parent.css({
                top: `${window.innerHeight}px`
            });
            $ctrl.show($parent[0]);
            let rect = element.getBoundingClientRect();

            expect(window.innerHeight).toBeGreaterThan(rect.top);
            expect($ctrl.margin).toEqual(rect.left);
        });

        it(`should reallocate tooltip on bottom-right`, () => {
            $parent.css({
                top: `${window.innerHeight}px`,
                left: `${window.innerWidth}px`
            });
            $ctrl.show($parent[0]);
            let rect = element.getBoundingClientRect();

            expect(window.innerWidth).toBeGreaterThan(rect.left);
            expect(window.innerWidth - $ctrl.margin).toEqual(rect.right);
        });

        it(`should reallocate tooltip on top-right`, () => {
            $parent.css({
                left: `${window.innerWidth}px`
            });
            $ctrl.show($parent[0]);
            let rect = element.getBoundingClientRect();

            expect($ctrl.margin).toBeLessThan(rect.top);
            expect(window.innerWidth - $ctrl.margin).toEqual(rect.right);
        });

        it(`should reallocate tooltip on center`, () => {
            $parent.css({
                top: `${window.window.innerHeight / 2}px`,
                left: `${window.window.innerWidth / 2}px`
            });
            $ctrl.show($parent[0]);
            let rect = element.getBoundingClientRect();

            expect(window.innerHeight / 2).toBeLessThan(rect.top);
            expect(window.innerWidth / 2).toBeGreaterThan(rect.left);
        });
    });
});