decidim-core 0.27.5 → 0.28.0.rc4

data/lib/decidim/core/test/shared_examples/comments_examples.rb

@@ -2,8 +2,8 @@
 
 shared_examples "comments" do
   let!(:organization) { create(:organization) }
-  let!(:user) { create(:user, :confirmed, organization: organization) }
-  let!(:comments) { create_list(:comment, 3, commentable: commentable) }
+  let!(:user) { create(:user, :confirmed, organization:) }
+  let!(:comments) { create_list(:comment, 3, commentable:) }
 
   before do
     switch_to_host(organization.host)
@@ -28,21 +28,17 @@ shared_examples "comments" do
   end
 
   it "allows user to sort the comments", :slow do
-    comment = create(:comment, commentable: commentable, body: "Most Rated Comment")
-    create(:comment_vote, comment: comment, author: user, weight: 1)
+    comment = create(:comment, commentable:, body: "Most Rated Comment")
+    create(:comment_vote, comment:, author: user, weight: 1)
 
     visit resource_path
 
-    expect(page).to have_no_content("Comments are disabled at this time")
+    expect(page).not_to have_content("Comments are disabled at this time")
 
     expect(page).to have_css(".comment", minimum: 1)
-    page.find(".order-by .dropdown.menu .is-dropdown-submenu-parent").hover
 
-    within ".comments" do
-      within ".order-by__dropdown" do
-        click_link "Older" # Opens the dropdown
-        click_link "Best rated"
-      end
+    within ".comment-order-by" do
+      click_link "Best rated"
     end
 
     expect(page).to have_css(".comments > div:nth-child(2)", text: "Most Rated Comment")
@@ -59,17 +55,16 @@ shared_examples "comments" do
     it "shows only a deletion message for deleted comments" do
       expect(page).to have_selector("#comment_#{deleted_comment.id}")
 
-      expect(page).to have_no_content(deleted_comment.author.name)
-      expect(page).to have_no_content(deleted_comment.body.values.first)
+      expect(page).not_to have_content(deleted_comment.author.name)
+      expect(page).not_to have_content(translated(deleted_comment.body))
       within "#comment_#{deleted_comment.id}" do
         expect(page).to have_content("Comment deleted on")
-        expect(page).to have_no_selector("comment__header")
-        expect(page).to have_no_selector("comment__footer")
+        expect(page).not_to have_selector("comment__footer")
       end
     end
 
     it "counts only not deleted comments" do
-      expect(page).to have_selector("span.comments-count", text: "#{comments.length - 1} COMMENTS")
+      expect(page).to have_selector("span.comments-count", text: "#{comments.length - 1} comments")
     end
 
     context "when deleted comment has replies, they are shown" do
@@ -90,7 +85,7 @@ shared_examples "comments" do
   context "when not authenticated" do
     it "does not show form to add comments to user" do
       visit resource_path
-      expect(page).to have_no_selector(".add-comment form")
+      expect(page).not_to have_selector(".add-comment form")
     end
   end
 
@@ -104,6 +99,53 @@ shared_examples "comments" do
       expect(page).to have_selector(".add-comment form")
     end
 
+    describe "when using emojis" do
+      before do
+        within_language_menu do
+          click_link "Castellano"
+        end
+      end
+      shared_examples_for "allowing to select emojis" do
+        it "allows selecting emojis" do
+          within_language_menu do
+            click_link locale
+          end
+
+          within ".add-comment form" do
+            expect(page).to have_selector(".emoji__container")
+            expect(page).to have_selector(".emoji__trigger .emoji__button")
+            find(".emoji__trigger .emoji__button").click
+          end
+
+          within ".picmo__popupContainer .picmo__picker .picmo__content" do
+            expect(page).to have_content(phrase)
+            categories = page.all(".picmo__emojiCategory")
+            within categories[1] do
+              click_button "😀"
+            end
+          end
+
+          within ".add-comment form" do
+            expect(find("textarea").value.strip).to have_content("😀")
+          end
+        end
+      end
+
+      context "when the locale is supported" do
+        let(:locale) { "English" }
+        let(:phrase) { "SMILEYS & EMOTION" }
+
+        it_behaves_like "allowing to select emojis"
+      end
+
+      context "when the locale is not supported" do
+        let(:locale) { "Català" }
+        let(:phrase) { "SOMRIURES I EMOCIONS" }
+
+        it_behaves_like "allowing to select emojis"
+      end
+    end
+
     context "when no default comments length specified" do
       it "displays the numbers of characters left" do
         within ".add-comment form" do
@@ -122,9 +164,12 @@ shared_examples "comments" do
       end
 
       it "updates the numbers of characters left correctly" do
-        within ".add-comment form" do
-          fill_in "add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}", with: "This is a new comment."
-          expect(page).to have_content("1978 characters left")
+        within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
+          field = find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}")
+          field.set " "
+          field.native.send_keys "This is a new comment."
+
+          expect(page).to have_content("1977 characters left")
         end
       end
 
@@ -139,7 +184,7 @@ shared_examples "comments" do
         end
 
         it "updates the numbers of characters left correctly for screen reader" do
-          within ".add-comment form" do
+          within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
             fill_in field_id, with: "This is a new comment."
 
             # The screen reader character counter should update only when the user
@@ -211,10 +256,11 @@ shared_examples "comments" do
 
         context "when reaching the announce after every threshold" do
           it "updates the numbers of characters left correctly for screen reader" do
-            within ".add-comment form" do
+            within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
               # Test that when reaching the "announce after every" threshold, the
               # characters are announced after every keystroke.
-              fill_in field_id, with: "a" * 1989
+              field = find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}")
+              field.set "a" * 1989
               within ".remaining-character-count" do
                 expect(page).to have_content("11 characters left") # Normal
               end
@@ -330,7 +376,7 @@ shared_examples "comments" do
             component.update!(settings: { comments_max_length: 3000 })
             visit current_path
 
-            within ".add-comment form" do
+            within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
               expect(page).to have_content("3000 characters left")
             end
           end
@@ -341,12 +387,17 @@ shared_examples "comments" do
             component.update!(settings: { comments_max_length: 100 })
             visit current_path
 
-            within ".add-comment form" do
-              find(:css, "textarea:enabled").set("toto")
-              expect(page).not_to have_selector(".emoji-picker__wrapper")
-              find("svg").click
+            within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
+              field = find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}")
+              field.set " "
+              field.native.send_keys "toto"
+            end
+
+            expect(page).not_to have_selector(".picmo__picker.picmo__picker")
+            within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
+              find(".emoji__button").click
             end
-            expect(page).to have_selector(".emoji-picker__wrapper")
+            expect(page).to have_selector(".picmo__picker.picmo__picker")
           end
         end
 
@@ -355,65 +406,78 @@ shared_examples "comments" do
             component.update!(settings: { comments_max_length: 30 })
             visit current_path
 
-            within ".add-comment form" do
-              find(:css, "textarea:enabled").set("0123456789012345678901234567")
-              find("svg").click
-              expect(page).not_to have_selector(".emoji-picker__wrapper")
+            within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
+              field = find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}")
+              field.set " "
+              field.native.send_keys("0123456789012345678901234567")
+              find(".emoji__button").click
             end
+            expect(page).not_to have_selector(".picmo__picker.picmo__picker")
           end
         end
       end
     end
 
     context "when user adds a new comment" do
+      let(:content) { "This is a new comment" }
+
       before do
-        within ".add-comment form" do
-          fill_in "add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}", with: "This is a new comment"
-          click_button "Send"
+        within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
+          field = find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}")
+          field.set " "
+          field.native.send_keys content
+          click_button "Publish comment"
         end
       end
 
       it "shows comment to the user, updates the comments counter and clears the comment textarea" do
-        expect(page).to have_comment_from(user, "This is a new comment", wait: 20)
-        expect(page).to have_selector("span.comments-count", text: "#{commentable.comments.count} COMMENTS")
-        expect(page).to have_field("add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}", with: "")
+        expect(page).to have_comment_from(user, content, wait: 20)
+        expect(page).to have_selector("span.comments-count", text: "#{commentable.comments.count} comments")
+        expect(page.find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}").value).to be_empty
       end
     end
 
     context "when user adds a new comment with a link" do
+      let(:content) { "Very nice http://www.debian.org linux distro" }
+
       before do
-        within ".add-comment form" do
-          fill_in "add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}", with: "Very nice http://www.debian.org linux distro"
-          click_button "Send"
+        within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
+          field = find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}")
+          field.set " "
+          field.native.send_keys content
+          click_button "Publish comment"
         end
       end
 
       it "adds external link css" do
-        expect(page).to have_css(".external-link-container", text: "http://www.debian.org")
+        expect(page).to have_css("a", text: "http://www.debian.org")
+        within("a", text: "http://www.debian.org") do
+          expect(page).to have_text "(External link)"
+        end
       end
 
       it "changes link to point to /link" do
-        expect(page).to have_link("http://www.debian.org", href: "/link?external_url=http%3A%2F%2Fwww.debian.org")
+        expect(page).to have_link("http://www.debian.org", href: "/link?external_url=http%3A%2F%2Fwww.debian.org%2F")
       end
     end
 
     context "when the user is writing a new comment while someone else comments" do
       let(:new_comment_body) { "Hey, I just jumped in the conversation!" }
-      let(:new_comment) { build(:comment, commentable: commentable, body: new_comment_body) }
+      let(:new_comment) { build(:comment, commentable:, body: new_comment_body) }
+      let(:content) { "This is a new comment" }
 
       before do
-        within ".add-comment form" do
-          fill_in "add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}", with: "This is a new comment"
+        within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
+          field = find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}")
+          field.set " "
+          field.native.send_keys content
         end
         new_comment.save!
       end
 
       it "does not clear the current user's comment" do
         expect(page).to have_content(new_comment.body.values.first, wait: 20)
-        expect(page).to have_field(
-          "add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}",
-          with: "This is a new comment"
-        )
+        expect(page.find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}").value).to include(content)
       end
 
       context "when user can hide replies on a thread" do
@@ -456,71 +520,67 @@ shared_examples "comments" do
         let(:thread) { comments.first }
         let(:new_reply_body) { "Hey, I just jumped inside the thread!" }
         let(:new_reply) { build(:comment, commentable: thread, root_commentable: commentable, body: new_reply_body) }
+        let(:reply_content) { "This is a new reply" }
 
         before do
-          within "#comment_#{thread.id}" do
-            click_button "Reply"
+          within "div#comment_#{thread.id}" do
+            find("span", text: "Reply").click
+          end
 
-            within ".add-comment form" do
-              fill_in "add-comment-#{thread.commentable_type.demodulize}-#{thread.id}", with: "This is a new reply"
-            end
+          within "form#new_comment_for_#{thread.commentable_type.demodulize}_#{thread.id}" do
+            field = find("#add-comment-#{thread.commentable_type.demodulize}-#{thread.id}")
+            field.set " "
+            field.native.send_keys reply_content
           end
           new_reply.save!
         end
 
         it "does not clear the current user's comment" do
           expect(page).to have_content(new_reply.body.values.first, wait: 20)
-          expect(page).to have_field(
-            "add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}",
-            with: "This is a new comment"
-          )
-          expect(page).to have_field(
-            "add-comment-#{thread.commentable_type.demodulize}-#{thread.id}",
-            with: "This is a new reply"
-          )
+          expect(page.find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}").value).to include(content)
+          expect(page.find("#add-comment-#{thread.commentable_type.demodulize}-#{thread.id}").value).to include(reply_content)
         end
       end
     end
 
     context "when the user has verified organizations" do
       let(:user_group) { create(:user_group, :verified) }
+      let(:content) { "This is a new comment" }
 
       before do
-        create(:user_group_membership, user: user, user_group: user_group)
+        create(:user_group_membership, user:, user_group:)
       end
 
       it "adds new comment as a user group" do
         visit resource_path
 
-        expect(page).to have_selector(".add-comment form")
-
-        within ".add-comment form" do
-          fill_in "add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}", with: "This is a new comment"
+        within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
+          field = find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}")
+          field.set " "
+          field.native.send_keys content
           select user_group.name, from: "Comment as"
-          click_button "Send"
+          click_button "Publish comment"
         end
 
-        expect(page).to have_comment_from(user_group, "This is a new comment", wait: 20)
+        expect(page).to have_comment_from(user_group, content, wait: 20)
       end
     end
 
     context "when a user deletes a comment" do
       let(:comment_body) { "This comment is a mistake" }
-      let!(:comment) { create(:comment, body: comment_body, commentable: commentable, author: comment_author) }
+      let!(:comment) { create(:comment, body: comment_body, commentable:, author: comment_author) }
 
       before do
         visit resource_path
       end
 
       context "when the comment is not authored by user" do
-        let!(:comment_author) { create(:user, :confirmed, organization: organization) }
+        let!(:comment_author) { create(:user, :confirmed, organization:) }
 
-        it "the context menu of the comment doesn't show a delete link" do
+        it "the context menu of the comment does not show a delete link" do
           within "#comment_#{comment.id}" do
-            within ".comment__header__context-menu" do
-              page.find(".icon--ellipses").click
-              expect(page).to have_no_link("Delete")
-            end
+            page.find("[id^='dropdown-trigger']").click
+            expect(page).not_to have_link("Delete")
           end
         end
       end
@@ -530,10 +590,8 @@ shared_examples "comments" do
 
         it "the context menu of the comment shows a delete link" do
           within "#comment_#{comment.id}" do
-            within ".comment__header__context-menu" do
-              page.find(".icon--ellipses").click
-              expect(page).to have_link("Delete")
-            end
+            page.find("[id^='dropdown-trigger']").click
+            expect(page).to have_link("Delete")
           end
         end
 
@@ -541,25 +599,19 @@ shared_examples "comments" do
           expect(Decidim::Comments::Comment.not_deleted.count).to eq(4)
 
           within "#comment_#{comment.id}" do
-            within ".comment__header__context-menu" do
-              page.find(".icon--ellipses").click
-              click_link "Delete"
-            end
+            page.find("[id^='dropdown-trigger']").click
+            click_link "Delete"
           end
 
-          within "div.confirm-reveal" do
-            click_link "OK"
-          end
+          accept_confirm
 
           expect(page).to have_selector("#comment_#{comment.id}")
-          expect(page).to have_no_content(comment_body)
           within "#comment_#{comment.id}" do
             expect(page).to have_content("Comment deleted on")
-            expect(page).to have_no_content comment_author.name
-            expect(page).to have_no_selector("comment__header")
-            expect(page).to have_no_selector("comment__footer")
+            expect(page).not_to have_content comment_author.name
+            expect(page).not_to have_selector("comment__footer")
           end
-          expect(page).to have_selector("span.comments-count", text: "3 COMMENTS")
+          expect(page).to have_selector("span.comments-count", text: "3 comments")
 
           expect(Decidim::Comments::Comment.not_deleted.count).to eq(3)
         end
@@ -568,21 +620,20 @@ shared_examples "comments" do
 
     context "when a user edits a comment" do
       let(:comment_body) { "This coment has a typo" }
-      let!(:comment) { create(:comment, body: comment_body, commentable: commentable, author: comment_author) }
+      let!(:comment) { create(:comment, body: comment_body, commentable:, author: comment_author) }
 
       before do
         visit resource_path
       end
 
       context "when the comment is not authored by user" do
-        let!(:comment_author) { create(:user, :confirmed, organization: organization) }
+        let!(:comment_author) { create(:user, :confirmed, organization:) }
 
-        it "the context menu of the comment doesn't show an edit button" do
+        it "the context menu of the comment does not show an edit button" do
           within "#comment_#{comment.id}" do
-            within ".comment__header__context-menu" do
-              page.find(".icon--ellipses").click
-              expect(page).to have_no_button("Edit")
-            end
+            # Toolbar
+            page.find("[id^='dropdown-trigger']").click
+            expect(page).not_to have_button("Edit")
           end
         end
       end
@@ -592,32 +643,32 @@ shared_examples "comments" do
 
         it "the context menu of the comment show an edit button" do
           within "#comment_#{comment.id}" do
-            within ".comment__header__context-menu" do
-              page.find(".icon--ellipses").click
-              expect(page).to have_button("Edit")
-            end
+            # Toolbar
+            page.find("[id^='dropdown-trigger']").click
+            expect(page).to have_button("Edit")
           end
         end
 
         context "when the user edits a comment" do
           before do
-            within "#comment_#{comment.id} .comment__header__context-menu" do
-              page.find(".icon--ellipses").click
+            within "#comment_#{comment.id}" do
+              # Toolbar
+              page.find("[id^='dropdown-trigger']").click
               click_button "Edit"
             end
-            fill_in "edit_comment_#{comment.id}", with: "This comment has been fixed"
+            fill_in "edit_comment_#{comment.id}", with: " This comment has been fixed"
             click_button "Send"
           end
 
           it "the comment body changes" do
             within "#comment_#{comment.id}" do
               expect(page).to have_content("This comment has been fixed")
-              expect(page).to have_no_content(comment_body)
+              expect(page).not_to have_content(comment_body)
             end
           end
 
           it "the header of the comment displays an edited message" do
-            within "#comment_#{comment.id} .comment__header" do
+            within "#comment_#{comment.id}" do
               expect(page).to have_content("Edited")
             end
           end
@@ -626,44 +677,44 @@ shared_examples "comments" do
     end
 
     context "when a user replies to a comment", :slow do
-      let!(:comment_author) { create(:user, :confirmed, organization: organization) }
-      let!(:comment) { create(:comment, commentable: commentable, author: comment_author) }
+      let!(:comment_author) { create(:user, :confirmed, organization:) }
+      let!(:comment) { create(:comment, commentable:, author: comment_author) }
+      let(:content) { "This is a reply" }
 
       it "shows reply to the user" do
         visit resource_path
 
-        expect(page).to have_selector(".comment__reply")
-        expect(page).not_to have_selector(".comment__additionalreply")
-
         within "#comments #comment_#{comment.id}" do
           click_button "Reply"
         end
 
         expect(page).to have_selector("#comment_#{comment.id} .add-comment")
-        fill_in "add-comment-Comment-#{comment.id}", with: "This is a reply"
-        within ".comment-thread .add-comment" do
-          click_button "Send"
+
+        within "form#new_comment_for_#{comment.commentable_type.demodulize}_#{comment.id}" do
+          field = find("#add-comment-#{comment.commentable_type.demodulize}-#{comment.id}")
+          field.set " "
+          field.native.send_keys content
+          click_button "Publish reply"
         end
 
-        expect(page).to have_selector(".comment-thread .comment--nested", wait: 20)
-        expect(page).to have_selector(".comment__additionalreply")
+        expect(page).to have_reply_to(comment, content)
+        expect(page).to have_selector("span.comments-count", text: "#{commentable.comments.count} comments")
         expect(page).to have_reply_to(comment, "This is a reply")
-        expect(page).to have_selector("span.comments-count", text: "#{commentable.comments.count} COMMENTS")
       end
     end
 
     context "when a comment has been moderated" do
-      let!(:parent) { create(:comment, commentable: commentable) }
+      let!(:parent) { create(:comment, commentable:) }
       let!(:reply) { create(:comment, commentable: parent, root_commentable: commentable) }
 
-      it "doesn't show additional reply" do
+      it "does not show additional reply" do
         Decidim::Moderation.create!(reportable: reply, participatory_space: reply.participatory_space, hidden_at: 1.day.ago)
 
         visit current_path
 
         within "#comments #comment_#{parent.id}" do
-          expect(page).to have_selector(".comment__reply")
-          expect(page).not_to have_selector(".comment__additionalreply")
+          expect(page).to have_selector("#comment-#{parent.id}-replies")
+          expect(page.find("#comment-#{parent.id}-replies").text).to be_blank
         end
       end
     end
@@ -684,16 +735,18 @@ shared_examples "comments" do
             expect(page.find(".opinion-toggle--ko")["aria-pressed"]).to eq("false")
             expect(page.find(".opinion-toggle .selected-state", visible: false)).to have_content("Your opinion about this topic is positive")
 
-            within ".add-comment form" do
-              fill_in "add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}", with: "I am in favor about this!"
-              click_button "Send"
+            within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
+              field = find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}")
+              field.set " "
+              field.native.send_keys "I am in favor about this!"
+              click_button "Publish comment"
             end
 
             within "#comments" do
               expect(page).to have_selector "span.success.label", text: "In favor", wait: 20
             end
           else
-            expect(page).to have_no_selector(".opinion-toggle--ok")
+            expect(page).not_to have_selector(".opinion-toggle--ok")
           end
         end
       end
@@ -708,25 +761,39 @@ shared_examples "comments" do
         it "works according to the setting in the commentable" do
           within "#comment_#{comments[0].id}" do
             if commentable.comments_have_votes?
-              expect(page).to have_selector(".comment__votes--up", text: /0/)
-              page.find(".comment__votes--up").click
-              expect(page).to have_selector(".comment__votes--up", text: /1/)
+              expect(page).to have_selector(".js-comment__votes--up", text: /0/)
+              page.find(".js-comment__votes--up").click
+              expect(page).to have_selector(".js-comment__votes--up", text: /1/)
             else
-              expect(page).to have_no_selector(".comment__votes--up", text: /0/)
+              expect(page).not_to have_selector(".js-comment__votes--up", text: /0/)
             end
           end
         end
+
+        context "when the comment has a thread" do
+          let!(:comment_on_comment) { create(:comment, :comment_on_comment, commentable: comments[0], root_commentable: comments[0].commentable) }
+
+          it "does not increase the votes for the children of the upvoting comment" do
+            skip "Commentable comments has no votes" unless commentable.comments_have_votes?
+
+            visit current_path
+            expect(page).to have_selector("#comment_#{comments[0].id} > .comment__footer > .comment__footer-grid .comment__votes .js-comment__votes--up", text: /0/)
+            page.find("#comment_#{comments[0].id} > .comment__footer > .comment__footer-grid .comment__votes .js-comment__votes--up").click
+            expect(page).to have_selector("#comment_#{comments[0].id} > .comment__footer > .comment__footer-grid .comment__votes .js-comment__votes--up", text: /1/)
+            expect(page).to have_selector("#comment_#{comment_on_comment.id} > .comment__footer > .comment__footer-grid .comment__votes .js-comment__votes--up", text: /0/)
+          end
+        end
       end
 
       context "when downvoting a comment" do
         it "works according to the setting in the commentable" do
           within "#comment_#{comments[0].id}" do
             if commentable.comments_have_votes?
-              expect(page).to have_selector(".comment__votes--down", text: /0/)
-              page.find(".comment__votes--down").click
-              expect(page).to have_selector(".comment__votes--down", text: /1/)
+              expect(page).to have_selector(".js-comment__votes--down", text: /0/)
+              page.find(".js-comment__votes--down").click
+              expect(page).to have_selector(".js-comment__votes--down", text: /1/)
             else
-              expect(page).to have_no_selector(".comment__votes--down", text: /0/)
+              expect(page).not_to have_selector(".js-comment__votes--down", text: /0/)
             end
           end
         end
@@ -737,18 +804,20 @@ shared_examples "comments" do
       before do
         visit resource_path
 
-        within ".add-comment form" do
-          fill_in "add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}", with: content
+        within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
+          field = find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}")
+          field.set " "
+          field.native.send_keys content
         end
       end
 
       context "when mentioning a valid user" do
-        let!(:mentioned_user) { create(:user, :confirmed, organization: organization) }
+        let!(:mentioned_user) { create(:user, :confirmed, organization:) }
         let(:content) { "A valid user mention: @#{mentioned_user.nickname}" }
 
         context "when text finish with a mention" do
           it "shows the tribute container" do
-            expect(page).to have_selector(".tribute-container", text: mentioned_user.name)
+            expect(page).to have_selector(".tribute-container", text: mentioned_user.name, wait: 10)
           end
         end
 
@@ -762,7 +831,7 @@ shared_examples "comments" do
       end
 
       context "when mentioning a non valid user" do
-        let!(:mentioned_user) { create(:user, organization: organization) }
+        let!(:mentioned_user) { create(:user, organization:) }
         let(:content) { "A unconfirmed user mention: @#{mentioned_user.nickname}" }
 
         it "do not show the tribute container" do
@@ -771,11 +840,11 @@ shared_examples "comments" do
       end
 
       context "when mentioning a group" do
-        let!(:mentioned_group) { create(:user_group, :confirmed, organization: organization) }
+        let!(:mentioned_group) { create(:user_group, :confirmed, organization:) }
         let(:content) { "A confirmed user group mention: @#{mentioned_group.nickname}" }
 
         it "shows the tribute container" do
-          expect(page).to have_selector(".tribute-container")
+          expect(page).to have_selector(".tribute-container", text: mentioned_group.nickname, wait: 10)
         end
       end
     end
@@ -784,14 +853,16 @@ shared_examples "comments" do
       before do
         visit resource_path
 
-        within ".add-comment form" do
-          fill_in "add-comment-#{commentable.commentable_type.demodulize.demodulize}-#{commentable.id}", with: content
-          click_button "Send"
+        within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
+          field = find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}")
+          field.set " "
+          field.native.send_keys content
+          click_button "Publish comment"
         end
       end
 
       context "when mentioning a valid user" do
-        let!(:mentioned_user) { create(:user, :confirmed, organization: organization) }
+        let!(:mentioned_user) { create(:user, :confirmed, organization:) }
         # do not finish with the mention to avoid trigger the drop-down
         let(:content) { "A valid user mention: @#{mentioned_user.nickname}." }
 
@@ -827,9 +898,11 @@ shared_examples "comments" do
       before do
         visit resource_path
 
-        within ".add-comment form" do
-          fill_in "add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}", with: content
-          click_button "Send"
+        within "form#new_comment_for_#{commentable.commentable_type.demodulize}_#{commentable.id}" do
+          field = find("#add-comment-#{commentable.commentable_type.demodulize}-#{commentable.id}")
+          field.set " "
+          field.native.send_keys content
+          click_button "Publish comment"
         end
       end