Collapsible Comments Test for Issues

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

@@ -226,7 +226,7 @@ export default {
         <button
           :disabled="isDisabled"
           type="button"
-          class="js-vue-issue-save btn btn-success js-comment-button"
+          class="js-vue-issue-save btn btn-success js-comment-button qa-reply-comment-button"
           @click="handleUpdate();"
         >
           {{ saveButtonTitle }}

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

@@ -57,7 +57,7 @@ export default {
           tooltip-placement="bottom"
         />
       </div>
-      <button class="btn btn-link js-replies-text" type="button" @click="toggle">
+      <button class="btn btn-link js-replies-text qa-expand-replies" type="button" @click="toggle">
         {{ replies.length }} {{ n__('reply', 'replies', replies.length) }}
       </button>
       {{ __('Last reply by') }}
@@ -66,7 +66,11 @@ export default {
       </a>
       <time-ago-tooltip :time="lastReply.created_at" tooltip-placement="bottom" />
     </template>
-    <span v-else class="collapse-replies-btn js-collapse-replies" @click="toggle">
+    <span
+      v-else
+      class="collapse-replies-btn js-collapse-replies qa-collapse-replies"
+      @click="toggle"
+    >
       <icon name="chevron-down" /> {{ s__('Notes|Collapse replies') }}
     </span>
   </li>

qa/qa.rb

@@ -283,6 +283,7 @@ module QA
       autoload :Select2, 'qa/page/component/select2'
       autoload :DropdownFilter, 'qa/page/component/dropdown_filter'
       autoload :UsersSelect, 'qa/page/component/users_select'
+      autoload :Note, 'qa/page/component/note'
 
       module Issuable
         autoload :Common, 'qa/page/component/issuable/common'

qa/qa/page/component/note.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Component
+      module Note
+        def self.included(base)
+          base.view 'app/assets/javascripts/notes/components/comment_form.vue' do
+            element :note_dropdown
+            element :discussion_option
+          end
+
+          base.view 'app/assets/javascripts/notes/components/note_form.vue' do
+            element :reply_input
+            element :reply_comment_button
+          end
+
+          base.view 'app/assets/javascripts/notes/components/noteable_discussion.vue' do
+            element :discussion_reply
+          end
+
+          base.view 'app/assets/javascripts/notes/components/toggle_replies_widget.vue' do
+            element :expand_replies
+            element :collapse_replies
+          end
+        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
+          click_element :reply_comment_button
+        end
+
+        def collapse_replies
+          click_element :collapse_replies
+        end
+
+        def expand_replies
+          click_element :expand_replies
+        end
+      end
+    end
+  end
+end

qa/qa/page/merge_request/show.rb

@@ -4,6 +4,8 @@ module QA
   module Page
     module MergeRequest
       class Show < Page::Base
+        include Page::Component::Note
+
         view 'app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue' do
           element :merge_button
           element :fast_forward_message, 'Fast-forward merge without a merge commit' # rubocop:disable QA/ElementWithPattern
@@ -34,19 +36,6 @@ module QA
           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
@@ -163,18 +152,6 @@ module QA
           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
-
         def edit!
           click_element :edit_button
         end

qa/qa/page/project/issue/show.rb

@@ -6,6 +6,7 @@ module QA
       module Issue
         class Show < Page::Base
           include Page::Component::Issuable::Common
+          include Page::Component::Note
 
           view 'app/views/shared/notes/_form.html.haml' do
             element :new_note_form, 'new-note' # rubocop:disable QA/ElementWithPattern

qa/qa/specs/features/browser_ui/2_plan/issue/collapse_comments_in_discussions_spec.rb

+# frozen_string_literal: true
+
+module QA
+  context 'Plan' do
+    describe 'collapse comments in issue discussions' do
+      let(:issue_title) { 'issue title' }
+
+      it 'user collapses reply for comments in an issue' do
+        Runtime::Browser.visit(:gitlab, Page::Main::Login)
+        Page::Main::Login.perform(&:sign_in_using_credentials)
+
+        Resource::Issue.fabricate! do |issue|
+          issue.title = issue_title
+        end
+
+        expect(page).to have_content(issue_title)
+
+        Page::Project::Issue::Show.perform do |show_page|
+          show_page.select_all_activities_filter
+          show_page.start_discussion("My first discussion")
+          expect(show_page).to have_content("My first discussion")
+
+          show_page.reply_to_discussion("My First Reply")
+          expect(show_page).to have_content("My First Reply")
+
+          show_page.collapse_replies
+          expect(show_page).to have_content("1 reply")
+          expect(show_page).not_to have_content("My First Reply")
+
+          show_page.expand_replies
+          expect(show_page).to have_content("My First Reply")
+          expect(show_page).not_to have_content("1 reply")
+        end
+      end
+    end
+  end
+end