Scroll to diff file when clicking on file name57669-fix-bug-clicking-file-header-refreshes-page

- Add an ID to the diff content
- handle clicking on file name in diffFileHeader when it is not a link
to another page but rather a link to an element on the page

2 files changed, 103 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 66c5b17b825..2d10b8383e2 100644
--- a/spec/javascripts/diffs/components/diff_file_header_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_header_spec.js
@@ -3,7 +3,7 @@ import Vuex from 'vuex';
 import diffsModule from '~/diffs/store/modules';
 import notesModule from '~/notes/stores/modules';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import mountComponent, { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffDiscussionsMockData from '../mock_data/diff_discussions';
 import { diffViewerModes } from '~/ide/constants';
 
@@ -252,6 +252,75 @@ describe('diff_file_header', () => {
         expect(vm.$emit).not.toHaveBeenCalled();
       });
     });
+
+    describe('handleFileNameClick', () => {
+      let e;
+
+      beforeEach(() => {
+        e = { preventDefault: () => {} };
+        spyOn(e, 'preventDefault');
+      });
+
+      describe('when file name links to other page', () => {
+        it('does not call preventDefault if submodule tree url exists', () => {
+          vm = mountComponent(Component, {
+            ...props,
+            diffFile: { ...props.diffFile, submodule_tree_url: 'foobar.com' },
+          });
+
+          vm.handleFileNameClick(e);
+
+          expect(e.preventDefault).not.toHaveBeenCalled();
+        });
+
+        it('does not call preventDefault if submodule_link exists', () => {
+          vm = mountComponent(Component, {
+            ...props,
+            diffFile: { ...props.diffFile, submodule_link: 'foobar.com' },
+          });
+          vm.handleFileNameClick(e);
+
+          expect(e.preventDefault).not.toHaveBeenCalled();
+        });
+
+        it('does not call preventDefault if discussionPath exists', () => {
+          vm = mountComponent(Component, {
+            ...props,
+            discussionPath: 'Foo bar',
+          });
+
+          vm.handleFileNameClick(e);
+
+          expect(e.preventDefault).not.toHaveBeenCalled();
+        });
+      });
+
+      describe('scrolling to diff', () => {
+        let scrollToElement;
+        let el;
+
+        beforeEach(() => {
+          el = document.createElement('div');
+          spyOn(document, 'querySelector').and.returnValue(el);
+          scrollToElement = spyOnDependency(DiffFileHeader, 'scrollToElement');
+          vm = mountComponent(Component, props);
+
+          vm.handleFileNameClick(e);
+        });
+
+        it('calls scrollToElement with file content', () => {
+          expect(scrollToElement).toHaveBeenCalledWith(el);
+        });
+
+        it('element adds the content id to the window location', () => {
+          expect(window.location.hash).toContain(props.diffFile.file_hash);
+        });
+
+        it('calls preventDefault when button does not link to other page', () => {
+          expect(e.preventDefault).toHaveBeenCalled();
+        });
+      });
+    });
   });
 
   describe('template', () => {
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 0bb43c94f6a..2084c36e484 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -2,6 +2,7 @@ import axios from '~/lib/utils/axios_utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import MockAdapter from 'axios-mock-adapter';
 import { faviconDataUrl, overlayDataUrl, faviconWithOverlayDataUrl } from './mock_data';
+import BreakpointInstance from '~/breakpoints';
 
 const PIXEL_TOLERANCE = 0.2;
 
@@ -380,6 +381,38 @@ describe('common_utils', () => {
     });
   });
 
+  describe('contentTop', () => {
+    it('does not add height for fileTitle or compareVersionsHeader if screen is too small', () => {
+      spyOn(BreakpointInstance, 'getBreakpointSize').and.returnValue('sm');
+
+      setFixtures(`
+        <div class="diff-file file-title-flex-parent">
+          blah blah blah
+        </div>
+        <div class="mr-version-controls">
+          more blah blah blah
+        </div>
+      `);
+
+      expect(commonUtils.contentTop()).toBe(0);
+    });
+
+    it('adds height for fileTitle and compareVersionsHeader screen is large enough', () => {
+      spyOn(BreakpointInstance, 'getBreakpointSize').and.returnValue('lg');
+
+      setFixtures(`
+        <div class="diff-file file-title-flex-parent">
+          blah blah blah
+        </div>
+        <div class="mr-version-controls">
+          more blah blah blah
+        </div>
+      `);
+
+      expect(commonUtils.contentTop()).toBe(18);
+    });
+  });
+
   describe('parseBoolean', () => {
     const { parseBoolean } = commonUtils;