Add e2e test of merge when pipeline succeeds

- Includes new page object methods and elements
- Updates a Jest snapshot because of QA selector
- Adds ability to reload MR resource

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue

@@ -154,7 +154,7 @@ export default {
       <status-icon status="success" />
       <div class="media-body">
         <h4 class="gl-display-flex">
-          <span class="gl-mr-3">
+          <span class="gl-mr-3" data-qa-selector="merge_request_status_content">
             <span class="js-status-text-before-author" data-testid="beforeStatusText">{{
               statusTextBeforeAuthor
             }}</span>

qa/qa/page/merge_request/show.rb

@@ -26,6 +26,10 @@ module QA
           element :merge_immediately_option
         end
 
+        view 'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue' do
+          element :merge_request_status_content
+        end
+
         view 'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue' do
           element :merged_status_content
         end
@@ -235,6 +239,12 @@ module QA
           click_element(:merge_immediately_option)
         end
 
+        def merge_when_pipeline_succeeds!
+          wait_until_ready_to_merge
+
+          click_element(:merge_button, text: 'Merge when pipeline succeeds')
+        end
+
         def merged?
           # Revisit after merge page re-architect is done https://gitlab.com/gitlab-org/gitlab/-/issues/300042
           # To remove page refresh logic if possible
@@ -252,6 +262,10 @@ module QA
           has_element?(:merge_button, disabled: false)
         end
 
+        def merge_request_status
+          find_element(:merge_request_status_content).text
+        end
+
         # Waits up 60 seconds and raises an error if unable to merge
         def wait_until_ready_to_merge
           has_element?(:merge_button)

qa/qa/resource/merge_request.rb

@@ -140,6 +140,14 @@ module QA
         end
       end
 
+      def reload!
+        # Refabricate so that we can return a new object with updated attributes
+        self.class.fabricate_via_api! do |resource|
+          resource.project = project
+          resource.id = api_resource[:iid]
+        end
+      end
+
       private
 
       def transform_api_resource(api_resource)

qa/qa/specs/features/browser_ui/3_create/merge_request/merge_when_pipeline_succeeds_spec.rb

+# frozen_string_literal: true
+
+module QA
+  RSpec.describe 'Create', :runner do
+    describe 'Merge requests' do
+      let(:project) do
+        Resource::Project.fabricate_via_api! do |project|
+          project.name = 'merge-when-pipeline-succeeds'
+          project.initialize_with_readme = true
+        end
+      end
+
+      let!(:runner) do
+        Resource::Runner.fabricate! do |runner|
+          runner.project = project
+          runner.name = "runner-for-#{project.name}"
+          runner.tags = ["runner-for-#{project.name}"]
+        end
+      end
+
+      before do
+        Resource::Repository::Commit.fabricate_via_api! do |commit|
+          commit.project = project
+          commit.commit_message = 'Add .gitlab-ci.yml'
+          commit.add_files(
+            [
+              {
+                file_path: '.gitlab-ci.yml',
+                content: <<~EOF
+                  test:
+                    tags: ["runner-for-#{project.name}"]
+                    script: sleep 5
+                    only:
+                      - merge_requests
+                EOF
+              }
+            ]
+          )
+        end
+
+        Flow::Login.sign_in
+      end
+
+      after do
+        runner&.remove_via_api!
+        project&.remove_via_api!
+      end
+
+      it 'merges when pipeline succeeds', :smoke, testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/1684' do
+        branch_name = "merge-request-test-#{SecureRandom.hex(8)}"
+
+        # Create a branch that will be merged into the default branch
+        Resource::Repository::ProjectPush.fabricate! do |project_push|
+          project_push.project = project
+          project_push.new_branch = true
+          project_push.branch_name = branch_name
+          project_push.file_name = "file-#{SecureRandom.hex(8)}.txt"
+        end
+
+        # Create a merge request to merge the branch we just created
+        merge_request = Resource::MergeRequest.fabricate_via_api! do |merge_request|
+          merge_request.project = project
+          merge_request.source_branch = branch_name
+          merge_request.no_preparation = true
+        end
+
+        merge_request.visit!
+
+        Page::MergeRequest::Show.perform do |mr|
+          mr.merge_when_pipeline_succeeds!
+
+          expect(mr.merge_request_status).to match(/to be merged automatically when the pipeline succeeds/)
+
+          Support::Waiter.wait_until(sleep_interval: 5) do
+            merge_request = merge_request.reload!
+            merge_request.state == 'merged'
+          end
+
+          expect(mr.merged?).to be_truthy, "Expected content 'The changes were merged' but it did not appear."
+        end
+      end
+    end
+  end
+end

spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap

@@ -16,6 +16,7 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
     >
       <span
         class="gl-mr-3"
+        data-qa-selector="merge_request_status_content"
       >
         <span
           class="js-status-text-before-author"
@@ -107,6 +108,7 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
     >
       <span
         class="gl-mr-3"
+        data-qa-selector="merge_request_status_content"
       >
         <span
           class="js-status-text-before-author"