Fixed renamed and mode changed diff viewers

Renders mode changed and renamed file merge request diff
viewers on the frontend.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/52607

4 files changed, 97 insertions, 0 deletions

diff --git a/spec/javascripts/diffs/components/diff_file_spec.js b/spec/javascripts/diffs/components/diff_file_spec.js
index 51bb4807960..1af49282c36 100644
--- a/spec/javascripts/diffs/components/diff_file_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_spec.js
@@ -74,6 +74,32 @@ describe('DiffFile', () => {
         });
       });
 
+      it('should be collapsed for renamed files', done => {
+        vm.file.renderIt = true;
+        vm.file.collapsed = false;
+        vm.file.highlighted_diff_lines = null;
+        vm.file.renamed_file = true;
+
+        vm.$nextTick(() => {
+          expect(vm.$el.innerText).not.toContain('This diff is collapsed');
+
+          done();
+        });
+      });
+
+      it('should be collapsed for mode changed files', done => {
+        vm.file.renderIt = true;
+        vm.file.collapsed = false;
+        vm.file.highlighted_diff_lines = null;
+        vm.file.mode_changed = true;
+
+        vm.$nextTick(() => {
+          expect(vm.$el.innerText).not.toContain('This diff is collapsed');
+
+          done();
+        });
+      });
+
       it('should have loading icon while loading a collapsed diffs', done => {
         vm.file.collapsed = true;
         vm.isLoadingCollapsedDiff = true;
diff --git a/spec/javascripts/diffs/store/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js
index d4ef17c5ef8..717f983da65 100644
--- a/spec/javascripts/diffs/store/utils_spec.js
+++ b/spec/javascripts/diffs/store/utils_spec.js
@@ -559,4 +559,26 @@ describe('DiffsStoreUtils', () => {
       ]);
     });
   });
+
+  describe('getDiffMode', () => {
+    it('returns mode when matched in file', () => {
+      expect(
+        utils.getDiffMode({
+          renamed_file: true,
+        }),
+      ).toBe('renamed');
+    });
+
+    it('returns mode_changed if key has no match', () => {
+      expect(
+        utils.getDiffMode({
+          mode_changed: true,
+        }),
+      ).toBe('mode_changed');
+    });
+
+    it('defaults to replaced', () => {
+      expect(utils.getDiffMode({})).toBe('replaced');
+    });
+  });
 });
diff --git a/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js b/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js
index 67a3a2e08bc..6add6cdac4d 100644
--- a/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js
+++ b/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js
@@ -68,4 +68,30 @@ describe('DiffViewer', () => {
       done();
     });
   });
+
+  it('renders renamed component', () => {
+    createComponent({
+      diffMode: 'renamed',
+      newPath: 'test.abc',
+      newSha: 'ABC',
+      oldPath: 'testold.abc',
+      oldSha: 'DEF',
+    });
+
+    expect(vm.$el.textContent).toContain('File moved');
+  });
+
+  it('renders mode changed component', () => {
+    createComponent({
+      diffMode: 'mode_changed',
+      newPath: 'test.abc',
+      newSha: 'ABC',
+      oldPath: 'testold.abc',
+      oldSha: 'DEF',
+      aMode: '123',
+      bMode: '321',
+    });
+
+    expect(vm.$el.textContent).toContain('File mode changed from 123 to 321');
+  });
 });
diff --git a/spec/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed_spec.js b/spec/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed_spec.js
new file mode 100644
index 00000000000..c4358f0d9cb
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed_spec.js
@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils';
+import ModeChanged from '~/vue_shared/components/diff_viewer/viewers/mode_changed.vue';
+
+describe('Diff viewer mode changed component', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = shallowMount(ModeChanged, {
+      propsData: {
+        aMode: '123',
+        bMode: '321',
+      },
+    });
+  });
+
+  afterEach(() => {
+    vm.destroy();
+  });
+
+  it('renders aMode & bMode', () => {
+    expect(vm.text()).toContain('File mode changed from 123 to 321');
+  });
+});