From 5e4b18eef7c14a58e506919c7cb618ea5486023c Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Wed, 19 Jul 2017 21:43:42 +0100
Subject: [PATCH] Finished scroll_helper tests

---
 .../javascripts/helpers/scroll_helper.js      |  3 +-
 .../javascripts/helpers/scroll_helper_spec.js | 45 +++++++++++++++++--
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/helpers/scroll_helper.js b/app/assets/javascripts/helpers/scroll_helper.js
index 4f1fd074daf..013ed1a20ad 100644
--- a/app/assets/javascripts/helpers/scroll_helper.js
+++ b/app/assets/javascripts/helpers/scroll_helper.js
@@ -9,10 +9,11 @@ const ScrollHelper = {
     });
 
     const $ruler = $('<div>').css({
-      width: '100%',
+      width: 100,
     });
 
     $ruler.appendTo($rulerContainer);
+
     $rulerContainer.appendTo('body');
 
     const scrollWidth = $ruler.outerWidth();
diff --git a/spec/javascripts/helpers/scroll_helper_spec.js b/spec/javascripts/helpers/scroll_helper_spec.js
index 1c3e922e58f..92f1389b8fb 100644
--- a/spec/javascripts/helpers/scroll_helper_spec.js
+++ b/spec/javascripts/helpers/scroll_helper_spec.js
@@ -2,17 +2,56 @@ import $ from 'jquery';
 import ScrollHelper from '~/helpers/scroll_helper';
 
 describe('ScrollHelper', () => {
+  const width = 10;
+
+  describe('getScrollWidth', () => {
+    const parent = jasmine.createSpyObj('parent', ['css', 'appendTo', 'remove']);
+    const child = jasmine.createSpyObj('child', ['css', 'appendTo', 'outerWidth']);
+    let scrollWidth;
+
+    beforeEach(() => {
+      spyOn($.fn, 'init').and.returnValues(parent, child);
+      spyOn(jasmine.Fixtures.prototype, 'cleanUp'); // disable jasmine-jquery cleanup, we dont want it but its imported in test_bundle :(
+
+      parent.css.and.returnValue(parent);
+      child.css.and.returnValue(child);
+      child.outerWidth.and.returnValue(width);
+
+      scrollWidth = ScrollHelper.getScrollWidth();
+    });
+
+    it('inserts 2 nested hidden scrollable divs, calls parents outerWidth, removes parent and returns the width', () => {
+      const initArgs = $.fn.init.calls.allArgs();
+
+      expect(initArgs[0][0]).toEqual('<div>');
+      expect(initArgs[1][0]).toEqual('<div>');
+      expect(parent.css).toHaveBeenCalledWith({
+        visibility: 'hidden',
+        width: 100,
+        overflow: 'scroll',
+      });
+      expect(child.css).toHaveBeenCalledWith({
+        width: 100,
+      });
+      expect(child.appendTo).toHaveBeenCalledWith(parent);
+      expect(parent.appendTo).toHaveBeenCalledWith('body');
+      expect(child.outerWidth).toHaveBeenCalled();
+      expect(parent.remove).toHaveBeenCalled();
+      expect(scrollWidth).toEqual(100 - width);
+    });
+  });
+
   describe('setScrollWidth', () => {
     it('calls getScrollWidth and sets data-scroll-width', () => {
-      const width = 10;
-
+      spyOn($.fn, 'find').and.callThrough();
       spyOn($.fn, 'attr');
       spyOn(ScrollHelper, 'getScrollWidth').and.returnValue(width);
 
       ScrollHelper.setScrollWidth();
 
-      expect(ScrollHelper.getScrollWidth).toHaveBeenCalled();
+      expect($.fn.find).toHaveBeenCalledWith('body');
       expect($.fn.attr).toHaveBeenCalledWith('data-scroll-width', width);
+      expect(ScrollHelper.getScrollWidth).toHaveBeenCalled();
     });
   });
 });