DEV: Fix flaky system test in system/category_topics_spec.rb (#22652)

Why was the test flaky?

The test relied on the fact that visiting a topic would marked its
post as unread. However, we did not actually stay on the topic long
enough in some cases for it to be considered read based on the logic in
our client side code.

This commit fixes the flakiness by ensuring that the post has actually
been read before navigating away.

spec/system/category_topics_spec.rb

@@ -3,8 +3,10 @@
 describe "Viewing top topics on categories page", type: :system, js: true do
   fab!(:user) { Fabricate(:user) }
   let(:category_list) { PageObjects::Components::CategoryList.new }
+  let(:topic_view) { PageObjects::Components::TopicView.new }
   fab!(:category) { Fabricate(:category) }
   fab!(:topic) { Fabricate(:topic, category: category) }
+  fab!(:post) { Fabricate(:post, topic: topic) }
 
   it "displays and updates new counter" do
     skip(<<~TEXT)
@@ -20,6 +22,9 @@ describe "Viewing top topics on categories page", type: :system, js: true do
 
     category_list.click_new_posts_badge(count: 1)
     category_list.click_topic(topic)
+
+    expect(topic_view).to have_read_post(post)
+
     category_list.click_logo
     category_list.click_category_navigation
 

spec/system/page_objects/components/topic_view.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    class TopicView < PageObjects::Components::Base
+      def has_read_post?(post)
+        page.has_css?(
+          "#post_#{post.post_number} .read-state.read",
+          visible: false,
+          wait: Capybara.default_max_wait_time * 2,
+        )
+      end
+    end
+  end
+end