Switch classes to use data-testid

app/assets/javascripts/diffs/components/diff_stats.vue

@@ -70,14 +70,14 @@ export default {
         :class="{ bold: isCompareVersionsHeader }"
       >
         <span>+</span>
-        <span class="js-file-addition-line">{{ addedLines }}</span>
+        <span data-testid="js-file-addition-line">{{ addedLines }}</span>
       </div>
       <div
         class="diff-stats-group gl-text-red-500 gl-display-flex gl-align-items-center"
         :class="{ bold: isCompareVersionsHeader }"
       >
         <span>-</span>
-        <span class="js-file-deletion-line">{{ removedLines }}</span>
+        <span data-testid="js-file-deletion-line">{{ removedLines }}</span>
       </div>
     </div>
   </div>

spec/features/merge_request/user_sees_versions_spec.rb

@@ -129,8 +129,8 @@ RSpec.describe 'Merge request > User sees versions', :js do
       )
       expect(page).to have_content '4 files'
 
-      additions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group .js-file-addition-line').text
-      deletions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group .js-file-deletion-line').text
+      additions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group [data-testid="js-file-addition-line"]').text
+      deletions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group [data-testid="js-file-deletion-line"]').text
 
       expect(additions_content).to eq '15'
       expect(deletions_content).to eq '6'
@@ -152,8 +152,8 @@ RSpec.describe 'Merge request > User sees versions', :js do
     end
 
     it 'show diff between new and old version' do
-      additions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group .js-file-addition-line').text
-      deletions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group .js-file-deletion-line').text
+      additions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group [data-testid="js-file-addition-line"]').text
+      deletions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group [data-testid="js-file-deletion-line"]').text
 
       expect(page).to have_content '4 files'
       expect(additions_content).to eq '15'

spec/frontend/diffs/components/diff_stats_spec.js

 import { GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+
 import DiffStats from '~/diffs/components/diff_stats.vue';
 import mockDiffFile from '../mock_data/diff_file';
 
@@ -12,13 +14,15 @@ describe('diff_stats', () => {
   let wrapper;
 
   const createComponent = (props = {}) => {
-    wrapper = shallowMount(DiffStats, {
-      propsData: {
-        addedLines: TEST_ADDED_LINES,
-        removedLines: TEST_REMOVED_LINES,
-        ...props,
-      },
-    });
+    wrapper = extendedWrapper(
+      shallowMount(DiffStats, {
+        propsData: {
+          addedLines: TEST_ADDED_LINES,
+          removedLines: TEST_REMOVED_LINES,
+          ...props,
+        },
+      }),
+    );
   };
 
   describe('diff stats group', () => {
@@ -64,18 +68,18 @@ describe('diff_stats', () => {
   });
 
   describe('line changes', () => {
-    const findFileLine = (name) => wrapper.find(name);
+    const findFileLine = (name) => wrapper.findByTestId(name);
 
     beforeEach(() => {
       createComponent();
     });
 
     it('shows the amount of lines added', () => {
-      expect(findFileLine('.js-file-addition-line').text()).toBe(TEST_ADDED_LINES.toString());
+      expect(findFileLine('js-file-addition-line').text()).toBe(TEST_ADDED_LINES.toString());
     });
 
     it('shows the amount of lines removed', () => {
-      expect(findFileLine('.js-file-deletion-line').text()).toBe(TEST_REMOVED_LINES.toString());
+      expect(findFileLine('js-file-deletion-line').text()).toBe(TEST_REMOVED_LINES.toString());
     });
   });