From 8ef9efc4bb708927bea58b37b04e9165ee398fb8 Mon Sep 17 00:00:00 2001
From: noi5e <will.gutierrez@gmail.com>
Date: Thu, 4 Feb 2021 10:49:23 -0800
Subject: [PATCH] Change #dropzone-large ID to #comment-form-body (#9123)

* merge branches #9104 #9107 #9108 #9110 #9118

* change #dropzone-large ID to #comment-form-body

* add comprehensive preview button test
---
 app/assets/javascripts/editor.js        |  4 +-
 app/assets/javascripts/editorToolbar.js |  4 +-
 app/views/comments/_edit.html.erb       |  4 +-
 app/views/comments/_form.html.erb       |  4 +-
 test/system/comment_test.rb             | 64 +++++++++++++++++++++----
 5 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/editor.js b/app/assets/javascripts/editor.js
index de27e866d2..95dbf8bd49 100644
--- a/app/assets/javascripts/editor.js
+++ b/app/assets/javascripts/editor.js
@@ -131,11 +131,11 @@ class Editor {
     // if the element is part of a multi-comment page,
     // ensure to grab the current element and not the other comment element.
     const previewBtn = $("#toggle-preview-button-" + this.commentFormID);
-    const dropzone = $("#dropzone-large-" + this.commentFormID);
+    const commentFormBody = $("#comment-form-body-" + this.commentFormID);
 
     this.previewElement[0].innerHTML = marked(this.textAreaValue);
     this.previewElement.toggle();
-    dropzone.toggle();
+    commentFormBody.toggle();
 
     this.toggleButtonPreviewMode(previewBtn);
   }
diff --git a/app/assets/javascripts/editorToolbar.js b/app/assets/javascripts/editorToolbar.js
index 5f75106f40..e982d05c78 100644
--- a/app/assets/javascripts/editorToolbar.js
+++ b/app/assets/javascripts/editorToolbar.js
@@ -69,12 +69,12 @@ $(function() {
           console.log($("#image-upload-progress-container-" + $E.commentFormID));
           $("#image-upload-progress-container-" + $E.commentFormID).show();
           $("#image-upload-text-" + $E.commentFormID).show();
-          $("#dropzone-choose-one-" + $E.commentFormID).hide();
+          $("#choose-one-" + $E.commentFormID).hide();
         },
         done: function (e, data) {
           $("#image-upload-progress-container-" + $E.commentFormID).hide();
           $("#image-upload-text-" + $E.commentFormID).hide();
-          $("#dropzone-choose-one-" + $E.commentFormID).show();
+          $("#choose-one-" + $E.commentFormID).show();
           $("#image-upload-progress-bar-" + $E.commentFormID).css('width', 0);
           var extension = data.result['filename'].split('.')[data.result['filename'].split('.').length - 1]; var file_url = data.result.url.split('?')[0]; var file_type;
           if (['gif', 'GIF', 'jpeg', 'JPEG', 'jpg', 'JPG', 'png', 'PNG'].includes(extension))
diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb
index 40983c5aff..bf45c555a4 100644
--- a/app/views/comments/_edit.html.erb
+++ b/app/views/comments/_edit.html.erb
@@ -17,7 +17,7 @@
     </style>
     <!-- toolbar needs location & comment_id to make unique element IDs -->
     <%= render :partial => "editor/toolbar", :locals => { :comment_id => comment.id.to_s, :location => :edit } %>
-    <div id="c<%= comment.id%>div" class="form-group dropzone" data-form-id="edit-<%= comment.id %>">
+    <div id="comment-form-body-edit-<%= comment.id%>" class="form-group dropzone dropzone-large" data-form-id="edit-<%= comment.id %>">
       <textarea 
         aria-label="Edit Comment" 
         onFocus="editing=true" 
@@ -47,7 +47,7 @@
         >
           <%= translation('comments._edit.uploading') %>
         </span>
-        <span id="dropzone-choose-one-edit-<%= comment.id%>" class="prompt choose-one-prompt-text">
+        <span id="choose-one-edit-<%= comment.id%>" class="prompt choose-one-prompt-text">
           <span style="padding-right:4px;float:left;" class="hidden-xs">
             <%= raw translation('comments._edit.drag_and_drop') %>
           </span>
diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb
index 501f5c2186..947a5af3a8 100644
--- a/app/views/comments/_form.html.erb
+++ b/app/views/comments/_form.html.erb
@@ -34,7 +34,7 @@
 
     <!-- most comment forms have two dropzones: 1) small button, 2) large form that covers textarea -->
     <!-- this is the large dropzone -->
-    <div id="dropzone-large-<%= comment_form_id %>" class="form-group dropzone dropzone-large" data-form-id="<%= comment_form_id %>">
+    <div id="comment-form-body-<%= comment_form_id %>" class="comment-face form-group dropzone dropzone-large" data-form-id="<%= comment_form_id %>">
       <%
         body = body || params[:body]
         # Look for comment templates
@@ -80,7 +80,7 @@
           >
             <%= translation('comments._form.uploading') %>
           </span>
-          <span id="dropzone-choose-one-<%= comment_form_id %>" class="prompt choose-one-prompt-text">
+          <span id="choose-one-<%= comment_form_id %>" class="prompt choose-one-prompt-text">
             <span style="padding-right:4px;float:left;" class="d-none d-md-inline">
               <%= raw translation('comments._form.drag_and_drop') %>
             </span>
diff --git a/test/system/comment_test.rb b/test/system/comment_test.rb
index 0f98306cb6..e5151ddef7 100644
--- a/test/system/comment_test.rb
+++ b/test/system/comment_test.rb
@@ -80,16 +80,60 @@ def get_path(page_type, path)
       find("p", text: comment_response_text)
     end
 
-    test "#{page_type_string}: comment preview button works" do
+    test "#{page_type_string}: toggle preview buttons work" do
+      nodes(node_name).add_comment({
+        uid: 2,
+        # **bold**
+        body: "**" + comment_text + "**"
+      })
       visit get_path(page_type, nodes(node_name).path)
-      find("p", text: "Reply to this comment...").click()
-      reply_preview_button = page.all('.preview-btn')[0]
-      comment_preview_button = page.all('.preview-btn')[1]
-      # Toggle preview
-      reply_preview_button.click()
-      # Make sure that buttons are not binded with each other
-      assert_equal( reply_preview_button.text, "Hide Preview" )
-      assert_equal( comment_preview_button.text, "Preview" )
+
+      # open up reply comment form
+      page.all('p', text: 'Reply to this comment...')[0].click
+      # get the ID of reply form
+      reply_form = page.find('[id^=comment-form-reply-]')
+      reply_form_id = reply_form[:id]
+      reply_id_num = /comment-form-reply-(\d+)/.match(reply_form_id)[1]
+      page.find('#text-input-reply-' + reply_id_num)
+        .click
+        .fill_in with: "**" + comment_text + "**"
+
+      # open up edit comment form
+      page.find(".edit-comment-btn").click
+      # get the ID of edit form
+      edit_form = page.find('[id^=comment-form-edit-]')
+      edit_form_id = edit_form[:id]
+      edit_id_num = /comment-form-edit-(\d+)/.match(edit_form_id)[1]
+      page.find('#text-input-edit-' + edit_id_num)
+        .click
+        .fill_in with: "**" + comment_text + "**"
+
+      # fill out main comment form
+      main_form = page.find('#text-input-main')
+      main_form
+        .click
+        .fill_in with: "**" + comment_text + "**"
+
+      # click on toggle preview buttons for main, edit, and reply
+      replyPreviewButton = page.find('#toggle-preview-button-reply-' + reply_id_num)
+      editPreviewButton = page.find('#toggle-preview-button-edit-' + edit_id_num)
+      mainPreviewButton = page.find('#toggle-preview-button-main')
+      replyPreviewButton.click
+      editPreviewButton.click
+      mainPreviewButton.click
+
+      # assert preview element appears
+      assert_selector('#comment-preview-edit-' + edit_id_num)
+      assert_selector('#comment-preview-reply-' + reply_id_num)
+      assert_selector('#comment-preview-main')
+      # assert that button text says Hide Preview
+      assert_equal(replyPreviewButton.text, 'Hide Preview')
+      assert_equal(editPreviewButton.text, 'Hide Preview')
+      assert_equal(mainPreviewButton.text, 'Hide Preview')
+      # assert text is woot woot, not **woot woot**
+      reply_form.has_no_text? '**' + comment_text + '**'
+      edit_form.has_no_text? '**' + comment_text + '**'
+      main_form.has_no_text? '**' + comment_text + '**'
     end
 
     test "#{page_type_string}: ctrl/cmd + enter comment publishing keyboard shortcut" do
@@ -443,7 +487,7 @@ def get_path(page_type, path)
       comment_id = page.find('p', text: comment_text).find(:xpath, '..')[:id]
       # regex to strip the ID number out of string. ID format is comment-body-4231
       comment_id_num = /comment-body-(\d+)/.match(comment_id)[1]
-      comment_dropzone_selector = '#c' + comment_id_num + 'div'
+      comment_dropzone_selector = '#comment-form-body-edit-' + comment_id_num
       # open the edit comment form
       page.find(".edit-comment-btn").click
       # drop into the edit comment form