Finished scroll_helper tests

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();

spec/javascripts/helpers/scroll_helper_spec.js

@@ -2,17 +2,56 @@ import $ from 'jquery';
 import ScrollHelper from '~/helpers/scroll_helper';
 
 describe('ScrollHelper', () => {
-  describe('setScrollWidth', () => {
-    it('calls getScrollWidth and sets data-scroll-width', () => {
   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', () => {
+      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();
     });
   });
 });