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

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;

    beforeEach(() => {
        angular.mock.module('client');
    });

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

    describe('show()', () => {
        it(`should check that tooltip is visible into the screen`, () => {
            $controller.show(parent);

            let clientRect = $controller.element.getBoundingClientRect();
            let style = window.getComputedStyle($controller.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);
        });
    });

    describe('hide()', () => {
        it(`should check that tooltip is not visible`, () => {
            $controller.show(parent);
            $controller.hide();
            let style = window.getComputedStyle($controller.element);

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

    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();

            expect($controller.margin).toBeLessThan(clientRect.top);
            expect($controller.margin).toEqual(clientRect.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();

            expect($controller.window.innerHeight).toBeGreaterThan(clientRect.top);
            expect($controller.margin).toEqual(clientRect.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();

            expect($controller.window.innerWidth).toBeGreaterThan(clientRect.left);
            expect($controller.window.innerWidth - $controller.margin).toEqual(clientRect.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();

            expect($controller.margin).toBeLessThan(clientRect.top);
            expect($controller.window.innerWidth - $controller.margin).toEqual(clientRect.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();

            expect($controller.window.innerHeight / 2).toBeLessThan(clientRect.top);
            expect($controller.window.innerWidth / 2).toBeGreaterThan(clientRect.left);
        });
    });
});