Clearly display diff statistics for MRs

Put the statistics in the compare-versions header for the entire MR
Put them in the file header for each individual file

5 files changed, 63 insertions, 15 deletions

diff --git a/spec/features/merge_request/user_sees_versions_spec.rb b/spec/features/merge_request/user_sees_versions_spec.rb
index 63d8decc2d2..aa91ade46ca 100644
--- a/spec/features/merge_request/user_sees_versions_spec.rb
+++ b/spec/features/merge_request/user_sees_versions_spec.rb
@@ -42,7 +42,7 @@ describe 'Merge request > User sees versions', :js do
         expect(page).to have_content 'latest version'
       end
 
-      expect(page).to have_content '8 changed files'
+      expect(page).to have_content '8 Files'
     end
 
     it_behaves_like 'allows commenting',
@@ -76,7 +76,7 @@ describe 'Merge request > User sees versions', :js do
     end
 
     it 'shows comments that were last relevant at that version' do
-      expect(page).to have_content '5 changed files'
+      expect(page).to have_content '5 Files'
 
       position = Gitlab::Diff::Position.new(
         old_path: ".gitmodules",
@@ -120,8 +120,15 @@ describe 'Merge request > User sees versions', :js do
         diff_id: merge_request_diff3.id,
         start_sha: '6f6d7e7ed97bb5f0054f2b1df789b39ca89b6ff9'
       )
-      expect(page).to have_content '4 changed files'
-      expect(page).to have_content '15 additions 6 deletions'
+      expect(page).to have_content '4 Files'
+
+      additions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group svg.ic-file-addition')
+                              .ancestor('.diff-stats-group').text
+      deletions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group svg.ic-file-deletion')
+                              .ancestor('.diff-stats-group').text
+
+      expect(additions_content).to eq '15'
+      expect(deletions_content).to eq '6'
 
       position = Gitlab::Diff::Position.new(
         old_path: ".gitmodules",
@@ -141,8 +148,14 @@ describe 'Merge request > User sees versions', :js do
     end
 
     it 'show diff between new and old version' do
-      expect(page).to have_content '4 changed files'
-      expect(page).to have_content '15 additions 6 deletions'
+      additions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group svg.ic-file-addition')
+                              .ancestor('.diff-stats-group').text
+      deletions_content = page.find('.diff-stats.is-compare-versions-header .diff-stats-group svg.ic-file-deletion')
+                              .ancestor('.diff-stats-group').text
+
+      expect(page).to have_content '4 Files'
+      expect(additions_content).to eq '15'
+      expect(deletions_content).to eq '6'
     end
 
     it 'returns to latest version when "Show latest version" button is clicked' do
@@ -150,7 +163,7 @@ describe 'Merge request > User sees versions', :js do
       page.within '.mr-version-dropdown' do
         expect(page).to have_content 'latest version'
       end
-      expect(page).to have_content '8 changed files'
+      expect(page).to have_content '8 Files'
     end
 
     it_behaves_like 'allows commenting',
@@ -176,7 +189,7 @@ describe 'Merge request > User sees versions', :js do
         find('.btn-default').click
         click_link 'version 1'
       end
-      expect(page).to have_content '0 changed files'
+      expect(page).to have_content '0 Files'
     end
   end
 
@@ -202,7 +215,7 @@ describe 'Merge request > User sees versions', :js do
         expect(page).to have_content 'version 1'
       end
 
-      expect(page).to have_content '0 changed files'
+      expect(page).to have_content '0 Files'
     end
   end
 
diff --git a/spec/javascripts/diffs/components/compare_versions_spec.js b/spec/javascripts/diffs/components/compare_versions_spec.js
index 2f0385454d7..e886f962d2f 100644
--- a/spec/javascripts/diffs/components/compare_versions_spec.js
+++ b/spec/javascripts/diffs/components/compare_versions_spec.js
@@ -10,6 +10,10 @@ describe('CompareVersions', () => {
   const targetBranch = { branchName: 'tmp-wine-dev', versionIndex: -1 };
 
   beforeEach(() => {
+    store.state.diffs.addedLines = 10;
+    store.state.diffs.removedLines = 20;
+    store.state.diffs.diffFiles.push('test');
+
     vm = createComponentWithStore(Vue.extend(CompareVersionsComponent), store, {
       mergeRequestDiffs: diffsMockData,
       mergeRequestDiff: diffsMockData[0],
diff --git a/spec/javascripts/diffs/components/diff_file_header_spec.js b/spec/javascripts/diffs/components/diff_file_header_spec.js
index b77907ff26f..787a81fd88f 100644
--- a/spec/javascripts/diffs/components/diff_file_header_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_header_spec.js
@@ -24,6 +24,10 @@ describe('diff_file_header', () => {
 
   beforeEach(() => {
     const diffFile = diffDiscussionMock.diff_file;
+
+    diffFile.added_lines = 2;
+    diffFile.removed_lines = 1;
+
     props = {
       diffFile: { ...diffFile },
       canCurrentUserFork: false,
diff --git a/spec/javascripts/diffs/components/diff_stats_spec.js b/spec/javascripts/diffs/components/diff_stats_spec.js
new file mode 100644
index 00000000000..984b3026209
--- /dev/null
+++ b/spec/javascripts/diffs/components/diff_stats_spec.js
@@ -0,0 +1,33 @@
+import { shallowMount } from '@vue/test-utils';
+import DiffStats from '~/diffs/components/diff_stats.vue';
+
+describe('diff_stats', () => {
+  it('does not render a group if diffFileLengths is not passed in', () => {
+    const wrapper = shallowMount(DiffStats, {
+      propsData: {
+        addedLines: 1,
+        removedLines: 2,
+      },
+    });
+    const groups = wrapper.findAll('.diff-stats-group');
+
+    expect(groups.length).toBe(2);
+  });
+
+  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,
+      },
+    });
+    const additions = wrapper.find('icon-stub[name="file-addition"]').element.parentNode;
+    const deletions = wrapper.find('icon-stub[name="file-deletion"]').element.parentNode;
+    const filesChanged = wrapper.find('icon-stub[name="doc-code"]').element.parentNode;
+
+    expect(additions.textContent).toContain('100');
+    expect(deletions.textContent).toContain('200');
+    expect(filesChanged.textContent).toContain('300');
+  });
+});
diff --git a/spec/javascripts/diffs/components/tree_list_spec.js b/spec/javascripts/diffs/components/tree_list_spec.js
index 08b0b4f9e45..cf197bd00b0 100644
--- a/spec/javascripts/diffs/components/tree_list_spec.js
+++ b/spec/javascripts/diffs/components/tree_list_spec.js
@@ -35,12 +35,6 @@ describe('Diffs tree list component', () => {
     vm.$destroy();
   });
 
-  it('renders diff stats', () => {
-    expect(vm.$el.textContent).toContain('1 changed file');
-    expect(vm.$el.textContent).toContain('10 additions');
-    expect(vm.$el.textContent).toContain('20 deletions');
-  });
-
   it('renders empty text', () => {
     expect(vm.$el.textContent).toContain('No files found');
   });