FIX: Show mention count for channel list on mobile (#22682)

Followup to 07c3782e51805c73dbb56e5fd053a9c6978712ff

The above incorrectly removed the channel unread count in
the mobile/drawer channel list when the user has mentions
(meaning the unreads are urgent). This commit adds it
back and refactors system specs a little.

plugins/chat/assets/javascripts/discourse/components/chat-channel-unread-indicator.js

@@ -27,6 +27,6 @@ export default class ChatChannelUnreadIndicator extends Component {
   }
 
   get showUnreadCount() {
-    return this.args.channel.isDirectMessageChannel;
+    return this.args.channel.isDirectMessageChannel || this.isUrgent;
   }
 }

plugins/chat/spec/system/message_notifications_mobile_spec.rb

@@ -5,6 +5,7 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
 
   let!(:chat_page) { PageObjects::Pages::Chat.new }
   let!(:chat_channel_page) { PageObjects::Pages::ChatChannel.new }
+  let!(:channel_index_page) { PageObjects::Components::Chat::ChannelIndex.new }
 
   before do
     SiteSetting.navigation_menu = "sidebar"
@@ -41,9 +42,7 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
               end
 
               expect(page).to have_no_css(".chat-header-icon .chat-channel-unread-indicator")
-              expect(page).to have_no_css(
+              expect(page).to have_no_css(channel_index_page.channel_row_selector(channel_1))
-                ".chat-channel-row[data-chat-channel-id=\"#{channel_1.id}\"]",
-              )
             end
           end
         end
@@ -89,9 +88,7 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
                 end
 
                 expect(page).to have_no_css(".chat-header-icon .chat-channel-unread-indicator")
-                expect(page).to have_no_css(
+                expect(channel_index_page).to have_no_unread_channel(channel_1)
-                  ".chat-channel-row[data-chat-channel-id=\"#{channel_1.id}\"] .chat-channel-unread-indicator",
-                )
               end
             end
           end
@@ -107,9 +104,7 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
               end
 
               expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator", text: "")
-              expect(page).to have_css(
+              expect(channel_index_page).to have_unread_channel(channel_1)
-                ".chat-channel-row[data-chat-channel-id=\"#{channel_1.id}\"] .chat-channel-unread-indicator",
-              )
             end
           end
 
@@ -127,9 +122,7 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
               end
 
               expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator")
-              expect(page).to have_css(
+              expect(channel_index_page).to have_unread_channel(channel_1, count: 1)
-                ".chat-channel-row[data-chat-channel-id=\"#{channel_1.id}\"] .chat-channel-unread-indicator",
-              )
             end
           end
         end
@@ -158,10 +151,7 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
               text: "1",
               wait: 25,
             )
-            expect(page).to have_css(
+            expect(channel_index_page).to have_unread_channel(dm_channel_1, wait: 25)
-              ".chat-channel-row[data-chat-channel-id=\"#{dm_channel_1.id}\"] .chat-channel-unread-indicator",
-              wait: 25,
-            )
 
             using_session(:user_1) do |session|
               create_message(channel: dm_channel_1, creator: user_1)
@@ -224,18 +214,14 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
             end
 
             expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator", text: "")
-            expect(page).to have_css(
+            expect(channel_index_page).to have_unread_channel(channel_1)
-              ".chat-channel-row[data-chat-channel-id=\"#{channel_1.id}\"] .chat-channel-unread-indicator",
-            )
 
             using_session(:user_1) do |session|
               create_message(channel: dm_channel_1, creator: user_1)
               session.quit
             end
 
-            expect(page).to have_css(
+            expect(channel_index_page).to have_unread_channel(dm_channel_1)
-              ".chat-channel-row[data-chat-channel-id=\"#{dm_channel_1.id}\"] .chat-channel-unread-indicator",
-            )
             expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator", text: "1")
           end
         end

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

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    module Chat
+      class ChannelIndex < PageObjects::Components::Base
+        attr_reader :context
+
+        SELECTOR = ".channels-list"
+
+        def initialize(context = nil)
+          @context = context
+        end
+
+        def component
+          return find(SELECTOR) if !@context
+          find(context).find(SELECTOR)
+        end
+
+        def open_channel(channel)
+          component.find("#{channel_row_selector(channel)}").click
+        end
+
+        def channel_row_selector(channel)
+          ".chat-channel-row[data-chat-channel-id='#{channel.id}']"
+        end
+
+        def has_unread_channel?(channel, count: nil, wait: Capybara.default_max_wait_time)
+          unread_indicator_selector =
+            "#{channel_row_selector(channel)} .chat-channel-unread-indicator"
+          has_css?(unread_indicator_selector) &&
+            if count
+              has_css?(
+                "#{unread_indicator_selector} .chat-channel-unread-indicator__number",
+                text: count,
+              )
+            else
+              true
+            end
+        end
+
+        def has_no_unread_channel?(channel)
+          has_no_css?("#{channel_row_selector(channel)} .chat-channel-unread-indicator")
+        end
+      end
+    end
+  end
+end

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

@@ -4,6 +4,11 @@ module PageObjects
   module Pages
     class ChatDrawer < PageObjects::Pages::Base
       VISIBLE_DRAWER = ".chat-drawer.is-expanded"
+
+      def channel_index
+        @channel_index ||= ::PageObjects::Components::Chat::ChannelIndex.new(VISIBLE_DRAWER)
+      end
+
       def open_browse
         mouseout
         find("#{VISIBLE_DRAWER} .open-browse-page-btn").click
@@ -20,20 +25,16 @@ module PageObjects
       end
 
       def open_channel(channel)
-        find("#{VISIBLE_DRAWER} .channels-list #{channel_row_selector(channel)}").click
+        channel_index.open_channel(channel)
         has_no_css?(".chat-skeleton")
       end
 
-      def channel_row_selector(channel)
-        ".chat-channel-row[data-chat-channel-id='#{channel.id}']"
-      end
-
       def has_unread_channel?(channel)
-        has_css?("#{channel_row_selector(channel)} .chat-channel-unread-indicator")
+        channel_index.has_unread_channel?(channel)
       end
 
       def has_no_unread_channel?(channel)
-        has_no_css?("#{channel_row_selector(channel)} .chat-channel-unread-indicator")
+        channel_index.has_no_unread_channel?(channel)
       end
 
       def maximize