diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 6ec5c5959f2..f3a8e435016 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -54,7 +54,7 @@ import RefSelectDropdown from './ref_select_dropdown';
 import GfmAutoComplete from './gfm_auto_complete';
 import ShortcutsBlob from './shortcuts_blob';
 import initSettingsPanels from './settings_panels';
-import { setScrollWidth } from './helpers/scroll_helper';
+import ScrollHelper from './helpers/scroll_helper';
 
 (function() {
   var Dispatcher;
@@ -77,7 +77,7 @@ import { setScrollWidth } from './helpers/scroll_helper';
         return false;
       }
 
-      setScrollWidth();
+      ScrollHelper.setScrollWidth();
 
       path = page.split(':');
       shortcut_handler = null;
diff --git a/app/assets/javascripts/helpers/scroll_helper.js b/app/assets/javascripts/helpers/scroll_helper.js
index 4a3a9e161a8..4f1fd074daf 100644
--- a/app/assets/javascripts/helpers/scroll_helper.js
+++ b/app/assets/javascripts/helpers/scroll_helper.js
@@ -1,29 +1,30 @@
-function getScrollWidth() {
-  const $rulerContainer = $('<div>').css({
-    visibility: 'hidden',
-    width: 100,
-    overflow: 'scroll',
-  });
+import $ from 'jquery';
 
-  const $ruler = $('<div>').css({
-    width: '100%',
-  });
+const ScrollHelper = {
+  getScrollWidth() {
+    const $rulerContainer = $('<div>').css({
+      visibility: 'hidden',
+      width: 100,
+      overflow: 'scroll',
+    });
 
-  $ruler.appendTo($rulerContainer);
-  $rulerContainer.appendTo('body');
+    const $ruler = $('<div>').css({
+      width: '100%',
+    });
 
-  const scrollWidth = $ruler.outerWidth();
+    $ruler.appendTo($rulerContainer);
+    $rulerContainer.appendTo('body');
 
-  $rulerContainer.remove();
+    const scrollWidth = $ruler.outerWidth();
 
-  return 100 - scrollWidth;
-}
+    $rulerContainer.remove();
 
-function setScrollWidth() {
-  $('body').attr('data-scroll-width', getScrollWidth());
-}
+    return 100 - scrollWidth;
+  },
 
-export {
-  getScrollWidth,
-  setScrollWidth,
+  setScrollWidth() {
+    $('body').attr('data-scroll-width', ScrollHelper.getScrollWidth());
+  },
 };
+
+export default ScrollHelper;
diff --git a/spec/javascripts/helpers/scroll_helper_spec.js b/spec/javascripts/helpers/scroll_helper_spec.js
new file mode 100644
index 00000000000..1c3e922e58f
--- /dev/null
+++ b/spec/javascripts/helpers/scroll_helper_spec.js
@@ -0,0 +1,18 @@
+import $ from 'jquery';
+import ScrollHelper from '~/helpers/scroll_helper';
+
+describe('ScrollHelper', () => {
+  describe('setScrollWidth', () => {
+    it('calls getScrollWidth and sets data-scroll-width', () => {
+      const width = 10;
+
+      spyOn($.fn, 'attr');
+      spyOn(ScrollHelper, 'getScrollWidth').and.returnValue(width);
+
+      ScrollHelper.setScrollWidth();
+
+      expect(ScrollHelper.getScrollWidth).toHaveBeenCalled();
+      expect($.fn.attr).toHaveBeenCalledWith('data-scroll-width', width);
+    });
+  });
+});