Move window mock functions into helper class

tests/javascripts/fullscreenTable.test.js

@@ -12,75 +12,12 @@ afterAll(() => {
 });
 
 describe('FullscreenTable', () => {
+  let windowMock;
   let container;
   let tableFrame;
   let table;
   let numberColumnFrame;
 
-  function setWindowHeightTo (height) {
-
-    // mock DOM calls for window height
-    window.innerHeight = height;
-    // remove calls to document.documentElement.clientHeight  when jQuery is gone. It's called to support older browsers like IE8
-    jest.spyOn(document.documentElement, 'clientHeight', 'get').mockImplementation(() => height);
-
-  };
-
-  function setWindowWidthTo (width) {
-
-    // mock DOM calls for window width
-    window.innerWidth = width;
-    // remove calls to document.documentElement.clientWidth  when jQuery is gone. It's called to support older browsers like IE8
-    jest.spyOn(document.documentElement, 'clientWidth', 'get').mockImplementation(() => height);
-
-  };
-
-  function resizeWindowTo (dimensions) {
-
-    setWindowHeightTo(dimensions.height);
-    setWindowWidthTo(dimensions.width);
-    helpers.triggerEvent(window, 'resize');
-
-  };
-
-  function scrollWindowBy (scrollTop) {
-
-      document.documentElement.scrollTop = scrollTop;
-      helpers.triggerEvent(window, 'scroll');
-
-  };
-
-  function resetWindowDimensions () {
-
-    setWindowHeightTo(768);
-    setWindowWidthTo(1024);
-
-  };
-
-  function setElementDimensionsAndOffset (el, opts) {
-
-    const elOffsetSpy = jest.spyOn(el, 'getBoundingClientRect');
-
-    if (opts.height) {
-      el.setAttribute('style', `height: ${opts.height}px`);
-    }
-
-    if (opts.width) {
-      el.setAttribute('style', `width: ${opts.width}px`);
-    }
-
-    if (opts.offset) {
-      elOffsetSpy.mockImplementation(() => opts.offset);
-    }
-
-  };
-
-  function setElementWidth (el, width) {
-
-    el.setAttribute('style', `.width: ${width}px`);
-
-  };
-
   beforeEach(() => {
 
     const tableHeadings = () => {
@@ -142,6 +79,8 @@ describe('FullscreenTable', () => {
 
     }
 
+    windowMock = new helpers.WindowMock(jest);
+
     // set up DOM
     document.body.innerHTML =
       `<main>
@@ -205,12 +144,16 @@ describe('FullscreenTable', () => {
 
   describe("the height of the table should fit the vertical space available to it", () => {
 
+    let containerBoundingClientRectSpy;
+
     beforeEach(() => {
 
       // set the height and offset of the window and table container from the top of the document
       // so just the top 268px of it appears on-screen
-      setWindowHeightTo(768);
+      windowMock.setHeightTo(768);
-      setElementDimensionsAndOffset(container, { height: 1000, offset: { top: 500 } });
+      container.setAttribute('style', 'height: 1000px');
+      containerBoundingClientRectSpy = jest.spyOn(container, 'getBoundingClientRect')
+      containerBoundingClientRectSpy.mockImplementation(() => { return { top: 500 } });
 
       // start module
       window.GOVUK.modules.start();
@@ -222,9 +165,8 @@ describe('FullscreenTable', () => {
 
     afterEach(() => {
 
-      jest.clearAllMocks();
+      windowMock.reset();
-      resetWindowDimensions();
+      containerBoundingClientRectSpy.mockClear();
-      scrollWindowBy(0);
 
     });
 
@@ -239,7 +181,7 @@ describe('FullscreenTable', () => {
     test("when the page has scrolled", () => {
 
       // scroll the window so the table fills the height of the window (768px)
-      scrollWindowBy(500);
+      windowMock.scrollBy(500);
 
       // the frames should crop to the window height
       expect(window.getComputedStyle(tableFrame)['height']).toEqual('768px');
@@ -250,7 +192,7 @@ describe('FullscreenTable', () => {
     test("when the page has resized", () => {
 
       // resize the window by 232px (from 768px to 1000px)
-      resizeWindowTo({ height: 1000, width: 1024 });
+      windowMock.resizeTo({ height: 1000, width: 1024 });
 
       // the frames should crop to the top 500px of the table now visible
       expect(window.getComputedStyle(tableFrame)['height']).toEqual('500px');
@@ -268,7 +210,7 @@ describe('FullscreenTable', () => {
       rowNumberColumnCell = container.querySelector('.table-field-index');
 
       // set main content column width (used as module as gauge for table width)
-      setWindowWidthTo(1024);
+      windowMock.setWidthTo(1024);
       document.querySelector('main').setAttribute('style', 'width: 742px');
 
       // set total width of column for row numbers in table to 40px
@@ -284,9 +226,7 @@ describe('FullscreenTable', () => {
 
     afterEach(() => {
 
-      jest.clearAllMocks();
+      windowMock.reset();
-      resetWindowDimensions();
-      scrollWindowBy(0);
 
     });
 
@@ -305,7 +245,7 @@ describe('FullscreenTable', () => {
 
       // resize window and content column
       document.querySelector('main').setAttribute('style', 'width: 720px');
-      resizeWindowTo({ height: 768, width: 960 });
+      windowMock.resizeTo({ height: 768, width: 960 });
 
       // table should set its width to be that of `<main>`, minus margin-left for the row numbers column
       expect(window.getComputedStyle(tableFrame)['width']).toEqual('680px'); // width of content column - numbers column

tests/javascripts/support/helpers.js

@@ -75,6 +75,66 @@ class ElementQuery {
   }
 };
 
+class WindowMock {
+  constructor (jest) {
+    this._defaults = {
+      height: window.innerHeight,
+      width: window.innerWidth
+    };
+    this._spies = {
+      document: {}
+    };
+    this._jest = jest;
+  }
+
+  setHeightTo (height) {
+
+    // mock DOM calls for window height
+    window.innerHeight = height;
+    // remove calls to document.documentElement.clientHeight  when jQuery is gone. It's called to support older browsers like IE8
+    this._spies.document.clientHeight = this._jest.spyOn(document.documentElement, 'clientHeight', 'get').mockImplementation(() => height);
+
+  }
+
+  setWidthTo (width) {
+
+    // mock DOM calls for window width
+    window.innerWidth = width;
+    // remove calls to document.documentElement.clientWidth  when jQuery is gone. It's called to support older browsers like IE8
+    this._spies.document.clientWidth = this._jest.spyOn(document.documentElement, 'clientWidth', 'get').mockImplementation(() => height);
+
+  }
+
+  resizeTo (dimensions) {
+
+    this.setHeightTo(dimensions.height);
+    this.setWidthTo(dimensions.width);
+    triggerEvent(window, 'resize');
+
+  }
+
+  scrollBy (scrollPosition) {
+
+    document.documentElement.scrollTop = scrollPosition;
+    triggerEvent(window, 'scroll');
+
+  }
+
+  reset () {
+
+    window.innerHeight = this._defaults.height;
+    window.innerWidth = this._defaults.width;
+    document.documentElement.scrollTop = 0;
+
+    // reset all spies
+    Object.keys(this._spies).forEach(key => {
+      const objectSpies = this._spies[key];
+      Object.keys(objectSpies).forEach(key => objectSpies[key].mockClear());
+    });
+
+  }
+}
+
 // function to ask certain questions of a DOM Element
 const element = function (el) {
   return new ElementQuery(el);
@@ -82,3 +142,4 @@ const element = function (el) {
 
 exports.triggerEvent = triggerEvent;
 exports.element = element;
+exports.WindowMock = WindowMock;