Refactor JS Function add_tag() and create add_comment() for Javascrip…

…t API (#6422)

* change addTag to AJAX

* addTag ajax now works

* add system test for addTag js function

* fix codeclimate error

* add js function AddComment and system test for function

* add parentheses to logic statement

* add JS function sendFormSubmissionAjax to reduce duplicate code

* rename ajax.js to submit_form_ajax.js

* remove parentheses in Node.find_by_tag_and_author

* allow sendFormSubmissionAjax to take in a selector or a url

* allow js addComment and addTest to use URL and add test case for both

* fix codeclimate error

* add to JS addComment ability to reply to parent comment - and add test for it

* attempt to fix tag_test travis error

app/assets/javascripts/application.js

@@ -57,4 +57,5 @@
 //= require keybindings.js
 //= require realtime_username_validation.js
 //= require jquery-validation/dist/jquery.validate.js
-//= require validation.js
+//= require validation.js
+//= require submit_form_ajax.js

app/assets/javascripts/comment.js

@@ -51,3 +51,13 @@ function insertTitleSuggestionTemplate() {
   var newText = currentText+template;
   element.val(newText);
 }
+
+// JS API for submitting comments
+function addComment(comment, submitTo, parentID = 0) {
+  submitTo = submitTo || '.comment-form'; // class instead of id because of the bound function on line 3
+  let data = { body: comment };
+  if (parentID)  {
+    data.reply_to = parentID;
+  }
+  sendFormSubmissionAjax(data, submitTo);
+}

app/assets/javascripts/submit_form_ajax.js

@@ -0,0 +1,20 @@
+// Takes in a data object that contains the info to be submitted in the form property: dataString
+//   and the url to submit to the controller
+// Allows data to be submitted from anywhere on the page using Javascript without using the form itself
+function sendFormSubmissionAjax(dataObj, submitTo) {
+  let url = '';
+  if(submitTo.slice(0,1) === "/") {
+    url = submitTo;
+  } else {
+    url = $(submitTo).attr('action');
+  }
+  $.ajax({
+    url: url,
+    data: dataObj,
+    success: (event, success) => {
+      if (url !== submitTo) {
+        $(submitTo).trigger('ajax:success', event);
+      }
+    }
+  });
+}

app/assets/javascripts/tagging.js

@@ -1,14 +1,16 @@
-function addTag(tagname, selector) {
-  selector = selector || '#tagform';
+
+// Taking the prompt+value retrieved in promptTag() or the links in the drop-down menu and populating the form field before submitting it
+// Instead we want to take the tag value and directly submit it with AJAX
+function addTag(tagname, submitTo) {
+  submitTo = submitTo || '#tagform';
   if (tagname.slice(0,5).toLowerCase() === "place") {
     place = tagname.split(":")[1];
     place.replace("-", " ");
     geo = geocodeStringAndPan(place);
   }
   else {
-    var el = $(selector);
-    el.find('.tag-input').val(tagname);
-    el.submit();
+    let data = { name: tagname };
+    sendFormSubmissionAjax(data, submitTo);
   }
 }
 
@@ -44,7 +46,7 @@ function initTagForm(deletion_path, selector) {
       var tag_name = tag[0];
       var tag_id = tag[1];
       $('.tags-list:first').append("<p id='tag_"+tag_id+"' class='badge badge-primary'> \
-        <a style='color:white;' href='/tag/"+tag_name+"'>"+tag_name+"</a> <a class='tag-delete' \
+        <a class='tag-name' style='color:white;' href='/tag/"+tag_name+"'>"+tag_name+"</a> <a class='tag-delete' \
         data-remote='true' href='"+deletion_path+"/"+tag_id+"' style='color:white' data-tag-id='"+tag_id+"' \
         data-method='delete'><i class='fa fa-times-circle fa-white blue pl-1' aria-hidden='true' ></i></a></p> ")
       el.find('.tag-input').val("")

app/views/notes/_comment.html.erb

@@ -127,7 +127,9 @@
   <div style="border: 1px solid #e7e7e7;padding: 18px;" id="c<%= comment.cid %>show">
 
     <% comment_body = comment.render_body %>
-    <p class="comment-body" id="comment-body-<%= comment.cid %>"><%= raw insert_extras(filtered_comment_body(comment_body)) %></p>
+    <div class="comment-body" id="comment-body-<%= comment.cid %>">
+      <%= raw insert_extras(filtered_comment_body(comment_body)) %>
+    </div>
 
     <% if contain_trimmed_body?(comment_body) %>
       <span style="background-color: #DCDCDC;  border-radius: 7px; cursor: pointer;" ><a class="email-toggle" data-toggle="collapse" data-target="#comment-<%= comment.cid %>-extra-content" style='text-decoration: none;'>&nbsp;&ensp;&#x2022&#x2022&#x2022&nbsp;&ensp;</a></span>

config/initializers/assets.rb

@@ -2,6 +2,7 @@
   'leaflet-blurred-location/dist/Leaflet.BlurredLocation.js',
 
   'advanced_search.js',
+  'submit_form_ajax.js',
   'application.js',
   'comment_expand.js',
   'comment.js',

test/system/comment_test.rb

@@ -0,0 +1,64 @@
+require 'test_helper'
+require "application_system_test_case"
+# https://guides.rubyonrails.org/testing.html#implementing-a-system-test
+
+class CommentTest < ApplicationSystemTestCase
+  Capybara.default_max_wait_time = 60
+
+  test 'adding a comment via javascript' do
+    visit '/'
+
+    click_on 'Login'
+
+    fill_in("username-login", with: "jeff")
+    fill_in("password-signup", with: "secretive")
+    click_on "Log in"
+
+    visit "/wiki/wiki-page-path/comments"
+
+    # run the javascript function
+    page.evaluate_script("addComment('fantastic four')")
+
+    # check that the tag showed up on the page
+    assert_selector('#comments-list .comment-body p', text: 'fantastic four')
+  end
+
+  test 'adding a comment via javascript with url only' do
+    visit '/'
+
+    click_on 'Login'
+
+    fill_in("username-login", with: "jeff")
+    fill_in("password-signup", with: "secretive")
+    click_on "Log in"
+
+    visit "/wiki/wiki-page-path/comments"
+
+    # run the javascript function
+    page.evaluate_script("addComment('superhero', '/comment/create/11')")
+
+    # check that the tag showed up on the page
+    assert_selector('#comments-list .comment-body p', text: 'superhero')
+  end
+
+  test 'adding a reply comment via javascript with url only' do
+    visit '/'
+
+    click_on 'Login'
+
+    fill_in("username-login", with: "jeff")
+    fill_in("password-signup", with: "secretive")
+    click_on "Log in"
+
+    visit "/wiki/wiki-page-path/comments"
+
+    # run the javascript function
+    parentid = "#" + page.find('#comments-list').first('.comment')[:id]
+    parentid_num = parentid.slice(2..-1)
+    page.evaluate_script("addComment('batman', '/comment/create/11', #{parentid_num})")
+
+    # check that the tag showed up on the page
+    assert_selector("#{parentid} .comment .comment-body p", text: 'batman')
+  end
+
+end

test/system/tag_test.rb

@@ -0,0 +1,48 @@
+require 'test_helper'
+require "application_system_test_case"
+# https://guides.rubyonrails.org/testing.html#implementing-a-system-test
+
+class TagTest < ApplicationSystemTestCase
+  Capybara.default_max_wait_time = 60
+
+  test 'adding a tag via javascript' do
+    visit '/'
+
+    click_on 'Login'
+
+    fill_in("username-login", with: "jeff")
+    fill_in("password-signup", with: "secretive")
+    click_on "Log in"
+
+    visit "/wiki/wiki-page-path"
+
+    # run the javascript function
+    page.evaluate_script("addTag('bluebell')")
+
+    # check that the tag showed up on the page
+    assert_selector('.tags-list .tag-name', text: 'bluebell')
+
+  end
+
+  test 'adding a tag via javascript with url only' do
+    visit '/'
+
+    click_on 'Login'
+
+    fill_in("username-login", with: "jeff")
+    fill_in("password-signup", with: "secretive")
+    click_on "Log in"
+
+    visit "/wiki/wiki-page-path"
+
+    # run the javascript function
+    page.evaluate_script("addTag('roses', '/tag/create/11')")
+
+    visit "/wiki/wiki-page-path" # refresh page
+
+    # check that the tag showed up on the page
+    assert_selector('.tags-list .card-body h5', text: 'roses')
+
+  end
+
+end