Merge branch 'qa-update-selectors-for-diffs' into 'master'

Update e2e selectors and page objects for diffs

See merge request gitlab-org/gitlab!60545

app/assets/javascripts/batch_comments/components/preview_dropdown.vue

@@ -35,7 +35,7 @@ export default {
   <gl-dropdown
     :header-text="n__('%d pending comment', '%d pending comments', draftsCount)"
     dropup
-    toggle-class="qa-review-preview-toggle"
+    data-qa-selector="review_preview_dropdown"
   >
     <template #button-content>
       {{ __('Pending comments') }}

app/assets/javascripts/diffs/components/commit_item.vue

@@ -138,7 +138,7 @@ export default {
           />
         </div>
         <div class="commit-detail flex-list">
-          <div class="commit-content qa-commit-content">
+          <div class="commit-content" data-qa-selector="commit_content">
             <a
               :href="commit.commit_url"
               class="commit-row-message item-title"

app/assets/javascripts/diffs/components/diff_row.vue

@@ -206,6 +206,7 @@ export default {
           :class="classNameMapCellLeft"
           data-testid="left-line-number"
           class="diff-td diff-line-num"
+          data-qa-selector="new_diff_line_link"
         >
           <template v-if="!isLeftConflictMarker">
             <span
@@ -220,7 +221,7 @@ export default {
                 tabindex="0"
                 :draggable="!line.left.commentsDisabled && glFeatures.dragCommentSelection"
                 type="button"
-                class="add-diff-note unified-diff-components-diff-note-button note-button js-add-diff-note-button qa-diff-comment"
+                class="add-diff-note unified-diff-components-diff-note-button note-button js-add-diff-note-button"
                 data-qa-selector="diff_comment_button"
                 :class="{ 'gl-cursor-grab': dragging }"
                 :disabled="line.left.commentsDisabled"
@@ -327,7 +328,7 @@ export default {
                 tabindex="0"
                 :draggable="!line.right.commentsDisabled && glFeatures.dragCommentSelection"
                 type="button"
-                class="add-diff-note unified-diff-components-diff-note-button note-button js-add-diff-note-button qa-diff-comment"
+                class="add-diff-note unified-diff-components-diff-note-button note-button js-add-diff-note-button"
                 :class="{ 'gl-cursor-grab': dragging }"
                 :disabled="line.right.commentsDisabled"
                 :aria-disabled="line.right.commentsDisabled"

app/assets/javascripts/diffs/components/inline_diff_table_row.vue

@@ -177,7 +177,6 @@ export default {
       <a
         v-if="line.new_line"
         ref="lineNumberRefNew"
-        data-qa-selector="new_diff_line_link"
         :data-linenumber="line.new_line"
         :href="line.lineHref"
         @click="setHighlightedRow(line.lineCode)"

app/assets/javascripts/diffs/components/parallel_diff_table_row.vue

@@ -193,7 +193,7 @@ export default {
             v-show="shouldShowCommentButtonLeft"
             ref="addDiffNoteButtonLeft"
             type="button"
-            class="add-diff-note note-button js-add-diff-note-button qa-diff-comment"
+            class="add-diff-note note-button js-add-diff-note-button"
             :disabled="line.left.commentsDisabled"
             :aria-label="addCommentTooltipLeft"
             @click="handleCommentButton(line.left)"
@@ -251,7 +251,7 @@ export default {
             v-show="shouldShowCommentButtonRight"
             ref="addDiffNoteButtonRight"
             type="button"
-            class="add-diff-note note-button js-add-diff-note-button qa-diff-comment"
+            class="add-diff-note note-button js-add-diff-note-button"
             :disabled="line.right.commentsDisabled"
             :aria-label="addCommentTooltipRight"
             @click="handleCommentButton(line.right)"

app/assets/javascripts/notes/components/note_form.vue

@@ -367,21 +367,11 @@ export default {
           <p v-if="showResolveDiscussionToggle">
             <label>
               <template v-if="discussionResolved">
-                <input
-                  v-model="isUnresolving"
-                  type="checkbox"
-                  class="js-unresolve-checkbox"
-                  data-qa-selector="unresolve_review_discussion_checkbox"
-                />
+                <input v-model="isUnresolving" type="checkbox" class="js-unresolve-checkbox" />
                 {{ __('Unresolve thread') }}
               </template>
               <template v-else>
-                <input
-                  v-model="isResolving"
-                  type="checkbox"
-                  class="js-resolve-checkbox"
-                  data-qa-selector="resolve_review_discussion_checkbox"
-                />
+                <input v-model="isResolving" type="checkbox" class="js-resolve-checkbox" />
                 {{ __('Resolve thread') }}
               </template>
             </label>

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" data-qa-selector="merge_request_status_content">
+          <span class="gl-mr-3">
             <span class="js-status-text-before-author" data-testid="beforeStatusText">{{
               statusTextBeforeAuthor
             }}</span>

app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue

@@ -34,7 +34,7 @@ export default {
     boundary="window"
     right
     menu-class="gl-w-full!"
-    data-qa-selector="apply_suggestion_button"
+    data-qa-selector="apply_suggestion_dropdown"
     @shown="$refs.commitMessage.$el.focus()"
   >
     <gl-dropdown-form class="gl-px-4! gl-m-0!">
@@ -45,7 +45,7 @@ export default {
         v-model="message"
         :placeholder="defaultCommitMessage"
         submit-on-enter
-        data-qa-selector="commit_message_textbox"
+        data-qa-selector="commit_message_field"
         @submit="onApply"
       />
       <gl-button

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue

@@ -70,7 +70,7 @@ export default {
 <template>
   <div class="md-suggestion">
     <suggestion-diff-header
-      class="qa-suggestion-diff-header js-suggestion-diff-header"
+      class="js-suggestion-diff-header"
       :suggestions-count="suggestionsCount"
       :can-apply="suggestion.appliable && suggestion.current_user.can_apply && !disabled"
       :is-applied="suggestion.applied"

app/views/projects/merge_requests/_description.html.haml

 %div
   - if @merge_request.description.present?
-    .description.qa-description{ class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : '' }
+    .description{ class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : '' , data: { qa_selector: 'description_content' } }
       .md
         = markdown_field(@merge_request, :description)
       %textarea.hidden.js-task-list-field{ data: { value: @merge_request.description } }

app/views/projects/merge_requests/_mr_box.html.haml

 .detail-page-description.py-2
-  %h2.title.qa-title.mb-0
+  %h2.title.mb-0{ data: { qa_selector: 'title_content' } }
     = markdown_field(@merge_request, :title)

app/views/shared/_commit_message_container.html.haml

@@ -7,11 +7,13 @@
     .commit-message-container
       .max-width-marker
       = text_area_tag 'commit_message',
-          (params[:commit_message] || local_assigns[:text] || local_assigns[:placeholder]),
-          class: 'form-control gl-form-input js-commit-message', placeholder: local_assigns[:placeholder],
-          data: descriptions,
-          required: true, rows: (local_assigns[:rows] || 3),
-          id: "commit_message-#{nonce}"
+        (params[:commit_message] || local_assigns[:text] || local_assigns[:placeholder]),
+        class: 'form-control gl-form-input js-commit-message',
+        placeholder: local_assigns[:placeholder],
+        data: descriptions,
+        'data-qa-selector': 'commit_message_field',
+        required: true, rows: (local_assigns[:rows] || 3),
+        id: "commit_message-#{nonce}"
     - if local_assigns[:hint]
       %p.hint
         = _('Try to keep the first line under 52 characters and the others under 72.')

qa/qa/page/file/shared/commit_message.rb

@@ -11,7 +11,7 @@ module QA
             super
 
             base.view 'app/views/shared/_commit_message_container.html.haml' do
-              element :commit_message, "text_area_tag 'commit_message'" # rubocop:disable QA/ElementWithPattern
+              element :commit_message_field
             end
 
             base.view 'app/views/projects/commits/_commit.html.haml' do
@@ -20,7 +20,7 @@ module QA
           end
 
           def add_commit_message(message)
-            fill_in 'commit_message', with: message
+            fill_element(:commit_message_field, message)
           end
 
           def has_commit_message?(text)

qa/qa/page/merge_request/show.rb

@@ -7,50 +7,16 @@ module QA
         include Page::Component::Note
         include Page::Component::Issuable::Sidebar
 
-        view 'app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue' do
-          element :download_dropdown
-          element :download_email_patches_menu_item
-          element :download_plain_diff_menu_item
-          element :open_in_web_ide_button
-        end
-
-        view 'app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue' do
-          element :merge_request_pipeline_info_content
-          element :pipeline_link
-        end
-
-        view 'app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue' do
-          element :merge_button
-          element :fast_forward_message_content
-          element :merge_moment_dropdown
-          element :merge_immediately_menu_item
-        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
-
-        view 'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue' do
-          element :merge_request_error_content
-        end
-
-        view 'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue' do
-          element :mr_rebase_button
-          element :no_fast_forward_message_content
+        view 'app/assets/javascripts/batch_comments/components/preview_dropdown.vue' do
+          element :review_preview_dropdown
         end
 
-        view 'app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue' do
-          element :squash_checkbox
+        view 'app/assets/javascripts/batch_comments/components/publish_button.vue' do
+          element :submit_review_button
         end
 
-        view 'app/views/projects/merge_requests/show.html.haml' do
-          element :notes_tab
-          element :commits_tab
-          element :diffs_tab
+        view 'app/assets/javascripts/batch_comments/components/review_bar.vue' do
+          element :review_bar_content
         end
 
         view 'app/assets/javascripts/diffs/components/compare_dropdown_layout.vue' do
@@ -70,33 +36,60 @@ module QA
 
         view 'app/assets/javascripts/diffs/components/diff_row.vue' do
           element :diff_comment_button
+          element :new_diff_line_link
         end
 
-        view 'app/assets/javascripts/diffs/components/inline_diff_table_row.vue' do
-          element :new_diff_line_link
+        view 'app/assets/javascripts/notes/components/note_form.vue' do
+          element :start_review_button
+          element :comment_now_button
         end
 
-        view 'app/views/projects/merge_requests/_mr_title.html.haml' do
-          element :edit_button
+        view 'app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue' do
+          element :download_dropdown
+          element :download_email_patches_menu_item
+          element :download_plain_diff_menu_item
+          element :open_in_web_ide_button
         end
 
-        view 'app/assets/javascripts/batch_comments/components/publish_button.vue' do
-          element :submit_review_button
+        view 'app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue' do
+          element :merge_request_pipeline_info_content
+          element :pipeline_link
         end
 
-        view 'app/assets/javascripts/batch_comments/components/review_bar.vue' do
-          element :review_bar_content
+        view 'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue' do
+          element :merge_request_error_content
         end
 
-        view 'app/assets/javascripts/notes/components/note_form.vue' do
-          element :unresolve_review_discussion_checkbox
-          element :resolve_review_discussion_checkbox
-          element :start_review_button
-          element :comment_now_button
+        view 'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue' do
+          element :cherry_pick_button
+          element :merged_status_content
+          element :revert_button
         end
 
-        view 'app/assets/javascripts/batch_comments/components/preview_dropdown.vue' do
-          element :review_preview_toggle
+        view 'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue' do
+          element :mr_rebase_button
+          element :no_fast_forward_message_content
+        end
+
+        view 'app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue' do
+          element :merge_button
+          element :fast_forward_message_content
+          element :merge_moment_dropdown
+          element :merge_immediately_menu_item
+        end
+
+        view 'app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue' do
+          element :squash_checkbox
+        end
+
+        view 'app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue' do
+          element :apply_suggestion_dropdown
+          element :commit_message_field
+          element :commit_with_custom_message_button
+        end
+
+        view 'app/assets/javascripts/vue_shared/components/markdown/header.vue' do
+          element :suggestion_button
         end
 
         view 'app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue' do
@@ -104,19 +97,22 @@ module QA
           element :add_suggestion_batch_button
         end
 
-        view 'app/assets/javascripts/vue_shared/components/markdown/header.vue' do
-          element :suggestion_button
+        view 'app/views/projects/merge_requests/_description.html.haml' do
+          element :description_content
         end
 
-        view 'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue' do
-          element :revert_button
-          element :cherry_pick_button
+        view 'app/views/projects/merge_requests/_mr_box.html.haml' do
+          element :title_content
         end
 
-        view 'app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue' do
-          element :apply_suggestion_button
-          element :commit_message_textbox
-          element :commit_with_custom_message_button
+        view 'app/views/projects/merge_requests/_mr_title.html.haml' do
+          element :edit_button
+        end
+
+        view 'app/views/projects/merge_requests/show.html.haml' do
+          element :notes_tab
+          element :commits_tab
+          element :diffs_tab
         end
 
         def start_review
@@ -131,21 +127,13 @@ module QA
           click_element(:target_version_dropdown)
         end
 
-        def comment_now
-          click_element(:comment_now_button)
-
-          # After clicking the button, wait for it to disappear
-          # before moving on to the next part of the test
-          has_no_element?(:comment_now_button)
-        end
-
         def version_dropdown_content
           find_element(:dropdown_content).text
         end
 
         def submit_pending_reviews
           within_element(:review_bar_content) do
-            click_element(:review_preview_toggle)
+            click_element(:review_preview_dropdown)
             click_element(:submit_review_button)
 
             # After clicking the button, wait for it to disappear
@@ -154,22 +142,6 @@ module QA
           end
         end
 
-        def discard_pending_reviews
-          within_element(:review_bar_content) do
-            click_element(:discard_review)
-          end
-          click_element(:modal_delete_pending_comments)
-        end
-
-        def resolve_review_discussion
-          scroll_to_element(:start_review_button)
-          check_element(:resolve_review_discussion_checkbox)
-        end
-
-        def unresolve_review_discussion
-          check_element(:unresolve_review_discussion_checkbox)
-        end
-
         def add_comment_to_diff(text)
           wait_until(sleep_interval: 5) do
             has_css?('a[data-linenumber="1"]')
@@ -230,11 +202,11 @@ module QA
         end
 
         def has_title?(title)
-          has_element?(:title, text: title)
+          has_element?(:title_content, text: title)
         end
 
         def has_description?(description)
-          has_element?(:description, text: description)
+          has_element?(:description_content, text: description)
         end
 
         def mark_to_squash
@@ -253,11 +225,6 @@ module QA
           raise "Merge did not appear to be successful" unless merged?
         end
 
-        def merge_immediately!
-          click_element(:merge_moment_dropdown)
-          click_element(:merge_immediately_menu_item)
-        end
-
         def merge_when_pipeline_succeeds!
           wait_until_ready_to_merge
 
@@ -281,10 +248,6 @@ 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)
@@ -363,8 +326,8 @@ module QA
         end
 
         def apply_suggestion_with_message(message)
-          click_element(:apply_suggestion_button)
-          fill_element(:commit_message_textbox, message)
+          click_element(:apply_suggestion_dropdown)
+          fill_element(:commit_message_field, message)
           click_element(:commit_with_custom_message_button)
         end
 

qa/qa/specs/features/ee/browser_ui/3_create/merge_request/add_batch_comments_in_merge_request_spec.rb

@@ -38,7 +38,7 @@ module QA
         end
       end
 
-      it 'user submits a diff review', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/1776', quarantine: { issue: 'https://gitlab.com/gitlab-org/gitlab/-/issues/297257', type: :investigating } do
+      it 'user submits a diff review', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/1776' do
         Flow::Login.sign_in
 
         merge_request.visit!

spec/features/markdown/copy_as_gfm_spec.rb

@@ -426,8 +426,8 @@ RSpec.describe 'Copy as GFM', :js do
 
         html = <<~HTML
           <div class="md-suggestion">
-            <div class="md-suggestion-header border-bottom-0 mt-2 qa-suggestion-diff-header js-suggestion-diff-header">
-              <div class="qa-suggestion-diff-header js-suggestion-diff-header font-weight-bold">
+            <div class="md-suggestion-header border-bottom-0 mt-2 js-suggestion-diff-header">
+              <div class="js-suggestion-diff-header font-weight-bold">
                 Suggested change
                 <a href="/gitlab/help/user/discussions/index.md#suggest-changes" aria-label="Help" class="js-help-btn">
                   <svg aria-hidden="true" class="s16 ic-question-o link-highlight">

spec/frontend/diffs/components/inline_diff_table_row_spec.js

@@ -216,14 +216,14 @@ describe('InlineDiffTableRow', () => {
         const TEST_LINE_NUMBER = 1;
 
         describe.each`
-          lineProps                                                                                     | findLineNumber       | expectedHref            | expectedClickArg  | expectedQaSelector
-          ${{ line_code: TEST_LINE_CODE, old_line: TEST_LINE_NUMBER }}                                  | ${findLineNumberOld} | ${`#${TEST_LINE_CODE}`} | ${TEST_LINE_CODE} | ${undefined}
-          ${{ line_code: undefined, old_line: TEST_LINE_NUMBER }}                                       | ${findLineNumberOld} | ${'#'}                  | ${undefined}      | ${undefined}
-          ${{ line_code: undefined, left: { line_code: TEST_LINE_CODE }, old_line: TEST_LINE_NUMBER }}  | ${findLineNumberOld} | ${'#'}                  | ${TEST_LINE_CODE} | ${undefined}
-          ${{ line_code: undefined, right: { line_code: TEST_LINE_CODE }, new_line: TEST_LINE_NUMBER }} | ${findLineNumberNew} | ${'#'}                  | ${TEST_LINE_CODE} | ${'new_diff_line_link'}
+          lineProps                                                                                     | findLineNumber       | expectedHref            | expectedClickArg
+          ${{ line_code: TEST_LINE_CODE, old_line: TEST_LINE_NUMBER }}                                  | ${findLineNumberOld} | ${`#${TEST_LINE_CODE}`} | ${TEST_LINE_CODE}
+          ${{ line_code: undefined, old_line: TEST_LINE_NUMBER }}                                       | ${findLineNumberOld} | ${'#'}                  | ${undefined}
+          ${{ line_code: undefined, left: { line_code: TEST_LINE_CODE }, old_line: TEST_LINE_NUMBER }}  | ${findLineNumberOld} | ${'#'}                  | ${TEST_LINE_CODE}
+          ${{ line_code: undefined, right: { line_code: TEST_LINE_CODE }, new_line: TEST_LINE_NUMBER }} | ${findLineNumberNew} | ${'#'}                  | ${TEST_LINE_CODE}
         `(
           'with line ($lineProps)',
-          ({ lineProps, findLineNumber, expectedHref, expectedClickArg, expectedQaSelector }) => {
+          ({ lineProps, findLineNumber, expectedHref, expectedClickArg }) => {
             beforeEach(() => {
               jest.spyOn(store, 'dispatch').mockImplementation();
               createComponent({
@@ -236,7 +236,6 @@ describe('InlineDiffTableRow', () => {
               expect(findLineNumber().attributes()).toEqual({
                 href: expectedHref,
                 'data-linenumber': TEST_LINE_NUMBER.toString(),
-                'data-qa-selector': expectedQaSelector,
               });
             });
 

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

@@ -16,7 +16,6 @@ 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"
@@ -108,7 +107,6 @@ 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"

spec/frontend/vue_shared/components/markdown/__snapshots__/suggestion_diff_spec.js.snap

@@ -6,7 +6,7 @@ exports[`Suggestion Diff component matches snapshot 1`] = `
 >
   <suggestion-diff-header-stub
     batchsuggestionscount="1"
-    class="qa-suggestion-diff-header js-suggestion-diff-header"
+    class="js-suggestion-diff-header"
     defaultcommitmessage="Apply suggestion"
     helppagepath="path_to_docs"
     isapplyingbatch="true"