Fix filter comments e2e spec

Adds checks to filter comments e2e spec and updates selectors

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

@@ -117,6 +117,7 @@ export default {
     v-if="displayFilters"
     id="discussion-filter-dropdown"
     class="gl-mr-3 full-width-mobile discussion-filter-container js-discussion-filter-container qa-discussion-filter"
+    data-qa-selector="discussion_filter_dropdown"
     :text="currentFilter.title"
   >
     <div v-for="filter in filters" :key="filter.value" class="dropdown-item-wrapper">
@@ -125,7 +126,7 @@ export default {
         :is-checked="filter.value === currentValue"
         :class="{ 'is-active': filter.value === currentValue }"
         :data-filter-type="filterType(filter.value)"
-        class="qa-filter-options"
+        data-qa-selector="filter_menu_item"
         @click.prevent="selectFilter(filter.value)"
       >
         {{ filter.title }}

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

@@ -33,7 +33,10 @@ export default {
 </script>
 
 <template>
-  <li class="timeline-entry note note-wrapper discussion-filter-note js-discussion-filter-note">
+  <li
+    class="timeline-entry note note-wrapper discussion-filter-note js-discussion-filter-note"
+    data-qa-selector="discussion_filter_container"
+  >
     <div class="timeline-icon d-none d-lg-flex">
       <gl-icon name="comment" />
     </div>

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

@@ -170,7 +170,9 @@ export default {
     </template>
     <span v-else>{{ __('A deleted user') }}</span>
     <span class="note-headline-light note-headline-meta">
-      <span class="system-note-message"> <slot></slot> </span>
+      <span class="system-note-message" data-qa-selector="system_note_content">
+        <slot></slot>
+      </span>
       <template v-if="createdAt">
         <span ref="actionText" class="system-note-separator">
           <template v-if="actionText">{{ actionText }}</template>

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

@@ -353,7 +353,8 @@ export default {
     :class="classNameBindings"
     :data-award-url="note.toggle_award_path"
     :data-note-id="note.id"
-    class="note note-wrapper qa-noteable-note-item"
+    class="note note-wrapper"
+    data-qa-selector="noteable_note_container"
   >
     <div
       v-if="showMultiLineComment"

app/assets/javascripts/related_issues/components/related_issues_list.vue

@@ -97,7 +97,11 @@ export default {
       class="related-issues-token-body bordered-box bg-white"
       :class="{ 'sortable-container': canReorder }"
     >
-      <div v-if="isFetching" class="related-issues-loading-icon qa-related-issues-loading-icon">
+      <div
+        v-if="isFetching"
+        class="related-issues-loading-icon"
+        data-qa-selector="related_issues_loading_placeholder"
+      >
         <gl-loading-icon ref="loadingIcon" label="Fetching linked issues" class="gl-mt-2" />
       </div>
       <ul ref="list" :class="{ 'content-list': !canReorder }" class="related-items-list">
@@ -132,7 +136,7 @@ export default {
             :is-locked="issue.lockIssueRemoval"
             :locked-message="issue.lockedMessage"
             event-namespace="relatedIssue"
-            class="qa-related-issuable-item"
+            data-qa-selector="related_issuable_content"
             @relatedIssueRemoveRequest="$emit('relatedIssueRemoveRequest', $event)"
           />
         </li>

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/event_item_spec.js.snap

@@ -61,6 +61,7 @@ exports[`Event Item with action buttons renders the action buttons 1`] = `
       >
         <span
           class="system-note-message"
+          data-qa-selector="system_note_content"
         >
           ·
         </span>

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

@@ -16,12 +16,20 @@ module QA
           end
 
           view 'app/assets/javascripts/notes/components/discussion_filter.vue' do
-            element :discussion_filter, required: true
-            element :filter_options
+            element :discussion_filter_dropdown, required: true
+            element :filter_menu_item
+          end
+
+          view 'app/assets/javascripts/notes/components/discussion_filter_note.vue' do
+            element :discussion_filter_container
           end
 
           view 'app/assets/javascripts/notes/components/noteable_note.vue' do
-            element :noteable_note_item
+            element :noteable_note_container
+          end
+
+          view 'app/assets/javascripts/notes/components/note_header.vue' do
+            element :system_note_content
           end
 
           view 'app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue' do
@@ -51,8 +59,8 @@ module QA
           end
 
           view 'app/assets/javascripts/related_issues/components/related_issues_list.vue' do
-            element :related_issuable_item
-            element :related_issues_loading_icon
+            element :related_issuable_content
+            element :related_issues_loading_placeholder
           end
 
           def relate_issue(issue)
@@ -62,11 +70,11 @@ module QA
           end
 
           def related_issuable_item
-            find_element(:related_issuable_item)
+            find_element(:related_issuable_content)
           end
 
           def wait_for_related_issues_to_load
-            has_no_element?(:related_issues_loading_icon, wait: QA::Support::Repeater::DEFAULT_MAX_WAIT_TIME)
+            has_no_element?(:related_issues_loading_placeholder, wait: QA::Support::Repeater::DEFAULT_MAX_WAIT_TIME)
           end
 
           def click_remove_related_issue_button
@@ -95,11 +103,15 @@ module QA
           end
 
           def has_comment?(comment_text)
-            has_element?(:noteable_note_item, text: comment_text, wait: QA::Support::Repeater::DEFAULT_MAX_WAIT_TIME)
+            has_element?(:noteable_note_container, text: comment_text, wait: QA::Support::Repeater::DEFAULT_MAX_WAIT_TIME)
+          end
+
+          def has_system_note?(note_text)
+            has_element?(:system_note_content, text: note_text, wait: QA::Support::Repeater::DEFAULT_MAX_WAIT_TIME)
           end
 
           def noteable_note_item
-            find_element(:noteable_note_item)
+            find_element(:noteable_note_container)
           end
 
           def select_all_activities_filter
@@ -108,10 +120,18 @@ module QA
 
           def select_comments_only_filter
             select_filter_with_text('Show comments only')
+
+            wait_until do
+              has_no_element?(:system_note_content)
+            end
           end
 
           def select_history_only_filter
             select_filter_with_text('Show history only')
+
+            wait_until do
+              has_element?(:discussion_filter_container) && has_no_element?(:noteable_note_container)
+            end
           end
 
           def has_metrics_unfurled?
@@ -123,8 +143,8 @@ module QA
           def select_filter_with_text(text)
             retry_on_exception do
               click_element(:title)
-              click_element :discussion_filter
-              find_element(:filter_options, text: text).click
+              click_element :discussion_filter_dropdown
+              find_element(:filter_menu_item, text: text).click
 
               wait_for_loading
             end

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

@@ -18,16 +18,16 @@ module QA
           show.comment(my_own_comment, filter: :comments_only)
 
           expect(show).not_to have_content(made_the_issue_confidential)
-          expect(show).to have_content(my_own_comment)
+          expect(show).to have_comment(my_own_comment)
 
           show.select_all_activities_filter
 
-          expect(show).to have_content(made_the_issue_confidential)
-          expect(show).to have_content(my_own_comment)
+          expect(show).to have_system_note(made_the_issue_confidential)
+          expect(show).to have_comment(my_own_comment)
 
           show.select_history_only_filter
 
-          expect(show).to have_content(made_the_issue_confidential)
+          expect(show).to have_system_note(made_the_issue_confidential)
           expect(show).not_to have_content(my_own_comment)
         end
       end