import * as angular from 'angular';
import * as sinon from 'sinon';
import 'angular-mocks';
import 'jasmine';

import BsLoadingOverlayModule from './BsLoadingOverlayModule';
import IBsLoadingOverlayOptions from './IBsLoadingOverlayOptions';

interface BsLoadingOverlayScope extends angular.IScope {
    model: any;
}

interface IRootScopeServiceWithExposedListeners extends angular.IRootScopeService {
    $$listeners: any;
}

describe('bsLoadingOverlay directive', () => {
    let bsLoadingOverlayService: any,
        bsLoadingOverlayServiceMock: sinon.SinonMock,
        $compile: angular.ICompileService,
        scope: BsLoadingOverlayScope,
        $rootScope: IRootScopeServiceWithExposedListeners,
        referenceId: string,
        template: string,
        $templateCache: angular.ITemplateCacheService,
        $timeout: sinon.SinonSpy & angular.ITimeoutService,
        defaultConfig: IBsLoadingOverlayOptions = {};

    const getCompiledElement = (template: string, scope: angular.IScope) => {
        let element: angular.IAugmentedJQuery;

        scope.$apply(() => {
            element = $compile(template)(scope);
        });

        return element;
    };

    beforeEach(() => {
        angular.mock.module(BsLoadingOverlayModule.name);
        angular.mock.module(($provide: angular.auto.IProvideService) => {
            $provide.value('bsLoadingOverlayService', bsLoadingOverlayService);
            $provide.decorator('$timeout', ($delegate: any) => sinon.spy($delegate));
        });

        template = '<div bs-loading-overlay bs-loading-overlay-reference-id="referenceId"></div>';

        referenceId = 'referenceId';

        defaultConfig = {
            templateUrl: 'default-template-url.html',
            activeClass: 'bs-loading-overlay--active'
        };

        bsLoadingOverlayService = {
            isActive: angular.noop,
            getGlobalConfig: angular.noop
        };

        bsLoadingOverlayServiceMock = sinon.mock(bsLoadingOverlayService);
        bsLoadingOverlayServiceMock.expects('getGlobalConfig').atLeast(1).returns(defaultConfig);

        angular.mock.inject((
            _$compile_: angular.ICompileService,
            _$rootScope_: IRootScopeServiceWithExposedListeners,
            _$q_: angular.IQService,
            _$document_: angular.IDocumentService,
            _$templateCache_: angular.ITemplateCacheService,
            _$timeout_: sinon.SinonSpy & angular.ITimeoutService
        ) => {
            $compile = _$compile_;
            scope = <BsLoadingOverlayScope>_$rootScope_.$new();
            scope.model = {};
            $rootScope = _$rootScope_;
            $templateCache = _$templateCache_;
            $timeout = _$timeout_;
        });

        $templateCache.put('default-template-url.html', '<div class="bs-loading-overlay"></div>');
    });


    it('should compile', () => {
        const element = getCompiledElement(template, scope);

        expect(element[0]).toBeDefined();
        bsLoadingOverlayServiceMock.verify();
    });

    it('should add overlay when reference is active', () => {
        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);

        const element = getCompiledElement(template, scope);

        expect(element[0].querySelector('.bs-loading-overlay')).not.toBeNull();
        bsLoadingOverlayServiceMock.verify();
    });

    describe('with options', () => {
        it('should pass provided template options to the template', () => {
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            template = '<div bs-loading-overlay bs-loading-overlay-template-options="{option: \'optionValue\'}" bs-loading-overlay-reference-id="referenceId"></div>';
            $templateCache.put(
                'default-template-url.html',
                '<div class="bs-loading-overlay">{{bsLoadingOverlayTemplateOptions.option}}</div>'
            );

            const element = getCompiledElement(template, scope);

            expect(element[0].querySelector('.bs-loading-overlay').textContent).toBe('optionValue');
            bsLoadingOverlayServiceMock.verify();
        });

        it('should pass provided different template options for different overlays in the same scope', () => {
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs('anotherReferenceId').returns(true);

            template = `
                <div>
                    <div bs-loading-overlay bs-loading-overlay-template-options="{option: \'optionValue\'}" bs-loading-overlay-reference-id="referenceId"></div>
                    <div bs-loading-overlay bs-loading-overlay-template-options="{option: \'anotherOptionValue\'}" bs-loading-overlay-reference-id="anotherReferenceId"></div>
                </div>`;

            $templateCache.put(
                'default-template-url.html',
                '<div class="bs-loading-overlay">{{bsLoadingOverlayTemplateOptions.option}}</div>'
            );

            const element = getCompiledElement(template, scope);
            const overlayElements = element[0].querySelectorAll('.bs-loading-overlay');

            expect(overlayElements[0].textContent).toBe('optionValue');
            expect(overlayElements[1].textContent).toBe('anotherOptionValue');

            bsLoadingOverlayServiceMock.verify();
        });
    });

    it('should not add overlay when reference is not active', () => {
        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);

        const element = getCompiledElement(template, scope);

        expect(element[0].querySelector('.bs-loading-overlay')).toBeNull();
        bsLoadingOverlayServiceMock.verify();
    });

    describe('with reference set by directive name attribute', () => {
        beforeEach(() => {
            template = '<div bs-loading-overlay="referenceId"></div>';
        });

        it('should not add overlay when reference is not active', () => {
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);

            const element = getCompiledElement(template, scope);

            expect(element[0].querySelector('.bs-loading-overlay')).toBeNull();
            bsLoadingOverlayServiceMock.verify();
        });

        it('should add overlay when reference is active', () => {
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);

            const element = getCompiledElement(template, scope);

            expect(element[0].querySelector('.bs-loading-overlay')).not.toBeNull();
            bsLoadingOverlayServiceMock.verify();
        });
    });

    it('should not add overlay when reference templateUrl is undefined in global config and not set in directive', () => {
        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
        defaultConfig.templateUrl = undefined;

        const element = getCompiledElement(template, scope);

        expect(element[0].querySelector('.bs-loading-overlay')).toBeNull();
        bsLoadingOverlayServiceMock.verify();
    });

    it('should reuse the same element on start stop and start again', () => {
        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);
        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);

        const element = getCompiledElement(template, scope);

        element[0].querySelector('.bs-loading-overlay').id = 'test id';

        $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
            referenceId
        });

        $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
            referenceId
        });

        expect(element[0].querySelector('.bs-loading-overlay').id).toEqual('test id');
        bsLoadingOverlayServiceMock.verify();
    });

    it('should add overlay element using provided templateUrl when reference is active', () => {
        $templateCache.put('some-template.html', '<div class="from-template-url"></div>');
        template = '<div bs-loading-overlay bs-loading-overlay-template-url="some-template.html" bs-loading-overlay-reference-id="referenceId"></div>';

        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);

        const element = getCompiledElement(template, scope);

        expect(element[0].querySelector('.from-template-url')).not.toBeNull();
        bsLoadingOverlayServiceMock.verify();
    });

    describe('with global config', () => {
        const globalConfig: IBsLoadingOverlayOptions = {
            templateUrl: 'global-template-url.html',
            activeClass: 'globalActiveClass'
        };

        beforeEach(() => {
            bsLoadingOverlayServiceMock.restore();
            bsLoadingOverlayServiceMock = sinon.mock(bsLoadingOverlayService);
            bsLoadingOverlayServiceMock.expects('getGlobalConfig').once().returns(globalConfig);

            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);

            $templateCache.put('global-template-url.html', '<div class="from-global-template-url"></div>');
        });

        it('should use templateUrl from global config if it is not provided directly into directive', () => {
            const element = getCompiledElement(template, scope);

            expect(element[0].querySelector('.from-global-template-url')).not.toBeNull();
        });

        it('should use active class from global config if it is not provided directly into directive', () => {
            const element = getCompiledElement(template, scope);

            expect(element.hasClass('globalActiveClass')).toBeTruthy();
        });

        it('should use delay from global config if it is not provided directly into directive', () => {
            globalConfig.delay = 1000;
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);

            const element = getCompiledElement(template, scope);
            scope.$apply(() => {
                $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                    referenceId
                });
            });

            expect(element[0].querySelector('.from-global-template-url')).not.toBeNull();
            $timeout.flush();
            expect(element[0].querySelector('.from-global-template-url')).toBeNull();
        });

        it('should pass provided template options from global config if it is not provided directly into directive', () => {
            globalConfig.templateOptions = {option: 'optionValue'};
            $templateCache.put(
                'global-template-url.html',
                '<div class="from-global-template-url">{{bsLoadingOverlayTemplateOptions.option}}</div>'
            );

            const element = getCompiledElement(template, scope);

            expect(element[0].querySelector('.from-global-template-url').textContent).toBe('optionValue');
            bsLoadingOverlayServiceMock.verify();
        });
    });

    describe('with delay', () => {
        it('should call timeout with correct args if delay is set', () => {
            template = '<div bs-loading-overlay bs-loading-overlay-delay="5000" bs-loading-overlay-reference-id="referenceId"></div>';
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);

            const element = getCompiledElement(template, scope);

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            expect($timeout.withArgs(angular.noop, 5000).calledOnce).toBeTruthy();
            bsLoadingOverlayServiceMock.verify();
        });

        it('should not remove overlay element until timer is triggered', () => {
            template = '<div bs-loading-overlay bs-loading-overlay-delay="5000" bs-loading-overlay-reference-id="referenceId"></div>';
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);

            const element = getCompiledElement(template, scope);

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            expect(element[0].querySelector('.bs-loading-overlay')).not.toBeNull();
            bsLoadingOverlayServiceMock.verify();
        });

        it('should remove overlay element when timer is triggered', () => {
            template = '<div bs-loading-overlay bs-loading-overlay-delay="5000" bs-loading-overlay-reference-id="referenceId"></div>';
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);

            const element = getCompiledElement(template, scope);

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            $timeout.flush();

            expect(element[0].querySelector('.bs-loading-overlay')).toBeNull();
            bsLoadingOverlayServiceMock.verify();
        });

        it('should not remove overlay element when timer is triggered, but overlay became active again', () => {
            template = '<div bs-loading-overlay bs-loading-overlay-delay="5000" bs-loading-overlay-reference-id="referenceId"></div>';
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);

            const element = getCompiledElement(template, scope);

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            $timeout.flush();

            expect(element[0].querySelector('.bs-loading-overlay')).not.toBeNull();
            bsLoadingOverlayServiceMock.verify();
        });

        it('should not remove overlay element until timeout triggered on second stop', () => {
            template = '<div bs-loading-overlay bs-loading-overlay-delay="5000" bs-loading-overlay-reference-id="referenceId"></div>';
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);

            const element = getCompiledElement(template, scope);

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            $timeout.flush();

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            expect(element[0].querySelector('.bs-loading-overlay')).not.toBeNull();
            bsLoadingOverlayServiceMock.verify();
        });

        it('should remove overlay element when timeout triggered on second stop', () => {
            template = '<div bs-loading-overlay bs-loading-overlay-delay="5000" bs-loading-overlay-reference-id="referenceId"></div>';
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);

            const element = getCompiledElement(template, scope);

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            $timeout.flush();

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            $timeout.flush();

            expect(element[0].querySelector('.bs-loading-overlay')).toBeNull();
            bsLoadingOverlayServiceMock.verify();
        });

        it('should not call timeout if delay is not set', () => {
            template = '<div bs-loading-overlay bs-loading-overlay-reference-id="referenceId"></div>';
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);

            const element = getCompiledElement(template, scope);

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            expect($timeout.called).toBeFalsy();
            bsLoadingOverlayServiceMock.verify();
        });
    });

    describe('with two loader overlays', () => {
        it('should be able to render two loaders with different templates and references', () => {
            $templateCache.put('some-template.html', '<div class="from-template-url"></div>');
            $templateCache.put('some-another-template.html', '<div class="from-another-template-url"></div>');
            template = '<div bs-loading-overlay bs-loading-overlay-template-url="some-template.html" bs-loading-overlay-reference-id="referenceId"></div>';
            const anotherTemplate = '<div bs-loading-overlay bs-loading-overlay-template-url="some-another-template.html" bs-loading-overlay-reference-id="anotherreferenceId"></div>';

            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs('anotherreferenceId').returns(true);

            const element = getCompiledElement(template, scope);
            const anotherElement = getCompiledElement(anotherTemplate, scope);

            expect(element[0].querySelector('.from-template-url')).not.toBeNull();
            expect(anotherElement[0].querySelector('.from-another-template-url')).not.toBeNull();
            bsLoadingOverlayServiceMock.verify();
        });

        it('should be able to render and show two loaders with same referenceId and template', () => {
            $templateCache.put('some-template.html', '<div class="from-template-url"></div>');
            template = '<div bs-loading-overlay bs-loading-overlay-template-url="some-template.html" bs-loading-overlay-reference-id="referenceId"></div>';

            bsLoadingOverlayServiceMock.expects('isActive').twice().withArgs(referenceId).returns(true);

            const element = getCompiledElement(template, scope);
            const anotherElement = getCompiledElement(template, scope);

            expect(element[0].querySelector('.from-template-url')).not.toBeNull();
            expect(anotherElement[0].querySelector('.from-template-url')).not.toBeNull();
            bsLoadingOverlayServiceMock.verify();
        });

        it('should be able to render two loaders with same referenceId but different templates', () => {
            $templateCache.put('some-template.html', '<div class="from-template-url"></div>');
            $templateCache.put('some-another-template.html', '<div class="from-another-template-url"></div>');
            template = '<div bs-loading-overlay bs-loading-overlay-template-url="some-template.html" bs-loading-overlay-reference-id="referenceId"></div>';
            const anotherTemplate = '<div bs-loading-overlay bs-loading-overlay-template-url="some-another-template.html" bs-loading-overlay-reference-id="referenceId"></div>';

            bsLoadingOverlayServiceMock.expects('isActive').twice().withArgs(referenceId).returns(true);

            const element = getCompiledElement(template, scope);
            const anotherElement = getCompiledElement(anotherTemplate, scope);

            expect(element[0].querySelector('.from-template-url')).not.toBeNull();
            expect(anotherElement[0].querySelector('.from-another-template-url')).not.toBeNull();
            bsLoadingOverlayServiceMock.verify();
        });

        it('should be able to render two loaders with different referenceId but same templates', () => {
            $templateCache.put('some-template.html', '<div class="from-template-url"></div>');
            template = '<div bs-loading-overlay bs-loading-overlay-template-url="some-template.html" bs-loading-overlay-reference-id="referenceId"></div>';
            const anotherTemplate = '<div bs-loading-overlay bs-loading-overlay-template-url="some-template.html" bs-loading-overlay-reference-id="anotherreferenceId"></div>';

            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs('anotherreferenceId').returns(true);

            const element = getCompiledElement(template, scope);
            const anotherElement = getCompiledElement(anotherTemplate, scope);

            expect(element[0].querySelector('.from-template-url')).not.toBeNull();
            expect(anotherElement[0].querySelector('.from-template-url')).not.toBeNull();
            bsLoadingOverlayServiceMock.verify();
        });

        it('should be able to render two loaders with different referenceId and templates then hide and show first', () => {
            $templateCache.put('some-template.html', '<div class="from-template-url"></div>');
            $templateCache.put('some-another-template.html', '<div class="from-another-template-url"></div>');
            template = '<div bs-loading-overlay bs-loading-overlay-template-url="some-template.html" bs-loading-overlay-reference-id="referenceId"></div>';
            const anotherTemplate = '<div bs-loading-overlay bs-loading-overlay-template-url="some-another-template.html" bs-loading-overlay-reference-id="anotherreferenceId"></div>';

            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs('anotherreferenceId').returns(true);

            const element = getCompiledElement(template, scope);
            const anotherElement = getCompiledElement(anotherTemplate, scope);

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            scope.$apply();

            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });

            scope.$apply();

            expect(element[0].querySelector('.from-template-url')).not.toBeNull();
            expect(anotherElement[0].querySelector('.from-another-template-url')).not.toBeNull();
            bsLoadingOverlayServiceMock.verify();
        });
    });

    it('should remove overlay with provided templateUrl class if reference became inactive and update event emitted', () => {
        $templateCache.put('some-template.html', '<div class="from-template-url"></div>');
        template = '<div bs-loading-overlay bs-loading-overlay-template-url="some-template.html" bs-loading-overlay-reference-id="referenceId"></div>';

        bsLoadingOverlayServiceMock.expects('isActive')
            .twice()
            .withArgs(referenceId)
            .onFirstCall()
            .returns(true)
            .onSecondCall()
            .returns(false);

        const element = getCompiledElement(template, scope);

        scope.$apply(() => {
            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });
        });

        expect(element[0].querySelector('.from-template-url')).toBeNull();
    });

    it('should add overlay class when reference is active', () => {
        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);

        const element = getCompiledElement(template, scope);

        expect(element.hasClass('bs-loading-overlay--active')).toBeTruthy();
    });

    it('should add overlay class when reference is active event if templateUrl is false', () => {
        defaultConfig.templateUrl = undefined;
        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);

        const element = getCompiledElement(template, scope);

        expect(element.hasClass('bs-loading-overlay--active')).toBeTruthy();
    });

    it('should not add overlay class when it is false in global config and not provided to directive', () => {
        defaultConfig.activeClass = undefined;
        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);

        const element = getCompiledElement(template, scope);

        expect(element.hasClass('bs-loading-overlay--active')).toBeFalsy();
    });

    it('should remove overlay class if reference became inactive and update event emitted', () => {
        bsLoadingOverlayServiceMock.expects('isActive')
            .twice()
            .withArgs(referenceId)
            .onFirstCall()
            .returns(true)
            .onSecondCall()
            .returns(false);

        const element = getCompiledElement(template, scope);

        scope.$apply(() => {
            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });
        });

        expect(element.hasClass('bs-loading-overlay--active')).toBeFalsy();
    });

    it('should remove overlay class if reference became inactive and update event emitted and templateUrl is false', () => {
        defaultConfig.templateUrl = undefined;
        bsLoadingOverlayServiceMock.expects('isActive')
            .twice()
            .withArgs(referenceId)
            .onFirstCall()
            .returns(true)
            .onSecondCall()
            .returns(false);

        const element = getCompiledElement(template, scope);

        scope.$apply(() => {
            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });
        });

        expect(element.hasClass('bs-loading-overlay--active')).toBeFalsy();
    });

    describe('with custom class', () => {
        beforeEach(() => {
            template = '<div bs-loading-overlay bs-loading-overlay-active-class="some-active-class" bs-loading-overlay-reference-id="referenceId"></div>';
        });

        it('should add overlay custom class when reference is active', () => {
            bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);

            const element = getCompiledElement(template, scope);

            expect(element.hasClass('some-active-class')).toBeTruthy();
        });

        it('should remove overlay custom class if reference became inactive and update event emitted', () => {
            bsLoadingOverlayServiceMock.expects('isActive')
                .twice()
                .withArgs(referenceId)
                .onFirstCall()
                .returns(true)
                .onSecondCall()
                .returns(false);

            const element = getCompiledElement(template, scope);

            scope.$apply(() => {
                $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                    referenceId
                });
            });

            expect(element.hasClass('some-active-class')).toBeFalsy();
        });
    });

    it('should remove overlay if reference became inactive and update event emitted', () => {
        bsLoadingOverlayServiceMock.expects('isActive')
            .twice()
            .withArgs(referenceId)
            .onFirstCall()
            .returns(true)
            .onSecondCall()
            .returns(false);

        const element = getCompiledElement(template, scope);
        scope.$apply(() => {
            $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
                referenceId
            });
        });

        expect(element[0].querySelector('.bs-loading-overlay')).toBeNull();
    });

    it('should not remove overlay if reference became inactive and update event is not emitted', () => {
        bsLoadingOverlayServiceMock.expects('isActive')
            .twice()
            .withArgs(referenceId)
            .onFirstCall()
            .returns(true);

        const element = getCompiledElement(template, scope);

        expect(element[0].querySelector('.bs-loading-overlay')).not.toBeNull();
    });

    it('should add overlay when rootScope event triggered and reference become active', () => {
        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);

        const element = getCompiledElement(template, scope);

        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);
        $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
            referenceId
        });

        expect(element[0].querySelector('.bs-loading-overlay')).not.toBeNull();
        bsLoadingOverlayServiceMock.verify();
    });

    it('should not add overlay when reference become active but rootScope event is not triggered', () => {
        const element = getCompiledElement(template, scope);

        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(true);

        expect(element[0].querySelector('.bs-loading-overlay')).toBeNull();
    });

    it('should remove rootScope listener on overlay element removed', () => {
        const element = getCompiledElement(template, scope);

        scope.$apply(() => {
            element.remove();
        });

        expect($rootScope.$$listeners.bsLoadingOverlayUpdateEvent[0]).toBeNull();
    });

    it('should not add overlay when rootScope event triggered for another reference', () => {
        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(referenceId).returns(false);

        const element = getCompiledElement(template, scope);

        $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
            referenceId: 'another'
        });

        expect(element[0].querySelector('.bs-loading-overlay')).toBeNull();
        bsLoadingOverlayServiceMock.verify();
    });

    it('should add overlay when it was configured without referenceId and rootScope event triggered with referenceId undefined', () => {
        template = '<div bs-loading-overlay></div>';
        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(undefined).returns(false);

        const element = getCompiledElement(template, scope);

        bsLoadingOverlayServiceMock.expects('isActive').once().withArgs(undefined).returns(true);
        $rootScope.$emit('bsLoadingOverlayUpdateEvent', {
            referenceId: undefined
        });

        expect(element[0].querySelector('.bs-loading-overlay')).not.toBeNull();
        bsLoadingOverlayServiceMock.verify();
    });
});