e51c01bf4e
* feat: WIP transcript feedback * feat: Add UI mock for Transcript Feedbacks (#33416) * feat: Add UI mock for Transcript Feedbacks * fix: Fix mongo tests * feat: Get video_uuid, user_uuid and language for request (#33445) * feat: make call to ai-translations to obtain feedback * feat: Show widget if transcript was AI generated * feat: bind all class methods * fix: async calls * feat: send request when choosing feedback * feat: update showing condition (#33474) * fix: ajax success lint * fix: video caption specs errors fixed * feat: add coverage to feedback widget * chore: connect XT to LMS and CMS * feat: use url * chore: add vars to devstack * chore: fix url name * feat: update unit tests regarding env vars * fix: fix test_video_mongo * feat: add more tests * feat: remove console log Co-authored-by: Jesper Hodge <19345795+jesperhodge@users.noreply.github.com> * fix: rename shouldShowWidget to loadAndSetVisibility --------- Co-authored-by: María Guillermina Véscovo <mvescovo@2u.com> Co-authored-by: Jesper Hodge <19345795+jesperhodge@users.noreply.github.com>
1332 lines
56 KiB
JavaScript
1332 lines
56 KiB
JavaScript
/* global _, WAIT_TIMEOUT */
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
describe('VideoCaption', function() {
|
|
var state, oldOTBD;
|
|
var parseIntAttribute = function(element, attrName) {
|
|
return parseInt(element.attr(attrName), 10);
|
|
};
|
|
|
|
beforeEach(function() {
|
|
oldOTBD = window.onTouchBasedDevice;
|
|
window.onTouchBasedDevice = jasmine.createSpy('onTouchBasedDevice')
|
|
.and.returnValue(null);
|
|
|
|
$.fn.scrollTo.calls.reset();
|
|
});
|
|
|
|
afterEach(function() {
|
|
// `source` tags should be removed to avoid memory leak bug that we
|
|
// had before. Removing of `source` tag, not `video` tag, stops
|
|
// loading video source and clears the memory.
|
|
$('source').remove();
|
|
$.fn.scrollTo.calls.reset();
|
|
state.storage.clear();
|
|
state.videoPlayer.destroy();
|
|
|
|
window.onTouchBasedDevice = oldOTBD;
|
|
});
|
|
|
|
describe('constructor', function() {
|
|
describe('always', function() {
|
|
beforeEach(function() {
|
|
spyOn($, 'ajaxWithPrefix').and.callThrough();
|
|
});
|
|
|
|
it('create the transcript element', function() {
|
|
state = jasmine.initializePlayer();
|
|
expect($('.video')).toContainElement('.subtitles');
|
|
});
|
|
|
|
it('has appropriate lang attributes', function() {
|
|
state = jasmine.initializePlayer();
|
|
|
|
$('.video .toggle-captions').trigger('click');
|
|
|
|
expect($('.video .subtitles-menu')).toHaveAttrs({
|
|
lang: 'en'
|
|
});
|
|
expect($('.video .closed-captions')).toHaveAttrs({
|
|
lang: 'en'
|
|
});
|
|
});
|
|
|
|
it('add transcript control to video player', function() {
|
|
state = jasmine.initializePlayer();
|
|
expect($('.video')).toContainElement('.toggle-transcript');
|
|
});
|
|
|
|
it('add ARIA attributes to transcript control', function() {
|
|
var $captionControl;
|
|
state = jasmine.initializePlayer();
|
|
$captionControl = $('.toggle-transcript');
|
|
expect($captionControl).toHaveAttrs({
|
|
'aria-disabled': 'false',
|
|
'aria-label': 'Turn off transcripts'
|
|
});
|
|
$captionControl.click();
|
|
expect($captionControl).toHaveAttrs({
|
|
'aria-disabled': 'false',
|
|
'aria-label': 'Turn on transcripts'
|
|
});
|
|
});
|
|
|
|
it('adds the captioning control to the video player', function() {
|
|
state = jasmine.initializePlayer();
|
|
expect($('.video')).toContainElement('.toggle-captions');
|
|
expect($('.video')).toContainElement('.closed-captions');
|
|
});
|
|
|
|
it('add ARIA attributes to caption control', function() {
|
|
var $toggleCaption;
|
|
state = jasmine.initializePlayer();
|
|
$toggleCaption = $('.toggle-captions');
|
|
expect($toggleCaption).toHaveAttrs({
|
|
'aria-disabled': 'false',
|
|
'aria-label': 'Turn on closed captioning'
|
|
});
|
|
$toggleCaption.click();
|
|
expect($toggleCaption).toHaveAttrs({
|
|
'aria-disabled': 'false',
|
|
'aria-label': 'Hide closed captions'
|
|
});
|
|
});
|
|
|
|
it('adds "closed" class to the main element if transcript setting is off', function() {
|
|
// No cookie, showCaptions setting is off: hide transcripts panel.
|
|
$.cookie.and.returnValue(null);
|
|
state = jasmine.initializePlayer('video_all.html', {showCaptions: false});
|
|
expect(state.el).toHaveClass('closed');
|
|
|
|
// No cookie, showCaptions setting is on: show transcripts panel.
|
|
$.cookie.and.returnValue(null);
|
|
state = jasmine.initializePlayer('video_all.html', {showCaptions: true});
|
|
expect(state.el).not.toHaveClass('closed');
|
|
|
|
// Cookie preference is on, showCaptions setting is off: hide transcripts panel.
|
|
$.cookie.and.returnValue('true');
|
|
state = jasmine.initializePlayer('video_all.html', {showCaptions: false});
|
|
expect(state.el).toHaveClass('closed');
|
|
|
|
// Cookie preference is on, showCaptions setting is on: show transcripts panel.
|
|
$.cookie.and.returnValue('true');
|
|
state = jasmine.initializePlayer('video_all.html', {showCaptions: true});
|
|
expect(state.el).not.toHaveClass('closed');
|
|
|
|
// Cookie preference is off, showCaptions setting is off: hide transcripts panel.
|
|
$.cookie.and.returnValue('false');
|
|
state = jasmine.initializePlayer('video_all.html', {showCaptions: false});
|
|
expect(state.el).toHaveClass('closed');
|
|
|
|
// Cookie preference is off, showCaptions setting is on: hide transcripts panel.
|
|
$.cookie.and.returnValue('false');
|
|
state = jasmine.initializePlayer('video_all.html', {showCaptions: true});
|
|
expect(state.el).toHaveClass('closed');
|
|
});
|
|
|
|
it('fetch the transcript in HTML5 mode', function(done) {
|
|
var transcriptURL = '/transcript/translation/en',
|
|
transcriptCall;
|
|
state = jasmine.initializePlayer();
|
|
|
|
jasmine.waitUntil(function() {
|
|
return state.videoCaption.loaded;
|
|
}).then(function() {
|
|
expect($.ajaxWithPrefix).toHaveBeenCalledWith({
|
|
url: transcriptURL,
|
|
notifyOnError: false,
|
|
// eslint-disable-next-line no-void
|
|
data: void 0,
|
|
success: jasmine.any(Function),
|
|
error: jasmine.any(Function)
|
|
});
|
|
transcriptCall = $.ajaxWithPrefix.calls.all().find(function(call) {
|
|
return call.args[0].url === transcriptURL;
|
|
});
|
|
expect(transcriptCall.args[0].data).toBeUndefined();
|
|
}).always(done);
|
|
});
|
|
|
|
it('fetch the transcript in Flash mode', function(done) {
|
|
state = jasmine.initializePlayerYouTube();
|
|
spyOn(state, 'isFlashMode').and.returnValue(true);
|
|
state.videoCaption.fetchCaption();
|
|
|
|
jasmine.waitUntil(function() {
|
|
return state.videoCaption.loaded;
|
|
}).then(function() {
|
|
expect($.ajaxWithPrefix).toHaveBeenCalledWith({
|
|
url: '/transcript/translation/en',
|
|
notifyOnError: false,
|
|
data: jasmine.any(Object),
|
|
success: jasmine.any(Function),
|
|
error: jasmine.any(Function)
|
|
});
|
|
expect($.ajaxWithPrefix.calls.mostRecent().args[0].data)
|
|
.toEqual({
|
|
videoId: 'cogebirgzzM'
|
|
});
|
|
}).always(done);
|
|
});
|
|
|
|
it('fetch the transcript in Youtube mode', function(done) {
|
|
state = jasmine.initializePlayerYouTube();
|
|
|
|
jasmine.waitUntil(function() {
|
|
return state.videoCaption.loaded;
|
|
}).then(function() {
|
|
expect($.ajaxWithPrefix).toHaveBeenCalledWith({
|
|
url: '/transcript/translation/en',
|
|
notifyOnError: false,
|
|
data: jasmine.any(Object),
|
|
success: jasmine.any(Function),
|
|
error: jasmine.any(Function)
|
|
});
|
|
expect($.ajaxWithPrefix.calls.mostRecent().args[0].data)
|
|
.toEqual({
|
|
videoId: 'cogebirgzzM'
|
|
});
|
|
}).always(done);
|
|
});
|
|
|
|
it('bind the mouse movement', function() {
|
|
state = jasmine.initializePlayer();
|
|
expect($('.subtitles-menu')).toHandle('mouseover');
|
|
expect($('.subtitles-menu')).toHandle('mouseout');
|
|
expect($('.subtitles-menu')).toHandle('mousemove');
|
|
expect($('.subtitles-menu')).toHandle('mousewheel');
|
|
expect($('.subtitles-menu')).toHandle('DOMMouseScroll');
|
|
});
|
|
|
|
it('bind the scroll', function() {
|
|
state = jasmine.initializePlayer();
|
|
expect($('.subtitles-menu'))
|
|
.toHandleWith('scroll', state.videoControl.showControls);
|
|
});
|
|
});
|
|
|
|
it('can destroy itself', function() {
|
|
var plugin;
|
|
spyOn($, 'ajaxWithPrefix');
|
|
state = jasmine.initializePlayer();
|
|
plugin = state.videoCaption;
|
|
|
|
spyOn($.fn, 'off').and.callThrough();
|
|
state.videoCaption.destroy();
|
|
|
|
expect(state.videoCaption).toBeUndefined();
|
|
expect($.fn.off).toHaveBeenCalledWith({
|
|
'caption:fetch': plugin.fetchCaption,
|
|
'caption:resize': plugin.onResize,
|
|
'caption:update': plugin.onCaptionUpdate,
|
|
ended: plugin.pause,
|
|
fullscreen: plugin.onResize,
|
|
pause: plugin.pause,
|
|
play: plugin.play,
|
|
destroy: plugin.destroy
|
|
});
|
|
});
|
|
|
|
describe('renderCaptions', function() {
|
|
describe('is rendered', function() {
|
|
var KEY = $.ui.keyCode,
|
|
|
|
keyPressEvent = function(key) {
|
|
return $.Event('keydown', {keyCode: key});
|
|
};
|
|
|
|
it('toggles the captions on control click', function() {
|
|
state = jasmine.initializePlayer();
|
|
|
|
$('.toggle-captions').click();
|
|
expect($('.toggle-captions')).toHaveClass('is-active');
|
|
expect($('.closed-captions')).toHaveClass('is-visible');
|
|
|
|
$('.toggle-captions').click();
|
|
expect($('.toggle-captions')).not.toHaveClass('is-active');
|
|
expect($('.closed-captions')).not.toHaveClass('is-visible');
|
|
});
|
|
|
|
it('toggles the captions on keypress ENTER', function() {
|
|
state = jasmine.initializePlayer();
|
|
|
|
$('.toggle-captions').focus().trigger(keyPressEvent(KEY.ENTER));
|
|
expect($('.toggle-captions')).toHaveClass('is-active');
|
|
expect($('.closed-captions')).toHaveClass('is-visible');
|
|
|
|
$('.toggle-captions').focus().trigger(keyPressEvent(KEY.ENTER));
|
|
expect($('.toggle-captions')).not.toHaveClass('is-active');
|
|
expect($('.closed-captions')).not.toHaveClass('is-visible');
|
|
});
|
|
|
|
it('toggles the captions on keypress SPACE', function() {
|
|
state = jasmine.initializePlayer();
|
|
|
|
$('.toggle-captions').focus().trigger(keyPressEvent(KEY.SPACE));
|
|
expect($('.toggle-captions')).toHaveClass('is-active');
|
|
expect($('.closed-captions')).toHaveClass('is-visible');
|
|
|
|
$('.toggle-captions').focus().trigger(keyPressEvent(KEY.SPACE));
|
|
expect($('.toggle-captions')).not.toHaveClass('is-active');
|
|
expect($('.closed-captions')).not.toHaveClass('is-visible');
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('renderLanguageMenu', function() {
|
|
describe('is rendered', function() {
|
|
var KEY = $.ui.keyCode,
|
|
|
|
keyPressEvent = function(key) {
|
|
return $.Event('keydown', {keyCode: key});
|
|
};
|
|
|
|
it('if languages more than 1', function() {
|
|
var transcripts, langCodes, langLabels;
|
|
state = jasmine.initializePlayer();
|
|
transcripts = state.config.transcriptLanguages;
|
|
langCodes = _.keys(transcripts);
|
|
langLabels = _.values(transcripts);
|
|
|
|
expect($('.langs-list')).toExist();
|
|
expect($('.langs-list')).toHandle('click');
|
|
|
|
$('.langs-list li').each(function() {
|
|
var code = $(this).data('lang-code'),
|
|
link = $(this).find('.control'),
|
|
label = link.text();
|
|
|
|
expect(code).toBeInArray(langCodes);
|
|
expect(label).toBeInArray(langLabels);
|
|
});
|
|
});
|
|
|
|
it('when clicking on link with new language', function() {
|
|
var Caption, $link;
|
|
state = jasmine.initializePlayer();
|
|
Caption = state.videoCaption;
|
|
$link = $('.langs-list li[data-lang-code="de"] .control-lang');
|
|
|
|
spyOn(Caption, 'fetchCaption');
|
|
spyOn(state.storage, 'setItem');
|
|
|
|
state.lang = 'en';
|
|
$link.trigger('click');
|
|
|
|
expect(Caption.fetchCaption).toHaveBeenCalled();
|
|
expect(state.lang).toBe('de');
|
|
expect(state.storage.setItem)
|
|
.toHaveBeenCalledWith('language', 'de');
|
|
expect($('.langs-list li.is-active').length).toBe(1);
|
|
expect($('.subtitles .subtitles-menu')).toHaveAttrs({
|
|
lang: 'de'
|
|
});
|
|
expect($('.closed-captions')).toHaveAttrs({
|
|
lang: 'de'
|
|
});
|
|
expect($link).toHaveAttr('aria-pressed', 'true');
|
|
});
|
|
|
|
it('when clicking on link with current language', function() {
|
|
var Caption, $link;
|
|
|
|
state = jasmine.initializePlayer();
|
|
Caption = state.videoCaption;
|
|
$link = $('.langs-list li[data-lang-code="en"] .control-lang');
|
|
|
|
spyOn(Caption, 'fetchCaption');
|
|
spyOn(state.storage, 'setItem');
|
|
|
|
state.lang = 'en';
|
|
$link.trigger('click');
|
|
|
|
expect(Caption.fetchCaption).not.toHaveBeenCalled();
|
|
expect(state.lang).toBe('en');
|
|
expect(state.storage.setItem)
|
|
.not.toHaveBeenCalledWith('language', 'en');
|
|
expect($('.langs-list li.is-active').length).toBe(1);
|
|
expect($link).toHaveAttr('aria-pressed', 'true');
|
|
});
|
|
|
|
it('open the language toggle on hover', function() {
|
|
state = jasmine.initializePlayer();
|
|
$('.lang').mouseenter();
|
|
expect($('.lang')).toHaveClass('is-opened');
|
|
$('.lang').mouseleave();
|
|
expect($('.lang')).not.toHaveClass('is-opened');
|
|
});
|
|
|
|
it('opens the language menu on arrow up', function() {
|
|
state = jasmine.initializePlayer();
|
|
$('.language-menu').focus();
|
|
$('.language-menu').trigger(keyPressEvent(KEY.UP));
|
|
expect($('.lang')).toHaveClass('is-opened');
|
|
expect($('.langs-list')
|
|
.find('li')
|
|
.last()
|
|
.find('.control-lang'))
|
|
.toBeFocused();
|
|
});
|
|
|
|
it('closes the language menu on ESC', function() {
|
|
state = jasmine.initializePlayer();
|
|
$('.language-menu').trigger(keyPressEvent(KEY.UP));
|
|
expect($('.lang')).toHaveClass('is-opened');
|
|
$('.language-menu').trigger(keyPressEvent(KEY.ESCAPE));
|
|
expect($('.lang')).not.toHaveClass('is-opened');
|
|
expect($('.language-menu')).toBeFocused();
|
|
});
|
|
});
|
|
|
|
describe('is not rendered', function() {
|
|
it('if just 1 language', function() {
|
|
state = jasmine.initializePlayer(null, {
|
|
transcriptLanguages: {en: 'English'}
|
|
});
|
|
|
|
expect($('.langs-list')).not.toExist();
|
|
expect($('.lang')).not.toHandle('mouseenter');
|
|
expect($('.lang')).not.toHandle('mouseleave');
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when on a non touch-based device', function() {
|
|
beforeEach(function(done) {
|
|
state = jasmine.initializePlayer();
|
|
|
|
jasmine.waitUntil(function() {
|
|
return state.videoCaption.rendered;
|
|
}).then(done);
|
|
});
|
|
|
|
it('render the transcript', function() {
|
|
var captionsData = jasmine.stubbedCaption,
|
|
$items = $('.subtitles li span[data-index]');
|
|
|
|
_.each(captionsData.text, function(text, index) {
|
|
var item = $items.eq(index);
|
|
|
|
expect(parseIntAttribute(item, 'data-index')).toEqual(index);
|
|
expect(parseIntAttribute(item, 'data-start')).toEqual(captionsData.start[index]);
|
|
expect(item.attr('tabindex')).toEqual('0');
|
|
expect(item.text().trim()).toEqual(captionsData.text[index]);
|
|
});
|
|
});
|
|
|
|
it('add a padding element to transcript', function() {
|
|
expect($('.subtitles li:first').hasClass('spacing'))
|
|
.toBe(true);
|
|
expect($('.subtitles li:last').hasClass('spacing'))
|
|
.toBe(true);
|
|
});
|
|
|
|
it('bind all the transcript link', function() {
|
|
var handlerList = ['captionMouseOverOut', 'captionClick',
|
|
'captionMouseDown', 'captionFocus', 'captionBlur',
|
|
'captionKeyDown'
|
|
];
|
|
|
|
$.each(handlerList, function(index, handler) {
|
|
spyOn(state.videoCaption, handler);
|
|
});
|
|
$('.subtitles li span[data-index]').each(
|
|
function(index, link) {
|
|
$(link).trigger('mouseover');
|
|
expect(state.videoCaption.captionMouseOverOut).toHaveBeenCalled();
|
|
|
|
state.videoCaption.captionMouseOverOut.calls.reset();
|
|
$(link).trigger('mouseout');
|
|
expect(state.videoCaption.captionMouseOverOut).toHaveBeenCalled();
|
|
|
|
$(this).click();
|
|
expect(state.videoCaption.captionClick).toHaveBeenCalled();
|
|
|
|
$(this).trigger('mousedown');
|
|
expect(state.videoCaption.captionMouseDown).toHaveBeenCalled();
|
|
|
|
$(this).trigger('focus');
|
|
expect(state.videoCaption.captionFocus).toHaveBeenCalled();
|
|
|
|
$(this).trigger('blur');
|
|
expect(state.videoCaption.captionBlur).toHaveBeenCalled();
|
|
|
|
$(this).trigger('keydown');
|
|
expect(state.videoCaption.captionKeyDown).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
it('set rendered to true', function(done) {
|
|
state = jasmine.initializePlayer();
|
|
|
|
jasmine.waitUntil(function() {
|
|
return state.videoCaption.rendered;
|
|
}).then(function() {
|
|
expect(state.videoCaption.rendered).toBeTruthy();
|
|
}).always(done);
|
|
});
|
|
});
|
|
|
|
describe('when on a touch-based device', function() {
|
|
beforeEach(function() {
|
|
window.onTouchBasedDevice.and.returnValue(['iPad']);
|
|
|
|
state = jasmine.initializePlayer();
|
|
$.fn.scrollTo.calls.reset();
|
|
});
|
|
|
|
it('show explanation message', function() {
|
|
expect($('.subtitles .subtitles-menu li')).toHaveText(
|
|
'Transcript will be displayed when you start playing the video.'
|
|
);
|
|
});
|
|
|
|
it('show transcript on play', function(done) {
|
|
state.el.trigger('play');
|
|
|
|
jasmine.waitUntil(function() {
|
|
return state.videoCaption.rendered;
|
|
}).then(function() {
|
|
var captionsData = jasmine.stubbedCaption,
|
|
$items = $('.subtitles li span[data-index]');
|
|
|
|
_.each(captionsData.text, function(text, index) {
|
|
var item = $items.eq(index);
|
|
|
|
expect(parseIntAttribute(item, 'data-index')).toEqual(index);
|
|
expect(parseIntAttribute(item, 'data-start')).toEqual(captionsData.start[index]);
|
|
expect(item.attr('tabindex')).toEqual('0');
|
|
expect(item.text().trim()).toEqual(text);
|
|
});
|
|
}).always(done);
|
|
});
|
|
|
|
it('does not set rendered to true', function() {
|
|
expect(state.videoCaption.rendered).toBeFalsy();
|
|
});
|
|
});
|
|
|
|
describe('when no transcripts file was specified', function() {
|
|
beforeEach(function() {
|
|
state = jasmine.initializePlayer('video_all.html', {
|
|
sub: '',
|
|
transcriptLanguages: {}
|
|
});
|
|
});
|
|
|
|
it('transcript panel is not shown', function() {
|
|
expect(state.videoCaption.languageChooserEl).toBeHidden();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('mouse movement', function() {
|
|
var originalClearTimeout;
|
|
|
|
beforeEach(function(done) {
|
|
jasmine.clock().install();
|
|
state = jasmine.initializePlayer();
|
|
jasmine.clock().tick(50);
|
|
jasmine.waitUntil(function() {
|
|
return state.videoCaption.rendered;
|
|
}).then(done);
|
|
|
|
// Why we can't use spyOn(): https://github.com/jasmine/jasmine/issues/826
|
|
originalClearTimeout = window.clearTimeout;
|
|
window.clearTimeout = jasmine.createSpy().and.callFake(originalClearTimeout);
|
|
});
|
|
|
|
afterEach(function() {
|
|
window.clearTimeout = originalClearTimeout;
|
|
jasmine.clock().uninstall();
|
|
});
|
|
|
|
describe('when cursor is outside of the transcript box', function() {
|
|
it('does not set freezing timeout', function() {
|
|
expect(state.videoCaption.frozen).toBeFalsy();
|
|
});
|
|
});
|
|
|
|
describe('when cursor is in the transcript box', function() {
|
|
beforeEach(function() {
|
|
spyOn(state.videoCaption, 'onMouseLeave');
|
|
$(window).trigger(jQuery.Event('mousemove'));
|
|
jasmine.clock().tick(state.config.captionsFreezeTime);
|
|
$('.subtitles-menu').trigger(jQuery.Event('mouseenter'));
|
|
jasmine.clock().tick(state.config.captionsFreezeTime);
|
|
});
|
|
|
|
it('set the freezing timeout', function() {
|
|
expect(state.videoCaption.frozen).not.toBeFalsy();
|
|
expect(state.videoCaption.onMouseLeave).toHaveBeenCalled();
|
|
});
|
|
|
|
describe('when the cursor is moving', function() {
|
|
it('reset the freezing timeout', function() {
|
|
$('.subtitles-menu').trigger(jQuery.Event('mousemove'));
|
|
expect(window.clearTimeout).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe('when the mouse is scrolling', function() {
|
|
it('reset the freezing timeout', function() {
|
|
$('.subtitles-menu').trigger(jQuery.Event('mousewheel'));
|
|
expect(window.clearTimeout).toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe(
|
|
'when cursor is moving out of the transcript box',
|
|
function() {
|
|
beforeEach(function() {
|
|
state.videoCaption.frozen = 100;
|
|
$.fn.scrollTo.calls.reset();
|
|
});
|
|
|
|
describe('always', function() {
|
|
beforeEach(function() {
|
|
$('.subtitles-menu').trigger(jQuery.Event('mouseout'));
|
|
});
|
|
|
|
it('reset the freezing timeout', function() {
|
|
expect(window.clearTimeout).toHaveBeenCalledWith(100);
|
|
});
|
|
|
|
it('unfreeze the transcript', function() {
|
|
expect(state.videoCaption.frozen).toBeNull();
|
|
});
|
|
});
|
|
|
|
describe('when the player is playing', function() {
|
|
beforeEach(function() {
|
|
state.videoCaption.playing = true;
|
|
$('.subtitles-menu span[data-index]:first')
|
|
.parent()
|
|
.addClass('current');
|
|
$('.subtitles-menu').trigger(jQuery.Event('mouseout'));
|
|
});
|
|
|
|
it('scroll the transcript', function() {
|
|
expect($.fn.scrollTo).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe('when the player is not playing', function() {
|
|
beforeEach(function() {
|
|
state.videoCaption.playing = false;
|
|
$('.subtitles-menu').trigger(jQuery.Event('mouseout'));
|
|
});
|
|
|
|
it('does not scroll the transcript', function() {
|
|
expect($.fn.scrollTo).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('fetchCaption', function() {
|
|
var Caption, msg;
|
|
|
|
beforeEach(function() {
|
|
state = jasmine.initializePlayer();
|
|
Caption = state.videoCaption;
|
|
spyOn($, 'ajaxWithPrefix').and.callThrough();
|
|
spyOn(Caption, 'renderCaption');
|
|
spyOn(Caption, 'bindHandlers');
|
|
spyOn(Caption, 'updatePlayTime');
|
|
spyOn(Caption, 'hideCaptions');
|
|
spyOn(state, 'youtubeId').and.returnValue('Z5KLxerq05Y');
|
|
});
|
|
|
|
it('show transcript on language change', function() {
|
|
Caption.loaded = true;
|
|
Caption.fetchCaption();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalled();
|
|
expect(Caption.hideCaptions).toHaveBeenCalledWith(false);
|
|
});
|
|
|
|
msg = 'use cookie to show/hide transcripts if they have not been '
|
|
+ 'loaded yet';
|
|
it(msg, function() {
|
|
Caption.loaded = false;
|
|
Caption.hideCaptionsOnLoad = false;
|
|
Caption.fetchCaption();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalled();
|
|
expect(Caption.hideCaptions).toHaveBeenCalledWith(false);
|
|
|
|
Caption.loaded = false;
|
|
Caption.hideCaptions.calls.reset();
|
|
Caption.hideCaptionsOnLoad = true;
|
|
Caption.fetchCaption();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalled();
|
|
expect(Caption.hideCaptions).toHaveBeenCalledWith(true);
|
|
});
|
|
|
|
it('on success: on touch devices', function() {
|
|
state.isTouch = true;
|
|
Caption.loaded = false;
|
|
Caption.fetchCaption();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalled();
|
|
expect(Caption.bindHandlers).toHaveBeenCalled();
|
|
expect(Caption.renderCaption).not.toHaveBeenCalled();
|
|
expect(Caption.updatePlayTime).not.toHaveBeenCalled();
|
|
expect(Caption.loaded).toBeTruthy();
|
|
});
|
|
|
|
msg = 'on success: change language on touch devices when '
|
|
+ 'transcripts have not been rendered yet';
|
|
it(msg, function() {
|
|
state.isTouch = true;
|
|
Caption.loaded = true;
|
|
Caption.rendered = false;
|
|
Caption.fetchCaption();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalled();
|
|
expect(Caption.bindHandlers).not.toHaveBeenCalled();
|
|
expect(Caption.renderCaption).not.toHaveBeenCalled();
|
|
expect(Caption.updatePlayTime).not.toHaveBeenCalled();
|
|
expect(Caption.loaded).toBeTruthy();
|
|
});
|
|
|
|
it('on success: re-render on touch devices', function() {
|
|
state.isTouch = true;
|
|
Caption.loaded = true;
|
|
Caption.rendered = true;
|
|
Caption.fetchCaption();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalled();
|
|
expect(Caption.bindHandlers).not.toHaveBeenCalled();
|
|
expect(Caption.renderCaption).toHaveBeenCalled();
|
|
expect(Caption.updatePlayTime).toHaveBeenCalled();
|
|
expect(Caption.loaded).toBeTruthy();
|
|
});
|
|
|
|
it('on success: rendered correct', function() {
|
|
Caption.loaded = false;
|
|
Caption.fetchCaption();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalled();
|
|
expect(Caption.bindHandlers).toHaveBeenCalled();
|
|
expect(Caption.renderCaption).toHaveBeenCalled();
|
|
expect(Caption.updatePlayTime).not.toHaveBeenCalled();
|
|
expect(Caption.loaded).toBeTruthy();
|
|
});
|
|
|
|
it('on success: re-rendered correct', function() {
|
|
Caption.loaded = true;
|
|
Caption.rendered = true;
|
|
Caption.fetchCaption();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalled();
|
|
expect(Caption.bindHandlers).not.toHaveBeenCalled();
|
|
expect(Caption.renderCaption).toHaveBeenCalled();
|
|
expect(Caption.updatePlayTime).toHaveBeenCalled();
|
|
expect(Caption.loaded).toBeTruthy();
|
|
});
|
|
|
|
msg = 'on error: transcripts are hidden if there are no transcripts';
|
|
it(msg, function() {
|
|
spyOn(Caption, 'fetchAvailableTranslations');
|
|
$.ajax.and.callFake(function(settings) {
|
|
_.result(settings, 'error');
|
|
});
|
|
|
|
state.config.transcriptLanguages = {};
|
|
|
|
Caption.fetchCaption();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalled();
|
|
expect(Caption.fetchAvailableTranslations).not.toHaveBeenCalled();
|
|
expect(Caption.hideCaptions.calls.mostRecent().args[0]).toEqual(true);
|
|
});
|
|
|
|
msg = 'on error: for Html5 player an attempt to fetch transcript '
|
|
+ 'with youtubeId if there are no additional transcripts';
|
|
it(msg, function() {
|
|
spyOn(Caption, 'fetchAvailableTranslations');
|
|
spyOn(Caption, 'fetchCaption').and.callThrough();
|
|
spyOn(Caption, 'hideClosedCaptions').and.callThrough();
|
|
$.ajax.and.callFake(function(settings) {
|
|
_.result(settings, 'error');
|
|
});
|
|
|
|
state.config.transcriptLanguages = {};
|
|
state.videoType = 'html5';
|
|
|
|
Caption.fetchCaption();
|
|
|
|
expect(Caption.fetchAvailableTranslations).not.toHaveBeenCalled();
|
|
expect(Caption.hideCaptions.calls.mostRecent().args[0]).toEqual(true);
|
|
expect(Caption.fetchCaption.calls.mostRecent().args[0]).toEqual(true);
|
|
expect(Caption.fetchCaption.calls.count()).toEqual(2);
|
|
expect(Caption.hideClosedCaptions.calls.count()).toEqual(1);
|
|
});
|
|
|
|
msg = 'on success: when fetchCaption called with fetch_with_youtubeId to '
|
|
+ 'get transcript with youtubeId for html5';
|
|
it(msg, function() {
|
|
spyOn(Caption, 'fetchAvailableTranslations');
|
|
spyOn(Caption, 'fetchCaption').and.callThrough();
|
|
|
|
Caption.loaded = true;
|
|
state.config.transcriptLanguages = {};
|
|
state.videoType = 'html5';
|
|
|
|
Caption.fetchCaption(true);
|
|
|
|
expect(Caption.fetchAvailableTranslations).not.toHaveBeenCalled();
|
|
expect($.ajaxWithPrefix.calls.mostRecent().args[0].data)
|
|
.toEqual({videoId: 'Z5KLxerq05Y'});
|
|
expect(Caption.hideCaptions).toHaveBeenCalledWith(false);
|
|
expect(Caption.fetchCaption.calls.mostRecent().args[0]).toEqual(true);
|
|
expect(Caption.fetchCaption.calls.count()).toEqual(1);
|
|
});
|
|
|
|
msg = 'on error: fetch available translations if there are '
|
|
+ 'additional transcripts';
|
|
it(msg, function() {
|
|
$.ajax
|
|
.and.callFake(function(settings) {
|
|
_.result(settings, 'error');
|
|
});
|
|
|
|
state.config.transcriptLanguages = {
|
|
en: 'English',
|
|
uk: 'Ukrainian'
|
|
};
|
|
|
|
spyOn(Caption, 'fetchAvailableTranslations');
|
|
Caption.fetchCaption();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalled();
|
|
expect(Caption.fetchAvailableTranslations).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe('fetchAvailableTranslations', function() {
|
|
var Caption, msg;
|
|
|
|
beforeEach(function() {
|
|
state = jasmine.initializePlayer();
|
|
Caption = state.videoCaption;
|
|
spyOn($, 'ajaxWithPrefix').and.callThrough();
|
|
spyOn(Caption, 'hideCaptions');
|
|
spyOn(Caption, 'fetchCaption');
|
|
spyOn(Caption, 'renderLanguageMenu');
|
|
});
|
|
|
|
it('request created with correct parameters', function() {
|
|
Caption.fetchAvailableTranslations();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalledWith({
|
|
url: '/transcript/available_translations',
|
|
notifyOnError: false,
|
|
success: jasmine.any(Function),
|
|
error: jasmine.any(Function)
|
|
});
|
|
});
|
|
|
|
msg = 'on success: language menu is rendered if translations available';
|
|
it(msg, function() {
|
|
state.config.transcriptLanguages = {
|
|
en: 'English',
|
|
uk: 'Ukrainian',
|
|
de: 'German'
|
|
};
|
|
Caption.fetchAvailableTranslations();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalled();
|
|
expect(state.config.transcriptLanguages).toEqual({
|
|
uk: 'Ukrainian',
|
|
de: 'German'
|
|
});
|
|
expect(Caption.renderLanguageMenu).toHaveBeenCalledWith({
|
|
uk: 'Ukrainian',
|
|
de: 'German'
|
|
});
|
|
});
|
|
|
|
msg = 'on success: language menu isn\'t rendered if translations unavailable';
|
|
it(msg, function() {
|
|
state.config.transcriptLanguages = {
|
|
en: 'English',
|
|
ru: 'Russian'
|
|
};
|
|
Caption.fetchAvailableTranslations();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalled();
|
|
expect(state.config.transcriptLanguages).toEqual({});
|
|
expect(Caption.renderLanguageMenu).not.toHaveBeenCalled();
|
|
});
|
|
|
|
msg = 'on error: transcripts are hidden if there are no transcript';
|
|
it(msg, function() {
|
|
$.ajax.and.callFake(function(settings) {
|
|
_.result(settings, 'error');
|
|
});
|
|
Caption.fetchAvailableTranslations();
|
|
|
|
expect($.ajaxWithPrefix).toHaveBeenCalled();
|
|
expect(Caption.hideCaptions).toHaveBeenCalledWith(true);
|
|
expect(Caption.languageChooserEl).toBeHidden();
|
|
});
|
|
});
|
|
|
|
describe('play', function() {
|
|
describe('when the transcript was not rendered', function() {
|
|
beforeEach(function(done) {
|
|
window.onTouchBasedDevice.and.returnValue(['iPad']);
|
|
|
|
state = jasmine.initializePlayer();
|
|
state.videoCaption.play();
|
|
|
|
jasmine.waitUntil(function() {
|
|
return state.videoCaption.rendered;
|
|
}).then(function() {
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('render the transcript', function() {
|
|
var captionsData;
|
|
|
|
captionsData = jasmine.stubbedCaption;
|
|
|
|
$('.subtitles li span[data-index]').each(
|
|
function(index, item) {
|
|
expect(parseIntAttribute($(item), 'data-index')).toEqual(index);
|
|
expect(parseIntAttribute($(item), 'data-start')).toEqual(captionsData.start[index]);
|
|
expect($(item).attr('tabindex')).toEqual('0');
|
|
expect($(item).text().trim()).toEqual(captionsData.text[index]);
|
|
});
|
|
});
|
|
|
|
it('add a padding element to transcript', function() {
|
|
expect($('.subtitles li:first')).toHaveClass('spacing');
|
|
expect($('.subtitles li:last')).toHaveClass('spacing');
|
|
});
|
|
|
|
it('set rendered to true', function() {
|
|
expect(state.videoCaption.rendered).toBeTruthy();
|
|
});
|
|
|
|
it('set playing to true', function() {
|
|
expect(state.videoCaption.playing).toBeTruthy();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('pause', function() {
|
|
beforeEach(function() {
|
|
state = jasmine.initializePlayer();
|
|
state.videoCaption.playing = true;
|
|
state.videoCaption.pause();
|
|
});
|
|
|
|
it('set playing to false', function() {
|
|
expect(state.videoCaption.playing).toBeFalsy();
|
|
});
|
|
});
|
|
|
|
describe('updatePlayTime', function() {
|
|
beforeEach(function(done) {
|
|
state = jasmine.initializePlayer();
|
|
|
|
jasmine.waitUntil(function() {
|
|
return state.videoCaption.rendered;
|
|
}).then(done);
|
|
});
|
|
|
|
describe('when the video speed is 1.0x', function() {
|
|
it('search the caption based on time', function() {
|
|
state.videoCaption.updatePlayTime(25.000);
|
|
expect(state.videoCaption.currentIndex).toEqual(5);
|
|
|
|
// Flash mode
|
|
spyOn(state, 'isFlashMode').and.returnValue(true);
|
|
state.speed = '1.0';
|
|
state.videoCaption.updatePlayTime(25.000);
|
|
expect(state.videoCaption.currentIndex).toEqual(5);
|
|
});
|
|
});
|
|
|
|
describe('when the video speed is not 1.0x', function() {
|
|
it('search the transcript based on 1.0x speed', function() {
|
|
state.videoCaption.updatePlayTime(25.000);
|
|
expect(state.videoCaption.currentIndex).toEqual(5);
|
|
|
|
// To test speed, don't use start / end times.
|
|
state.config.startTime = 0;
|
|
state.config.endTime = null;
|
|
|
|
// Flash mode
|
|
state.speed = '2.0';
|
|
spyOn(state, 'isFlashMode').and.returnValue(true);
|
|
state.videoCaption.updatePlayTime(25.000);
|
|
expect(state.videoCaption.currentIndex).toEqual(9);
|
|
state.speed = '0.75';
|
|
state.videoCaption.updatePlayTime(25.000);
|
|
expect(state.videoCaption.currentIndex).toEqual(3);
|
|
});
|
|
});
|
|
|
|
describe('when the index is not the same', function() {
|
|
beforeEach(function() {
|
|
state.videoCaption.currentIndex = 1;
|
|
$('.subtitles li span[data-index=5]').addClass('current');
|
|
state.videoCaption.updatePlayTime(25.000);
|
|
});
|
|
|
|
it('deactivate the previous transcript', function() {
|
|
expect($('.subtitles li span[data-index=1]'))
|
|
.not.toHaveClass('current');
|
|
});
|
|
|
|
it('activate new transcript', function() {
|
|
expect($('.subtitles li span[data-index=5]'))
|
|
.toHaveClass('current');
|
|
});
|
|
|
|
it('save new index', function() {
|
|
expect(state.videoCaption.currentIndex).toEqual(5);
|
|
});
|
|
|
|
it('scroll transcript to new position', function() {
|
|
expect($.fn.scrollTo).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe('when the index is the same', function() {
|
|
it('does not change current subtitle', function() {
|
|
state.videoCaption.currentIndex = 1;
|
|
$('.subtitles li span[data-index=3]').addClass('current');
|
|
state.videoCaption.updatePlayTime(15.000);
|
|
expect($('.subtitles li span[data-index=3]'))
|
|
.toHaveClass('current');
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('resize', function() {
|
|
beforeEach(function(done) {
|
|
state = jasmine.initializePlayer();
|
|
|
|
jasmine.waitUntil(function() {
|
|
return state.videoCaption.rendered;
|
|
}).then(function() {
|
|
$('.subtitles li span[data-index=1]').addClass('current');
|
|
state.videoCaption.onResize();
|
|
}).always(done);
|
|
});
|
|
|
|
describe('set the height of transcript container', function() {
|
|
it('when transcript button is enabled', function() {
|
|
var realHeight = parseInt(
|
|
$('.subtitles').css('maxHeight'), 10
|
|
),
|
|
shouldBeHeight = $('.video-wrapper').height();
|
|
|
|
// Because of some problems with rounding on different
|
|
// environments: Linux * Mac * FF * Chrome
|
|
expect(realHeight).toBeCloseTo(shouldBeHeight, 2);
|
|
});
|
|
|
|
it('when transcript button is disabled ', function() {
|
|
var realHeight, videoWrapperHeight, progressSliderHeight,
|
|
controlHeight, shouldBeHeight;
|
|
|
|
state.captionsHidden = true;
|
|
state.videoCaption.setSubtitlesHeight();
|
|
|
|
realHeight = parseInt(
|
|
$('.subtitles').css('maxHeight'), 10
|
|
);
|
|
videoWrapperHeight = $('.video-wrapper').height();
|
|
progressSliderHeight = state.el.find('.slider').height();
|
|
controlHeight = state.el.find('.video-controls').height();
|
|
shouldBeHeight = parseInt((
|
|
videoWrapperHeight
|
|
- 0.5 * progressSliderHeight
|
|
- controlHeight
|
|
), 10);
|
|
|
|
expect(realHeight).toBe(shouldBeHeight);
|
|
});
|
|
});
|
|
|
|
it('set the height of transcript spacing', function() {
|
|
var firstSpacing, lastSpacing;
|
|
|
|
firstSpacing = Math.abs(parseInt(
|
|
$('.subtitles .spacing:first').css('height'), 10
|
|
));
|
|
lastSpacing = Math.abs(parseInt(
|
|
$('.subtitles .spacing:last').css('height'), 10
|
|
));
|
|
|
|
expect(firstSpacing - state.videoCaption.topSpacingHeight())
|
|
.toBeLessThan(1);
|
|
expect(lastSpacing - state.videoCaption.bottomSpacingHeight())
|
|
.toBeLessThan(1);
|
|
});
|
|
|
|
it('scroll transcript to new position', function() {
|
|
expect($.fn.scrollTo).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
xdescribe('scrollCaption', function() {
|
|
beforeEach(function() {
|
|
runs(function() {
|
|
state = jasmine.initializePlayer();
|
|
});
|
|
|
|
waitsFor(function() {
|
|
return state.videoCaption.rendered;
|
|
}, 'Transcripts are not rendered', WAIT_TIMEOUT);
|
|
});
|
|
|
|
describe('when frozen', function() {
|
|
it('does not scroll the transcript', function() {
|
|
runs(function() {
|
|
state.videoCaption.frozen = true;
|
|
$('.subtitles li span[data-index=1]').addClass('current');
|
|
state.videoCaption.scrollCaption();
|
|
expect($.fn.scrollTo).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when not frozen', function() {
|
|
beforeEach(function() {
|
|
runs(function() {
|
|
state.videoCaption.frozen = false;
|
|
});
|
|
});
|
|
|
|
describe('when there is no current transcript', function() {
|
|
it('does not scroll the transcript', function() {
|
|
runs(function() {
|
|
state.videoCaption.scrollCaption();
|
|
expect($.fn.scrollTo).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when there is a current transcript', function() {
|
|
it('scroll to current transcript', function() {
|
|
runs(function() {
|
|
$('.subtitles li span[data-index=1]').addClass('current');
|
|
state.videoCaption.scrollCaption();
|
|
expect($.fn.scrollTo).toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
xdescribe('seekPlayer', function() {
|
|
beforeEach(function() {
|
|
runs(function() {
|
|
state = jasmine.initializePlayer();
|
|
});
|
|
|
|
waitsFor(function() {
|
|
var duration = state.videoPlayer.duration(),
|
|
isRendered = state.videoCaption.rendered;
|
|
|
|
return isRendered && duration;
|
|
}, 'Transcripts are not rendered', WAIT_TIMEOUT);
|
|
});
|
|
|
|
describe('when the video speed is 1.0x', function() {
|
|
it('trigger seek event with the correct time', function() {
|
|
runs(function() {
|
|
state.videoSpeedControl.currentSpeed = '1.0';
|
|
$('.subtitles li span[data-start="14910"]').trigger('click');
|
|
expect(state.videoPlayer.currentTime).toEqual(14.91);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when the video speed is not 1.0x', function() {
|
|
it('trigger seek event with the correct time', function() {
|
|
runs(function() {
|
|
state.videoSpeedControl.currentSpeed = '0.75';
|
|
$('.subtitles li span[data-start="14910"]').trigger('click');
|
|
expect(state.videoPlayer.currentTime).toEqual(14.91);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when the player type is Flash at speed 0.75x',
|
|
function() {
|
|
it('trigger seek event with the correct time', function() {
|
|
runs(function() {
|
|
state.videoSpeedControl.currentSpeed = '0.75';
|
|
state.currentPlayerMode = 'flash';
|
|
$('.subtitles li span[data-start="14910"]').trigger('click');
|
|
expect(state.videoPlayer.currentTime).toEqual(15);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('toggleTranscript', function() {
|
|
beforeEach(function() {
|
|
state = jasmine.initializePlayer();
|
|
$('.subtitles li span[data-index=1]').addClass('current');
|
|
});
|
|
|
|
describe('when the transcript is visible', function() {
|
|
beforeEach(function() {
|
|
state.el.removeClass('closed');
|
|
state.videoCaption.toggleTranscript(jQuery.Event('click'));
|
|
});
|
|
|
|
it('hide the transcript', function() {
|
|
expect(state.el).toHaveClass('closed');
|
|
});
|
|
});
|
|
|
|
describe('when the transcript is hidden', function() {
|
|
beforeEach(function() {
|
|
state.el.addClass('closed');
|
|
state.videoCaption.toggleTranscript(jQuery.Event('click'));
|
|
jasmine.clock().install();
|
|
});
|
|
|
|
afterEach(function() {
|
|
jasmine.clock().uninstall();
|
|
});
|
|
|
|
it('show the transcript', function() {
|
|
expect(state.el).not.toHaveClass('closed');
|
|
});
|
|
|
|
// Test turned off due to flakiness (11/25/13)
|
|
xit('scroll the transcript', function() {
|
|
// After transcripts are shown, and the video plays for a
|
|
// bit.
|
|
jasmine.clock().tick(1000);
|
|
|
|
// The transcripts should have advanced by at least one
|
|
// position. When they advance, the list scrolls. The
|
|
// current transcript position should be constantly
|
|
// visible.
|
|
runs(function() {
|
|
expect($.fn.scrollTo).toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('transcript accessibility', function() {
|
|
beforeEach(function(done) {
|
|
state = jasmine.initializePlayer();
|
|
|
|
jasmine.waitUntil(function() {
|
|
return state.videoCaption.rendered;
|
|
}).then(done);
|
|
});
|
|
|
|
describe('when getting focus through TAB key', function() {
|
|
beforeEach(function() {
|
|
state.videoCaption.isMouseFocus = false;
|
|
$('.subtitles li span[data-index=0]').trigger(
|
|
jQuery.Event('focus')
|
|
);
|
|
});
|
|
|
|
it('shows an outline around the transcript', function() {
|
|
expect($('.subtitles span[data-index=0]').parent())
|
|
.toHaveClass('focused');
|
|
});
|
|
|
|
it('has automatic scrolling disabled', function() {
|
|
expect(state.videoCaption.autoScrolling).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe('when loosing focus through TAB key', function() {
|
|
beforeEach(function() {
|
|
$('.subtitles li span[data-index=0]').trigger(
|
|
jQuery.Event('blur')
|
|
);
|
|
});
|
|
|
|
it('does not show an outline around the transcript', function() {
|
|
expect($('.subtitles li span[data-index=0]'))
|
|
.not.toHaveClass('focused');
|
|
});
|
|
|
|
it('has automatic scrolling enabled', function() {
|
|
expect(state.videoCaption.autoScrolling).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe(
|
|
'when same transcript gets the focus through mouse after '
|
|
+ 'having focus through TAB key',
|
|
function() {
|
|
beforeEach(function() {
|
|
state.videoCaption.isMouseFocus = false;
|
|
$('.subtitles li span[data-index=0]')
|
|
.trigger(jQuery.Event('focus'));
|
|
$('.subtitles li span[data-index=0]')
|
|
.trigger(jQuery.Event('mousedown'));
|
|
});
|
|
|
|
it('does not show an outline around it', function() {
|
|
expect($('.subtitles li span[data-index=0]'))
|
|
.not.toHaveClass('focused');
|
|
});
|
|
|
|
it('has automatic scrolling enabled', function() {
|
|
expect(state.videoCaption.autoScrolling).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe(
|
|
'when a second transcript gets focus through mouse after '
|
|
+ 'first had focus through TAB key',
|
|
function() {
|
|
var $subDataLiIdx0, $subDataLiIdx1;
|
|
|
|
beforeEach(function() {
|
|
$subDataLiIdx0 = $('.subtitles li span[data-index=0]');
|
|
$subDataLiIdx1 = $('.subtitles li span[data-index=1]');
|
|
|
|
state.videoCaption.isMouseFocus = false;
|
|
|
|
$subDataLiIdx0.trigger(jQuery.Event('focus'));
|
|
$subDataLiIdx0.trigger(jQuery.Event('blur'));
|
|
|
|
state.videoCaption.isMouseFocus = true;
|
|
|
|
$subDataLiIdx1.trigger(jQuery.Event('mousedown'));
|
|
});
|
|
|
|
it('does not show an outline around the first', function() {
|
|
expect($subDataLiIdx0).not.toHaveClass('focused');
|
|
});
|
|
|
|
it('does not show an outline around the second', function() {
|
|
expect($subDataLiIdx1).not.toHaveClass('focused');
|
|
});
|
|
|
|
it('has automatic scrolling enabled', function() {
|
|
expect(state.videoCaption.autoScrolling).toBe(true);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
}).call(this);
|