Create notification page spec (#7702)

app/assets/javascripts/initializers/initializeCommentsPage.js.erb

@@ -173,6 +173,8 @@ function replaceActionButts(el) {
 }
 
 function warmNewCommentsArea() {
+  // Ignore when comment is created on /notifications.
+  if (window.location.pathname === "/notifications") { return }
   var path = '/stories/warm_comments'+ window.location.pathname
   window.fetch(path)
 }

app/views/notifications/shared/_comment_box.html.erb

@@ -15,11 +15,21 @@
         <img class="reacted-emoji" src="<%= asset_path("emoji/emoji-one-heart.png") %>" alt="Favorite heart button" />
       </button>
       <% if context == "moderation" && current_user.has_role?(:trusted) %>
-        <button class="reaction-button <%= Reaction.cached_any_reactions_for?(notification.mocked_object("comment"), current_user, "thumbsdown") ? "reacted" : "" %>" data-reactable-id="<%= json_data["comment"]["id"] %>" data-category="thumbsdown" data-reactable-type="Comment">
+        <button
+          class="reaction-button <%= Reaction.cached_any_reactions_for?(notification.mocked_object("comment"), current_user, "thumbsdown") ? "reacted" : "" %>"
+          data-reactable-id="<%= json_data["comment"]["id"] %>"
+          data-category="thumbsdown"
+          data-reactable-type="Comment"
+          title="thumbsdown">
           <%= image_tag("emoji/emoji-one-thumbs-down-gray.png", alt: "Thumbs down emoji") %>
           <img class="reacted-emoji" src="<%= asset_path("emoji/emoji-one-thumbs-down.png") %>" alt="Thumbs down emoji">
         </button>
-        <button class="reaction-button <%= Reaction.cached_any_reactions_for?(notification.mocked_object("comment"), current_user, "vomit") ? "reacted" : "" %>" data-reactable-id="<%= json_data["comment"]["id"] %>" data-category="vomit" data-reactable-type="Comment">
+        <button
+          class="reaction-button <%= Reaction.cached_any_reactions_for?(notification.mocked_object("comment"), current_user, "vomit") ? "reacted" : "" %>"
+          data-reactable-id="<%= json_data["comment"]["id"] %>"
+          data-category="vomit"
+          data-reactable-type="Comment"
+          title="vomit">
           <%= image_tag("emoji/emoji-one-nausea-face-gray.png", alt: "Nausea face emoji") %>
           <img class="reacted-emoji" src="<%= asset_path("emoji/emoji-one-nausea-face.png") %>" alt="Nausea face emoji">
         </button>

spec/system/notifications/notifications_page_spec.rb

@@ -0,0 +1,76 @@
+require "rails_helper"
+
+RSpec.describe "Notifications page", type: :system, js: true do
+  let_it_be(:alex) { create(:user) }
+  let_it_be(:leslie) { create(:user) }
+
+  before { sign_in alex }
+
+  def validate_reply(id)
+    fill_in "comment-textarea-for-#{id}", with: "thanks i guess"
+    click_button("SUBMIT")
+    expect(page).to have_css("div.reply-sent-notice")
+    click_link("Check it out")
+    expect(page).to have_text(/thanks i guess/)
+  end
+
+  it "shows 1 notification and disappear after clicking it" do
+    visit "/"
+    expect(page).to have_css("span#notifications-number", text: "1")
+    click_link("notifications-link")
+    expect(page).not_to have_css("span#notifications-number", text: "1")
+  end
+
+  it "allows user to interact with replies" do
+    sidekiq_perform_enqueued_jobs do
+      article = create(:article, user: alex)
+      comment = create(:comment, commentable: article, user: alex)
+      reply = create(:comment, commentable: article, user: leslie, parent: comment)
+      Notification.send_new_comment_notifications_without_delay(reply)
+    end
+
+    visit "/notifications"
+    expect(page).to have_css("div.single-notification")
+    click_button("heart")
+    expect(page).to have_css("img.reacted-emoji")
+    click_link("Reply")
+    validate_reply(leslie.comments.first.id)
+  end
+
+  it "allows user to follow other users back" do
+    follow = leslie.follow(alex)
+    Notification.send_new_follower_notification_without_delay(follow, "Published")
+    visit "/notifications"
+    expect(page).to have_css("div.single-notification")
+    click_button("+ FOLLOW BACK")
+    expect(page).to have_text("FOLLOWING")
+  end
+
+  context "when user is trusted" do
+    before do
+      dev_user = create(:user)
+      allow(User).to receive(:dev_account).and_return(dev_user)
+      alex.add_role :trusted
+    end
+
+    def interact_with_each_emojis
+      %w[heart thumbsdown vomit].each do |emoji|
+        click_button(emoji)
+        expect(page).to have_css("img.reacted-emoji")
+        click_button(emoji)
+        expect(page).not_to have_css("img.reacted-emoji")
+      end
+    end
+
+    it "allows trusted user to moderate content" do
+      article = create(:article, user: alex)
+      comment = nil
+      sidekiq_perform_enqueued_jobs { comment = create(:comment, commentable: article, user: leslie) }
+      visit "/notifications"
+      expect(page).to have_css("div.single-notification")
+      interact_with_each_emojis
+      click_link("Reply")
+      validate_reply(comment.id)
+    end
+  end
+end