Merge pull request #1339 from edx/anton/fix-video-js-unit-tests

Fix broken tests for video player

cms/djangoapps/contentstore/features/video-editor.feature

@@ -15,17 +15,12 @@ Feature: CMS.Video Component Editor
     Then I can modify the display name
     And my video display name change is persisted on save
 
-  # Disabling this 10/7/13 due to nondeterministic behavior
-  # in master.  The failure seems to occur when YouTube does
-  # not respond quickly enough, so that the video player
-  # doesn't load.
-  #
   # Sauce Labs cannot delete cookies
-  #  @skip_sauce
-  #Scenario: Captions are hidden when "show captions" is false
-  #  Given I have created a Video component with subtitles
-  #  And I have set "show captions" to False
-  #  Then when I view the video it does not show the captions
+  @skip_sauce
+  Scenario: Captions are hidden when "show captions" is false
+    Given I have created a Video component with subtitles
+    And I have set "show captions" to False
+    Then when I view the video it does not show the captions
 
   # Sauce Labs cannot delete cookies
   @skip_sauce

cms/djangoapps/contentstore/features/video.feature

@@ -15,11 +15,11 @@ Feature: CMS.Video Component
 
   # 3
   # Sauce Labs cannot delete cookies
-  #  @skip_sauce
-  #Scenario: Captions are hidden correctly
-  #  Given I have created a Video component with subtitles
-  #  And I have hidden captions
-  #  Then when I view the video it does not show the captions
+  @skip_sauce
+  Scenario: Captions are hidden correctly
+    Given I have created a Video component with subtitles
+    And I have hidden captions
+    Then when I view the video it does not show the captions
 
   # 4
   # Sauce Labs cannot delete cookies
@@ -43,29 +43,37 @@ Feature: CMS.Video Component
     Then the correct Youtube video is shown
 
   # 7
-  #  Scenario: Closed captions become visible when the mouse hovers over CC button
-  #  Given I have created a Video component with subtitles
-  #  And Make sure captions are closed
-  #  Then Captions become "invisible" after 3 seconds
-  #  And I hover over button "CC"
-  #  Then Captions become "visible"
-  #  And I hover over button "volume"
-  #  Then Captions become "invisible" after 3 seconds
+    Scenario: Closed captions become visible when the mouse hovers over CC button
+    Given I have created a Video component with subtitles
+    And Make sure captions are closed
+    Then Captions become "invisible" after 3 seconds
+    And I hover over button "CC"
+    Then Captions become "visible"
+    And I hover over button "volume"
+    Then Captions become "invisible" after 3 seconds
 
   # 8
-  #Scenario: Open captions never become invisible
-  #  Given I have created a Video component with subtitles
-  #  And Make sure captions are open
-  #  Then Captions are "visible"
-  #  And I hover over button "CC"
-  #  Then Captions are "visible"
-  #  And I hover over button "volume"
-  #  Then Captions are "visible"
+  Scenario: Open captions never become invisible
+    Given I have created a Video component with subtitles
+    And Make sure captions are open
+    Then Captions are "visible"
+    And I hover over button "CC"
+    Then Captions are "visible"
+    And I hover over button "volume"
+    Then Captions are "visible"
 
   # 9
-  #Scenario: Closed captions are invisible when mouse doesn't hover on CC button
-  #  Given I have created a Video component with subtitles
-  #  And Make sure captions are closed
-  #  Then Captions become "invisible" after 3 seconds
-  #  And I hover over button "volume"
-  #  Then Captions are "invisible"
+  Scenario: Closed captions are invisible when mouse doesn't hover on CC button
+    Given I have created a Video component with subtitles
+    And Make sure captions are closed
+    Then Captions become "invisible" after 3 seconds
+    And I hover over button "volume"
+    Then Captions are "invisible"
+
+  # 10
+  Scenario: When enter key is pressed on a caption shows an outline around it
+    Given I have created a Video component with subtitles
+    And Make sure captions are opened
+    Then I focus on caption line with data-index 0
+    Then I press "enter" button on caption line with data-index 0
+    And I see caption line with data-index 0 has class "focused"

cms/djangoapps/contentstore/features/video.py

@@ -3,6 +3,7 @@
 from lettuce import world, step
 from xmodule.modulestore import Location
 from contentstore.utils import get_modulestore
+from selenium.webdriver.common.keys import Keys
 
 BUTTONS = {
     'CC': '.hide-subtitles',
@@ -154,3 +155,25 @@ def check_captions_visibility_state(_step, visibility_state, timeout):
         assert world.css_visible('.subtitles')
     else:
         assert not world.css_visible('.subtitles')
+
+
+def find_caption_line_by_data_index(index):
+    SELECTOR = ".subtitles > li[data-index='{index}']".format(index=index)
+    return world.css_find(SELECTOR).first
+
+
+@step('I focus on caption line with data-index (\d+)$')
+def focus_on_caption_line(_step, index):
+    find_caption_line_by_data_index(int(index.strip()))._element.send_keys(Keys.TAB)
+
+
+@step('I press "enter" button on caption line with data-index (\d+)$')
+def focus_on_caption_line(_step, index):
+    find_caption_line_by_data_index(int(index.strip()))._element.send_keys(Keys.ENTER)
+
+
+@step('I see caption line with data-index (\d+) has class "([^"]*)"$')
+def caption_line_has_class(_step, index, className):
+    SELECTOR = ".subtitles > li[data-index='{index}']".format(index=int(index.strip()))
+    world.css_has_class(SELECTOR, className.strip())
+