Pass the table QA selector down the stack

At the minute we have a QA selector being defined but it is never used.
This has been changed so we can customise the QA selector properly

ee/app/assets/javascripts/audit_events/components/audit_events_app.vue

@@ -30,6 +30,16 @@ export default {
       type: Array,
       required: true,
     },
+    filterQaSelector: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    tableQaSelector: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   data() {
     return {
@@ -55,7 +65,7 @@ export default {
         class="filter-form d-flex justify-content-between audit-controls row"
       >
         <div class="col-lg-auto flex-fill form-group align-items-lg-center pr-lg-8">
-          <audit-events-filter v-bind="{ enabledTokenTypes }" />
+          <audit-events-filter v-bind="{ enabledTokenTypes, qaSelector: filterQaSelector }" />
         </div>
         <div class="d-flex col-lg-auto flex-wrap pl-lg-0">
           <div
@@ -67,6 +77,6 @@ export default {
         </div>
       </form>
     </div>
-    <audit-events-table v-bind="{ events, isLastPage }" />
+    <audit-events-table v-bind="{ events, isLastPage, qaSelector: tableQaSelector }" />
   </div>
 </template>

ee/app/assets/javascripts/audit_events/components/audit_events_filter.vue

@@ -15,6 +15,11 @@ export default {
       default: () => AVAILABLE_TOKEN_TYPES,
       validator: availableTokensValidator,
     },
+    qaSelector: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   data() {
     return {
@@ -70,7 +75,11 @@ export default {
 </script>
 
 <template>
-  <div class="input-group bg-white flex-grow-1" data-qa-selector="admin_audit_log_filter">
+  <div
+    class="input-group bg-white flex-grow-1"
+    data-testid="audit-events-filter"
+    :data-qa-selector="qaSelector"
+  >
     <gl-filtered-search
       v-model="searchTerms"
       :placeholder="__('Search')"

ee/app/assets/javascripts/audit_events/components/audit_events_table.vue

@@ -23,6 +23,11 @@ export default {
       required: false,
       default: false,
     },
+    qaSelector: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   data() {
     return {
@@ -81,7 +86,7 @@ export default {
 </script>
 
 <template>
-  <div class="audit-log-table" data-qa-selector="admin_audit_log_table">
+  <div class="audit-log-table" data-testid="audit-events-table" :data-qa-selector="qaSelector">
     <gl-table class="mt-3" :fields="$options.fields" :items="events" show-empty>
       <template #cell(author)="{ value: { url, name } }">
         <url-table-cell :url="url" :name="name" />

ee/app/assets/javascripts/audit_events/init_audit_events.js

@@ -4,7 +4,14 @@ import AuditEventsApp from './components/audit_events_app.vue';
 
 export default selector => {
   const el = document.querySelector(selector);
-  const { events, isLastPage, formPath, enabledTokenTypes } = el.dataset;
+  const {
+    events,
+    isLastPage,
+    formPath,
+    enabledTokenTypes,
+    filterQaSelector,
+    tableQaSelector,
+  } = el.dataset;
 
   return new Vue({
     el,
@@ -15,6 +22,8 @@ export default selector => {
           isLastPage: parseBoolean(isLastPage),
           enabledTokenTypes: JSON.parse(enabledTokenTypes),
           formPath,
+          filterQaSelector,
+          tableQaSelector,
         },
       }),
   });

ee/app/views/admin/audit_logs/index.html.haml

@@ -3,5 +3,6 @@
 #js-audit-log-app{ data: { form_path: admin_audit_logs_path,
   events: @table_events.to_json,
   is_last_page: @events.last_page?.to_json,
-  qa_selector: 'admin_audit_log_table',
+  filter_qa_selector: 'admin_audit_log_filter',
+  table_qa_selector: 'admin_audit_log_table',
   enabled_token_types: admin_audit_log_token_types } }

ee/spec/features/admin/admin_audit_logs_spec.rb

@@ -110,7 +110,7 @@ describe 'Admin::AuditLogs', :js do
       it 'shows only 2 days old events' do
         visit admin_audit_logs_path(created_after: 4.days.ago.to_date, created_before: 2.days.ago.to_date)
 
-        find('.audit-log-table td', match: :first)
+        find('[data-testid="audit-events-table"] td', match: :first)
 
         expect(page).not_to have_content(audit_event_1.present.date)
         expect(page).to have_content(audit_event_2.present.date)
@@ -120,7 +120,7 @@ describe 'Admin::AuditLogs', :js do
       it 'shows only yesterday events' do
         visit admin_audit_logs_path(created_after: 2.days.ago.to_date)
 
-        find('.audit-log-table td', match: :first)
+        find('[data-testid="audit-events-table"] td', match: :first)
 
         expect(page).not_to have_content(audit_event_1.present.date)
         expect(page).not_to have_content(audit_event_2.present.date)

ee/spec/frontend/audit_events/components/__snapshots__/audit_events_app_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AuditEventsApp when initialized matches the snapshot 1`] = `
-<div
-  dataqaselector="qa_selector"
->
+<div>
   <div
     class="row-content-block second-block pb-0"
   >
@@ -17,7 +15,8 @@ exports[`AuditEventsApp when initialized matches the snapshot 1`] = `
       >
         <div
           class="input-group bg-white flex-grow-1"
-          data-qa-selector="admin_audit_log_filter"
+          data-qa-selector="filter_qa_selector"
+          data-testid="audit-events-filter"
         >
           <gl-filtered-search-stub
             availabletokens="[object Object],[object Object],[object Object]"
@@ -59,6 +58,7 @@ exports[`AuditEventsApp when initialized matches the snapshot 1`] = `
   <audit-events-table-stub
     events="[object Object]"
     islastpage="true"
+    qaselector="table_qa_selector"
   />
 </div>
 `;

ee/spec/frontend/audit_events/components/audit_events_app_spec.js

@@ -11,13 +11,16 @@ describe('AuditEventsApp', () => {
 
   const events = [{ foo: 'bar' }];
   const enabledTokenTypes = AVAILABLE_TOKEN_TYPES;
+  const filterQaSelector = 'filter_qa_selector';
+  const tableQaSelector = 'table_qa_selector';
 
   const initComponent = (props = {}) => {
     wrapper = shallowMount(AuditEventsApp, {
       propsData: {
         formPath: 'form/path',
         isLastPage: true,
-        dataQaSelector: 'qa_selector',
+        filterQaSelector,
+        tableQaSelector,
         enabledTokenTypes,
         events,
         ...props,
@@ -51,8 +54,16 @@ describe('AuditEventsApp', () => {
       expect(wrapper.find(AuditEventsTable).props('events')).toEqual(events);
     });
 
-    it('passes its avilable token types to the logs filter', () => {
+    it('passes the tables QA selector to the logs table', () => {
+      expect(wrapper.find(AuditEventsTable).props('qaSelector')).toEqual(tableQaSelector);
+    });
+
+    it('passes its available token types to the logs filter', () => {
       expect(wrapper.find(AuditEventsFilter).props('enabledTokenTypes')).toEqual(enabledTokenTypes);
     });
+
+    it('passes the filters QA selector to the logs filter', () => {
+      expect(wrapper.find(AuditEventsFilter).props('qaSelector')).toEqual(filterQaSelector);
+    });
   });
 });

ee/spec/frontend/audit_events/components/audit_events_filter_spec.js

@@ -131,4 +131,27 @@ describe('AuditEventsFilter', () => {
       expect(getAvailableTokens()).toMatchObject([{ type }]);
     });
   });
+
+  describe('when setting the QA selector', () => {
+    beforeEach(() => {
+      initComponent();
+    });
+
+    it('should not set the QA selector if not provided', () => {
+      wrapper.vm.$nextTick(() => {
+        expect(
+          wrapper.find('[data-testid="audit-events-filter"]').attributes('data-qa-selector'),
+        ).toBeUndefined();
+      });
+    });
+
+    it('should set the QA selector if provided', () => {
+      wrapper.setProps({ qaSelector: 'qa_selector' });
+      wrapper.vm.$nextTick(() => {
+        expect(
+          wrapper.find('[data-testid="audit-events-filter"]').attributes('data-qa-selector'),
+        ).toEqual('qa_selector');
+      });
+    });
+  });
 });

ee/spec/frontend/audit_events/components/audit_events_table_spec.js

@@ -51,6 +51,23 @@ describe('AuditEventsTable component', () => {
         expect(getCell(0, 0).text()).toBe('There are no records to show');
       });
     });
+
+    it('should not set the QA selector if not provided', () => {
+      wrapper.vm.$nextTick(() => {
+        expect(
+          wrapper.find('[data-testid="audit-events-table"]').attributes('data-qa-selector'),
+        ).toBeUndefined();
+      });
+    });
+
+    it('should set the QA selector if provided', () => {
+      wrapper.setProps({ qaSelector: 'qa_selector' });
+      wrapper.vm.$nextTick(() => {
+        expect(
+          wrapper.find('[data-testid="audit-events-table"]').attributes('data-qa-selector'),
+        ).toEqual('qa_selector');
+      });
+    });
   });
 
   describe('Pagination behaviour', () => {