DEV: implements initial messages component (#21727)

This should also make `message_notifications_with_sidebar_spec.rb` more resilient as we are now checking for `is-persisted` class instead of checking for the absence of `is-staged`.

plugins/chat/assets/javascripts/discourse/components/chat-message.hbs

@@ -22,6 +22,7 @@
       (if this.pane.selectingMessages "selecting-messages")
       (if @message.highlighted "highlighted")
       (if (eq @message.user.id this.currentUser.id) "is-by-current-user")
+      (if @message.staged "is-staged" "is-persisted")
     }}
     data-id={{@message.id}}
     data-thread-id={{@message.thread.id}}
@@ -65,7 +66,6 @@
           {{did-update this.initMentionedUsers @message.version}}
           class={{concat-class
             "chat-message"
-            (if @message.staged "chat-message-staged" "chat-message-persisted")
             (if @message.deletedAt "deleted")
             (if (and @message.inReplyTo (not this.hideReplyToInfo)) "is-reply")
             (if this.showThreadIndicator "is-threaded")

plugins/chat/spec/system/chat_channel_spec.rb

@@ -6,7 +6,7 @@ RSpec.describe "Chat channel", type: :system, js: true do
   fab!(:message_1) { Fabricate(:chat_message, chat_channel: channel_1) }
 
   let(:chat) { PageObjects::Pages::Chat.new }
-  let(:channel) { PageObjects::Pages::ChatChannel.new }
+  let(:channel_page) { PageObjects::Pages::ChatChannel.new }
 
   before { chat_system_bootstrap }
 
@@ -21,15 +21,13 @@ RSpec.describe "Chat channel", type: :system, js: true do
 
       it "loads most recent messages" do
         unloaded_message = Fabricate(:chat_message, chat_channel: channel_1)
-        visit("/chat/c/-/#{channel_1.id}/#{message_1.id}")
+        chat.visit_channel(channel_1, message_id: message_1.id)
 
-        expect(channel).to have_no_loading_skeleton
+        expect(channel_page.messages).to have_no_message(id: unloaded_message.id)
-        expect(page).to have_no_css("[data-id='#{unloaded_message.id}']")
 
-        channel.send_message("test_message")
+        channel_page.send_message
 
-        expect(channel).to have_no_loading_skeleton
+        expect(channel_page.messages).to have_message(id: unloaded_message.id)
-        expect(page).to have_css("[data-id='#{unloaded_message.id}']")
       end
     end
 
@@ -46,12 +44,12 @@ RSpec.describe "Chat channel", type: :system, js: true do
         end
 
         using_session(:tab_1) do |session|
-          channel.send_message("test_message")
+          channel_page.send_message("test_message")
           session.quit
         end
 
         using_session(:tab_2) do |session|
-          expect(channel).to have_message(text: "test_message")
+          expect(channel_page).to have_message(text: "test_message")
           session.quit
         end
       end
@@ -59,12 +57,14 @@ RSpec.describe "Chat channel", type: :system, js: true do
 
     it "allows to edit this message once persisted" do
       chat.visit_channel(channel_1)
-      channel.send_message("aaaaaaaaaaaaaaaaaaaa")
+      channel_page.send_message("aaaaaa")
-      expect(page).to have_no_css(".chat-message-staged")
+
+      expect(channel_page.messages).to have_message(persisted: true, text: "aaaaaa")
+
       last_message = find(".chat-message-container:last-child")
       last_message.hover
 
-      expect(page).to have_css(
+      expect(channel_page).to have_css(
         ".chat-message-actions-container[data-id='#{last_message["data-id"]}']",
       )
     end
@@ -81,12 +81,12 @@ RSpec.describe "Chat channel", type: :system, js: true do
       unloaded_message = Fabricate(:chat_message, chat_channel: channel_1)
       visit("/chat/message/#{message_1.id}")
 
-      expect(channel).to have_no_loading_skeleton
+      expect(channel_page).to have_no_loading_skeleton
       expect(page).to have_no_css("[data-id='#{unloaded_message.id}']")
 
       find(".chat-scroll-to-bottom").click
 
-      expect(channel).to have_no_loading_skeleton
+      expect(channel_page).to have_no_loading_skeleton
       expect(page).to have_css("[data-id='#{unloaded_message.id}']")
     end
   end

plugins/chat/spec/system/deleted_message_spec.rb

@@ -19,7 +19,7 @@ RSpec.describe "Deleted message", type: :system, js: true do
       chat_page.visit_channel(channel_1)
       channel_page.send_message("aaaaaaaaaaaaaaaaaaaa")
 
-      expect(page).to have_css(".chat-message-persisted")
+      expect(page).to have_css(".is-persisted")
 
       last_message = find(".chat-message-container:last-child")
       channel_page.delete_message(OpenStruct.new(id: last_message["data-id"]))

plugins/chat/spec/system/message_notifications_with_sidebar_spec.rb

@@ -4,19 +4,20 @@ RSpec.describe "Message notifications - with sidebar", type: :system, js: true d
   fab!(:current_user) { Fabricate(:user) }
 
   let!(:chat_page) { PageObjects::Pages::Chat.new }
-  let!(:chat_channel_page) { PageObjects::Pages::ChatChannel.new }
+  let!(:channel_page) { PageObjects::Pages::ChatChannel.new }
 
   before do
     SiteSetting.navigation_menu = "sidebar"
     chat_system_bootstrap
   end
 
-  def create_message(text: "this is fine", channel:, creator: Fabricate(:user))
+  def create_message(text: nil, channel:, creator: Fabricate(:user))
     sign_in(creator)
     chat_page.visit_channel(channel)
-    chat_channel_page.send_message(text)
+    channel_page.send_message(text)
-    expect(chat_channel_page).to have_no_css(".chat-message-staged")
+    args = { persisted: true }
-    expect(chat_channel_page).to have_message(text: text)
+    args[:text] = text if text
+    expect(channel_page.messages).to have_message(**args)
   end
 
   context "as a user" do
@@ -34,6 +35,7 @@ RSpec.describe "Message notifications - with sidebar", type: :system, js: true d
           context "when a message is created" do
             it "doesn't show anything" do
               visit("/")
+
               using_session(:user_1) do |session|
                 create_message(channel: channel_1, creator: user_1)
                 session.quit

plugins/chat/spec/system/page_objects/chat/chat.rb

@@ -17,8 +17,8 @@ module PageObjects
         visit("/chat")
       end
 
-      def visit_channel(channel)
+      def visit_channel(channel, message_id: nil)
-        visit(channel.url)
+        visit(channel.url + (message_id ? "/#{message_id}" : ""))
         has_no_css?(".chat-channel--not-loaded-once")
         has_no_css?(".chat-skeleton")
       end

plugins/chat/spec/system/page_objects/chat/chat_channel.rb

@@ -7,6 +7,10 @@ module PageObjects
         @composer ||= PageObjects::Components::Chat::Composer.new(".chat-channel")
       end
 
+      def messages
+        @messages ||= PageObjects::Components::Chat::Messages.new(".chat-channel")
+      end
+
       def replying_to?(message)
         find(".chat-channel .chat-reply", text: message.message)
       end
@@ -115,10 +119,12 @@ module PageObjects
       end
 
       def send_message(text = nil)
+        text ||= Faker::Lorem.characters(number: SiteSetting.chat_minimum_message_length)
         text = text.chomp if text.present? # having \n on the end of the string counts as an Enter keypress
         fill_composer(text)
         click_send_message
         click_composer
+        has_no_loading_skeleton?
       end
 
       def reply_to(message)

plugins/chat/spec/system/page_objects/chat/chat_thread.rb

@@ -12,6 +12,10 @@ module PageObjects
           PageObjects::Components::Chat::ComposerMessageDetails.new(".chat-thread")
       end
 
+      def messages
+        @messages ||= PageObjects::Components::Chat::Messages.new(".chat-thread")
+      end
+
       def header
         find(".chat-thread__header")
       end
@@ -47,6 +51,7 @@ module PageObjects
       end
 
       def send_message(text = nil)
+        text ||= Faker::Lorem.characters(number: SiteSetting.chat_minimum_message_length)
         text = text.chomp if text.present? # having \n on the end of the string counts as an Enter keypress
         fill_composer(text)
         click_send_message

plugins/chat/spec/system/page_objects/chat/components/message.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    module Chat
+      class Message < PageObjects::Components::Base
+        attr_reader :context
+
+        SELECTOR = ".chat-message-container"
+
+        def initialize(context)
+          @context = context
+        end
+
+        def exists?(**args)
+          selectors = SELECTOR
+          selectors += "[data-id=\"#{args[:id]}\"]" if args[:id]
+          selectors += ".is-persisted" if args[:persisted]
+          selectors += ".is-staged" if args[:staged]
+
+          if args[:text]
+            find(context).has_selector?(selectors + " " + ".chat-message-text", text: args[:text])
+          else
+            find(context).has_selector?(selectors)
+          end
+        end
+      end
+    end
+  end
+end

plugins/chat/spec/system/page_objects/chat/components/messages.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    module Chat
+      class Messages < PageObjects::Components::Base
+        attr_reader :context
+
+        SELECTOR = ".chat-message-container"
+
+        def initialize(context)
+          @context = context
+        end
+
+        def has_message?(**args)
+          PageObjects::Components::Chat::Message.new(".chat-channel").exists?(**args)
+        end
+
+        def has_no_message?(**args)
+          !has_message?(**args)
+        end
+      end
+    end
+  end
+end