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>

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")