Remove js-* classes in test_reports.vue

With this change, the test reports test will use data-testid for
frontend tests and data-qa-selector for feature tests.

app/assets/javascripts/pipelines/components/test_reports/test_reports.vue

@@ -55,13 +55,14 @@ export default {
 
 <template>
   <div v-if="isLoading">
-    <gl-loading-icon size="lg" class="gl-mt-3 js-loading-spinner" />
+    <gl-loading-icon size="lg" class="gl-mt-3" />
   </div>
 
   <div
     v-else-if="!isLoading && showTests"
     ref="container"
-    class="tests-detail position-relative js-tests-detail"
+    class="tests-detail position-relative"
+    data-testid="tests-detail"
   >
     <transition
       name="slide"
@@ -85,7 +86,7 @@ export default {
   <div v-else>
     <div class="row gl-mt-3">
       <div class="col-12">
-        <p class="js-no-tests-to-show">{{ s__('TestReports|There are no tests to show.') }}</p>
+        <p data-testid="no-tests-to-show">{{ s__('TestReports|There are no tests to show.') }}</p>
       </div>
     </div>
   </div>

spec/features/projects/pipelines/pipeline_spec.rb

@@ -378,7 +378,7 @@ RSpec.describe 'Pipeline', :js do
           find('.js-tests-tab-link').click
 
           expect(page).to have_content('Jobs')
-          expect(page).to have_selector('.js-tests-detail', visible: :all)
+          expect(page).to have_selector('[data-testid="tests-detail"]', visible: :all)
         end
       end
 

spec/frontend/pipelines/test_reports/test_reports_spec.js

 import Vuex from 'vuex';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { getJSONFixture } from 'helpers/fixtures';
 import TestReports from '~/pipelines/components/test_reports/test_reports.vue';
@@ -15,9 +16,9 @@ describe('Test reports app', () => {
 
   const testReports = getJSONFixture('pipelines/test_report.json');
 
-  const loadingSpinner = () => wrapper.find('.js-loading-spinner');
-  const testsDetail = () => wrapper.find('.js-tests-detail');
-  const noTestsToShow = () => wrapper.find('.js-no-tests-to-show');
+  const loadingSpinner = () => wrapper.find(GlLoadingIcon);
+  const testsDetail = () => wrapper.find('[data-testid="tests-detail"]');
+  const noTestsToShow = () => wrapper.find('[data-testid="no-tests-to-show"]');
   const testSummary = () => wrapper.find(TestSummary);
   const testSummaryTable = () => wrapper.find(TestSummaryTable);
 
@@ -88,6 +89,10 @@ describe('Test reports app', () => {
       expect(wrapper.vm.testReports).toBeTruthy();
       expect(wrapper.vm.showTests).toBeTruthy();
     });
+
+    it('shows tests details', () => {
+      expect(testsDetail().exists()).toBe(true);
+    });
   });
 
   describe('when a suite is clicked', () => {