Merge branch 'hash-mr-scroll-load' into 'master'

Fixed anchored content not being scrolled into view

Closes #38326

See merge request gitlab-org/gitlab-ce!14562

1 files changed, 56 insertions, 0 deletions

diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 787b405de47..f86f2f260c3 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -84,6 +84,62 @@ describe('common_utils', () => {
       expectGetElementIdToHaveBeenCalledWith('definição');
       expectGetElementIdToHaveBeenCalledWith('user-content-definição');
     });
+
+    it('scrolls element into view', () => {
+      document.body.innerHTML += `
+        <div id="parent">
+          <div style="height: 2000px;"></div>
+          <div id="test" style="height: 2000px;"></div>
+        </div>
+      `;
+
+      window.history.pushState({}, null, '#test');
+      commonUtils.handleLocationHash();
+
+      expectGetElementIdToHaveBeenCalledWith('test');
+      expect(window.scrollY).toBe(document.getElementById('test').offsetTop);
+
+      document.getElementById('parent').remove();
+    });
+
+    it('scrolls user content element into view', () => {
+      document.body.innerHTML += `
+        <div id="parent">
+          <div style="height: 2000px;"></div>
+          <div id="user-content-test" style="height: 2000px;"></div>
+        </div>
+      `;
+
+      window.history.pushState({}, null, '#test');
+      commonUtils.handleLocationHash();
+
+      expectGetElementIdToHaveBeenCalledWith('test');
+      expectGetElementIdToHaveBeenCalledWith('user-content-test');
+      expect(window.scrollY).toBe(document.getElementById('user-content-test').offsetTop);
+
+      document.getElementById('parent').remove();
+    });
+
+    it('scrolls to element with offset from navbar', () => {
+      spyOn(window, 'scrollBy').and.callThrough();
+      document.body.innerHTML += `
+        <div id="parent">
+          <div class="navbar-gitlab" style="position: fixed; top: 0; height: 50px;"></div>
+          <div style="height: 2000px; margin-top: 50px;"></div>
+          <div id="user-content-test" style="height: 2000px;"></div>
+        </div>
+      `;
+
+      window.history.pushState({}, null, '#test');
+      commonUtils.handleLocationHash();
+
+      expectGetElementIdToHaveBeenCalledWith('test');
+      expectGetElementIdToHaveBeenCalledWith('user-content-test');
+      expect(window.scrollY).toBe(document.getElementById('user-content-test').offsetTop - 50);
+      expect(window.scrollBy).toHaveBeenCalledWith(0, -50);
+
+      document.getElementById('parent').remove();
+    });
   });
 
   describe('setParamInURL', () => {