Merge branch 'tor/maintenance/diff-stats-gl-ui-data-test-id' into 'master'

Refactoring in the Diffs app Stats component and utility

See merge request gitlab-org/gitlab!64044

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

@@ -53,8 +53,8 @@ export default {
   <div
     class="diff-stats"
     :class="{
-      'is-compare-versions-header d-none d-lg-inline-flex': isCompareVersionsHeader,
-      'd-none d-sm-inline-flex': !isCompareVersionsHeader,
+      'is-compare-versions-header gl-display-none gl-lg-display-inline-flex': isCompareVersionsHeader,
+      'gl-display-none gl-sm-display-inline-flex': !isCompareVersionsHeader,
     }"
   >
     <div v-if="notDiffable" :class="fileStats.classes">
@@ -66,18 +66,18 @@ export default {
         <span class="text-secondary bold">{{ diffFilesCountText }} {{ filesText }}</span>
       </div>
       <div
-        class="diff-stats-group cgreen d-flex align-items-center"
+        class="diff-stats-group gl-text-green-600 gl-display-flex gl-align-items-center"
         :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 cred d-flex align-items-center"
+        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>

app/assets/javascripts/diffs/utils/diff_file.js

@@ -105,9 +105,9 @@ export function stats(file) {
     valid = true;
 
     if (diff > 0) {
-      classes = 'cgreen';
+      classes = 'gl-text-green-600';
     } else if (diff < 0) {
-      classes = 'cred';
+      classes = 'gl-text-red-500';
     }
   }
 

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', () => {
@@ -58,24 +62,24 @@ describe('diff_stats', () => {
     it("renders the bytes changes instead of line changes when the file isn't diffable", () => {
       const content = getBytesContainer();
 
-      expect(content.classes('cgreen')).toBe(true);
+      expect(content.classes('gl-text-green-600')).toBe(true);
       expect(content.text()).toBe('+1.00 KiB (+100%)');
     });
   });
 
   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());
     });
   });
 

spec/frontend/diffs/utils/diff_file_spec.js

@@ -181,7 +181,7 @@ describe('diff_file utilities', () => {
       {
         changed: 1024,
         percent: 100,
-        classes: 'cgreen',
+        classes: 'gl-text-green-600',
         sign: '+',
         text: '+1.00 KiB (+100%)',
         valid: true,
@@ -197,7 +197,7 @@ describe('diff_file utilities', () => {
       {
         changed: -1024,
         percent: -100,
-        classes: 'cred',
+        classes: 'gl-text-red-500',
         sign: '',
         text: '-1.00 KiB (-100%)',
         valid: true,