Adding Jasmine tests.

Problem with hideControls not being called via setTimeout().

common/lib/xmodule/xmodule/js/fixtures/video.html

@@ -13,6 +13,8 @@
         data-yt-test-timeout="1500"
         data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/"
       >
+        <div class="focus_grabber first"></div>
+
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <div class="video-player-pre"></div>
@@ -51,6 +53,8 @@
 
           <ol class="subtitles"><li></li></ol>
         </div>
+
+        <div class="focus_grabber last"></div>
       </div>
     </div>
   </div>

common/lib/xmodule/xmodule/js/fixtures/video_all.html

@@ -16,6 +16,8 @@
         data-yt-test-timeout="1500"
         data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/"
       >
+        <div class="focus_grabber first"></div>
+
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <div class="video-player-pre"></div>
@@ -54,6 +56,8 @@
 
           <ol class="subtitles"><li></li></ol>
         </div>
+
+        <div class="focus_grabber last"></div>
       </div>
     </div>
   </div>

common/lib/xmodule/xmodule/js/fixtures/video_html5.html

@@ -16,6 +16,8 @@
         data-yt-test-timeout="1500"
         data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/"
       >
+        <div class="focus_grabber first"></div>
+
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <section class="video-player">
@@ -26,6 +28,8 @@
 
           <ol class="subtitles"><li></li></ol>
         </div>
+
+        <div class="focus_grabber last"></div>
       </div>
     </div>
   </div>

common/lib/xmodule/xmodule/js/fixtures/video_no_captions.html

@@ -13,6 +13,8 @@
         data-yt-test-timeout="1500"
         data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/"
       >
+        <div class="focus_grabber first"></div>
+
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <section class="video-player">
@@ -21,7 +23,9 @@
             <section class="video-controls"></section>
           </article>
         </div>
+
+        <div class="focus_grabber last"></div>
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>

common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html

@@ -13,6 +13,8 @@
         data-yt-test-timeout="1500"
         data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/"
       >
+        <div class="focus_grabber first"></div>
+
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <div class="video-player-pre"></div>
@@ -51,6 +53,8 @@
 
           <ol class="subtitles"><li></li></ol>
         </div>
+
+        <div class="focus_grabber last"></div>
       </div>
     </div>
   </div>

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

+(function () {
+    describe('Video FocusGrabber', function () {
+        var state;
+
+        beforeEach(function () {
+            loadFixtures('video_html5.html');
+            state = new Video('#example');
+
+            spyOnEvent(state.el, 'mousemove');
+            spyOn(state.focusGrabber, 'disableFocusGrabber').andCallThrough();
+            spyOn(state.focusGrabber, 'enableFocusGrabber').andCallThrough();
+        });
+
+        it('check existence of focus grabber elements and their position', function () {
+            var firstFGEl = state.el.find('.focus_grabber.first'),
+                lastFGEl = state.el.find('.focus_grabber.last'),
+                tcWrapperEl = state.el.find('.tc-wrapper');
+
+            // Existence check.
+            expect(firstFGEl.length).toBe(1);
+            expect(lastFGEl.length).toBe(1);
+
+            // Position check.
+            expect(firstFGEl.index() + 1).toBe(tcWrapperEl.index());
+            expect(lastFGEl.index() - 1).toBe(tcWrapperEl.index());
+        });
+
+        it('from the start, focus grabbers are disabled', function () {
+            expect(state.focusGrabber.elFirst.attr('tabindex')).toBe(-1);
+            expect(state.focusGrabber.elLast.attr('tabindex')).toBe(-1);
+        });
+
+        it('when first focus grabber is focused "mousemove" event is triggered, grabbers are disabled', function () {
+            state.focusGrabber.elFirst.focus();
+
+            expect('mousemove').toHaveBeenTriggeredOn(state.el);
+            expect(state.focusGrabber.disableFocusGrabber).toHaveBeenCalled();
+        });
+
+        it('when last focus grabber is focused "mousemove" event is triggered, grabbers are disabled', function () {
+            state.focusGrabber.elLast.focus();
+
+            expect('mousemove').toHaveBeenTriggeredOn(state.el);
+            expect(state.focusGrabber.disableFocusGrabber).toHaveBeenCalled();
+        });
+
+        it('after controls autohide focus grabbers are enabled', function () {
+            runs(function () {
+                console.log('focus 1: a');
+                state.videoCaption.hideCaptions(true);
+                state.el.trigger('mousemove');
+                console.log('focus 1: b');
+            });
+
+            waits(2 * (state.videoControl.fadeOutTimeout + 100));
+
+            runs(function () {
+                expect(state.focusGrabber.enableFocusGrabber).toHaveBeenCalled();
+            });
+        });
+    });
+}).call(this);

common/lib/xmodule/xmodule/js/src/video/025_focus_grabber.js

@@ -44,8 +44,10 @@ function () {
     // Private functions.
 
     function _makeFunctionsPublic(state) {
-        state.focusGrabber.enableFocusGrabber = _.bind(enableFocusGrabber, state);
+        state.focusGrabber.enableFocusGrabber  = _.bind(enableFocusGrabber, state);
         state.focusGrabber.disableFocusGrabber = _.bind(disableFocusGrabber, state);
+
+        state.focusGrabber.onFocus = _.bind(onFocus, state);
     }
 
     function _renderElements(state) {