From 1a5d40312a180df341e505f80a153caa0a91e38b Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Tue, 21 May 2019 15:45:06 +0100 Subject: [PATCH] Move window mock functions into helper class --- tests/javascripts/fullscreenTable.test.js | 92 ++++------------------- tests/javascripts/support/helpers.js | 61 +++++++++++++++ 2 files changed, 77 insertions(+), 76 deletions(-) diff --git a/tests/javascripts/fullscreenTable.test.js b/tests/javascripts/fullscreenTable.test.js index 936f9027b..c1130f1ce 100644 --- a/tests/javascripts/fullscreenTable.test.js +++ b/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 = `
@@ -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); - setElementDimensionsAndOffset(container, { height: 1000, offset: { top: 500 } }); + windowMock.setHeightTo(768); + 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(); - resetWindowDimensions(); - scrollWindowBy(0); + windowMock.reset(); + containerBoundingClientRectSpy.mockClear(); }); @@ -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(); - resetWindowDimensions(); - scrollWindowBy(0); + windowMock.reset(); }); @@ -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 `
`, minus margin-left for the row numbers column expect(window.getComputedStyle(tableFrame)['width']).toEqual('680px'); // width of content column - numbers column diff --git a/tests/javascripts/support/helpers.js b/tests/javascripts/support/helpers.js index f951f317b..52ce86cda 100644 --- a/tests/javascripts/support/helpers.js +++ b/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;