describe("Scrollable test", function() {

    var testSlider;

    var sliderHandleTopPos;

    var sliderHandleLeftPos;

    var scrollableContainer;



    describe("Vertical inside scrollable container", function() {

        beforeEach(function() {

            testSlider = new Slider("#ex1", {

                id: "ex1Slider",

                orientation: "vertical",

                min: 0,

                max: 20,

                value: 10,

                step: 1

            });



            scrollableContainer = document.querySelector('#scrollable-div');

            scrollableContainer.scrollTop = 145;



            var sliderHandleEl = document.querySelector("#ex1Slider .slider-handle");

            var sliderHandleBoundingBoxInfo = sliderHandleEl.getBoundingClientRect();

            sliderHandleTopPos = sliderHandleBoundingBoxInfo.top;

            sliderHandleLeftPos = sliderHandleBoundingBoxInfo.left;



        });



        afterEach(function() {

            if(testSlider) {

                testSlider.destroy();

            }

        });



        // The difference between sliderHandleTopPos and mousemoveY is equal to 50 in both cases,

        // but difference between initial and final slider value is not equal (6 and 4).

        // It happens because we don't 'hit' the center of handle but the top left corner.



        it("slides up when handle moves upwards inside scrollable element after scrolling", function() {

            var mousemove = document.createEvent('MouseEvents');

            var mousemoveX = sliderHandleLeftPos;

            var mousemoveY = sliderHandleTopPos - 50;

            var newSliderValue;



            mousemove.initMouseEvent(

                "mousedown",

                true /* bubble */,

                true  /* cancelable */,

                window,

                null,

                0, 0, mousemoveX, mousemoveY, /* coordinates */

                false, false, false, false, /* modifier keys */

                0 /*left*/,

                null

            );

            testSlider.sliderElem.dispatchEvent(mousemove);

            newSliderValue = testSlider.getValue();



            expect(newSliderValue).toEqual(4);

        });



        it("slides down when handle moves downwards inside scrollable element after scrolling", function() {

            var mousemove = document.createEvent('MouseEvents');

            var mousemoveX = sliderHandleLeftPos;

            var mousemoveY = sliderHandleTopPos + 50;

            var newSliderValue;



            mousemove.initMouseEvent(

                "mousedown",

                true /* bubble */,

                true /* cancelable */,

                window,

                null,

                0, 0, mousemoveX, mousemoveY, /* coordinates */

                false, false, false, false, /* modifier keys */

                0 /*left*/,

                null

            );

            testSlider.sliderElem.dispatchEvent(mousemove);

            newSliderValue = testSlider.getValue();



            expect(newSliderValue).toEqual(14);

        });

    });



}); // End of spec

