Cancel the new post resets the state of form

When user is creating new post and then cancel it
the data remains in the form which appears when we
click on new post again. The state of form should
be reset.

TNL-148

common/static/coffee/spec/discussion/view/new_post_view_spec.coffee

@@ -4,7 +4,10 @@ describe "NewPostView", ->
         DiscussionSpecHelper.setUpGlobals()
         DiscussionSpecHelper.setUnderscoreFixtures()
         window.$$course_id = "edX/999/test"
-        spyOn(DiscussionUtil, "makeWmdEditor")
+        spyOn(DiscussionUtil, "makeWmdEditor").andCallFake(
+          ($content, $local, cls_identifier) ->
+            $local("." + cls_identifier).html("<textarea></textarea>")
+        )
         @discussion = new Discussion([], {pages: 1})
 
     describe "Drop down works correct", ->
@@ -168,6 +171,79 @@ describe "NewPostView", ->
             $.ajax.reset()
         )
 
+    describe "cancel post resets form ", ->
+      beforeEach ->
+        @course_settings = new DiscussionCourseSettings({
+          "allow_anonymous_to_peers":true,
+          "allow_anonymous":true,
+          "category_map": {
+            "subcategories": {
+              "Week 1": {
+                "subcategories": {},
+                "children": [
+                  "Topic-Level Student-Visible Label"
+                ],
+                "entries": {
+                  "Topic-Level Student-Visible Label": {
+                    "sort_key": null,
+                    "is_cohorted": false,
+                    "id": "2b3a858d0c884eb4b272dbbe3f2ffddd"
+                  }
+                }
+              }
+            },
+            "children": [
+              "General",
+              "Week 1"
+            ],
+            "entries": {
+              "General": {
+                "sort_key": "General",
+                "is_cohorted": false,
+                "id": "i4x-waqastest-waqastest-course-waqastest"
+              }
+            }
+          }
+        })
+
+      checkPostCancelReset = (mode, discussion, course_settings) ->
+        view = new NewPostView(
+          el: $("#fixture-element"),
+          collection: discussion,
+          course_settings: course_settings,
+          mode: mode
+        )
+        view.render()
+        eventSpy = jasmine.createSpy('eventSpy')
+        view.listenTo(view, "newPost:cancel", eventSpy)
+        view.$(".post-errors").html("<li class='post-error'>Title can't be empty</li>")
+        view.$("#tab-post-type-discussion").click()
+        view.$(".js-post-title").val("Test Title")
+        view.$(".js-post-body textarea").val("Test body")
+        view.$(".wmd-preview p").html("Test body")
+        view.$(".js-follow").prop("checked", false)
+        view.$(".js-anon").prop("checked", true)
+        view.$(".js-anon-peers").prop("checked", true)
+        if mode == "tab"
+          view.$("a[data-discussion-id='2b3a858d0c884eb4b272dbbe3f2ffddd']").click()
+        view.$(".cancel").click()
+        expect(eventSpy).toHaveBeenCalled()
+        expect(view.$(".post-errors").html()).toEqual("");
+        expect($("##{mode}-post-type-question").prop("checked")).toBe(true)
+        expect($("##{mode}-post-type-discussion").prop("checked")).toBe(false)
+        expect(view.$(".js-post-title").val()).toEqual("");
+        expect(view.$(".js-post-body textarea").val()).toEqual("");
+        expect(view.$(".js-follow").prop("checked")).toBe(true)
+        expect(view.$(".js-anon").prop("checked")).toBe(false)
+        expect(view.$(".js-anon-peers").prop("checked")).toBe(false)
+        if mode == "tab"
+          expect(view.$(".js-selected-topic").text()).toEqual("General")
+
+      _.each(["tab", "inline"], (mode) =>
+        it "resets the form in #{mode} mode", ->
+          checkPostCancelReset(mode, @discussion, @course_settings)
+      )
+
     it "posts to the correct URL", ->
       topicId = "test_topic"
       spyOn($, "ajax").andCallFake(

common/static/coffee/src/discussion/discussion_module_view.coffee

@@ -7,7 +7,6 @@ if Backbone?
       "click .new-post-btn": "toggleNewPost"
       "keydown .new-post-btn":
         (event) -> DiscussionUtil.activateOnSpace(event, @toggleNewPost)
-      "click .cancel": "hideNewPost"
       "click .discussion-paginator a": "navigateToPage"
 
     paginationTemplate: -> DiscussionUtil.getTemplate("_pagination")
@@ -36,9 +35,8 @@ if Backbone?
       @$("section.discussion").slideDown()
       @showed = true
 
-    hideNewPost: (event) ->
-      event.preventDefault()
-      @newPostForm.slideUp(300)
+    hideNewPost: =>
+     @newPostForm.slideUp(300)
 
     hideDiscussion: =>
       @$("section.discussion").slideUp()
@@ -111,6 +109,7 @@ if Backbone?
         topicId: discussionId
       )
       @newPostView.render()
+      @listenTo( @newPostView, 'newPost:cancel', @hideNewPost )
       @discussion.on "add", @addThread
 
       @retrieved = true

common/static/coffee/src/discussion/discussion_router.coffee

@@ -27,9 +27,9 @@ if Backbone?
           mode: "tab"
         )
         @newPostView.render()
+        @listenTo( @newPostView, 'newPost:cancel', @hideNewPost )
         $('.new-post-btn').bind "click", @showNewPost
         $('.new-post-btn').bind "keydown", (event) => DiscussionUtil.activateOnSpace(event, @showNewPost)
-        @newPostView.$('.cancel').bind "click", @hideNewPost
 
     allThreads: ->
       @nav.updateSidebar()
@@ -74,10 +74,9 @@ if Backbone?
           $('.new-post-title').focus()
       )
 
-    hideNewPost: (event) =>
+    hideNewPost: =>
       @newPost.fadeOut(
         duration: 200
         complete: =>
           $('.forum-content').fadeIn(200)
       )
-

common/static/coffee/src/discussion/views/new_post_view.coffee

@@ -55,6 +55,8 @@ if Backbone?
           "click .topic-filter-label": "ignoreClick"
           "keyup .topic-filter-input": DiscussionFilter.filterDrop
           "change .post-option-input": "postOptionChange"
+          "click .cancel": "cancel"
+          "reset .forum-new-post-form": "updateStyles"
 
       # Because we want the behavior that when the body is clicked the menu is
       # closed, we need to ignore clicks in the search field and stop propagation.
@@ -102,11 +104,8 @@ if Backbone?
               success: (response, textStatus) =>
                   # TODO: Move this out of the callback, this makes it feel sluggish
                   thread = new Thread response['content']
-                  DiscussionUtil.clearFormErrors(@$(".post-errors"))
                   @$el.hide()
-                  @$(".js-post-title").val("").attr("prev-text", "")
-                  @$(".js-post-body textarea").val("").attr("prev-text", "")
-                  @$(".wmd-preview p").html("") # only line not duplicated in new post inline view
+                  @resetForm()
                   @collection.add thread
 
 
@@ -199,3 +198,24 @@ if Backbone?
               name =  gettext("…") + " / " + rawName + " " + gettext("…")
 
           return name
+
+      cancel: (event) ->
+        event.preventDefault()
+        if not confirm gettext("Your post will be discarded.")
+          return
+        @trigger('newPost:cancel')
+        @resetForm()
+
+      resetForm: =>
+        @$(".forum-new-post-form")[0].reset()
+        DiscussionUtil.clearFormErrors(@$(".post-errors"))
+        @$(".wmd-preview p").html("")
+        if @mode is "tab"
+          @setTopic(@$("a.topic-title").first())
+
+      updateStyles: =>
+        # form reset doesn't change the style of checkboxes so this event is to do that job
+        setTimeout(
+          (=> @$(".post-option-input").trigger("change")),
+          1
+        )