Add textarea autoresize after comment

4 files changed, 73 insertions, 13 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 9837b2edb9d..a56138986e6 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -15,6 +15,7 @@ v 8.12.0 (unreleased)
   - Fix bug where pagination is still displayed despite all todos marked as done (ClemMakesApps)
   - Shorten task status phrase (ClemMakesApps)
   - Add hover color to emoji icon (ClemMakesApps)
+  - Add textarea autoresize after comment (ClemMakesApps)
   - Fix branches page dropdown sort alignment (ClemMakesApps)
   - Add white background for no readme container (ClemMakesApps)
   - API: Expose issue confidentiality flag. (Robert Schilling)
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index d0d5cad813a..ebe9ff2b8c4 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -331,7 +331,12 @@
       form.find(".js-md-write-button").click();
       form.find(".js-note-text").val("").trigger("input");
       form.find(".js-note-text").data("autosave").reset();
-      return this.updateTargetButtons(e);
+
+      var event = document.createEvent('Event');
+      event.initEvent('autosize:update', true, false);
+      form.find('.js-autosize')[0].dispatchEvent(event);
+
+      this.updateTargetButtons(e);
     };
 
     Notes.prototype.reenableTargetFormSubmitButton = function() {
diff --git a/spec/javascripts/fixtures/comments.html.haml b/spec/javascripts/fixtures/comments.html.haml
new file mode 100644
index 00000000000..cc1f8f15c21
--- /dev/null
+++ b/spec/javascripts/fixtures/comments.html.haml
@@ -0,0 +1,21 @@
+.flash-container.timeline-content
+.timeline-icon.hidden-xs.hidden-sm
+  %a.author_link
+    %img
+.timeline-content.timeline-content-form
+  %form.new-note.js-quick-submit.common-note-form.gfm-form.js-main-target-form
+    .md-area
+      .md-header
+      .md-write-holder
+        .zen-backdrop.div-dropzone-wrapper
+          .div-dropzone-wrapper
+            .div-dropzone.dz-clickable
+              %textarea.note-textarea.js-note-text.js-gfm-input.js-autosize.markdown-area
+    .note-form-actions.clearfix
+      %input.btn.btn-nr.btn-create.append-right-10.comment-btn.js-comment-button{ type: 'submit' }
+      %a.btn.btn-nr.btn-reopen.btn-comment.js-note-target-reopen
+        Reopen issue
+      %a.btn.btn-nr.btn-close.btn-comment.js-note-target-close
+        Close issue
+      %a.btn.btn-cancel.js-note-discard
+        Discard draft
\ No newline at end of file
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index 14dc6bfdfde..a588f403dd5 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -1,8 +1,7 @@
-
 /*= require notes */
-
-
+/*= require autosize */
 /*= require gl_form */
+/*= require lib/utils/text_utility */
 
 (function() {
   window.gon || (window.gon = {});
@@ -12,29 +11,63 @@
   };
 
   describe('Notes', function() {
-    return describe('task lists', function() {
+    describe('task lists', function() {
       fixture.preload('issue_note.html');
+
       beforeEach(function() {
         fixture.load('issue_note.html');
         $('form').on('submit', function(e) {
-          return e.preventDefault();
+          e.preventDefault();
         });
-        return this.notes = new Notes();
+        this.notes = new Notes();
       });
+
       it('modifies the Markdown field', function() {
         $('input[type=checkbox]').attr('checked', true).trigger('change');
-        return expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
+        expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
       });
-      return it('submits the form on tasklist:changed', function() {
-        var submitted;
-        submitted = false;
+
+      it('submits the form on tasklist:changed', function() {
+        var submitted = false;
         $('form').on('submit', function(e) {
           submitted = true;
-          return e.preventDefault();
+          e.preventDefault();
         });
+
         $('.js-task-list-field').trigger('tasklist:changed');
-        return expect(submitted).toBe(true);
+        expect(submitted).toBe(true);
+      });
+    });
+
+    describe('comments', function() {
+      var commentsTemplate = 'comments.html';
+      var textarea = '.js-note-text';
+      fixture.preload(commentsTemplate);
+
+      beforeEach(function() {
+        fixture.load(commentsTemplate);
+        this.notes = new Notes();
+
+        this.autoSizeSpy = spyOnEvent($(textarea), 'autosize:update');
+        spyOn(this.notes, 'renderNote').and.stub();
+
+        $(textarea).data('autosave', {
+          reset: function() {}
+        });
+
+        $('form').on('submit', function(e) {
+          e.preventDefault();
+          $('.js-main-target-form').trigger('ajax:success');
+        });
       });
+
+      it('autosizes after comment submission', function() {
+        $(textarea).text('This is an example comment note');
+        expect(this.autoSizeSpy).not.toHaveBeenTriggered();
+
+        $('.js-comment-button').click();
+        expect(this.autoSizeSpy).toHaveBeenTriggered();
+      })
     });
   });