diff --git a/cms/djangoapps/contentstore/features/video.feature b/cms/djangoapps/contentstore/features/video.feature index af8580cab5..06bf36747e 100644 --- a/cms/djangoapps/contentstore/features/video.feature +++ b/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 diff --git a/cms/djangoapps/contentstore/features/video.py b/cms/djangoapps/contentstore/features/video.py index a7c4fc69ab..5408c48290 100644 --- a/cms/djangoapps/contentstore/features/video.py +++ b/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 "([^"]*)"$') diff --git a/common/lib/xmodule/xmodule/js/spec/video/video_progress_slider_spec.js b/common/lib/xmodule/xmodule/js/spec/video/video_progress_slider_spec.js index 8ed9f657ac..751506b410 100644 --- a/common/lib/xmodule/xmodule/js/spec/video/video_progress_slider_spec.js +++ b/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); diff --git a/common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js b/common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js index e0911bca74..59750a0f11 100644 --- a/common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js +++ b/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 = $('
', { @@ -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;