Add E2E test for MR review in Web IDE

Test to fill the gap in coverage identified in Web IDE Tests Audit
For more information:
https://gitlab.com/gitlab-org/quality/team-tasks/issues/424
https://gitlab.com/gitlab-org/quality/team-tasks/-/issues/376

app/assets/javascripts/ide/components/repo_editor.vue

@@ -308,6 +308,7 @@ export default {
         'is-added': file.tempFile,
       }"
       class="multi-file-editor-holder"
+      data-qa-selector="editor_container"
       @focusout="triggerFilesChange"
     ></div>
     <content-viewer

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -121,6 +121,7 @@ export default {
             data-placement="bottom"
             tabindex="0"
             role="button"
+            data-qa-selector="open_in_web_ide_button"
           >
             {{ s__('mrWidget|Open in Web IDE') }}
           </a>

qa/qa/page/merge_request/show.rb

@@ -14,6 +14,7 @@ module QA
           element :dropdown_toggle
           element :download_email_patches
           element :download_plain_diff
+          element :open_in_web_ide_button
         end
 
         view 'app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue' do
@@ -219,6 +220,10 @@ module QA
         def wait_for_loading
           finished_loading? && has_no_element?(:skeleton_note)
         end
+
+        def click_open_in_web_ide
+          click_element :open_in_web_ide_button
+        end
       end
     end
   end

qa/qa/page/project/web_ide/edit.rb

@@ -48,6 +48,10 @@ module QA
             element :start_new_mr_checkbox
           end
 
+          view 'app/assets/javascripts/ide/components/repo_editor.vue' do
+            element :editor_container
+          end
+
           def has_file?(file_name)
             within_element(:file_list) do
               page.has_content? file_name
@@ -113,6 +117,17 @@ module QA
 
             raise "The changes do not appear to have been committed successfully." unless commit_success_msg_shown
           end
+
+          def add_to_modified_content(content)
+            finished_loading?
+            modified_text_area.set content
+          end
+
+          def modified_text_area
+            within_element(:editor_container) do
+              find('.modified textarea.inputarea')
+            end
+          end
         end
       end
     end

qa/qa/specs/features/browser_ui/3_create/web_ide/review_merge_request_spec.rb

+# frozen_string_literal: true
+
+module QA
+  context 'Create', quarantine: { type: :new } do
+    describe 'Review a merge request in Web IDE' do
+      let(:new_file) { 'awesome_new_file.txt' }
+      let(:review_text) { 'Reviewed ' }
+
+      let(:merge_request) do
+        Resource::MergeRequest.fabricate_via_api! do |mr|
+          mr.file_name = new_file
+          mr.file_content = 'Text'
+        end
+      end
+
+      before do
+        Flow::Login.sign_in
+
+        merge_request.visit!
+      end
+
+      it 'opens and edits a merge request in Web IDE' do
+        Page::MergeRequest::Show.perform do |show|
+          show.click_open_in_web_ide
+        end
+
+        Page::Project::WebIDE::Edit.perform do |ide|
+          ide.has_file?(new_file)
+          ide.add_to_modified_content(review_text)
+          ide.commit_changes
+        end
+
+        merge_request.visit!
+
+        Page::MergeRequest::Show.perform do |show|
+          show.click_diffs_tab
+          expect(show).to have_content(review_text)
+        end
+      end
+    end
+  end
+end