Restructuring Video Alpha Jasmine tests.

Fixing more tests.
Turned on all Video Alpha tests.
More tests fixing.
Turned on all tests.
Fixing more tests.
Worked on tests at the beginning of video_player_spec.js. Not finished
All Video Alpha tests completed and can be run individually. When run individually - they all pass.
Added jasmine_test_runner.html to gitignore.

common/lib/xmodule/.gitignore

+test.mp4
+test.ogv
+test.webm
+jasmine_test_runner.html

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

@@ -8,7 +8,9 @@
         data-show-captions="true"
         data-start=""
         data-end=""
-        data-caption-asset-path="/static/subs/">
+        data-caption-asset-path="/static/subs/"
+        data-autoplay="False"
+      >
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <div class="video-player-pre"></div>

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

@@ -12,6 +12,7 @@
         data-mp4-source="test.mp4"
         data-webm-source="test.webm"
         data-ogg-source="test.ogv"
+        data-autoplay="False"
       >
         <div class="tc-wrapper">
           <article class="video-wrapper">

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

@@ -12,6 +12,7 @@
         data-mp4-source="test.mp4"
         data-webm-source="test.webm"
         data-ogg-source="test.ogv"
+        data-autoplay="False"
       >
         <div class="tc-wrapper">
           <article class="video-wrapper">

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

@@ -8,7 +8,9 @@
         data-show-captions="false"
         data-start=""
         data-end=""
-        data-caption-asset-path="/static/subs/">
+        data-caption-asset-path="/static/subs/"
+        data-autoplay="False"
+      >
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <section class="video-player">

common/lib/xmodule/xmodule/js/spec/videoalpha/display_spec.js → common/lib/xmodule/xmodule/js/spec/videoalpha/general_spec.js

 (function () {
     xdescribe('VideoAlpha', function () {
-    var metadata;
-    metadata = {
-      slowerSpeedYoutubeId: {
-        id: this.slowerSpeedYoutubeId,
-        duration: 300
-      },
-      normalSpeedYoutubeId: {
-        id: this.normalSpeedYoutubeId,
-        duration: 200
-      }
-    };
-
         beforeEach(function () {
             jasmine.stubRequests();
             window.onTouchBasedDevice = jasmine.createSpy('onTouchBasedDevice').andReturn(false);
@@ -21,9 +9,9 @@
         });
 
         afterEach(function () {
-      window.OldVideoPlayerAlpha = void 0;
-      window.onYouTubePlayerAPIReady = void 0;
-      window.onHTML5PlayerAPIReady = void 0;
+            window.OldVideoPlayerAlpha = undefined;
+            window.onYouTubePlayerAPIReady = undefined;
+            window.onHTML5PlayerAPIReady = undefined;
         });
 
         describe('constructor', function () {
@@ -65,64 +53,6 @@
                         expect(this.state.speed).toEqual('0.75');
                     });
                 });
-
-        /*describe('when the Youtube API is already available', function () {
-          beforeEach(function () {
-            this.originalYT = window.YT;
-            window.YT = {
-              Player: true
-            };
-            this.state = new window.VideoAlpha('#example');
-          });
-
-          afterEach(function () {
-            window.YT = this.originalYT;
-          });
-
-          it('create the Video Player', function () {
-            expect(window.VideoPlayerAlpha).toHaveBeenCalledWith({
-              video: this.video
-            });
-            expect(this.video.player).toEqual(this.stubbedVideoPlayer);
-          });
-        });
-
-        describe('when the Youtube API is not ready', function () {
-          beforeEach(function () {
-            this.originalYT = window.YT;
-            window.YT = {};
-            this.video = new VideoAlpha('#example');
-          });
-
-          afterEach(function () {
-            window.YT = this.originalYT;
-          });
-
-          it('set the callback on the window object', function () {
-            expect(window.onYouTubePlayerAPIReady).toEqual(jasmine.any(Function));
-          });
-        });
-
-        describe('when the Youtube API becoming ready', function () {
-          beforeEach(function () {
-            this.originalYT = window.YT;
-            window.YT = {};
-            spyOn(window, 'VideoPlayerAlpha').andReturn(this.stubVideoPlayerAlpha);
-            this.video = new VideoAlpha('#example');
-            window.onYouTubePlayerAPIReady();
-          });
-
-          afterEach(function () {
-            window.YT = this.originalYT;
-          });
-
-          it('create the Video Player for all video elements', function () {
-            expect(window.VideoPlayerAlpha).toHaveBeenCalledWith({
-              video: this.video
-            });
-            expect(this.video.player).toEqual(this.stubVideoPlayerAlpha);
-          });
-        });*/
             });
 
             describe('HTML5', function () {
@@ -140,7 +70,7 @@
                     });
 
                     afterEach(function () {
-            state = void 0;
+                        state = undefined;
                     });
 
                     it('check videoType', function () {
@@ -156,8 +86,8 @@
                     });
 
                     it('parse the videos if subtitles exist', function () {
-            var sub;
-            sub = 'test_name_of_the_subtitles';
+                        var sub = 'test_name_of_the_subtitles';
+
                         expect(state.videos).toEqual({
                             '0.75': sub,
                             '1.0': sub,
@@ -167,10 +97,11 @@
                     });
 
                     it('parse the videos if subtitles do not exist', function () {
-            var sub;
+                        var sub = '';
+
                         $('#example').find('.videoalpha').data('sub', '');
                         state = new window.VideoAlpha('#example');
-            sub = '';
+
                         expect(state.videos).toEqual({
                             '0.75': sub,
                             '1.0': sub,
@@ -180,18 +111,18 @@
                     });
 
                     it('parse Html5 sources', function () {
-            var html5Sources;
-            html5Sources = {
+                        var html5Sources = {
                             mp4: 'test.mp4',
                             webm: 'test.webm',
                             ogg: 'test.ogv'
                         };
+
                         expect(state.html5Sources).toEqual(html5Sources);
                     });
 
                     it('parse available video speeds', function () {
-            var speeds;
-            speeds = jasmine.stubbedHtml5Speeds;
+                        var speeds = jasmine.stubbedHtml5Speeds;
+
                         expect(state.speeds).toEqual(speeds);
                     });
 
@@ -206,7 +137,6 @@
                 // is required.
                 describe('HTML5 API is available', function () {
                     beforeEach(function () {
-            //TO DO??? spyOn(window, 'VideoAlpha').andReturn(jasmine.stubbedState);
                         state = new VideoAlpha('#example');
                     });
 
@@ -218,43 +148,6 @@
                         expect(state.videoPlayer.player).not.toBeUndefined();
                     });
                 });
-
-        /* NOT NECESSARY??? describe('when the HTML5 API is not ready', function () {
-          beforeEach(function () {
-            this.originalHTML5Video = window.HTML5Video;
-            window.HTML5Video = {};
-            state = new VideoAlpha('#example');
-          });
-
-          afterEach(function () {
-            window.HTML5Video = this.originalHTML5Video;
-          });
-
-          it('set the callback on the window object', function () {
-            expect(window.onHTML5PlayerAPIReady).toEqual(jasmine.any(Function));
-          });
-        });
-
-        describe('when the HTML5 API becoming ready', function () {
-          beforeEach(function () {
-            this.originalHTML5Video = window.HTML5Video;
-            window.HTML5Video = {};
-            spyOn(window, 'VideoPlayerAlpha').andReturn(this.stubVideoPlayerAlpha);
-            state = new VideoAlpha('#example');
-            window.onHTML5PlayerAPIReady();
-          });
-
-          afterEach(function () {
-            window.HTML5Video = this.originalHTML5Video;
-          });
-
-          it('create the Video Player for all video elements', function () {
-            expect(window.VideoPlayerAlpha).toHaveBeenCalledWith({
-              video: this.video
-            });
-            expect(this.video.player).toEqual(this.stubVideoPlayerAlpha);
-          });
-        });*/
             });
         });
 
@@ -362,7 +255,6 @@
 
         describe('log', function () {
             beforeEach(function () {
-        //TO DO??? loadFixtures('videoalpha.html');
                 loadFixtures('videoalpha_html5.html');
                 state = new VideoAlpha('#example');
                 spyOn(Logger, 'log');

common/lib/xmodule/xmodule/js/spec/videoalpha/display/html5_video.js → common/lib/xmodule/xmodule/js/spec/videoalpha/html5_video_spec.js

@@ -198,7 +198,7 @@
                     expect(player.callStateChangeCallback).toHaveBeenCalled();
                 });
             });
-        }); // End-of: describe('events:', function () {
+        });
 
         describe('methods', function () {
             var volume, seek, duration, playbackRate;
@@ -318,6 +318,6 @@
             it('getAvailablePlaybackRates', function () {
                 expect(player.getAvailablePlaybackRates()).toEqual(playbackRates);
             });
-        }); // End-of: describe('methods', function () {
+        });
     });
 }).call(this);

common/lib/xmodule/xmodule/js/spec/videoalpha/readme.md

+Jasmine JavaScript tests status
+-------------------------------
+
+As of 18.07.2013, 12:55, each individual tests file in this directory passes. However,
+if you try to run all of them at the same time, weird things start to happen. In some
+cases the browser crashes, in other cases there are failing tests with extremely crazy
+failing messages.
+
+I [Valera Rozuvan] believe that this is due to the fact that almost in every file there
+is present the function initialize() which is invoked many-many-many times throughout
+the file. With each invocation, initialize() instantiates a new VideoAlpha instance.
+It shouoldn't be necessary to instantiate a new VideoAlpha instance for each it() test.
+Many it() tests can be run in sequence on the same VideoAlpha instance - it is just a
+matter of correctly planning the order in which the it() tests are run.
+
+So, you can do either:
+
+    a.) Run tests individually, changing in each file the top level "xdescribe(" to
+    "describe(". Make sure that you change it back to "xdescribe(" once you are done.
+
+    b.) Refactor all the VideoAlpha tests so that they can be run all at once.
+
+Good luck ^_^v (and thanks for all the fish!)
+
+
+
+PS: When you are running the tests in chrome locally, make sure that chrome is started
+with the option "--allow-file-access-from-files".
+
+PPS: Don't forget to place test video files (test.mp4, test.ogv, test.webm) into the
+folder "common/lib/xmodule". You can get these from http://www.quirksmode.org/html5/tests/video.html
+or from some other site that demonstrates HTML5 video playback. Just open up the site's
+source, and save the video files (make sure to rname them to "test.*").

common/lib/xmodule/xmodule/js/spec/videoalpha/display/video_caption_spec.js → common/lib/xmodule/xmodule/js/spec/videoalpha/video_caption_spec.js

@@ -346,13 +346,13 @@
       });
 
       it('set the height of caption container', function() {
-        expect(parseInt($('.subtitles').css('maxHeight'))).toBeCloseTo($('.video-wrapper').height(), 2);
+        expect(parseInt($('.subtitles').css('maxHeight'), 10)).toBeCloseTo($('.video-wrapper').height(), 2);
       });
 
       it('set the height of caption spacing', function() {
         var firstSpacing, lastSpacing;
-        firstSpacing = Math.abs(parseInt($('.subtitles .spacing:first').css('height')));
-        lastSpacing = Math.abs(parseInt($('.subtitles .spacing:last').css('height')));
+        firstSpacing = Math.abs(parseInt($('.subtitles .spacing:first').css('height'), 10));
+        lastSpacing = Math.abs(parseInt($('.subtitles .spacing:last').css('height'), 10));
         expect(firstSpacing - videoCaption.topSpacingHeight()).toBeLessThan(1);
         expect(lastSpacing - videoCaption.bottomSpacingHeight()).toBeLessThan(1);
       });

common/lib/xmodule/xmodule/js/spec/videoalpha/display/video_control_spec.js → common/lib/xmodule/xmodule/js/spec/videoalpha/video_control_spec.js

@@ -17,7 +17,7 @@
       it('render the video controls', function() {
         expect($('.video-controls')).toContain(
           ['.slider', 'ul.vcr', 'a.play', '.vidtime', '.add-fullscreen'].join(',')
-        ); //Should we add '.quality_control' and '.hide-subtitles'?
+        );
         expect($('.video-controls').find('.vidtime')).toHaveText('0:00 / 0:00');
       });
 

common/lib/xmodule/xmodule/js/spec/videoalpha/display/video_progress_slider_spec.js → common/lib/xmodule/xmodule/js/spec/videoalpha/video_progress_slider_spec.js

@@ -94,7 +94,7 @@
       //     videoProgressSlider.slider = null;
       //     videoPlayer.play();
       //   });
-
+      //
       //   it('build the slider', function() {
       //     expect(videoProgressSlider.slider).toBe('.slider');
       //     expect($.fn.slider).toHaveBeenCalledWith({
@@ -104,7 +104,7 @@
       //       stop: videoProgressSlider.onStop
       //     });
       //   });
-        
+      //
       //   it('build the seek handle', function() {
       //     expect(videoProgressSlider.handle).toBe('.ui-slider-handle');
       //     expect($.fn.qtip).toHaveBeenCalledWith({
@@ -160,7 +160,6 @@
       });
     });
 
-    //TODO Fails: Problem with data-sub
     describe('onSlide', function() {
       beforeEach(function() {
         initialize();
@@ -184,7 +183,6 @@
         expect(videoPlayer.currentTime).toEqual(20);
       });
     });
-    //End Fails
 
     describe('onChange', function() {
       beforeEach(function() {
@@ -199,7 +197,6 @@
       });
     });
 
-    //TODO Fails: Problem with data-sub
     describe('onStop', function() {
       beforeEach(function() {
         initialize();
@@ -224,7 +221,6 @@
         expect(videoProgressSlider.frozen).toBeFalsy();
       });
     });
-    //End Fails
 
     describe('updateTooltip', function() {
       beforeEach(function() {

common/lib/xmodule/xmodule/js/spec/videoalpha/video_quality_control_spec.js

+(function() {
+  xdescribe('VideoQualityControlAlpha', function() {
+    var state, videoControl, videoQualityControl;
+
+    function initialize() {
+      loadFixtures('videoalpha.html');
+      state = new VideoAlpha('#example');
+      videoControl = state.videoControl;
+      videoQualityControl = state.videoQualityControl;
+    }
+
+    describe('constructor', function() {
+      beforeEach(function() {
+        initialize();
+      });
+
+      it('render the quality control', function() {
+        expect(videoControl.secondaryControlsEl.html()).toContain("<a href=\"#\" class=\"quality_control\" title=\"HD\">");
+      });
+
+      it('bind the quality control', function() {
+        expect($('.quality_control')).toHandleWith('click', videoQualityControl.toggleQuality);
+      });
+    });
+  });
+
+}).call(this);

common/lib/xmodule/xmodule/js/spec/videoalpha/display/video_volume_control_spec.js → common/lib/xmodule/xmodule/js/spec/videoalpha/video_volume_control_spec.js

@@ -20,7 +20,7 @@
       });
 
       it('render the volume control', function() {
-        expect(videoControl.secondaryControlsEl.html()).toContain("<div class=\"volume\">\n"); //toContain("<div class=\"volume\">\n  <a href=\"#\"></a>\n  <div class=\"volume-slider-container\">\n    <div class=\"volume-slider\"></div>\n  </div>\n</div>");
+        expect(videoControl.secondaryControlsEl.html()).toContain("<div class=\"volume\">\n");
       });
 
       it('create the slider', function() {
@@ -29,7 +29,7 @@
           range: "min",
           min: 0,
           max: 100,
-          value: 100,
+          /* value: 100, */
           value: videoVolumeControl.currentVolume,
           change: videoVolumeControl.onChange,
           slide: videoVolumeControl.onChange

common/lib/xmodule/xmodule/js/src/videoalpha/01_helper_utils.js

@@ -72,3 +72,9 @@ if (!Array.prototype.indexOf) {
         return -1;
     }
 }
+
+if (!window.onTouchBasedDevice) {
+    window.onTouchBasedDevice = function() {
+        return navigator.userAgent.match(/iPhone|iPod|iPad/i);
+    };
+}

common/lib/xmodule/xmodule/js/src/videoalpha/04_video_player.js

@@ -253,6 +253,10 @@ function (HTML5Video) {
 
     function onEnded() {
         this.trigger(['videoControl','pause'], null);
+
+        if (this.config.show_captions) {
+            this.trigger(['videoCaption','pause'], null);
+        }
     }
 
     function onPause() {
@@ -267,6 +271,10 @@ function (HTML5Video) {
         delete this.videoPlayer.updateInterval;
 
         this.trigger(['videoControl','pause'], null);
+
+        if (this.config.show_captions) {
+            this.trigger(['videoCaption','pause'], null);
+        }
     }
 
     function onPlay() {
@@ -282,6 +290,10 @@ function (HTML5Video) {
         }
 
         this.trigger(['videoControl','play'], null);
+
+        if (this.config.show_captions) {
+            this.trigger(['videoCaption','play'], null);
+        }
     }
 
     function onUnstarted() { }
@@ -334,7 +346,7 @@ function (HTML5Video) {
             this.videoPlayer.player.setPlaybackRate(this.speed);
         }
 
-        if (!onTouchBasedDevice() && $('.video:first').data('autoplay') === 'True') {
+        if (!onTouchBasedDevice() && $('.videoalpha:first').data('autoplay') === 'True') {
             this.videoPlayer.play();
         }
     }

common/lib/xmodule/xmodule/tests/test_videoalpha.py

@@ -13,7 +13,8 @@ the course, section, subsection, unit, etc.
 """
 
 from xmodule.videoalpha_module import VideoAlphaDescriptor
-from . import LogicTest, etree
+from . import LogicTest
+from lxml import etree
 
 
 class VideoAlphaModuleTest(LogicTest):