Merge pull request #7482 from cmrd-senya/markdown-editor-conversations-comments

Add markdown editor on conversations and comments

Changelog.md

@@ -37,6 +37,7 @@ If so, please delete it since it will prevent the federation from working proper
 * Add support for mentions in comments to the front-end [#7386](https://github.com/diaspora/diaspora/pull/7386)
 * Support direct links to comments on mobile [#7508](https://github.com/diaspora/diaspora/pull/7508)
 * Add inviter first and last name in the invitation e-mail [#7484](https://github.com/diaspora/diaspora/pull/7484)
+* Add markdown editor for comments and conversations [#7482](https://github.com/diaspora/diaspora/pull/7482)
 
 # 0.6.8.0
 

app/assets/javascripts/app/router.js

@@ -9,7 +9,7 @@ app.Router = Backbone.Router.extend({
     "commented(/)": "stream",
     "community_spotlight(/)": "spotlight",
     "contacts(/)": "contacts",
-    "conversations(/)(:id)(/)": "conversations",
+    "conversations(/)(:id)(?conversation_id=:conversation_id)(/)": "conversations",
     "followed_tags(/)": "followed_tags",
     "getting_started(/)": "gettingStarted",
     "help(/)": "help",
@@ -93,8 +93,8 @@ app.Router = Backbone.Router.extend({
     app.page = new app.pages.Contacts({stream: stream});
   },
 
-  conversations: function(id) {
+  conversations: function(id, conversationId) {
-    app.conversations = app.conversations || new app.views.ConversationsInbox();
+    app.conversations = app.conversations || new app.views.ConversationsInbox(conversationId);
     if (parseInt("" + id, 10)) {
       app.conversations.renderConversation(id);
     }

app/assets/javascripts/app/views/comment_stream_view.js

@@ -9,8 +9,8 @@ app.views.CommentStream = app.views.Base.extend({
   events: {
     "keydown .comment_box": "keyDownOnCommentBox",
     "submit form": "createComment",
-    "focus .comment_box": "commentTextareaFocused",
+    "click .toggle_post_comments": "expandComments",
-    "click .toggle_post_comments": "expandComments"
+    "click form": "openForm"
   },
 
   initialize: function() {
@@ -21,6 +21,7 @@ app.views.CommentStream = app.views.Base.extend({
   setupBindings: function() {
     this.model.comments.bind("add", this.appendComment, this);
     this.model.comments.bind("remove", this.removeComment, this);
+    $(document.body).click(this.onFormBlur.bind(this));
   },
 
   postRenderTemplate : function() {
@@ -28,6 +29,11 @@ app.views.CommentStream = app.views.Base.extend({
     this.commentBox = this.$(".comment_box");
     this.commentSubmitButton = this.$("input[name='commit']");
     new app.views.CommentMention({el: this.$el, postId: this.model.get("id")});
+
+    this.mdEditor = new Diaspora.MarkdownEditor(this.$(".comment_box"), {
+      onPreview: Diaspora.MarkdownEditor.simplePreview,
+      onFocus: this.openForm.bind(this)
+    });
   },
 
   presenter: function(){
@@ -53,11 +59,14 @@ app.views.CommentStream = app.views.Base.extend({
       success: function() {
         this.commentBox.val("");
         this.enableCommentBox();
+        this.mdEditor.hidePreview();
+        this.closeForm();
         autosize.update(this.commentBox);
       }.bind(this),
       error: function() {
         this.enableCommentBox();
-        this.commentBox.focus();
+        this.mdEditor.hidePreview();
+        this.openForm();
       }.bind(this)
     });
   },
@@ -122,10 +131,6 @@ app.views.CommentStream = app.views.Base.extend({
     this.$("#" + comment.get("guid")).closest(".comment.media").remove();
   },
 
-  commentTextareaFocused: function(){
-    this.$("form").removeClass('hidden').addClass("open");
-  },
-
   expandComments: function(evt){
     this.$(".loading-comments").removeClass("hidden");
     if(evt){ evt.preventDefault(); }
@@ -135,6 +140,37 @@ app.views.CommentStream = app.views.Base.extend({
         this.$(".loading-comments").addClass("hidden");
       }.bind(this)
     });
+  },
+
+  openForm: function() {
+    this.$("form").addClass("open");
+    this.$(".md-editor").addClass("active");
+  },
+
+  closeForm: function() {
+    this.$("form").removeClass("open");
+    this.$(".md-editor").removeClass("active");
+    this.commentBox.blur();
+    autosize.update(this.commentBox);
+  },
+
+  isCloseAllowed: function() {
+    if (this.mdEditor === undefined) {
+      return true;
+    }
+    return !this.mdEditor.isPreviewMode() && this.mdEditor.userInputEmpty();
+  },
+
+  onFormBlur: function(evt) {
+    if (!this.isCloseAllowed()) {
+      return;
+    }
+
+    var $target = $(evt.target);
+    var isForm = $target.hasClass("new-comment") || $target.parents(".new-comment").length !== 0;
+    if (!isForm && !$target.hasClass("focus_comment_textarea")) {
+      this.closeForm();
+    }
   }
 });
 // @license-end

app/assets/javascripts/app/views/conversations_form_view.js

@@ -24,6 +24,8 @@ app.views.ConversationsForm = app.views.Base.extend({
       remoteRoute: {url: "/contacts", extraParameters: "mutual=true"}
     });
 
+    this.newConversationMdEditor = this.renderMarkdownEditor("#new-message-text");
+
     this.bindTypeaheadEvents();
 
     this.tagListElement.empty();
@@ -31,10 +33,16 @@ app.views.ConversationsForm = app.views.Base.extend({
       this.prefill(opts.prefill);
     }
 
-    this.$("form#new-conversation").on("ajax:success", this.conversationCreateSuccess);
+    this.$("form#new-conversation").on("ajax:success", this.conversationCreateSuccess.bind(this));
     this.$("form#new-conversation").on("ajax:error", this.conversationCreateError);
   },
 
+  renderMarkdownEditor: function(element) {
+    return new Diaspora.MarkdownEditor($(element), {
+      onPreview: Diaspora.MarkdownEditor.simplePreview
+    });
+  },
+
   addRecipient: function(person) {
     this.conversationRecipients.push(person);
     this.updateContactIdsListInput();
@@ -84,6 +92,7 @@ app.views.ConversationsForm = app.views.Base.extend({
   },
 
   conversationCreateSuccess: function(evt, data) {
+    this.newConversationMdEditor.hidePreview();
     app._changeLocation(Routes.conversation(data.id));
   },
 

app/assets/javascripts/app/views/conversations_inbox_view.js

@@ -8,11 +8,21 @@ app.views.ConversationsInbox = app.views.Base.extend({
     "click .new-conversation-btn": "displayNewConversation"
   },
 
-  initialize: function() {
+  initialize: function(conversationId) {
-    new app.views.ConversationsForm();
+    this.conversationForm = new app.views.ConversationsForm();
+
+    // Creates markdown editor in case of displaying preloaded conversation
+    if (conversationId != null) {
+      this.renderMarkdownEditor();
+    }
+
     this.setupConversation();
   },
 
+  renderMarkdownEditor: function() {
+    this.conversationForm.renderMarkdownEditor("#conversation-show .conversation-message-text");
+  },
+
   renderConversation: function(conversationId) {
     var self = this;
     $.ajax({
@@ -23,6 +33,8 @@ app.views.ConversationsInbox = app.views.Base.extend({
         self.$el.find("#conversation-show").removeClass("hidden").html(data);
         self.selectConversation(conversationId);
         self.setupConversation();
+        self.renderMarkdownEditor();
+        autosize(self.$("#conversation-show textarea"));
       }
     });
   },

app/assets/javascripts/helpers/markdown_editor.js

@@ -130,6 +130,14 @@ Diaspora.MarkdownEditor.prototype = {
     }
   },
 
+  isPreviewMode: function() {
+    return this.instance !== undefined && this.instance.$editor.find(".md-preview").length > 0;
+  },
+
+  userInputEmpty: function() {
+    return this.instance === undefined || this.instance.getContent().length === 0;
+  },
+
   localize: function() {
     var locale = Diaspora.I18n.language;
 
@@ -160,3 +168,7 @@ Diaspora.MarkdownEditor.prototype = {
     return locale;
   }
 };
+
+Diaspora.MarkdownEditor.simplePreview = function($mdInstance) {
+  return "<div class='preview-content'>" + app.helpers.textFormatter($mdInstance.getContent()) + "</div>";
+};

app/assets/javascripts/mobile/mobile_comments.js

@@ -35,7 +35,7 @@
         self.scrollToOffset(commentContainer);
       });
 
-      this.stream().on("submit", ".new_comment", this.submitComment);
+      this.stream().on("submit", ".new-comment", this.submitComment);
     },
 
     submitComment: function(evt){

app/assets/stylesheets/color_themes/_color_theme_override_dark.scss

@@ -11,13 +11,15 @@ body {
       #publisher_textarea_wrapper { background-color: $gray; }
       .btn.btn-link.question_mark:hover .entypo-cog { color: $gray-light; }
     }
-
-    .write-preview-tabs > li.active * { color: $text-color; }
-    .md-preview { background-color: $gray; }
-    .md-cancel:hover .entypo-cross { color: $gray-light; }
     .publisher-buttonbar .btn.btn-link:hover i { color: $gray-light; }
   }
 
+  .write-preview-tabs > li.active * { color: $text-color; }
+  .md-cancel:hover .entypo-cross { color: $gray-light; }
+
+  .md-input,
+  .md-preview { background-color: $gray; }
+
   .aspect_dropdown li a .text { color: $dropdown-link-color; }
 
   .info .tag { background-color: $gray-light; }
@@ -95,6 +97,7 @@ body {
 
   #welcome-to-diaspora { background: $orange; }
 
+  .md-editor,
   .block-form fieldset .form-control:focus { border-color: $input-border; }
 
   &.page-registrations.action-new,

app/assets/stylesheets/comments.scss

@@ -52,7 +52,6 @@
       float: right;
     }
     padding-left: 12px;
-    display: none;
   }
   .comment_box {
     height: 35px;
@@ -60,8 +59,6 @@
   }
   textarea.comment_box:focus, textarea.comment_box:valid, textarea.comment_box:active {
     border-color: $border-dark-grey;
-    ~ .submit-button { display: block; }
-    min-height: 35px;
     box-shadow: none;
   }
 
@@ -73,3 +70,16 @@
     // scss-lint:enable ImportantRule
   }
 }
+
+.new-comment {
+  &:not(.open) .submit-button,
+  &:not(.open) .md-header {
+    display: none;
+  }
+
+  // The rule for .md-preview is required until we switch to the newer release of bootstrap-markdown with
+  // the following commit in:
+  // https://github.com/toopay/bootstrap-markdown/commit/14a21c3837140144b27efc19c795d1a37fad70fb
+  .md-preview,
+  &.open .md-editor textarea { min-height: 70px; }
+}

app/assets/stylesheets/conversations.scss

@@ -238,3 +238,9 @@
 }
 
 .new-conversation.form-horizontal .form-group:last-of-type { margin-bottom: 0; }
+
+// This rule is required until we switch to the newer release of bootstrap-markdown with
+// the following commit in: https://github.com/toopay/bootstrap-markdown/commit/14a21c3837140144b27efc19c795d1a37fad70fb
+.conversations-form-container .md-preview {
+  min-height: 105px;
+}

app/assets/stylesheets/markdown-editor.scss

@@ -1,3 +1,18 @@
+.md-editor {
+  border: 1px solid $border-grey;
+  border-radius: $border-radius-small;
+  overflow: hidden;
+
+  &.active { border: 1px solid $border-dark-grey; }
+
+  textarea,
+  textarea:focus {
+    border: 0;
+    box-shadow: none;
+    margin: 0;
+  }
+}
+
 .md-footer,
 .md-header {
   background: $white;
@@ -77,13 +92,11 @@
 
 
 .md-preview {
-  background: $white;
   color: $text-color;
   // !important is needed to override the CSS rules dynamically added to the element
   // scss-lint:disable ImportantRule
   height: auto !important;
   // scss-lint:enable ImportantRule
-  min-height: 90px;
   overflow: auto;
   position: relative;
   // !important is needed to override the CSS rules dynamically added to the element
@@ -91,6 +104,8 @@
   width: 100% !important;
   // scss-lint:enable ImportantRule
   z-index: 10;
+
+  .preview-content { padding: 10px; }
 }
 
 .md-controls {

app/assets/stylesheets/publisher.scss

@@ -78,9 +78,7 @@
       textarea {
         background: transparent;
         border: 0 solid $light-grey;
-        box-shadow: none;
         height: 50px;
-        margin: 0;
         resize: none;
       }
 
@@ -193,6 +191,16 @@
       margin-bottom: 0;
     }
   }
+
+  .md-editor,
+  .md-editor.active {
+    border: 0;
+  }
+
+  // This rule is required until we switch to the newer release of bootstrap-markdown with
+  // the following commit in:
+  // https://github.com/toopay/bootstrap-markdown/commit/14a21c3837140144b27efc19c795d1a37fad70fb
+  .md-preview { min-height: 90px; }
 }
 
 .publisher-textarea-wrapper {

app/assets/templates/comment-stream_tpl.jst.hbs

@@ -25,7 +25,8 @@
     {{/with}}
 
     <div class="bd">
-      <form accept-charset="UTF-8" action="/posts/{{id}}/comments" class="new_comment" id="new_comment_on_{{id}}" method="post">
+      <form accept-charset="UTF-8" action="/posts/{{id}}/comments"
+            class="new-comment" id="new-comment-on-{{id}}" method="post">
 
         <textarea class="comment_box form-control mention-textarea"
                   id="comment_text_on_{{id}}" name="text" rows="1" required placeholder="{{t "stream.comment"}}" />

app/views/comments/_new_comment.mobile.haml

@@ -5,7 +5,7 @@
 .add_comment_bottom_link_container
   - if user_signed_in?
     = form_tag(post_comments_path(post_id), id: "new-comment-on-#{post_id}",
-        class: "new_comment", autocomplete: "off") do
+        class: "new-comment", autocomplete: "off") do
       %fieldset
         = hidden_field_tag :post_id, post_id, id: "post-id-on-#{post_id}"
         .form-group.clearfix

features/step_definitions/comment_steps.rb

@@ -3,12 +3,12 @@ When /^I focus the comment field$/ do
 end
 
 Then /^the first comment field should be open/ do
-  find("#main_stream .stream-element .new_comment").should be_visible
+  find("#main_stream .stream-element .new-comment").should be_visible
 end
 
 Then /^the first comment field should be closed$/ do
   page.should have_css(".stream-element .media")
-  page.should_not have_selector("#main_stream .stream-element .new_comment", match: :first)
+  page.should_not have_selector("#main_stream .stream-element .new-comment", match: :first)
 end
 
 When /^I make a show page comment "([^"]*)"$/ do |comment_text|

spec/javascripts/app/router_spec.js

@@ -112,6 +112,13 @@ describe('app.Router', function () {
       this.router.conversations("12");
       expect(app.views.ConversationsInbox.prototype.renderConversation).toHaveBeenCalledWith("12");
     });
+
+    it("passes conversation_id parameter to ConversationsInbox initializer when passed in URL", function() {
+      app.conversations = undefined;
+      spyOn(app.views.ConversationsInbox.prototype, "initialize");
+      this.router.navigate("/conversations?conversation_id=45", {trigger: true});
+      expect(app.views.ConversationsInbox.prototype.initialize).toHaveBeenCalledWith("45");
+    });
   });
 
   describe("stream", function() {

spec/javascripts/app/views/comment_stream_view_spec.js

@@ -19,6 +19,16 @@ describe("app.views.CommentStream", function(){
       this.view.model.comments.pop();
       expect(this.view.removeComment).toHaveBeenCalled();
     });
+
+    it("calls onFormBlur when clicking outside the comment box", function() {
+      // remove existing event handlers
+      $(document.body).off("click");
+
+      spyOn(this.view, "onFormBlur");
+      this.view.setupBindings();
+      $(document.body).click();
+      expect(this.view.onFormBlur).toHaveBeenCalled();
+    });
   });
 
   describe("postRenderTemplate", function() {
@@ -57,6 +67,14 @@ describe("app.views.CommentStream", function(){
       var call = app.views.CommentMention.prototype.initialize.calls.mostRecent();
       expect(call.args[0]).toEqual({el: this.view.$el, postId: this.view.model.id});
     });
+
+    it("creates the markdown editor", function() {
+      spyOn(Diaspora.MarkdownEditor.prototype, "initialize");
+      this.view.mdEditor = undefined;
+      this.view.postRenderTemplate();
+      expect(Diaspora.MarkdownEditor.prototype.initialize).toHaveBeenCalled();
+      expect(this.view.mdEditor).toBeDefined();
+    });
   });
 
   describe("createComment", function() {
@@ -117,6 +135,18 @@ describe("app.views.CommentStream", function(){
           this.request.respondWith({status: 200, responseText: "[]"});
           expect(autosize.update).toHaveBeenCalledWith(this.view.commentBox);
         });
+
+        it("hides the markdown preview", function() {
+          spyOn(this.view.mdEditor, "hidePreview");
+          this.request.respondWith({status: 200, responseText: "[]"});
+          expect(this.view.mdEditor.hidePreview).toHaveBeenCalled();
+        });
+
+        it("closes the form", function() {
+          spyOn(this.view, "closeForm");
+          this.request.respondWith({status: 200, responseText: "[]"});
+          expect(this.view.closeForm).toHaveBeenCalled();
+        });
       });
 
       context("on error", function() {
@@ -135,6 +165,18 @@ describe("app.views.CommentStream", function(){
           this.request.respondWith({status: 500});
           expect(this.view.enableCommentBox).toHaveBeenCalled();
         });
+
+        it("hides the markdown preview", function() {
+          spyOn(this.view.mdEditor, "hidePreview");
+          this.request.respondWith({status: 500, responseText: "[]"});
+          expect(this.view.mdEditor.hidePreview).toHaveBeenCalled();
+        });
+
+        it("opens the form", function() {
+          spyOn(this.view, "openForm");
+          this.request.respondWith({status: 500, responseText: "[]"});
+          expect(this.view.openForm).toHaveBeenCalled();
+        });
       });
     });
   });
@@ -283,6 +325,84 @@ describe("app.views.CommentStream", function(){
     });
   });
 
+  describe("openForm", function() {
+    beforeEach(function() {
+      this.view.render();
+    });
+
+    it("adds the 'open' class to form", function() {
+      this.view.$("form").removeClass("open");
+      this.view.openForm();
+      expect(this.view.$("form")).toHaveClass("open");
+    });
+
+    it("adds the 'active' class to markdown editor", function() {
+      this.view.$(".md-editor").removeClass("active");
+      this.view.openForm();
+      expect(this.view.$(".md-editor")).toHaveClass("active");
+    });
+  });
+
+  describe("closeForm", function() {
+    beforeEach(function() {
+      this.view.render();
+    });
+
+    it("removes the 'open' class to form", function() {
+      this.view.$("form").addClass("open");
+      this.view.closeForm();
+      expect(this.view.$("form")).not.toHaveClass("open");
+    });
+
+    it("removes the 'active' class to markdown editor", function() {
+      this.view.$(".md-editor").addClass("active");
+      this.view.closeForm();
+      expect(this.view.$(".md-editor")).not.toHaveClass("active");
+    });
+  });
+
+  describe("onFormBlur", function() {
+    beforeEach(function() {
+      this.view.render();
+      this.view.postRenderTemplate();
+      spec.content().html("<div class='new-comment'/><div class='focus_comment_textarea'/>");
+    });
+
+    it("does not call closeForm if markdown editor is in preview mode", function() {
+      spyOn(this.view, "closeForm");
+      spyOn(this.view.mdEditor, "isPreviewMode").and.returnValue(true);
+      spyOn(this.view.mdEditor, "userInputEmpty").and.returnValue(true);
+      this.view.onFormBlur();
+      expect(this.view.closeForm).not.toHaveBeenCalled();
+    });
+
+    it("does not call closeForm if markdown editor contains text", function() {
+      spyOn(this.view, "closeForm");
+      spyOn(this.view.mdEditor, "isPreviewMode").and.returnValue(false);
+      spyOn(this.view.mdEditor, "userInputEmpty").and.returnValue(false);
+      this.view.onFormBlur();
+      expect(this.view.closeForm).not.toHaveBeenCalled();
+    });
+
+    it("does not call closeForm when the form is clicked", function() {
+      spyOn(this.view, "closeForm");
+      spyOn(this.view.mdEditor, "isPreviewMode").and.returnValue(false);
+      spyOn(this.view.mdEditor, "userInputEmpty").and.returnValue(true);
+      this.view.onFormBlur($.Event("click", {target: $(".new-comment")}));
+      expect(this.view.closeForm).not.toHaveBeenCalled();
+      this.view.onFormBlur($.Event("click", {target: $(".focus_comment_textarea")}));
+      expect(this.view.closeForm).not.toHaveBeenCalled();
+    });
+
+    it("calls closeForm when the user clicks outside of the form", function() {
+      spyOn(this.view, "closeForm");
+      spyOn(this.view.mdEditor, "isPreviewMode").and.returnValue(false);
+      spyOn(this.view.mdEditor, "userInputEmpty").and.returnValue(true);
+      this.view.onFormBlur($.Event("click", {target: $("body")}));
+      expect(this.view.closeForm).toHaveBeenCalled();
+    });
+  });
+
   describe("pressing a key when typing on the new comment box", function(){
     var submitCallback;
 

spec/javascripts/app/views/conversations_form_view_spec.js

@@ -35,6 +35,21 @@ describe("app.views.ConversationsForm", function() {
       this.target.initialize({prefill: {}});
       expect(app.views.ConversationsForm.prototype.prefill).toHaveBeenCalledWith({});
     });
+
+    it("creates markdown editor for new conversations", function() {
+      spyOn(this.target, "renderMarkdownEditor");
+      this.target.initialize();
+      expect(this.target.renderMarkdownEditor).toHaveBeenCalledWith("#new-message-text");
+    });
+  });
+
+  describe("renderMarkdownEditor", function() {
+    it("creates MarkdownEditor", function() {
+      spec.content().html("<form><textarea id='new-message-text'/></form>");
+      var mdEditor = this.target.renderMarkdownEditor("#new-message-text");
+      expect(mdEditor).toEqual(jasmine.any(Diaspora.MarkdownEditor));
+      expect($("#new-message-text")).toHaveClass("md-input");
+    });
   });
 
   describe("addRecipient", function() {
@@ -253,6 +268,12 @@ describe("app.views.ConversationsForm", function() {
       $("#new-conversation").trigger("ajax:success", [{id: 23}]);
       expect(app._changeLocation).toHaveBeenCalledWith(Routes.conversation(23));
     });
+
+    it("hides the preview", function() {
+      spyOn(Diaspora.MarkdownEditor.prototype, "hidePreview");
+      $("#new-conversation").trigger("ajax:success", [{id: 23}]);
+      expect(Diaspora.MarkdownEditor.prototype.hidePreview).toHaveBeenCalled();
+    });
   });
 
   describe("conversationCreateError", function() {

spec/javascripts/app/views/conversations_inbox_view_spec.js

@@ -17,6 +17,14 @@ describe("app.views.ConversationsInbox", function() {
       new app.views.ConversationsInbox();
       expect(app.views.ConversationsInbox.prototype.setupConversation).toHaveBeenCalled();
     });
+
+    it("creates markdown editor for an existing conversation", function() {
+      spyOn(app.views.ConversationsForm.prototype, "renderMarkdownEditor");
+      new app.views.ConversationsInbox(1);
+      expect(app.views.ConversationsForm.prototype.renderMarkdownEditor).toHaveBeenCalledWith(
+        "#conversation-show .conversation-message-text"
+      );
+    });
   });
 
   describe("renderConversation", function() {
@@ -34,6 +42,8 @@ describe("app.views.ConversationsInbox", function() {
       spyOn($, "ajax").and.callThrough();
       spyOn(app.views.ConversationsInbox.prototype, "selectConversation");
       spyOn(app.views.ConversationsInbox.prototype, "setupConversation");
+      spyOn(app.views.ConversationsForm.prototype, "renderMarkdownEditor");
+      spyOn(window, "autosize");
       this.target.renderConversation(this.conversationId);
       jasmine.Ajax.requests.mostRecent().respondWith({
         status: 200,
@@ -44,6 +54,9 @@ describe("app.views.ConversationsInbox", function() {
       expect(jasmine.Ajax.requests.mostRecent().url).toBe("/conversations/" + this.conversationId + "/raw");
       expect(app.views.ConversationsInbox.prototype.selectConversation).toHaveBeenCalledWith(this.conversationId);
       expect(app.views.ConversationsInbox.prototype.setupConversation).toHaveBeenCalled();
+      expect(app.views.ConversationsForm.prototype.renderMarkdownEditor).toHaveBeenCalled();
+      expect(window.autosize).toHaveBeenCalled();
+      expect(window.autosize.calls.mostRecent().args[0].is($("#conversation-show textarea")));
       expect($("#conversation-new")).toHaveClass("hidden");
       expect($("#conversation-show")).not.toHaveClass("hidden");
       expect($("#conversation-show #fake-conversation-content").length).toBe(1);

spec/javascripts/helpers/markdown_editor_spec.js

@@ -220,6 +220,48 @@ describe("Diaspora.MarkdownEditor", function() {
     });
   });
 
+  describe("isPreviewMode", function() {
+    beforeEach(function() {
+      this.target = new Diaspora.MarkdownEditor(this.$el, {onPreview: $.noop, onPostPreview: $.noop()});
+    });
+
+    it("return false if editor is not visible yet", function() {
+      this.target.instance = undefined;
+      expect(this.target.isPreviewMode()).toBe(false);
+    });
+
+    it("returns false if the editor is in write (default) mode", function() {
+      expect(this.target.instance).toBeDefined();
+      expect(this.target.isPreviewMode()).toBe(false);
+    });
+
+    it("returns true if editor is in preview mode", function() {
+      this.target.showPreview();
+      expect(this.target.isPreviewMode()).toBe(true);
+    });
+  });
+
+  describe("userInputEmpty", function() {
+    beforeEach(function() {
+      this.target = new Diaspora.MarkdownEditor(this.$el, {onPreview: $.noop, onPostPreview: $.noop()});
+    });
+
+    it("return true if editor is not visible yet", function() {
+      this.target.instance = undefined;
+      expect(this.target.userInputEmpty()).toBe(true);
+    });
+
+    it("returns true if editor has no content", function() {
+      $("textarea").text("");
+      expect(this.target.userInputEmpty()).toBe(true);
+    });
+
+    it("returns false if editor has content", function() {
+      $("textarea").text("Yolo");
+      expect(this.target.userInputEmpty()).toBe(false);
+    });
+  });
+
   describe("localize", function() {
     beforeEach(function() {
       this.target = new Diaspora.MarkdownEditor(this.$el, {});
@@ -234,4 +276,18 @@ describe("Diaspora.MarkdownEditor", function() {
       expect($.fn.markdown.messages[Diaspora.I18n.language]).toBeDefined();
     });
   });
+
+  describe("simplePreview", function() {
+    beforeEach(function() {
+      this.target = new Diaspora.MarkdownEditor(this.$el, {});
+    });
+
+    it("generates HTML for preview", function() {
+      spyOn(app.helpers, "textFormatter").and.callThrough();
+      this.$el[0].value = "<p>hello</p>";
+      var res = Diaspora.MarkdownEditor.simplePreview(this.target.instance);
+      expect(app.helpers.textFormatter).toHaveBeenCalledWith("<p>hello</p>");
+      expect(res).toBe("<div class='preview-content'><p>hello</p></div>");
+    });
+  });
 });

spec/javascripts/jasmine_helpers/SpecHelper.js

@@ -102,6 +102,7 @@ afterEach(function() {
   expect($(".modal-backdrop").length).toBe(0);
   $(".modal-backdrop").remove();
   spec.loadFixtureCount = 0;
+  $(document.body).off();
 });
 
 

spec/javascripts/mobile/mobile_comments_spec.js

@@ -10,7 +10,7 @@ describe("Diaspora.Mobile.Comments", function(){
       spyOn(Diaspora.Mobile.Comments, "submitComment").and.returnValue(false);
       Diaspora.Mobile.Comments.initialize();
       Diaspora.Mobile.Comments.showCommentBox($(".stream .comment-action").first());
-      $(".stream .new_comment").first().submit();
+      $(".stream .new-comment").first().submit();
       expect(Diaspora.Mobile.Comments.submitComment).toHaveBeenCalled();
     });
   });
@@ -97,28 +97,28 @@ describe("Diaspora.Mobile.Comments", function(){
     });
 
     it("doesn't submit an empty comment", function() {
-      $(".stream .new_comment").first().submit();
+      $(".stream .new-comment").first().submit();
       expect(jasmine.Ajax.requests.count()).toBe(0);
     });
 
     it("submits comments with text", function() {
-      $(".stream .new_comment textarea").val("comment text");
+      $(".stream .new-comment textarea").val("comment text");
-      $(".stream .new_comment").first().submit();
+      $(".stream .new-comment").first().submit();
       expect(jasmine.Ajax.requests.mostRecent().data().text).toEqual(["comment text"]);
     });
 
     it("calls updateStream on success", function() {
       spyOn(Diaspora.Mobile.Comments, "updateStream");
-      $(".stream .new_comment textarea").val("comment text");
+      $(".stream .new-comment textarea").val("comment text");
-      $(".stream .new_comment").first().submit();
+      $(".stream .new-comment").first().submit();
       jasmine.Ajax.requests.mostRecent().respondWith({status: 200, responseText: "foo"});
-      expect(Diaspora.Mobile.Comments.updateStream).toHaveBeenCalledWith($(".stream .new_comment").first(), "foo");
+      expect(Diaspora.Mobile.Comments.updateStream).toHaveBeenCalledWith($(".stream .new-comment").first(), "foo");
     });
 
     it("lets Diaspora.Mobile.Alert handle AJAX errors", function() {
       spyOn(Diaspora.Mobile.Alert, "handleAjaxError");
-      $(".stream .new_comment textarea").val("comment text");
+      $(".stream .new-comment textarea").val("comment text");
-      $(".stream .new_comment").first().submit();
+      $(".stream .new-comment").first().submit();
       jasmine.Ajax.requests.mostRecent().respondWith({status: 400, responseText: "oh noez! comment failed!"});
       expect(Diaspora.Mobile.Alert.handleAjaxError).toHaveBeenCalled();
       expect(Diaspora.Mobile.Alert.handleAjaxError.calls.argsFor(0)[0].responseText).toBe("oh noez! comment failed!");
@@ -126,10 +126,10 @@ describe("Diaspora.Mobile.Comments", function(){
 
     it("calls resetCommentBox on errors", function() {
       spyOn(Diaspora.Mobile.Comments, "resetCommentBox");
-      $(".stream .new_comment textarea").val("comment text");
+      $(".stream .new-comment textarea").val("comment text");
-      $(".stream .new_comment").first().submit();
+      $(".stream .new-comment").first().submit();
       jasmine.Ajax.requests.mostRecent().respondWith({status: 400, responseText: "oh noez! comment failed!"});
-      expect(Diaspora.Mobile.Comments.resetCommentBox).toHaveBeenCalledWith($(".stream .new_comment").first());
+      expect(Diaspora.Mobile.Comments.resetCommentBox).toHaveBeenCalledWith($(".stream .new-comment").first());
     });
   });