Qa batch comments e2e tests

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

@@ -167,7 +167,7 @@ export default {
       <button
         v-if="shouldShowCommentButton"
         type="button"
-        class="add-diff-note js-add-diff-note-button"
+        class="add-diff-note js-add-diff-note-button qa-diff-comment"
         title="Add a comment to this line"
         @click="handleCommentButton"
       >

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

@@ -102,7 +102,7 @@ export default {
       :line-type="newLineType"
       :is-bottom="isBottom"
       :is-hover="isHover"
-      class="diff-line-num new_line"
+      class="diff-line-num new_line qa-new-diff-line"
     />
     <td
       :class="line.type"

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

@@ -390,7 +390,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                     :disabled="isSubmitButtonDisabled"
                     name="button"
                     type="button"
-                    class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle"
+                    class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle qa-note-dropdown"
                     data-display="static"
                     data-toggle="dropdown"
                     aria-label="Open comment type dropdown">
@@ -422,7 +422,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                     <li :class="{ 'droplab-item-selected': noteType === 'discussion' }">
                       <button
                         type="button"
-                        class="btn btn-transparent"
+                        class="btn btn-transparent qa-discussion-option"
                         @click.prevent="setNoteType('discussion')">
                         <i
                           aria-hidden="true"

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

@@ -191,7 +191,7 @@ export default {
           :data-supports-quick-actions="!isEditing"
           name="note[note]"
           class="note-textarea js-gfm-input js-note-text
-js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
+js-autosize markdown-area js-vue-issue-note-form js-vue-textarea qa-reply-input"
           aria-label="Description"
           placeholder="Write a comment or drag your files here…"
           @keydown.meta.enter="handleUpdate()"
@@ -216,6 +216,7 @@ js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
                 <input
                   v-model="isUnresolving"
                   type="checkbox"
+                  class="qa-unresolve-review-discussion"
                 />
                 {{ __('Unresolve discussion') }}
               </template>
@@ -225,6 +226,7 @@ js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
                 <input
                   v-model="isResolving"
                   type="checkbox"
+                  class="qa-resolve-review-discussion"
                 />
                 {{ __('Resolve discussion') }}
               </template>
@@ -234,7 +236,7 @@ js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
             <button
               :disabled="isDisabled"
               type="button"
-              class="btn btn-success"
+              class="btn btn-success qa-start-review"
               @click="handleAddToReview()">
               <template v-if="hasDrafts">
                 {{ __('Add to review') }}
@@ -246,7 +248,7 @@ js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
             <button
               :disabled="isDisabled"
               type="button"
-              class="btn"
+              class="btn qa-comment-now"
               @click="handleUpdate()">
               {{ __('Add comment now') }}
             </button>

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

@@ -385,7 +385,7 @@ Please check your network connection and try again.`;
                         role="group">
                         <button
                           type="button"
-                          class="js-vue-discussion-reply btn btn-text-field mr-2"
+                          class="js-vue-discussion-reply btn btn-text-field mr-2 qa-discussion-reply"
                           title="Add a reply"
                           @click="showReplyForm">Reply...</button>
                       </div>

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

@@ -34,7 +34,7 @@
           .fade-left= icon('angle-left')
           .fade-right= icon('angle-right')
           %ul.merge-request-tabs.nav-tabs.nav.nav-links.scrolling-tabs
-            %li.notes-tab
+            %li.notes-tab.qa-notes-tab
               = tab_link_for @merge_request, :show, force_link: @commit.present? do
                 Discussion
                 %span.badge.badge-pill= @merge_request.related_notes.user.count
@@ -48,7 +48,7 @@
                 = tab_link_for @merge_request, :pipelines do
                   Pipelines
                   %span.badge.badge-pill.js-pipelines-mr-count= @pipelines.size
-            %li.diffs-tab
+            %li.diffs-tab.qa-diffs-tab
               = tab_link_for @merge_request, :diffs do
                 Changes
                 %span.badge.badge-pill= @merge_request.diff_size

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

@@ -66,7 +66,7 @@ export default {
     <button
       ref="dropdown"
       type="button"
-      class="btn btn-success review-preview-dropdown-toggle"
+      class="btn btn-success review-preview-dropdown-toggle qa-review-preview-toggle"
       @click="toggleReviewDropdown"
     >
       {{ __('Finish review') }}

ee/app/assets/javascripts/batch_comments/components/publish_button.vue

@@ -44,7 +44,7 @@ export default {
 <template>
   <loading-button
     :loading="isPublishing"
-    container-class="btn btn-success js-publish-draft-button"
+    container-class="btn btn-success js-publish-draft-button qa-submit-review"
     @click="onClick"
   >
     <span>

ee/app/assets/javascripts/batch_comments/components/review_bar.vue

@@ -46,13 +46,13 @@ export default {
 <template>
   <div v-show="draftsCount > 0">
     <nav class="review-bar-component">
-      <div class="review-bar-content">
+      <div class="review-bar-content qa-review-bar">
         <preview-dropdown />
         <loading-button
           v-gl-modal="$options.modalId"
           :loading="isDiscarding"
           :label="__('Discard review')"
-          class="float-right"
+          class="qa-discard-review float-right"
         />
       </div>
     </nav>
@@ -61,7 +61,7 @@ export default {
       :ok-title="s__('BatchComments|Delete all pending comments')"
       :modal-id="$options.modalId"
       title-tag="h4"
-      ok-variant="danger"
+      ok-variant="danger qa-modal-delete-pending-comments"
       @ok="discardReview"
     >
       <p v-html="$options.text">

qa/qa/ee/page/merge_request/show.rb

+# frozen_string_literal: true
+
 module QA
   module EE
     module Page
@@ -8,6 +10,58 @@ module QA
               view 'app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue' do
                 element :head_mismatch, "The source branch HEAD has recently changed." # rubocop:disable QA/ElementWithPattern
               end
+
+              view 'ee/app/assets/javascripts/batch_comments/components/publish_button.vue' do
+                element :submit_review
+              end
+
+              view 'ee/app/assets/javascripts/batch_comments/components/review_bar.vue' do
+                element :review_bar
+                element :discard_review
+                element :modal_delete_pending_comments
+              end
+
+              view 'app/assets/javascripts/notes/components/note_form.vue' do
+                element :unresolve_review_discussion
+                element :resolve_review_discussion
+                element :start_review
+                element :comment_now
+              end
+
+              view 'ee/app/assets/javascripts/batch_comments/components/preview_dropdown.vue' do
+                element :review_preview_toggle
+              end
+
+              def start_review
+                click_element :start_review
+              end
+
+              def comment_now
+                click_element :comment_now
+              end
+
+              def submit_pending_reviews
+                within_element :review_bar do
+                  click_element :review_preview_toggle
+                  click_element :submit_review
+                end
+              end
+
+              def discard_pending_reviews
+                within_element :review_bar do
+                  click_element :discard_review
+                end
+                click_element :modal_delete_pending_comments
+              end
+
+              def resolve_review_discussion
+                scroll_to_element :start_review
+                check_element :resolve_review_discussion
+              end
+
+              def unresolve_review_discussion
+                check_element :unresolve_review_discussion
+              end
             end
           end
         end

qa/qa/page/base.rb

@@ -100,6 +100,10 @@ module QA
         find_element(name).set(content)
       end
 
+      def hover_element(name)
+        find_element(name).hover
+      end
+
       def has_element?(name)
         has_css?(element_selector_css(name))
       end

qa/qa/page/merge_request/show.rb

+# frozen_string_literal: true
+
 module QA
   module Page
     module MergeRequest
@@ -25,6 +27,32 @@ module QA
           element :squash_checkbox
         end
 
+        view 'app/views/projects/merge_requests/show.html.haml' do
+          element :notes_tab
+          element :diffs_tab
+        end
+
+        view 'app/assets/javascripts/diffs/components/diff_line_gutter_content.vue' do
+          element :diff_comment
+        end
+
+        view 'app/assets/javascripts/notes/components/comment_form.vue' do
+          element :note_dropdown
+          element :discussion_option
+        end
+
+        view 'app/assets/javascripts/notes/components/note_form.vue' do
+          element :reply_input
+        end
+
+        view 'app/assets/javascripts/notes/components/noteable_discussion.vue' do
+          element :discussion_reply
+        end
+
+        view 'app/assets/javascripts/diffs/components/inline_diff_table_row.vue' do
+          element :new_diff_line
+        end
+
         view 'app/views/shared/issuable/_sidebar.html.haml' do
           element :labels_block
         end
@@ -108,6 +136,35 @@ module QA
 
           click_element :squash_checkbox
         end
+
+        def go_to_discussions_tab
+          click_element :notes_tab
+        end
+
+        def go_to_diffs_tab
+          click_element :diffs_tab
+        end
+
+        def add_comment_to_diff(text)
+          wait(time: 5) do
+            page.has_text?("No newline at end of file")
+          end
+          all_elements(:new_diff_line).first.hover
+          click_element :diff_comment
+          fill_element :reply_input, text
+        end
+
+        def start_discussion(text)
+          fill_element :comment_input, text
+          click_element :note_dropdown
+          click_element :discussion_option
+          click_element :comment_button
+        end
+
+        def reply_to_discussion(reply_text)
+          all_elements(:discussion_reply).last.click
+          fill_element :reply_input, reply_text
+        end
       end
     end
   end

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

+# frozen_string_literal: true
+
+module QA
+  context 'Create' do
+    describe 'batch comments in merge request' do
+      it 'user submits, discards batch comments'  do
+        Runtime::Browser.visit(:gitlab, Page::Main::Login)
+        Page::Main::Login.perform(&:sign_in_using_credentials)
+
+        project = Factory::Resource::Project.fabricate! do |project|
+          project.name = 'project-with-merge-request'
+        end
+
+        Factory::Resource::MergeRequest.fabricate! do |merge_request|
+          merge_request.title = 'This is a merge request'
+          merge_request.description = 'Great feature'
+          merge_request.project = project
+        end
+
+        Page::MergeRequest::Show.perform do |show_page|
+          show_page.go_to_discussions_tab
+
+          show_page.start_discussion("I'm starting a new discussion")
+          expect(show_page).to have_content("I'm starting a new discussion")
+
+          show_page.reply_to_discussion("Could you please check this?")
+          show_page.comment_now
+          expect(show_page).to have_content("Could you please check this?")
+          expect(show_page).to have_content("0/1 discussion resolved")
+
+          show_page.reply_to_discussion("Could you also check that?")
+          show_page.resolve_review_discussion
+          show_page.start_review
+          expect(show_page).to have_content("Could you also check that?")
+          expect(show_page).to have_content("Finish review 1")
+
+          show_page.go_to_diffs_tab
+
+          show_page.add_comment_to_diff("Can you check this line of code?")
+          show_page.comment_now
+          expect(show_page).to have_content("Can you check this line of code?")
+
+          show_page.reply_to_discussion("And this syntax as well?")
+          show_page.resolve_review_discussion
+          show_page.start_review
+          expect(show_page).to have_content("And this syntax as well?")
+          expect(show_page).to have_content("Finish review 2")
+
+          show_page.submit_pending_reviews
+          expect(show_page).to have_content("2/2 discussions resolved")
+
+          show_page.reply_to_discussion("Unresolving this discussion")
+          show_page.unresolve_review_discussion
+          show_page.comment_now
+          expect(show_page).to have_content("1/2 discussions resolved")
+        end
+
+        Page::MergeRequest::Show.perform do |show_page|
+          show_page.go_to_discussions_tab
+
+          show_page.reply_to_discussion("Planning to discard this comment")
+          show_page.start_review
+
+          expect(show_page).to have_content("Finish review 1")
+          show_page.discard_pending_reviews
+
+          expect(show_page).not_to have_content("Planning to discard this comment")
+        end
+      end
+    end
+  end
+end