Show error on invalid html in course handout edit + Added tests

STUD-293

cms/djangoapps/contentstore/features/course-updates.feature

@@ -76,3 +76,17 @@ Feature: CMS.Course updates
         Then I see the handout "/c4x/MITx/999/asset/modified.jpg"
         And when I reload the page
         Then I see the handout "/c4x/MITx/999/asset/modified.jpg"
+
+    Scenario: Users cannot save handouts with bad html until edit or update it properly
+        Given I have opened a new course in Studio
+        And I go to the course updates page
+        When I modify the handout to "<p><a href=>[LINK TEXT]</a></p>"
+        Then I see the handout error text
+        And I see handout save button disabled
+        When I edit the handout to "<p><a href='https://www.google.com.pk/'>home</a></p>"
+        Then I see handout save button re-enabled
+        When I save handout edit
+        # Can only do partial text matches because of the quotes with in quotes (and regexp step matching).
+        Then I see the handout "https://www.google.com.pk/"
+        And when I reload the page
+        Then I see the handout "https://www.google.com.pk/"

cms/djangoapps/contentstore/features/course-updates.py

@@ -90,6 +90,35 @@ def check_handout(_step, handout):
     assert handout in world.css_html(handout_css)
 
 
+@step(u'I see the handout error text')
+def check_handout_error(_step):
+    handout_error_css = 'div#handout_error'
+    assert world.css_has_class(handout_error_css, 'is-shown')
+
+
+@step(u'I see handout save button disabled')
+def check_handout_error(_step):
+    handout_save_button = 'form.edit-handouts-form a.save-button'
+    assert world.css_has_class(handout_save_button, 'is-disabled')
+
+
+@step(u'I edit the handout to "([^"]*)"$')
+def edit_handouts(_step, text):
+    type_in_codemirror(0, text)
+
+
+@step(u'I see handout save button re-enabled')
+def check_handout_error(_step):
+    handout_save_button = 'form.edit-handouts-form a.save-button'
+    assert not world.css_has_class(handout_save_button, 'is-disabled')
+
+
+@step(u'I save handout edit')
+def check_handout_error(_step):
+    save_css = 'a.save-button'
+    world.css_click(save_css)
+
+
 def change_text(text):
     type_in_codemirror(0, text)
     save_css = 'a.save-button'

cms/static/coffee/spec/views/course_info_spec.coffee

@@ -196,3 +196,22 @@ define ["js/views/course_info_handout", "js/views/course_info_update", "js/model
             @handoutsEdit.$el.find('.edit-button').click()
             expect(@handoutsEdit.$codeMirror.getValue().trim()).toEqual('/static/fromServer.jpg')
 
+        it "can open course handouts with bad html on edit", ->
+            # Enter some bad html in handouts section, verifying that the
+            # model/handoutform opens when "Edit" is clicked
+
+            @model = new ModuleInfo({
+                id: 'handouts-id',
+                data: '<p><a href="[URL OF FILE]>[LINK TEXT]</a></p>'
+            })
+            @handoutsEdit = new CourseInfoHandoutsView({
+                el: $('#course-handouts-view'),
+                model: @model,
+                base_asset_url: 'base-asset-url/'
+            });
+            @handoutsEdit.render()
+
+            expect($('.edit-handouts-form').is(':hidden')).toEqual(true)
+            @handoutsEdit.$el.find('.edit-button').click()
+            expect(@handoutsEdit.$codeMirror.getValue()).toEqual('<p><a href="[URL OF FILE]>[LINK TEXT]</a></p>')
+            expect($('.edit-handouts-form').is(':hidden')).toEqual(false)
\ No newline at end of file

cms/static/js/views/course_info_handout.js

@@ -30,6 +30,7 @@ define(["backbone", "underscore", "codemirror", "js/views/feedback_notification"
                     model: this.model
                 }))
             );
+            $('.handouts-content').html(this.model.get('data'));
             this.$preview = this.$el.find('.handouts-content');
             this.$form = this.$el.find(".edit-handouts-form");
             this.$editor = this.$form.find('.handouts-content-editor');
@@ -50,32 +51,43 @@ define(["backbone", "underscore", "codemirror", "js/views/feedback_notification"
         },
 
         onSave: function(event) {
-            this.model.set('data', this.$codeMirror.getValue());
-            var saving = new NotificationView.Mini({
-                title: gettext('Saving…')
-            });
-            saving.show();
-            this.model.save({}, {
-                success: function() {
-                    saving.hide();
-                }
-            });
-            this.render();
-            this.$form.hide();
-            this.closeEditor();
-
-            analytics.track('Saved Course Handouts', {
-                'course': course_location_analytics
-            });
+            $('#handout_error').removeClass('is-shown');
+            $('.save-button').removeClass('is-disabled');
+            if ($('.CodeMirror-lines').find('.cm-error').length == 0){
+                this.model.set('data', this.$codeMirror.getValue());
+                var saving = new NotificationView.Mini({
+                    title: gettext('Saving…')
+                });
+                saving.show();
+                this.model.save({}, {
+                    success: function() {
+                        saving.hide();
+                    }
+                });
+                this.render();
+                this.$form.hide();
+                this.closeEditor();
 
+                analytics.track('Saved Course Handouts', {
+                    'course': course_location_analytics
+                });
+            }else{
+                $('#handout_error').addClass('is-shown');
+                $('.save-button').addClass('is-disabled');
+                event.preventDefault();
+            }
         },
 
         onCancel: function(event) {
+            $('#handout_error').removeClass('is-shown');
+            $('.save-button').removeClass('is-disabled');
             this.$form.hide();
             this.closeEditor();
         },
 
         closeEditor: function() {
+            $('#handout_error').removeClass('is-shown');
+            $('.save-button').removeClass('is-disabled');
             this.$form.hide();
             ModalUtils.hideModalCover();
             this.$form.find('.CodeMirror').remove();

cms/static/js/views/course_info_helper.js

@@ -6,7 +6,10 @@ define(["codemirror", "utility"],
             var $codeMirror = CodeMirror.fromTextArea(textArea, {
                 mode: "text/html",
                 lineNumbers: true,
-                lineWrapping: true
+                lineWrapping: true,
+                onChange: function () {
+                    $('.save-button').removeClass('is-disabled');
+                }
             });
             $codeMirror.setValue(content);
             $codeMirror.clearHistory();

cms/templates/js/course_info_handouts.underscore

@@ -3,12 +3,13 @@
 <h2 class="title">Course Handouts</h2>
 <%if (model.get('data') != null) { %>
   <div class="handouts-content">
-    <%= model.get('data') %>
+
   </div>
 <% } else {%>
   <p>${_("You have no handouts defined")}</p>
 <% } %>
 <form class="edit-handouts-form" style="display: block;">
+  <div class="message message-status error" name="handout_html_error" id="handout_error"><%=gettext("There is invalid code in your content. Please check to make sure it is valid HTML.")%></div>
   <div class="row">
     <textarea class="handouts-content-editor text-editor"></textarea>
   </div>