Merge pull request #1236 from edx/christina/course-updates-bug

Don't remove course update when clicking outside modal.

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

@@ -10,6 +10,7 @@ define ["js/views/course_info_handout", "js/views/course_info_update", "js/model
                      </div>
                      <div class="sidebar window course-handouts" id="course-handouts-view"></div>
                      </div>
+                     <div class="modal-cover"></div>
                      """
 
     beforeEach ->
@@ -45,13 +46,56 @@ define ["js/views/course_info_handout", "js/views/course_info_update", "js/model
                 preventDefault : () -> 'no op'
             }
 
-            @createNewUpdate = () ->
+            @createNewUpdate = (text) ->
                 # Edit button is not in the template under test (it is in parent HTML).
                 # Therefore call onNew directly.
                 @courseInfoEdit.onNew(@event)
-                spyOn(@courseInfoEdit.$codeMirror, 'getValue').andReturn('/static/image.jpg')
+                spyOn(@courseInfoEdit.$codeMirror, 'getValue').andReturn(text)
                 @courseInfoEdit.$el.find('.save-button').click()
 
+            @cancelNewCourseInfo = (useCancelButton) ->
+                spyOn(@courseInfoEdit.$modalCover, 'show').andCallThrough()
+                spyOn(@courseInfoEdit.$modalCover, 'hide').andCallThrough()
+
+                @courseInfoEdit.onNew(@event)
+                expect(@courseInfoEdit.$modalCover.show).toHaveBeenCalled()
+
+                spyOn(@courseInfoEdit.$codeMirror, 'getValue').andReturn('unsaved changes')
+                model = @collection.at(0)
+                spyOn(model, "save").andCallThrough()
+
+                cancelEditingUpdate(useCancelButton)
+
+                expect(@courseInfoEdit.$modalCover.hide).toHaveBeenCalled()
+                expect(model.save).not.toHaveBeenCalled()
+                previewContents = @courseInfoEdit.$el.find('.update-contents').html()
+                expect(previewContents).not.toEqual('unsaved changes')
+
+            @cancelExistingCourseInfo = (useCancelButton) ->
+                @createNewUpdate('existing update')
+
+                spyOn(@courseInfoEdit.$modalCover, 'show').andCallThrough()
+                spyOn(@courseInfoEdit.$modalCover, 'hide').andCallThrough()
+                @courseInfoEdit.$el.find('.edit-button').click()
+                expect(@courseInfoEdit.$modalCover.show).toHaveBeenCalled()
+
+                spyOn(@courseInfoEdit.$codeMirror, 'getValue').andReturn('modification')
+                model = @collection.at(0)
+                spyOn(model, "save").andCallThrough()
+
+                cancelEditingUpdate(useCancelButton)
+
+                expect(@courseInfoEdit.$modalCover.hide).toHaveBeenCalled()
+                expect(model.save).not.toHaveBeenCalled()
+                previewContents = @courseInfoEdit.$el.find('.update-contents').html()
+                expect(previewContents).toEqual('existing update')
+
+            cancelEditingUpdate = (update, useCancelButton) ->
+                if useCancelButton
+                    update.$el.find('.cancel-button').click()
+                else
+                    $('.modal-cover').click()
+
         afterEach ->
             @xhrRestore()
 
@@ -75,19 +119,30 @@ define ["js/views/course_info_handout", "js/views/course_info_update", "js/model
 
         it "does rewrite links for preview", ->
             # Create a new update.
-            @createNewUpdate()
+            @createNewUpdate('/static/image.jpg')
 
             # Verify the link is rewritten for preview purposes.
             previewContents = @courseInfoEdit.$el.find('.update-contents').html()
             expect(previewContents).toEqual('base-asset-url/image.jpg')
 
         it "shows static links in edit mode", ->
-            @createNewUpdate()
+            @createNewUpdate('/static/image.jpg')
 
             # Click edit and verify CodeMirror contents.
             @courseInfoEdit.$el.find('.edit-button').click()
             expect(@courseInfoEdit.$codeMirror.getValue()).toEqual('/static/image.jpg')
 
+        it "removes newly created course info on cancel", ->
+            @cancelNewCourseInfo(true)
+
+        it "removes newly created course info on click outside modal", ->
+            @cancelNewCourseInfo(false)
+
+        it "does not remove existing course info on cancel", ->
+            @cancelExistingCourseInfo(true)
+
+        it "does not remove existing course info on click outside modal", ->
+            @cancelExistingCourseInfo(false)
 
     describe "Course Handouts", ->
         handoutsTemplate = readFixtures('course_info_handouts.underscore')

cms/static/js/views/course_info_update.js

@@ -2,7 +2,6 @@ define(["backbone", "underscore", "codemirror", "js/models/course_update",
     "js/views/feedback_prompt", "js/views/feedback_notification", "js/views/course_info_helper"],
     function(Backbone, _, CodeMirror, CourseUpdateModel, PromptView, NotificationView, CourseInfoHelper) {
 
-    var $modalCover = $(".modal-cover");
     var CourseInfoUpdateView = Backbone.View.extend({
         // collection is CourseUpdateCollection
         events: {
@@ -18,6 +17,8 @@ define(["backbone", "underscore", "codemirror", "js/models/course_update",
             this.render();
             // when the client refetches the updates as a whole, re-render them
             this.listenTo(this.collection, 'reset', this.render);
+
+            this.$modalCover = $(".modal-cover");
         },
 
         render: function () {
@@ -63,8 +64,8 @@ define(["backbone", "underscore", "codemirror", "js/models/course_update",
             $newForm.addClass('editing');
             this.$currentPost = $newForm.closest('li');
 
-            $modalCover.show();
-            $modalCover.bind('click', function() {
+            this.$modalCover.show();
+            this.$modalCover.bind('click', function() {
                 self.closeEditor(true);
             });
 
@@ -120,9 +121,9 @@ define(["backbone", "underscore", "codemirror", "js/models/course_update",
             this.$codeMirror = CourseInfoHelper.editWithCodeMirror(
                 targetModel, 'content', self.options['base_asset_url'], $textArea.get(0));
 
-            $modalCover.show();
-            $modalCover.bind('click', function() {
-                self.closeEditor(self);
+            this.$modalCover.show();
+            this.$modalCover.bind('click', function() {
+                self.closeEditor(false);
             });
         },
 
@@ -197,8 +198,8 @@ define(["backbone", "underscore", "codemirror", "js/models/course_update",
                 this.$currentPost.find('.CodeMirror').remove();
             }
 
-            $modalCover.unbind('click');
-            $modalCover.hide();
+            this.$modalCover.unbind('click');
+            this.$modalCover.hide();
             this.$codeMirror = null;
         },