Add option to expand diff to full file

The user can also toggle between the diff changes and
the full file diff.

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

1 files changed, 66 insertions, 1 deletions

diff --git a/spec/javascripts/diffs/components/diff_file_header_spec.js b/spec/javascripts/diffs/components/diff_file_header_spec.js
index 1201f066d2f..66c5b17b825 100644
--- a/spec/javascripts/diffs/components/diff_file_header_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_header_spec.js
@@ -23,6 +23,9 @@ describe('diff_file_header', () => {
   });
 
   beforeEach(() => {
+    gon.features = {
+      expandDiffFullFile: true,
+    };
     const diffFile = diffDiscussionMock.diff_file;
 
     diffFile.added_lines = 2;
@@ -382,7 +385,7 @@ describe('diff_file_header', () => {
         props.diffFile.edit_path = '/';
         vm = mountComponentWithStore(Component, { props, store });
 
-        expect(vm.$el.querySelector('.js-edit-blob')).toContainText('Edit');
+        expect(vm.$el.querySelector('.js-edit-blob')).not.toBe(null);
       });
 
       it('should not show edit button when file is deleted', () => {
@@ -576,4 +579,66 @@ describe('diff_file_header', () => {
       });
     });
   });
+
+  describe('expand full file button', () => {
+    beforeEach(() => {
+      props.addMergeRequestButtons = true;
+      props.diffFile.edit_path = '/';
+    });
+
+    it('does not render button', () => {
+      vm = mountComponentWithStore(Component, { props, store });
+
+      expect(vm.$el.querySelector('.js-expand-file')).toBe(null);
+    });
+
+    it('renders button', () => {
+      props.diffFile.is_fully_expanded = false;
+
+      vm = mountComponentWithStore(Component, { props, store });
+
+      expect(vm.$el.querySelector('.js-expand-file')).not.toBe(null);
+    });
+
+    it('shows fully expanded text', () => {
+      props.diffFile.is_fully_expanded = false;
+      props.diffFile.isShowingFullFile = true;
+
+      vm = mountComponentWithStore(Component, { props, store });
+
+      expect(vm.$el.querySelector('.js-expand-file').textContent).toContain('Show changes only');
+    });
+
+    it('shows expand text', () => {
+      props.diffFile.is_fully_expanded = false;
+
+      vm = mountComponentWithStore(Component, { props, store });
+
+      expect(vm.$el.querySelector('.js-expand-file').textContent).toContain('Show full file');
+    });
+
+    it('renders loading icon', () => {
+      props.diffFile.is_fully_expanded = false;
+      props.diffFile.isLoadingFullFile = true;
+
+      vm = mountComponentWithStore(Component, { props, store });
+
+      expect(vm.$el.querySelector('.js-expand-file .loading-container')).not.toBe(null);
+    });
+
+    it('calls toggleFullDiff on click', () => {
+      props.diffFile.is_fully_expanded = false;
+
+      vm = mountComponentWithStore(Component, { props, store });
+
+      spyOn(vm.$store, 'dispatch').and.stub();
+
+      vm.$el.querySelector('.js-expand-file').click();
+
+      expect(vm.$store.dispatch).toHaveBeenCalledWith(
+        'diffs/toggleFullDiff',
+        props.diffFile.file_path,
+      );
+    });
+  });
 });