[#61546] Fix DangerDialog scroll behaviour w/form + system test

Gemfile

@@ -51,7 +51,7 @@ group :development do
   gem "allocation_stats", "~> 0.1"
   gem "benchmark-ips", "~> 2.13.0"
   gem "capybara", "~> 3.40.0"
-  gem "cuprite", "~> 0.15"
+  gem "cuprite", "~> 0.15", github: "myabc/cuprite", branch: "feature/support-node-obscured"
   gem "debug"
   gem "erb_lint", "~> 0.6"
   gem "erblint-github", "~> 1.0"

Gemfile.lock

@@ -1,3 +1,12 @@
+GIT
+  remote: https://github.com/myabc/cuprite.git
+  revision: 6f5b31a1c0ff0ff15d91ff617e49bb65122eb6b6
+  branch: feature/support-node-obscured
+  specs:
+    cuprite (0.15.1)
+      capybara (~> 3.0)
+      ferrum (~> 0.16.0)
+
 PATH
   remote: .
   specs:
@@ -76,9 +85,6 @@ GEM
       addressable
     cssbundling-rails (1.4.1)
       railties (>= 6.0.0)
-    cuprite (0.15)
-      capybara (~> 3.0)
-      ferrum (~> 0.14.0)
     debug (1.9.2)
       irb (~> 1.10)
       reline (>= 0.3.8)
@@ -94,11 +100,12 @@ GEM
       smart_properties
     erblint-github (1.0.1)
     erubi (1.13.0)
-    ferrum (0.14)
+    ferrum (0.16)
       addressable (~> 2.5)
+      base64 (~> 0.2)
       concurrent-ruby (~> 1.1)
       webrick (~> 1.7)
-      websocket-driver (>= 0.6, < 0.8)
+      websocket-driver (~> 0.7)
     ffi (1.16.3)
     hashdiff (1.1.0)
     htmlbeautifier (1.4.3)
@@ -279,7 +286,8 @@ GEM
       hashdiff (>= 0.4.0, < 2.0.0)
     webrick (1.8.1)
     websocket (1.2.10)
-    websocket-driver (0.7.6)
+    websocket-driver (0.7.7)
+      base64
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     xpath (3.2.0)
@@ -300,7 +308,7 @@ DEPENDENCIES
   bootsnap (>= 1.4.2)
   capybara (~> 3.40.0)
   cssbundling-rails (~> 1.4)
-  cuprite (~> 0.15)
+  cuprite (~> 0.15)!
   debug
   erb_lint (~> 0.6)
   erblint-github (~> 1.0)

previews/primer/open_project/danger_dialog_preview.rb

@@ -96,6 +96,12 @@ def with_form_builder_form_test(route_format: :html)
       def with_form_test(route_format: :html)
         render_with_template(locals: { route_format: route_format })
       end
+
+      # @label With form and long additional details for testing purposes
+      # @hidden
+      def with_form_long_additional_details_test(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
     end
   end
 end

previews/primer/open_project/danger_dialog_preview/with_form_long_additional_details_test.html.erb

@@ -0,0 +1,14 @@
+<%= render(Primer::OpenProject::DangerDialog.new(
+    title: "Delete dialog",
+    form_arguments: { action: generic_form_submission_path(route_format) }
+  )) do |dialog| %>
+  <% dialog.with_show_button { "Click me" } %>
+  <% dialog.with_confirmation_message do |message|
+      message.with_heading(tag: :h2).with_content("Permanently delete this item?")
+      message.with_description_content("This action is not reversible. Please proceed with caution.")
+     end %>
+  <% dialog.with_additional_details do %>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc tellus, finibus vitae purus vitae, venenatis sodales nibh. Duis orci quam, vehicula sed iaculis et, dignissim vel felis. Cras ac pretium nisl. Proin efficitur vehicula dui, eu pulvinar neque convallis et. Nam interdum imperdiet urna, at aliquam lectus mattis nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec cursus dolor et eros ornare, id pretium magna interdum. Cras cursus lorem eu semper bibendum. Nulla facilisi. In accumsan dignissim arcu vel congue. Sed auctor lacus ipsum, vitae posuere purus scelerisque ac. Suspendisse tincidunt justo eget libero luctus semper. Vivamus vitae erat ut erat malesuada volutpat.</p>
+  <% end %>
+  <% dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed") %>
+<% end %>

test/system/open_project/danger_dialog_test.rb

@@ -62,6 +62,19 @@ def test_submit_button_submits_form
     assert_equal "1", form_params["confirm_dangerous_action"]
   end
 
+  def test_buttons_visible_without_scrolling_with_form
+    visit_preview(:with_form_long_additional_details_test, route_format: :json)
+
+    click_button("Click me")
+
+    current_window.resize_to(800, 200)
+
+    assert_selector(".DangerDialog") do
+      assert_selector("button[data-close-dialog-id]", obscured: false)
+      assert_selector("button[data-submit-dialog-id]", obscured: false)
+    end
+  end
+
   def test_submit_button_submits_form_builder_form
     visit_preview(:with_form_builder_form_test, route_format: :json)