Add JS tests

cms/static/cms/js/spec/main.js

@@ -259,6 +259,7 @@
         'js/spec/views/previous_video_upload_spec',
         'js/spec/views/video_thumbnail_spec',
         'js/spec/views/course_video_settings_spec',
+        'js/spec/views/video_transcripts_spec',
         'js/spec/views/previous_video_upload_list_spec',
         'js/spec/views/assets_spec',
         'js/spec/views/baseview_spec',

cms/static/js/spec/views/video_transcripts_spec.js

+define(
+    ['jquery', 'underscore', 'backbone', 'js/views/video_transcripts', 'common/js/spec_helpers/template_helpers'],
+    function($, _, Backbone, VideoTranscriptsView, TemplateHelpers) {
+        'use strict';
+        describe('VideoTranscriptsView', function() {
+            var $videoTranscriptsViewEl,
+                videoTranscriptsView,
+                renderView,
+                transcripts = {
+                    en: 'English',
+                    es: 'Spanish',
+                    ur: 'Urdu'
+                },
+                edxVideoID = 'test-edx-video-id',
+                clientVideoID = 'Video client title name.mp4',
+                transcriptAvailableLanguages = {
+                    en: 'English',
+                    es: 'Spanish',
+                    cn: 'Chinese',
+                    ar: 'Arabic',
+                    ur: 'Urdu'
+                },
+                videoSupportedFileFormats = ['.mov', '.mp4'],
+                TRANSCRIPT_DOWNLOAD_FILE_FORMAT = 'srt';
+
+            renderView = function(availableTranscripts) {
+                videoTranscriptsView = new VideoTranscriptsView({
+                    transcripts: availableTranscripts,
+                    edxVideoID: edxVideoID,
+                    clientVideoID: clientVideoID,
+                    transcriptAvailableLanguages: transcriptAvailableLanguages,
+                    videoSupportedFileFormats: videoSupportedFileFormats
+                });
+                videoTranscriptsView.setElement($('.transcripts-col'));
+                $videoTranscriptsViewEl = videoTranscriptsView.render().$el;
+            };
+
+            beforeEach(function() {
+                setFixtures(
+                    '<div class="video-col transcripts-col"></div>'
+                );
+                TemplateHelpers.installTemplate('video-transcripts');
+                renderView(transcripts);
+            });
+
+            it('renders as expected', function() {
+                expect($videoTranscriptsViewEl.find('.show-video-transcripts-container')).toExist();
+            });
+
+            it('does not shows transcripts', function() {
+                expect(
+                    $videoTranscriptsViewEl.find('.show-video-transcripts-wrapper').hasClass('hidden')
+                ).toEqual(true);
+                expect($videoTranscriptsViewEl.find('.toggle-show-transcripts-button-text').html().trim()).toEqual(
+                    'Show transcripts (' + _.size(transcripts) + ')'
+                );
+            });
+
+            it('shows transcripts container on show transcript button click', function() {
+                // Verify transcript container is hidden
+                expect(
+                    $videoTranscriptsViewEl.find('.show-video-transcripts-wrapper').hasClass('hidden')
+                ).toEqual(true);
+
+                // Verify initial button text
+                expect($videoTranscriptsViewEl.find('.toggle-show-transcripts-button-text').html().trim()).toEqual(
+                    'Show transcripts (' + _.size(transcripts) + ')'
+                );
+                $videoTranscriptsViewEl.find('.toggle-show-transcripts-button').click();
+
+                // Verify transcript container is not hidden
+                expect(
+                    $videoTranscriptsViewEl.find('.show-video-transcripts-wrapper').hasClass('hidden')
+                ).toEqual(false);
+
+                // Verify button text is changed.
+                expect($videoTranscriptsViewEl.find('.toggle-show-transcripts-button-text').html().trim()).toEqual(
+                    'Hide transcripts (' + _.size(transcripts) + ')'
+                );
+            });
+
+            it('hides transcripts when clicked on hide transcripts button', function() {
+                // Click to show transcripts first.
+                $videoTranscriptsViewEl.find('.toggle-show-transcripts-button').click();
+
+                // Verify button text.
+                expect($videoTranscriptsViewEl.find('.toggle-show-transcripts-button-text').html().trim()).toEqual(
+                    'Hide transcripts (' + _.size(transcripts) + ')'
+                );
+
+                // Verify transcript container is not hidden
+                expect(
+                    $videoTranscriptsViewEl.find('.show-video-transcripts-wrapper').hasClass('hidden')
+                ).toEqual(false);
+
+                $videoTranscriptsViewEl.find('.toggle-show-transcripts-button').click();
+
+                // Verify button text is changed.
+                expect($videoTranscriptsViewEl.find('.toggle-show-transcripts-button-text').html().trim()).toEqual(
+                    'Show transcripts (' + _.size(transcripts) + ')'
+                );
+
+                // Verify transcript container is hidden
+                expect(
+                    $videoTranscriptsViewEl.find('.show-video-transcripts-wrapper').hasClass('hidden')
+                ).toEqual(true);
+            });
+
+            it('renders appropriate text when no transcript is available', function() {
+                // Render view with no transcripts
+                renderView({});
+
+                // Verify appropriate text is shown
+                expect(
+                    $videoTranscriptsViewEl.find('.transcripts-empty-text').html()
+                ).toEqual('No transcript available yet.');
+            });
+
+            it('renders correct transcript attributes', function() {
+                var $transcriptEl;
+                // Show transcripts
+                $videoTranscriptsViewEl.find('.toggle-show-transcripts-button').click();
+                expect($videoTranscriptsViewEl.find('.show-video-transcript-content').length).toEqual(
+                    _.size(transcripts)
+                );
+
+                _.each(transcripts, function(langaugeText, languageCode) {
+                    $transcriptEl = $($videoTranscriptsViewEl.find('#show-video-transcript-content-' + languageCode));
+                    // Verify correct transcript title is set.
+                    expect($transcriptEl.find('.transcript-title').html()).toEqual(
+                        'Video client title n_' + languageCode + '.' + TRANSCRIPT_DOWNLOAD_FILE_FORMAT
+                    );
+                    // Verify transcript language dropdown has correct value set.
+                    expect($transcriptEl.find('.transcript-language-menu').val(), languageCode);
+                });
+            });
+        });
+    }
+);

cms/static/js/views/video_transcripts.js

@@ -39,13 +39,12 @@ define(
             Returns transcript title.
             */
             getTranscriptClientTitle: function() {
-                // Use a fixed length tranascript name.
-                var clientTitle = this.clientVideoID.substring(0, 20);
+                var clientTitle = this.clientVideoID;
                 // Remove video file extension for transcript title.
                 _.each(this.videoSupportedFileFormats, function(videoFormat) {
                     clientTitle.replace(videoFormat, '');
                 });
-                return clientTitle;
+                return clientTitle.substring(0, 20);
             },
 
             /*

cms/templates/js/previous-video-upload.underscore

@@ -8,7 +8,7 @@
     <% if (isVideoTranscriptEnabled) { %>
     <div class="video-col transcripts-col"></div>
     <% } %>
-    <div class="video-col status-col"><%- status %> </div>
+    <div class="video-col status-col"><%- status %></div>
     <div class="video-col actions-col">
         <ul class="actions-list">
             <li class="action-item action-remove">

cms/templates/js/video-transcripts.underscore

+<div class='show-video-transcripts-container'>
 <% if (_.size(transcripts)) { %>
     <button class="button-link toggle-show-transcripts-button">
         <strong>
@@ -8,12 +9,12 @@
         </strong>
     </button>
 <% } else { %>
-    <span><%- gettext('No transcript available yet.') %></span>
+    <span class='transcripts-empty-text'><%- gettext('No transcript available yet.') %></span>
 <% }%>
 <div class='show-video-transcripts-wrapper hidden'>
 <% _.each(transcripts, function(transcriptLanguageText, transcriptLanguageCode){ %>
-    <div class='show-video-transcript-content'>
-        <strong><%- StringUtils.interpolate(gettext('{transcriptClientTitle}_{transcriptLanguageCode}.{fileExtension}'), {transcriptClientTitle: transcriptClientTitle, transcriptLanguageCode: transcriptLanguageCode, fileExtension: transcriptDownloadFileFormat}) %></strong>
+    <div id='show-video-transcript-content-<%- transcriptLanguageCode %>' class='show-video-transcript-content'>
+        <strong class='transcript-title'><%- StringUtils.interpolate(gettext('{transcriptClientTitle}_{transcriptLanguageCode}.{fileExtension}'), {transcriptClientTitle: transcriptClientTitle, transcriptLanguageCode: transcriptLanguageCode, fileExtension: transcriptDownloadFileFormat}) %></strong>
         <select id='transcript-language-<%- transcriptLanguageCode %>' class='transcript-language-menu'>
             <option value=''>Select Language</option>
             <% _.each(transcriptAvailableLanguages, function(availableLanguage){ %>
@@ -36,3 +37,4 @@
     </div>
 <% }) %>
 </div>
+</div>