DEV: Fix flaky network-based upload spec (#23286)

Tries to fix the composer upload spec by making the upload
slow enough to allow clicking the Cancel button, and improves
generally the API for CDP network changes.

plugins/chat/spec/system/chat_composer_spec.rb

@@ -7,6 +7,7 @@ RSpec.describe "Chat composer", type: :system do
 
   let(:chat_page) { PageObjects::Pages::Chat.new }
   let(:channel_page) { PageObjects::Pages::ChatChannel.new }
+  let(:cdp) { PageObjects::CDP.new }
 
   before do
     chat_system_bootstrap
@@ -151,9 +152,8 @@ RSpec.describe "Chat composer", type: :system do
     it "doesn’t allow to send" do
       chat_page.visit_channel(channel_1)
 
-      page.driver.browser.network_conditions = { latency: 20_000 }
-
       file_path = file_from_fixtures("logo.png", "images").path
+      cdp.with_slow_upload do
         attach_file(file_path) do
           channel_page.open_action_menu
           channel_page.click_action_button("chat-upload-btn")
@@ -161,8 +161,9 @@ RSpec.describe "Chat composer", type: :system do
 
         expect(page).to have_css(".chat-composer-upload--in-progress")
         expect(page).to have_css(".chat-composer.is-send-disabled")
-    ensure
+        page.find(".chat-composer-upload").hover
-      page.driver.browser.network_conditions = { latency: 0 }
+        page.find(".chat-composer-upload__remove-btn").click
+      end
     end
   end
 end

spec/system/composer_uploads_spec.rb

@@ -6,6 +6,7 @@ describe "Uploading files in the composer", type: :system, js: true do
   let(:modal) { PageObjects::Modals::Base.new }
   let(:composer) { PageObjects::Components::Composer.new }
   let(:topic) { PageObjects::Pages::Topic.new }
+  let(:cdp) { PageObjects::CDP.new }
 
   before { sign_in(current_user) }
 
@@ -29,17 +30,15 @@ describe "Uploading files in the composer", type: :system, js: true do
     visit "/new-topic"
     expect(composer).to be_opened
 
-    page.driver.browser.network_conditions = { latency: 20_000 }
+    file_path_1 = file_from_fixtures("huge.jpg", "images").path
-
+    cdp.with_slow_upload do
-    file_path_1 = file_from_fixtures("logo.png", "images").path
       attach_file(file_path_1) { composer.click_toolbar_button("upload") }
       expect(composer).to have_in_progress_uploads
       find("#cancel-file-upload").click
 
       expect(composer).to have_no_in_progress_uploads
       expect(composer.preview).to have_no_css(".image-wrapper")
-  ensure
+    end
-    page.driver.browser.network_conditions = { latency: 0 }
   end
 
   context "when video thumbnails are enabled" do

spec/system/network_disconnected_spec.rb

@@ -1,19 +1,13 @@
 # frozen_string_literal: true
 
 RSpec.describe "Network Disconnected", type: :system do
-  def with_network_disconnected
+  let(:cdp) { PageObjects::CDP.new }
-    begin
-      page.driver.browser.network_conditions = { offline: true }
-      yield
-    ensure
-      page.driver.browser.network_conditions = { offline: false }
-    end
-  end
 
   it "NetworkConnectivity service adds class to DOM and displays offline indicator" do
-    skip(<<~TEXT)
+    skip(<<~TEXT) if ENV["CI"]
-      # In CI this test will randomly flake - timing issue with the offline indicator
+      In CI this test will randomly flake - timing issue with the offline indicator
-      # not being rendered soon enough after network conditions change
+      not being rendered soon enough after network conditions change
+    TEXT
 
     SiteSetting.enable_offline_indicator = true
 
@@ -22,13 +16,12 @@ RSpec.describe "Network Disconnected", type: :system do
     expect(page).to have_no_css("html.network-disconnected")
     expect(page).to have_no_css(".offline-indicator")
 
-      with_network_disconnected doskip(<<~TEXT)
+    cdp.with_network_disconnected do
       # Message bus connectivity services adds the disconnected class to the DOM
       expect(page).to have_css("html.network-disconnected")
 
       # Offline indicator is rendered
       expect(page).to have_css(".offline-indicator")
     end
-    TEXT
   end
 end

spec/system/page_objects/cdp.rb

@@ -27,5 +27,32 @@ module PageObjects
     def read_clipboard
       page.evaluate_async_script("navigator.clipboard.readText().then(arguments[0])")
     end
+
+    def with_network_disconnected
+      begin
+        page.driver.browser.network_conditions = { offline: true }
+        yield
+      ensure
+        page.driver.browser.network_conditions = { offline: false }
+      end
+    end
+
+    def with_slow_download
+      begin
+        page.driver.browser.network_conditions = { latency: 20_000, download_throughput: 1 }
+        yield
+      ensure
+        page.driver.browser.network_conditions = { latency: 0 }
+      end
+    end
+
+    def with_slow_upload
+      begin
+        page.driver.browser.network_conditions = { latency: 20_000, upload_throughput: 1 }
+        yield
+      ensure
+        page.driver.browser.network_conditions = { latency: 0 }
+      end
+    end
   end
 end

spec/system/s3_uploads_spec.rb

@@ -25,11 +25,11 @@ describe "Uploading files in the composer to S3", type: :system do
         end
         expect(page).to have_css(".avatar-uploader label[data-uploaded]")
         modal.click_primary_button
+        expect(modal).to be_closed
         expect(page).to have_css(
           "#user-avatar-uploads[data-custom-avatar-upload-id]",
           visible: false,
         )
-        puts page.driver.browser.logs.get(:browser).map(&:message)
         expect(current_user.reload.uploaded_avatar_id).to eq(
           find("#user-avatar-uploads", visible: false)["data-custom-avatar-upload-id"].to_i,
         )