BLD-410: Add tests.

cms/djangoapps/contentstore/features/video.feature

@@ -79,19 +79,13 @@ Feature: CMS.Video Component
     And I see caption line with data-index "0" has class "focused"
 
   # 11
-  # Disabled until we come up with a more solid test, as this one is brittle.
-  # Scenario: When start end end times are specified, a range on slider is shown
-  #   Given I have created a Video component
-  #   And Make sure captions are closed
-  #   And I edit the component
-  #   And I open tab "Advanced"
-  #   And I set value "12" to the field "Start Time"
-  #   And I set value "24" to the field "End Time"
-  #   And I save changes
-  #   And I click video button "Play"
-
-    # The below line is a bit flaky. Numbers 73 and 73 were determined rather
-    # accidentally. They might change in the future as Video player gets CSS
-    # updates. If this test starts failing, 99.9% cause of failure is the line
-    # below.
-    # Then I see a range on slider with styles "left" set to 73 px and "width" set to 73 px
+  Scenario: When start end end times are specified, a range on slider is shown
+    Given I have created a Video component
+    And Make sure captions are closed
+    And I edit the component
+    And I open tab "Advanced"
+    And I set value "00:00:12" to the field "Start Time"
+    And I set value "00:00:24" to the field "End Time"
+    And I save changes
+    And I click video button "play"
+    Then I see a range on slider

cms/djangoapps/contentstore/features/video.py

@@ -8,7 +8,8 @@ from selenium.webdriver.common.keys import Keys
 VIDEO_BUTTONS = {
     'CC': '.hide-subtitles',
     'volume': '.volume',
-    'Play': '.video_control.play',
+    'play': '.video_control.play',
+    'pause': '.video_control.pause',
 }
 
 SELECTORS = {
@@ -183,17 +184,11 @@ def caption_line_has_class(_step, index, className):
     world.css_has_class(SELECTOR, className.strip())
 
 
-@step('I see a range on slider with styles "left" set to (.+) px and "width" set to (.+) px$')
-def see_a_range_slider_with_proper_range(_step, left, width):
-    left = int(left.strip())
-    width = int(width.strip())
+@step('I see a range on slider$')
+def see_a_range_slider_with_proper_range(_step):
+    world.wait_for_visible(VIDEO_BUTTONS['pause'])
 
-    world.wait_for_visible(".slider-range")
-    world.wait(4)
-    slider_range = world.browser.driver.find_element_by_css_selector(".slider-range")
-
-    assert int(round(float(slider_range.value_of_css_property("left")[:-2]))) == left
-    assert int(round(float(slider_range.value_of_css_property("width")[:-2]))) == width
+    assert world.css_visible(".slider-range")
 
 
 @step('I click video button "([^"]*)"$')

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;