Fix flagging debates and comments with AJAX

We weren't using `foundation()` in these cases, so after flagging a
debate or a comment, we had to reload the page before we could unflag
it.

We're also adding a test for the fix in commit ea85059d. This test shows
it's necessary to filter the elements with JavaSctipt using `first()` if
we want the same code to work with comments.

Co-Authored-By: taitus <sebastia.roig@gmail.com>

app/assets/javascripts/flaggable.js

@@ -2,7 +2,7 @@
   "use strict";
   App.Flaggable = {
     update: function(resource_id, button) {
-      $("#" + resource_id + " .js-flag-actions").html(button).foundation();
+      $("#" + resource_id + " .js-flag-actions").first().html(button).foundation();
     }
   };
 }).call(this);

app/views/comments/_actions.html.erb

@@ -1,4 +1,4 @@
-<span id="flag-actions-<%= dom_id(comment) %>" class="js-flag-actions">
+<span class="js-flag-actions">
   <%= render "comments/flag_actions", comment: comment %>
 </span>
 

app/views/comments/_refresh_flag_actions.js.erb

@@ -1 +1 @@
-$("#flag-actions-<%= dom_id(@comment) %>").html("<%= j render("comments/flag_actions", comment: @comment) %>");
+App.Flaggable.update("<%= dom_id(@comment) %>", "<%= j render("comments/flag_actions", comment: @comment) %>");

app/views/debates/_refresh_flag_actions.js.erb

@@ -1 +1 @@
-$("#<%= dom_id(@debate) %> .js-flag-actions").html("<%= j render("debates/flag_actions", debate: @debate) %>");
+App.Flaggable.update("<%= dom_id(@debate) %>", "<%= j render("debates/flag_actions", debate: @debate) %>");

spec/system/comments/debates_spec.rb

@@ -381,7 +381,34 @@ describe "Commenting debates" do
 
     within "#comment_#{comment.id}" do
       page.find("#flag-expand-comment-#{comment.id}").click
-      expect(page).to have_selector("#flag-comment-#{comment.id}")
+      page.find("#flag-comment-#{comment.id}").click
+
+      expect(page).to have_css("#unflag-expand-comment-#{comment.id}")
+      expect(Flag.flagged?(user, comment)).to be
+
+      page.find("#unflag-expand-comment-#{comment.id}").click
+      page.find("#unflag-comment-#{comment.id}").click
+
+      expect(page).to have_css("#flag-expand-comment-#{comment.id}")
+    end
+
+    expect(Flag.flagged?(user, comment)).not_to be
+  end
+
+  scenario "Flagging a comment with a child does not update its children", :js do
+    debate = create(:debate, title: "Should we change the world?")
+    parent_comment = create(:comment, commentable: debate, body: "Main comment")
+    child_comment = create(:comment, body: "First subcomment", commentable: debate, parent: parent_comment)
+
+    login_as(user)
+    visit debate_path(debate)
+
+    within "#comment_#{parent_comment.id}" do
+      page.find("#flag-expand-comment-#{parent_comment.id}").click
+      page.find("#flag-comment-#{parent_comment.id}").click
+
+      expect(page).to have_css("#unflag-expand-comment-#{parent_comment.id}")
+      expect(page).to have_css("#flag-expand-comment-#{child_comment.id}")
     end
   end
 

spec/system/debates_spec.rb

@@ -380,6 +380,32 @@ describe "Debates" do
     expect(Flag.flagged?(user, debate)).not_to be
   end
 
+  scenario "Flagging/Unflagging AJAX", :js do
+    user = create(:user)
+    debate = create(:debate)
+
+    login_as(user)
+    visit debate_path(debate)
+
+    within "#debate_#{debate.id}" do
+      page.find("#flag-expand-debate-#{debate.id}").click
+      page.find("#flag-debate-#{debate.id}").click
+
+      expect(page).to have_css("#unflag-expand-debate-#{debate.id}")
+    end
+
+    expect(Flag.flagged?(user, debate)).to be
+
+    within "#debate_#{debate.id}" do
+      page.find("#unflag-expand-debate-#{debate.id}").click
+      page.find("#unflag-debate-#{debate.id}").click
+
+      expect(page).to have_css("#flag-expand-debate-#{debate.id}")
+    end
+
+    expect(Flag.flagged?(user, debate)).not_to be
+  end
+
   describe "Debate index order filters" do
     scenario "Default order is hot_score", :js do
       best_debate = create(:debate, title: "Best")