BLD-410: Add tests.

common/lib/xmodule/xmodule/js/spec/video/video_progress_slider_spec.js

@@ -248,6 +248,43 @@
                 });
             });
         });
+
+        it('getRangeParams' , function() {
+            var testCases = [
+                    {
+                        startTime: 10,
+                        endTime: 20,
+                        duration: 150
+                    },
+                    {
+                        startTime: 90,
+                        endTime: 100,
+                        duration: 100
+                    },
+                    {
+                        startTime: 0,
+                        endTime: 200,
+                        duration: 200
+                    }
+                ];
+
+            initialize();
+
+            $.each(testCases, function(index, testCase) {
+                var step = 100/testCase.duration,
+                    left = testCase.startTime*step,
+                    width = testCase.endTime*step - left,
+                    expectedParams = {
+                        left: left + '%',
+                        width: width + '%'
+                    },
+                    params = videoProgressSlider.getRangeParams(
+                        testCase.startTime, testCase.endTime, testCase.duration
+                    );
+
+                expect(params).toEqual(expectedParams);
+            });
+        });
     });
 
 }).call(this);

common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js

@@ -37,6 +37,7 @@ function () {
     function _makeFunctionsPublic(state) {
         var methodsDict = {
             buildSlider: buildSlider,
+            getRangeParams: getRangeParams,
             onSlide: onSlide,
             onStop: onStop,
             updatePlayTime: updatePlayTime,
@@ -100,7 +101,7 @@ function () {
     }
 
     function updateStartEndTimeRegion(params) {
-        var left, width, start, end, step, duration;
+        var left, width, start, end, duration, rangeParams;
 
         // We must have a duration in order to determine the area of range.
         // It also must be non-zero.
@@ -128,9 +129,8 @@ function () {
         //
         // This will ensure that visually, the start-end range aligns nicely
         // with actual starting and ending point of the video.
-        step = 100.0 / duration;
-        left = start * step;
-        width = end * step - left;
+
+        rangeParams = getRangeParams(start, end, duration);
 
         if (!this.videoProgressSlider.sliderRange) {
             this.videoProgressSlider.sliderRange = $('<div />', {
@@ -139,8 +139,8 @@ function () {
                        'ui-corner-all ' +
                        'slider-range'
             }).css({
-                left: left + '%',
-                width: width + '%'
+                left: rangeParams.left,
+                width: rangeParams.width
             });
 
             this.videoProgressSlider.sliderProgress
@@ -148,12 +148,23 @@ function () {
         } else {
             this.videoProgressSlider.sliderRange
                 .css({
-                    left: left + '%',
-                    width: width + '%'
+                    left: rangeParams.left,
+                    width: rangeParams.width
                 });
         }
     }
 
+    function getRangeParams(startTime, endTime, duration) {
+        var step = 100 / duration,
+            left = startTime * step,
+            width = endTime * step - left;
+
+        return {
+            left: left + '%',
+            width: width + '%'
+        };
+    }
+
     function onSlide(event, ui) {
         this.videoProgressSlider.frozen = true;