Test that video is only completed upon being watched
This commit is contained in:
Sofiya Semenova
@@ -1,61 +1,63 @@
|
||||
<div class="course-content">
|
||||
<div id="video_example">
|
||||
<div id="example">
|
||||
<div
|
||||
id="video_id"
|
||||
class="video closed"
|
||||
data-metadata='{"autohideHtml5": "true", "autoplay": "false", "captionDataDir": "", "endTime": "", "generalSpeed": "1.0", "saveStateUrl": "/save_user_state", "savedVideoPosition": "0", "showCaptions": "true", "sources": ["/base/fixtures/test.mp4","/base/fixtures/test.webm","/base/fixtures/test.ogv"], "speed": "1.5", "startTime": "", "streams": "", "sub": "Z5KLxerq05Y", "transcriptAvailableTranslationsUrl": "/transcript/available_translations", "transcriptLanguage": "en", "transcriptLanguages": {"en": "English", "de": "Deutsch", "zh": "普通话"}, "transcriptTranslationUrl": "/transcript/translation/__lang__", "ytApiUrl": "/base/fixtures/youtube_iframe_api.js", "ytImageUrl": "", "ytTestTimeout": "1500", "ytMetadataUrl": "www.googleapis.com/youtube/v3/videos/"}'
|
||||
>
|
||||
<div class="focus_grabber first"></div>
|
||||
<div class="vert-mod">
|
||||
<div id="video_example">
|
||||
<div id="example">
|
||||
<div
|
||||
id="video_id"
|
||||
class="video closed vert vert-video_id"
|
||||
data-metadata='{"autohideHtml5": "true", "autoplay": "false", "captionDataDir": "", "endTime": "", "generalSpeed": "1.0", "saveStateUrl": "/save_user_state", "savedVideoPosition": "0", "showCaptions": "true", "sources": ["/base/fixtures/test.mp4","/base/fixtures/test.webm","/base/fixtures/test.ogv"], "speed": "1.5", "startTime": "", "streams": "", "sub": "Z5KLxerq05Y", "transcriptAvailableTranslationsUrl": "/transcript/available_translations", "transcriptLanguage": "en", "transcriptLanguages": {"en": "English", "de": "Deutsch", "zh": "普通话"}, "transcriptTranslationUrl": "/transcript/translation/__lang__", "ytApiUrl": "/base/fixtures/youtube_iframe_api.js", "ytImageUrl": "", "ytTestTimeout": "1500", "ytMetadataUrl": "www.googleapis.com/youtube/v3/videos/"}'
|
||||
>
|
||||
<div class="focus_grabber first"></div>
|
||||
|
||||
<div class="tc-wrapper">
|
||||
<article class="video-wrapper">
|
||||
<span tabindex="0" class="spinner" aria-hidden="false" aria-label="Loading video player"></span>
|
||||
<span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="Play video"></span>
|
||||
<div class="video-player-pre"></div>
|
||||
<section class="video-player">
|
||||
<div id="id"></div>
|
||||
</section>
|
||||
<div class="video-player-post"></div>
|
||||
<div class="closed-captions"></div>
|
||||
<section class="video-controls is-hidden">
|
||||
<div class="slider"></div>
|
||||
<div>
|
||||
<div class="vcr"><div class="vidtime">0:00 / 0:00</div></div>
|
||||
<div class="secondary-controls"></div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tc-wrapper">
|
||||
<article class="video-wrapper">
|
||||
<span tabindex="0" class="spinner" aria-hidden="false" aria-label="Loading video player"></span>
|
||||
<span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="Play video"></span>
|
||||
<div class="video-player-pre"></div>
|
||||
<section class="video-player">
|
||||
<div id="id"></div>
|
||||
</section>
|
||||
<div class="video-player-post"></div>
|
||||
<div class="closed-captions"></div>
|
||||
<section class="video-controls is-hidden">
|
||||
<div class="slider"></div>
|
||||
<div>
|
||||
<div class="vcr"><div class="vidtime">0:00 / 0:00</div></div>
|
||||
<div class="secondary-controls"></div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="focus_grabber last"></div>
|
||||
<div class="focus_grabber last"></div>
|
||||
|
||||
<h3 class="hd hd-4 downloads-heading sr" id="video-download-transcripts">Downloads and transcripts</h3>
|
||||
<div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts">
|
||||
<h3 class="hd hd-4 downloads-heading sr" id="video-download-transcripts">Downloads and transcripts</h3>
|
||||
<div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts">
|
||||
<div class="wrapper-download-video">
|
||||
<h4 class="hd hd-5">Video</h4>
|
||||
<a class="btn-link video-sources video-download-button" href="#">
|
||||
Download video file
|
||||
</a>
|
||||
<h4 class="hd hd-5">Video</h4>
|
||||
<a class="btn-link video-sources video-download-button" href="#">
|
||||
Download video file
|
||||
</a>
|
||||
</div>
|
||||
<div class="wrapper-download-transcripts">
|
||||
<h4 class="hd hd-5">Transcripts</h4>
|
||||
<ul class="list-download-transcripts">
|
||||
<li class="transcript-option">
|
||||
<a href="#" class="btn btn-link" data-href="txt">Download Text (.txt) file</a>
|
||||
</li>
|
||||
<li class="transcript-option">
|
||||
<a href="#" class="btn btn-link" data-href="srt">Download SubRip (.srt) file</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="external-track">Download transcript</a>
|
||||
<h4 class="hd hd-5">Transcripts</h4>
|
||||
<ul class="list-download-transcripts">
|
||||
<li class="transcript-option">
|
||||
<a href="#" class="btn btn-link" data-href="txt">Download Text (.txt) file</a>
|
||||
</li>
|
||||
<li class="transcript-option">
|
||||
<a href="#" class="btn btn-link" data-href="srt">Download SubRip (.srt) file</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="external-track">Download transcript</a>
|
||||
</div>
|
||||
<div class="wrapper-handouts">
|
||||
<h4 class="hd hd-5">Handouts</h4>
|
||||
<a href="#">Download Handout</a>
|
||||
<h4 class="hd hd-5">Handouts</h4>
|
||||
<a href="#">Download Handout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -41,6 +41,7 @@ var options = {
|
||||
{pattern: 'common_static/js/test/i18n.js', included: true},
|
||||
{pattern: 'common_static/common/js/vendor/hls.js', included: true},
|
||||
{pattern: 'public/js/split_test_staff.js', included: true},
|
||||
{pattern: 'public/js/vertical_student_view.js', included: true},
|
||||
{pattern: 'src/word_cloud/d3.min.js', included: true},
|
||||
|
||||
// Load test utilities
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
describe('VideoPlayer completion', function() {
|
||||
var state, oldOTBD;
|
||||
var state, oldOTBD, completionAjaxCall;
|
||||
|
||||
beforeEach(function() {
|
||||
oldOTBD = window.onTouchBasedDevice;
|
||||
@@ -13,9 +13,18 @@
|
||||
recordedYoutubeIsAvailable: true,
|
||||
completionEnabled: true,
|
||||
publishCompletionUrl: 'https://example.com/publish_completion_url'
|
||||
|
||||
});
|
||||
state.completionHandler.completeAfterTime = 20;
|
||||
|
||||
completionAjaxCall = {
|
||||
url: state.config.publishCompletionUrl,
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
dataType: 'json',
|
||||
data: JSON.stringify({completion: 1.0}),
|
||||
success: jasmine.any(Function),
|
||||
error: jasmine.any(Function)
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
@@ -29,15 +38,7 @@
|
||||
|
||||
it('calls the completion api when marking an object complete', function() {
|
||||
state.completionHandler.markCompletion(Date.now());
|
||||
expect($.ajax).toHaveBeenCalledWith({
|
||||
url: state.config.publishCompletionUrl,
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
dataType: 'json',
|
||||
data: JSON.stringify({completion: 1.0}),
|
||||
success: jasmine.any(Function),
|
||||
error: jasmine.any(Function)
|
||||
});
|
||||
expect($.ajax).toHaveBeenCalledWith(completionAjaxCall);
|
||||
expect(state.completionHandler.isComplete).toEqual(true);
|
||||
});
|
||||
|
||||
@@ -51,6 +52,16 @@
|
||||
expect(state.completionHandler.markCompletion).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('does not call the completion api on the LMS when the video is loaded but not seen', function() {
|
||||
spyOn(window, 'VerticalStudentView').and.callThrough();
|
||||
// The VerticalStudentView object is created to kick off the function that checks if
|
||||
// each vertical is completable by viewing, and, if so, sends an ajax call to mark completion
|
||||
// eslint-disable-next-line no-new
|
||||
new window.VerticalStudentView(null, '#video_example');
|
||||
expect(window.VerticalStudentView).toHaveBeenCalled();
|
||||
expect($.ajax).not.toHaveBeenCalledWith(completionAjaxCall);
|
||||
});
|
||||
|
||||
it('calls the completion api on the LMS when the video ends', function() {
|
||||
spyOn(state.completionHandler, 'markCompletion').and.callThrough();
|
||||
state.el.trigger('ended');
|
||||
|
||||
Reference in New Issue
Block a user