1 files changed, 74 insertions, 30 deletions

diff --git a/spec/frontend/diffs/components/diff_stats_spec.js b/spec/frontend/diffs/components/diff_stats_spec.js
index 5956b478019..7a083fb6bde 100644
--- a/spec/frontend/diffs/components/diff_stats_spec.js
+++ b/spec/frontend/diffs/components/diff_stats_spec.js
@@ -2,53 +2,97 @@ import { shallowMount } from '@vue/test-utils';
 import DiffStats from '~/diffs/components/diff_stats.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 
+const TEST_ADDED_LINES = 100;
+const TEST_REMOVED_LINES = 200;
+const DIFF_FILES_COUNT = '300';
+const DIFF_FILES_COUNT_TRUNCATED = '300+';
+
 describe('diff_stats', () => {
-  it('does not render a group if diffFileLengths is empty', () => {
-    const wrapper = shallowMount(DiffStats, {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(DiffStats, {
       propsData: {
-        addedLines: 1,
-        removedLines: 2,
+        addedLines: TEST_ADDED_LINES,
+        removedLines: TEST_REMOVED_LINES,
+        ...props,
       },
     });
-    const groups = wrapper.findAll('.diff-stats-group');
+  };
 
-    expect(groups.length).toBe(2);
-  });
+  describe('diff stats group', () => {
+    const findDiffStatsGroup = () => wrapper.findAll('.diff-stats-group');
 
-  it('does not render a group if diffFileLengths is not a number', () => {
-    const wrapper = shallowMount(DiffStats, {
-      propsData: {
-        addedLines: 1,
-        removedLines: 2,
-        diffFilesLength: Number.NaN,
-      },
+    it('is not rendered if diffFilesCountText is empty', () => {
+      createComponent();
+
+      expect(findDiffStatsGroup().length).toBe(2);
     });
-    const groups = wrapper.findAll('.diff-stats-group');
 
-    expect(groups.length).toBe(2);
-  });
+    it('is not rendered if diffFilesCountText is not a number', () => {
+      createComponent({
+        diffFilesCountText: null,
+      });
 
-  it('shows amount of files changed, lines added and lines removed when passed all props', () => {
-    const wrapper = shallowMount(DiffStats, {
-      propsData: {
-        addedLines: 100,
-        removedLines: 200,
-        diffFilesLength: 300,
-      },
+      expect(findDiffStatsGroup().length).toBe(2);
     });
+  });
 
+  describe('line changes', () => {
     const findFileLine = name => wrapper.find(name);
+
+    it('shows the amount of lines added', () => {
+      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());
+    });
+  });
+
+  describe('files changes', () => {
     const findIcon = name =>
       wrapper
         .findAll(Icon)
         .filter(c => c.attributes('name') === name)
         .at(0).element.parentNode;
-    const additions = findFileLine('.js-file-addition-line');
-    const deletions = findFileLine('.js-file-deletion-line');
-    const filesChanged = findIcon('doc-code');
 
-    expect(additions.text()).toBe('100');
-    expect(deletions.text()).toBe('200');
-    expect(filesChanged.textContent).toContain('300');
+    it('shows amount of file changed with plural "files" when 0 files has changed', () => {
+      const oneFileChanged = '0';
+
+      createComponent({
+        diffFilesCountText: oneFileChanged,
+      });
+
+      expect(findIcon('doc-code').textContent.trim()).toBe(`${oneFileChanged} files`);
+    });
+
+    it('shows amount of file changed with singular "file" when 1 file is changed', () => {
+      const oneFileChanged = '1';
+
+      createComponent({
+        diffFilesCountText: oneFileChanged,
+      });
+
+      expect(findIcon('doc-code').textContent.trim()).toBe(`${oneFileChanged} file`);
+    });
+
+    it('shows amount of files change with plural "files" when multiple files are changed', () => {
+      createComponent({
+        diffFilesCountText: DIFF_FILES_COUNT,
+      });
+
+      expect(findIcon('doc-code').textContent.trim()).toContain(`${DIFF_FILES_COUNT} files`);
+    });
+
+    it('shows amount of files change with plural "files" when files changed is truncated', () => {
+      createComponent({
+        diffFilesCountText: DIFF_FILES_COUNT_TRUNCATED,
+      });
+
+      expect(findIcon('doc-code').textContent.trim()).toContain(
+        `${DIFF_FILES_COUNT_TRUNCATED} files`,
+      );
+    });
   });
 });