Adding tests for filtering activities/comments in issues

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

@@ -22,9 +22,7 @@ export default {
     return { currentValue: this.defaultValue };
   },
   computed: {
-    ...mapGetters([
-      'getNotesDataByProp',
-    ]),
+    ...mapGetters(['getNotesDataByProp']),
     currentFilter() {
       if (!this.currentValue) return this.filters[0];
       return this.filters.find(filter => filter.value === this.currentValue);
@@ -51,7 +49,7 @@ export default {
     <button
       id="discussion-filter-dropdown"
       ref="dropdownToggle"
-      class="btn btn-default"
+      class="btn btn-default qa-discussion-filter"
       data-toggle="dropdown"
       aria-expanded="false"
     >
@@ -69,6 +67,7 @@ export default {
           >
             <button
               :class="{ 'is-active': filter.value === currentValue }"
+              class="qa-filter-options"
               type="button"
               @click="selectFilter(filter.value)"
             >

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

@@ -7,35 +7,42 @@ module QA
         class Show < Page::Base
           include Page::Component::Issuable::Common
 
-          view 'app/views/projects/issues/show.html.haml' do
-            element :issue_details, '.issue-details' # rubocop:disable QA/ElementWithPattern
-            element :title, '.title' # rubocop:disable QA/ElementWithPattern
-          end
-
           view 'app/views/shared/notes/_form.html.haml' do
             element :new_note_form, 'new-note' # rubocop:disable QA/ElementWithPattern
             element :new_note_form, 'attr: :note' # rubocop:disable QA/ElementWithPattern
           end
 
-          view 'app/views/shared/notes/_comment_button.html.haml' do
-            element :comment_button, '%strong Comment' # rubocop:disable QA/ElementWithPattern
+          view 'app/assets/javascripts/notes/components/comment_form.vue' do
+            element :comment_button
+            element :comment_input
           end
 
-          def issue_title
-            find('.issue-details .title').text
+          view 'app/assets/javascripts/notes/components/discussion_filter.vue' do
+            element :discussion_filter
+            element :filter_options
           end
 
           # Adds a comment to an issue
           # attachment option should be an absolute path
           def comment(text, attachment: nil)
-            fill_in(with: text, name: 'note[note]')
+            fill_element :comment_input, text
 
             unless attachment.nil?
               QA::Page::Component::Dropzone.new(self, '.new-note')
                 .attach_file(attachment)
             end
 
-            click_on 'Comment'
+            click_element :comment_button
+          end
+
+          def select_comments_only_filter
+            click_element :discussion_filter
+            all_elements(:filter_options).last.click
+          end
+
+          def select_all_activities_filter
+            click_element :discussion_filter
+            all_elements(:filter_options).first.click
           end
         end
       end

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

+# frozen_string_literal: true
+
+module QA
+  context 'Plan' do
+    describe 'filter issue comments activities' do
+      let(:issue_title) { 'issue title' }
+
+      it 'user filters comments and activites in an issue' do
+        Runtime::Browser.visit(:gitlab, Page::Main::Login)
+        Page::Main::Login.act { sign_in_using_credentials }
+
+        Factory::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_comments_only_filter
+          show_page.comment('/confidential')
+          show_page.comment('My own comment')
+
+          expect(show_page).not_to have_content("made the issue confidential")
+          expect(show_page).to have_content("My own comment")
+
+          show_page.select_all_activities_filter
+
+          expect(show_page).to have_content("made the issue confidential")
+          expect(show_page).to have_content("My own comment")
+        end
+      end
+    end
+  end
+end