Add tests for HTML5 part of Videoalpha

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

+<div class="course-content">
+  <div id="video_example">
+    <div id="example">
+      <div
+        id="video_id"
+        class="video"
+        data-show-captions="true"
+        data-start=""
+        data-end=""
+        data-caption-asset-path="/static/subs/"
+        data-sub="test_name_of_the_subtitles"
+        data-mp4-source="test.mp4"
+        data-webm-source="test.webm"
+        data-ogg-source="test.ogv"
+        >
+        <div class="tc-wrapper">
+          <article class="video-wrapper">
+            <section class="video-player">
+              <div id="id"></div>
+            </section>
+            <section class="video-controls"></section>
+          </article>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

common/lib/xmodule/xmodule/js/spec/helper.coffee

@@ -20,10 +20,25 @@ jasmine.stubbedMetadata =
   bogus:
     duration: 100
 
+jasmine.fireEvent = (el, eventName) ->
+  if document.createEvent
+    event = document.createEvent "HTMLEvents"
+    event.initEvent eventName, true, true
+  else
+    event = document.createEventObject()
+    event.eventType = eventName
+  event.eventName = eventName
+  if document.createEvent
+    el.dispatchEvent(event)
+  else
+    el.fireEvent("on" + event.eventType, event)
+
 jasmine.stubbedCaption =
   start: [0, 10000, 20000, 30000]
   text: ['Caption at 0', 'Caption at 10000', 'Caption at 20000', 'Caption at 30000']
 
+jasmine.stubbedHtml5Speeds = ['0.75', '1.0', '1.25', '1.50']
+
 jasmine.stubRequests = ->
   spyOn($, 'ajax').andCallFake (settings) ->
     if match = settings.url.match /youtube\.com\/.+\/videos\/(.+)\?v=2&alt=jsonc/
@@ -63,11 +78,13 @@ jasmine.stubVideoPlayer = (context, enableParts, createPlayer=true) ->
   if createPlayer
     return new VideoPlayer(video: context.video)
 
-jasmine.stubVideoPlayerAlpha = (context, enableParts, createPlayer=true) ->
+jasmine.stubVideoPlayerAlpha = (context, enableParts, createPlayer=true, html5=false) ->
   suite = context.suite
   currentPartName = suite.description while suite = suite.parentSuite
-
-  loadFixtures 'videoalpha.html'
+  if html5 == false
+    loadFixtures 'videoalpha.html'
+  else
+    loadFixtures 'videoalpha_html5.html'
   jasmine.stubRequests()
   YT.Player = undefined
   window.OldVideoPlayerAlpha = undefined

common/lib/xmodule/xmodule/js/spec/videoalpha/display/html5_video.coffee

+describe 'VideoAlpha HTML5Video', ->
+  playbackRates = [0.75, 1.0, 1.25, 1.5]
+  STATUS = window.YT.PlayerState
+  playerVars =
+    controls: 0
+    wmode: 'transparent'
+    rel: 0
+    showinfo: 0
+    enablejsapi: 1
+    modestbranding: 1
+    html5: 1
+  file = window.location.href.replace(/\/common(.*)$/, '') + '/test_root/data/videoalpha/gizmo'
+  html5Sources =
+    mp4: "#{file}.mp4"
+    webm: "#{file}.webm"
+    ogg: "#{file}.ogv"
+  onReady = jasmine.createSpy 'onReady'
+  onStateChange = jasmine.createSpy 'onStateChange'
+
+  beforeEach ->
+    loadFixtures 'videoalpha_html5.html'
+    @el = $('#example').find('.video')
+    @player = new window.HTML5Video.Player @el,
+      playerVars: playerVars,
+      videoSources: html5Sources,
+      events:
+        onReady: onReady
+        onStateChange: onStateChange
+
+    @videoEl = @el.find('.video-player video').get(0)
+
+  it 'PlayerState', ->
+    expect(HTML5Video.PlayerState).toEqual STATUS
+
+  describe 'constructor', ->
+    it 'create an html5 video element', ->
+      expect(@el.find('.video-player div')).toContain 'video'
+
+    it 'check if sources are created in correct way', ->
+      sources = $(@videoEl).find('source')
+      videoTypes = []
+      videoSources = []
+      $.each html5Sources, (index, source) ->
+        videoTypes.push index
+        videoSources.push source
+      $.each sources, (index, source) ->
+        s = $(source)
+        expect($.inArray(s.attr('src'), videoSources)).not.toEqual -1
+        expect($.inArray(s.attr('type').replace('video/', ''), videoTypes))
+          .not.toEqual -1
+
+    it 'check if click event is handled on the player', ->
+        expect(@videoEl).toHandle 'click'
+
+  describe 'events:', ->
+
+    beforeEach ->
+      spyOn(@player, 'callStateChangeCallback').andCallThrough()
+
+    describe 'click', ->
+      describe 'when player is paused', ->
+        beforeEach ->
+          spyOn(@videoEl, 'play').andCallThrough()
+          @player.playerState = STATUS.PAUSED
+          $(@videoEl).trigger('click')
+
+        it 'native play event was called', ->
+          expect(@videoEl.play).toHaveBeenCalled()
+
+        it 'player state was changed', ->
+          expect(@player.playerState).toBe STATUS.PLAYING
+
+        it 'callback was called', ->
+          expect(@player.callStateChangeCallback).toHaveBeenCalled()
+
+      describe 'when player is played', ->
+
+        beforeEach ->
+          spyOn(@videoEl, 'pause').andCallThrough()
+          @player.playerState = STATUS.PLAYING
+          $(@videoEl).trigger('click')
+
+        it 'native pause event was called', ->
+          expect(@videoEl.pause).toHaveBeenCalled()
+
+        it 'player state was changed', ->
+          expect(@player.playerState).toBe STATUS.PAUSED
+
+        it 'callback was called', ->
+          expect(@player.callStateChangeCallback).toHaveBeenCalled()
+
+    describe 'play', ->
+
+      beforeEach ->
+        spyOn(@videoEl, 'play').andCallThrough()
+        @player.playerState = STATUS.PAUSED
+        @videoEl.play()
+
+      it 'native event was called', ->
+        expect(@videoEl.play).toHaveBeenCalled()
+
+      it 'player state was changed', ->
+        waitsFor ( ->
+          @player.playerState != HTML5Video.PlayerState.PAUSED
+        ), 'Player state should be changed', 1000
+
+        runs ->
+          expect(@player.playerState).toBe STATUS.PLAYING
+
+      it 'callback was called', ->
+        waitsFor ( ->
+          @player.playerState != STATUS.PAUSED
+        ), 'Player state should be changed', 1000
+
+        runs ->
+          expect(@player.callStateChangeCallback).toHaveBeenCalled()
+
+    describe 'pause', ->
+
+      beforeEach ->
+        spyOn(@videoEl, 'pause').andCallThrough()
+        @videoEl.play()
+        @videoEl.pause()
+
+      it 'native event was called', ->
+        expect(@videoEl.pause).toHaveBeenCalled()
+
+      it 'player state was changed', ->
+        waitsFor ( ->
+          @player.playerState != STATUS.UNSTARTED
+        ), 'Player state should be changed', 1000
+
+        runs ->
+          expect(@player.playerState).toBe STATUS.PAUSED
+
+      it 'callback was called', ->
+        waitsFor ( ->
+          @player.playerState != HTML5Video.PlayerState.UNSTARTED
+        ), 'Player state should be changed', 1000
+
+        runs ->
+          expect(@player.callStateChangeCallback).toHaveBeenCalled()
+
+    describe 'canplay', ->
+
+      beforeEach ->
+        waitsFor ( ->
+          @player.playerState != STATUS.UNSTARTED
+        ), 'Video cannot be played', 1000
+
+      it 'player state was changed', ->
+        runs ->
+          expect(@player.playerState).toBe STATUS.PAUSED
+
+      it 'end property was defined', ->
+        runs ->
+          expect(@player.end).not.toBeNull()
+
+      it 'start position was defined', ->
+        runs ->
+          expect(@videoEl.currentTime).toBe(@player.start)
+
+      it 'callback was called', ->
+        runs ->
+          expect(@player.config.events.onReady).toHaveBeenCalled()
+
+    describe 'ended', ->
+      beforeEach ->
+        waitsFor ( ->
+          @player.playerState != STATUS.UNSTARTED
+        ), 'Video cannot be played', 1000
+
+      it 'player state was changed', ->
+        runs ->
+          jasmine.fireEvent @videoEl, "ended"
+          expect(@player.playerState).toBe STATUS.ENDED
+
+      it 'callback was called', ->
+          jasmine.fireEvent @videoEl, "ended"
+          expect(@player.callStateChangeCallback).toHaveBeenCalled()
+
+    describe 'timeupdate', ->
+
+      beforeEach ->
+        spyOn(@videoEl, 'pause').andCallThrough()
+        waitsFor ( ->
+          @player.playerState != STATUS.UNSTARTED
+        ), 'Video cannot be played', 1000
+
+      it 'player should be paused', ->
+        runs ->
+          @player.end = 3
+          @videoEl.currentTime = 5
+          jasmine.fireEvent @videoEl, "timeupdate"
+          expect(@videoEl.pause).toHaveBeenCalled()
+
+      it 'end param should be re-defined', ->
+        runs ->
+          @player.end = 3
+          @videoEl.currentTime = 5
+          jasmine.fireEvent @videoEl, "timeupdate"
+          expect(@player.end).toBe @videoEl.duration
+
+  describe 'methods:', ->
+
+    beforeEach ->
+      waitsFor ( ->
+        @volume = @videoEl.volume
+        @seek = @videoEl.currentTime
+        @player.playerState == STATUS.PAUSED
+      ), 'Video cannot be played', 1000
+
+
+    it 'pauseVideo', ->
+      spyOn(@videoEl, 'pause').andCallThrough()
+      @player.pauseVideo()
+      expect(@videoEl.pause).toHaveBeenCalled()
+
+    describe 'seekTo', ->
+
+      it 'set new correct value', ->
+        runs ->
+          @player.seekTo(2)
+          expect(@videoEl.currentTime).toBe 2
+
+      it 'set new inccorrect values', ->
+        runs ->
+          @player.seekTo(-50)
+          expect(@videoEl.currentTime).toBe @seek
+          @player.seekTo('5')
+          expect(@videoEl.currentTime).toBe @seek
+          @player.seekTo(500000)
+          expect(@videoEl.currentTime).toBe @seek
+
+    describe 'setVolume', ->
+
+      it 'set new correct value', ->
+        runs ->
+          @player.setVolume(50)
+          expect(@videoEl.volume).toBe 50*0.01
+
+      it 'set new inccorrect values', ->
+        runs ->
+          @player.setVolume(-50)
+          expect(@videoEl.volume).toBe @volume
+          @player.setVolume('5')
+          expect(@videoEl.volume).toBe @volume
+          @player.setVolume(500000)
+          expect(@videoEl.volume).toBe @volume
+
+    it 'getCurrentTime', ->
+      runs ->
+        @videoEl.currentTime = 3
+        expect(@player.getCurrentTime()).toBe @videoEl.currentTime
+
+    it 'playVideo', ->
+      runs ->
+        spyOn(@videoEl, 'play').andCallThrough()
+        @player.playVideo()
+        expect(@videoEl.play).toHaveBeenCalled()
+
+    it 'getPlayerState', ->
+      runs ->
+        @player.playerState = STATUS.PLAYING
+        expect(@player.getPlayerState()).toBe STATUS.PLAYING
+        @player.playerState = STATUS.ENDED
+        expect(@player.getPlayerState()).toBe STATUS.ENDED
+
+    it 'getVolume', ->
+      runs ->
+        @volume = @videoEl.volume = 0.5
+        expect(@player.getVolume()).toBe @volume
+
+    it 'getDuration', ->
+      runs ->
+        @duration = @videoEl.duration
+        expect(@player.getDuration()).toBe @duration
+
+    describe 'setPlaybackRate', ->
+      it 'set a correct value', ->
+        @playbackRate = 1.5
+        @player.setPlaybackRate @playbackRate
+        expect(@videoEl.playbackRate).toBe @playbackRate
+
+      it 'set NaN value', ->
+        @playbackRate = NaN
+        @player.setPlaybackRate @playbackRate
+        expect(@videoEl.playbackRate).toBe 1.0
+
+    it 'getAvailablePlaybackRates', ->
+      expect(@player.getAvailablePlaybackRates()).toEqual playbackRates

common/lib/xmodule/xmodule/js/spec/videoalpha/display/video_player_spec.coffee

 describe 'VideoPlayerAlpha', ->
+  playerVars =
+    controls: 0
+    wmode: 'transparent'
+    rel: 0
+    showinfo: 0
+    enablejsapi: 1
+    modestbranding: 1
+    html5: 1
+
   beforeEach ->
     window.onTouchBasedDevice = jasmine.createSpy('onTouchBasedDevice').andReturn false
     # It tries to call methods of VideoProgressSlider on Spy
     for part in ['VideoCaptionAlpha', 'VideoSpeedControlAlpha', 'VideoVolumeControlAlpha', 'VideoProgressSliderAlpha', 'VideoControlAlpha']
       spyOn(window[part].prototype, 'initialize').andCallThrough()
-    jasmine.stubVideoPlayerAlpha @, [], false
+
 
   afterEach ->
     YT.Player = undefined
 
   describe 'constructor', ->
     beforeEach ->
-      spyOn YT, 'Player'
       $.fn.qtip.andCallFake ->
         $(this).data('qtip', true)
-      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
 
     describe 'always', ->
       beforeEach ->
+        jasmine.stubVideoPlayerAlpha @, [], false
+        $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
         @player = new VideoPlayerAlpha video: @video
 
       it 'instanticate current time to zero', ->
@@ -51,23 +60,6 @@ describe 'VideoPlayerAlpha', ->
         expect(@player.progressSlider).toBeDefined()
         expect(@player.progressSlider.el).toBe $('.slider', @player.el)
 
-      it 'create Youtube player', ->
-        expect(YT.Player).toHaveBeenCalledWith('id', {
-          playerVars:
-            controls: 0
-            wmode: 'transparent'
-            rel: 0
-            showinfo: 0
-            enablejsapi: 1
-            modestbranding: 1
-            html5: 1
-          videoId: 'normalSpeedYoutubeId'
-          events:
-            onReady: @player.onReady
-            onStateChange: @player.onStateChange
-            onPlaybackQualityChange: @player.onPlaybackQualityChange
-        })
-
       it 'bind to video control play event', ->
         expect($(@player.control)).toHandleWith 'play', @player.play
 
@@ -92,8 +84,36 @@ describe 'VideoPlayerAlpha', ->
       it 'bind to fullscreen switching button', ->
         expect($('.add-fullscreen')).toHandleWith 'click', @player.toggleFullScreen
 
+    it 'create Youtube player', ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
+      spyOn YT, 'Player'
+      @player = new VideoPlayerAlpha video: @video
+      expect(YT.Player).toHaveBeenCalledWith('id', {
+        playerVars: playerVars
+        videoId: 'normalSpeedYoutubeId'
+        events:
+          onReady: @player.onReady
+          onStateChange: @player.onStateChange
+          onPlaybackQualityChange: @player.onPlaybackQualityChange
+      })
+
+    it 'create HTML5 player', ->
+      jasmine.stubVideoPlayerAlpha @, [], false, true
+      spyOn HTML5Video, 'Player'
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
+      @player = new VideoPlayerAlpha video: @video
+      expect(HTML5Video.Player).toHaveBeenCalledWith @video.el,
+        playerVars: playerVars
+        videoSources: @video.html5Sources
+        events:
+          onReady: @player.onReady
+          onStateChange: @player.onStateChange
+
     describe 'when not on a touch based device', ->
       beforeEach ->
+        jasmine.stubVideoPlayerAlpha @, [], false
+        $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
         $('.add-fullscreen, .hide-subtitles').removeData 'qtip'
         @player = new VideoPlayerAlpha video: @video
 
@@ -108,6 +128,8 @@ describe 'VideoPlayerAlpha', ->
 
     describe 'when on a touch based device', ->
       beforeEach ->
+        jasmine.stubVideoPlayerAlpha @, [], false
+        $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
         window.onTouchBasedDevice.andReturn true
         $('.add-fullscreen, .hide-subtitles').removeData 'qtip'
         @player = new VideoPlayerAlpha video: @video
@@ -122,6 +144,8 @@ describe 'VideoPlayerAlpha', ->
 
   describe 'onReady', ->
     beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
       @video.embed()
       @player = @video.player
       spyOnEvent @player, 'ready'
@@ -146,6 +170,9 @@ describe 'VideoPlayerAlpha', ->
         expect(@player.play).not.toHaveBeenCalled()
 
   describe 'onStateChange', ->
+    beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
 
     describe 'when the video is unstarted', ->
       beforeEach ->
@@ -234,6 +261,8 @@ describe 'VideoPlayerAlpha', ->
 
   describe 'onSeek', ->
     beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
       @player = new VideoPlayerAlpha video: @video
       spyOn window, 'clearInterval'
       @player.player.interval = 100
@@ -264,6 +293,8 @@ describe 'VideoPlayerAlpha', ->
 
   describe 'onSpeedChange', ->
     beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
       @player = new VideoPlayerAlpha video: @video
       @player.currentTime = 60
       spyOn @player, 'updatePlayTime'
@@ -306,6 +337,8 @@ describe 'VideoPlayerAlpha', ->
 
   describe 'onVolumeChange', ->
     beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
       @player = new VideoPlayerAlpha video: @video
       @player.onVolumeChange undefined, 60
 
@@ -314,6 +347,8 @@ describe 'VideoPlayerAlpha', ->
 
   describe 'update', ->
     beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
       @player = new VideoPlayerAlpha video: @video
       spyOn @player, 'updatePlayTime'
 
@@ -335,6 +370,8 @@ describe 'VideoPlayerAlpha', ->
 
   describe 'updatePlayTime', ->
     beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
       @player = new VideoPlayerAlpha video: @video
       spyOn(@video, 'getDuration').andReturn 1800
       @player.caption.updatePlayTime = jasmine.createSpy('VideoCaptionAlpha.updatePlayTime')
@@ -352,6 +389,8 @@ describe 'VideoPlayerAlpha', ->
 
   describe 'toggleFullScreen', ->
     beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
       @player = new VideoPlayerAlpha video: @video
       @player.caption.resize = jasmine.createSpy('VideoCaptionAlpha.resize')
 
@@ -388,6 +427,8 @@ describe 'VideoPlayerAlpha', ->
 
   describe 'play', ->
     beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
       @player = new VideoPlayerAlpha video: @video
 
     describe 'when the player is not ready', ->
@@ -408,6 +449,8 @@ describe 'VideoPlayerAlpha', ->
 
   describe 'isPlaying', ->
     beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
       @player = new VideoPlayerAlpha video: @video
 
     describe 'when the video is playing', ->
@@ -426,6 +469,8 @@ describe 'VideoPlayerAlpha', ->
 
   describe 'pause', ->
     beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
       @player = new VideoPlayerAlpha video: @video
       @player.pause()
 
@@ -434,6 +479,8 @@ describe 'VideoPlayerAlpha', ->
 
   describe 'duration', ->
     beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
       @player = new VideoPlayerAlpha video: @video
       spyOn @video, 'getDuration'
       @player.duration()
@@ -443,6 +490,8 @@ describe 'VideoPlayerAlpha', ->
 
   describe 'currentSpeed', ->
     beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
       @player = new VideoPlayerAlpha video: @video
       @video.speed = '3.0'
 
@@ -451,6 +500,8 @@ describe 'VideoPlayerAlpha', ->
 
   describe 'volume', ->
     beforeEach ->
+      jasmine.stubVideoPlayerAlpha @, [], false
+      $('.video').append $('<div class="add-fullscreen" /><div class="hide-subtitles" />')
       @player = new VideoPlayerAlpha video: @video
       @player.player.getVolume.andReturn 42