From f2b7c42f5327b101ca28a40d9117c9d5b766f1dd Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 1 Nov 2019 12:09:59 +0000 Subject: [PATCH 1/6] Bump jquery from 1.12.4 to 3.4.1 Bumps [jquery](https://github.com/jquery/jquery) from 1.12.4 to 3.4.1. - [Release notes](https://github.com/jquery/jquery/releases) - [Commits](https://github.com/jquery/jquery/compare/1.12.4...3.4.1) Signed-off-by: dependabot[bot] --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b6ebd1675..549c54303 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "gulp-sass": "4.0.2", "gulp-uglify": "3.0.2", "hogan": "1.0.2", - "jquery": "1.12.4", + "jquery": "3.4.1", "query-command-supported": "1.0.0", "textarea-caret": "3.1.0", "timeago": "1.6.5" From 56a2aab5f0d22095e84c8cc73a1f8278e4baec11 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 7 Nov 2019 15:31:38 +0000 Subject: [PATCH 2/6] Mock out `getClientRects` for tests that need it jQuery 3 calls `getClientRects` in the `.innerHeight` code. Version 1 didn't. This mocks out those calls to the same as `getCoundingClientRect`. --- tests/javascripts/fullscreenTable.test.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/tests/javascripts/fullscreenTable.test.js b/tests/javascripts/fullscreenTable.test.js index 8917c0853..8bf1223b8 100644 --- a/tests/javascripts/fullscreenTable.test.js +++ b/tests/javascripts/fullscreenTable.test.js @@ -145,15 +145,22 @@ describe('FullscreenTable', () => { describe("the height of the table should fit the vertical space available to it", () => { let containerBoundingClientRectSpy; + let containerClientRectsSpy; beforeEach(() => { + let clientRect = { top: 500 }; + // 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 windowMock.setHeightTo(768); container.setAttribute('style', 'height: 1000px'); + containerBoundingClientRectSpy = jest.spyOn(container, 'getBoundingClientRect') - containerBoundingClientRectSpy.mockImplementation(() => { return { top: 500 } }); + containerBoundingClientRectSpy.mockImplementation(() => clientRect); + + containerClientRectsSpy = jest.spyOn(container, 'getClientRects') + containerClientRectsSpy.mockImplementation(() => { return [clientRect] }); // start module window.GOVUK.modules.start(); @@ -167,6 +174,7 @@ describe('FullscreenTable', () => { windowMock.reset(); containerBoundingClientRectSpy.mockClear(); + containerClientRectsSpy.mockClear(); }); From 3fba2c381df53130fe1777f6bef58cf801890197 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 8 Nov 2019 12:39:41 +0000 Subject: [PATCH 3/6] Make screenMock helper mock more DOM APIs jQuery 3 also calls `.getClientRects` to get the position and dimension of elements. --- tests/javascripts/support/helpers/rendering.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/tests/javascripts/support/helpers/rendering.js b/tests/javascripts/support/helpers/rendering.js index 5d3fdd2d2..673998047 100644 --- a/tests/javascripts/support/helpers/rendering.js +++ b/tests/javascripts/support/helpers/rendering.js @@ -214,8 +214,10 @@ class ScreenRenderItem { // mock any calls to the node's DOM API for position/dimension _mockAPICalls () { - // proxy boundingClientRect property calls to item data + // proxy getBoundingClientRect and getClientRects calls to item data + // assumes getClientRects only returns one clientRect this._jest.spyOn(this._node, 'getBoundingClientRect').mockImplementation(() => this._getBoundingClientRect()); + this._jest.spyOn(this._node, 'getClientRects').mockImplementation(() => [this._getBoundingClientRect()]); // handle calls to offset properties ScreenRenderItem.OFFSET_PROPS.forEach(prop => { From e65946680a4b8d23968fba2c3a116689c8e38ae9 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 8 Nov 2019 12:40:54 +0000 Subject: [PATCH 4/6] Use screenMock helper in API key test jQuery 3 checks for any styles before dimension so a value typical of the browser defaults needs to be provided when mocking them. This helps the mocking of `$.height` by providing a default style for `height`. --- tests/javascripts/apiKey.test.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/tests/javascripts/apiKey.test.js b/tests/javascripts/apiKey.test.js index 34f7509c8..3b31cf5f9 100644 --- a/tests/javascripts/apiKey.test.js +++ b/tests/javascripts/apiKey.test.js @@ -81,15 +81,35 @@ describe('API key', () => { component = document.querySelector('[data-module=api-key]'); - // mock DOM API called for element height + // set default style for component height (queried by jQuery before checking DOM APIs) + const stylesheet = document.createElement('style'); + stylesheet.innerHTML = '[data-module=api-key] { height: auto; }'; // set to browser default + document.getElementsByTagName('head')[0].appendChild(stylesheet); + componentHeightOnLoad = 50; - jest.spyOn(component, 'offsetHeight', 'get').mockImplementation(() => componentHeightOnLoad); + + // mock the DOM APIs called for the position & dimension of the component + screenMock = new helpers.ScreenMock(jest); + screenMock.setWindow({ + width: 1990, + height: 940, + scrollTop: 0 + }); + screenMock.mockPositionAndDimension('component', component, { + offsetHeight: componentHeightOnLoad, + offsetWidth: 641, + offsetTop: 0 + }); // start the module window.GOVUK.modules.start(); }); + afterEach(() => { + screenMock.reset(); + }); + describe("On page load", () => { test("It should add a button for copying the key to the clipboard", () => { From 2b5ba5f4388d3e634aed7eef56a4c9e548289d4e Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 8 Nov 2019 14:43:44 +0000 Subject: [PATCH 5/6] Use screenMock helper in fullscreenTable test --- tests/javascripts/fullscreenTable.test.js | 39 +++++++++++------------ 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/tests/javascripts/fullscreenTable.test.js b/tests/javascripts/fullscreenTable.test.js index 8bf1223b8..c50c07d78 100644 --- a/tests/javascripts/fullscreenTable.test.js +++ b/tests/javascripts/fullscreenTable.test.js @@ -12,7 +12,7 @@ afterAll(() => { }); describe('FullscreenTable', () => { - let windowMock; + let screenMock; let container; let tableFrame; let table; @@ -79,7 +79,12 @@ describe('FullscreenTable', () => { } - windowMock = new helpers.WindowMock(jest); + screenMock = new helpers.ScreenMock(jest); + screenMock.setWindow({ + width: 1990, + height: 940, + scrollTop: 0 + }); // set up DOM document.body.innerHTML = @@ -149,18 +154,14 @@ describe('FullscreenTable', () => { beforeEach(() => { - let clientRect = { top: 500 }; - // 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 - windowMock.setHeightTo(768); - container.setAttribute('style', 'height: 1000px'); - - containerBoundingClientRectSpy = jest.spyOn(container, 'getBoundingClientRect') - containerBoundingClientRectSpy.mockImplementation(() => clientRect); - - containerClientRectsSpy = jest.spyOn(container, 'getClientRects') - containerClientRectsSpy.mockImplementation(() => { return [clientRect] }); + screenMock.window.setHeightTo(768); + screenMock.mockPositionAndDimension('container', container, { + 'offsetHeight': 1000, + 'offsetWidth': 641, + 'offsetTop': 500 + }); // start module window.GOVUK.modules.start(); @@ -172,9 +173,7 @@ describe('FullscreenTable', () => { afterEach(() => { - windowMock.reset(); - containerBoundingClientRectSpy.mockClear(); - containerClientRectsSpy.mockClear(); + screenMock.reset(); }); @@ -189,7 +188,7 @@ describe('FullscreenTable', () => { test("when the page has scrolled", () => { // scroll the window so the table fills the height of the window (768px) - windowMock.scrollTo(500); + screenMock.window.scrollTo(500); // the frames should crop to the window height expect(window.getComputedStyle(tableFrame)['height']).toEqual('768px'); @@ -200,7 +199,7 @@ describe('FullscreenTable', () => { test("when the page has resized", () => { // resize the window by 232px (from 768px to 1000px) - windowMock.resizeTo({ height: 1000, width: 1024 }); + screenMock.window.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'); @@ -218,7 +217,7 @@ describe('FullscreenTable', () => { rowNumberColumnCell = container.querySelector('.table-field-index'); // set main content column width (used as module as gauge for table width) - windowMock.setWidthTo(1024); + screenMock.window.setWidthTo(1024); document.querySelector('main').setAttribute('style', 'width: 742px'); // set total width of column for row numbers in table to 40px @@ -234,7 +233,7 @@ describe('FullscreenTable', () => { afterEach(() => { - windowMock.reset(); + screenMock.reset(); }); @@ -253,7 +252,7 @@ describe('FullscreenTable', () => { // resize window and content column document.querySelector('main').setAttribute('style', 'width: 720px'); - windowMock.resizeTo({ height: 768, width: 960 }); + screenMock.window.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 From 47781cc92922512b03003b132796f71aaced7226 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 8 Nov 2019 14:15:41 +0000 Subject: [PATCH 6/6] Change treatment of space character in URLs jQuery changed it from using '+' to '%20' between versions 1 and 3. This updates the test to match. --- tests/javascripts/support/helpers/utilities.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/tests/javascripts/support/helpers/utilities.js b/tests/javascripts/support/helpers/utilities.js index 9ec0f8015..c2e88877a 100644 --- a/tests/javascripts/support/helpers/utilities.js +++ b/tests/javascripts/support/helpers/utilities.js @@ -13,9 +13,7 @@ function getFormDataFromPairs (pairs) { }); - // Combine the pairs into a single string and replace all %-encoded spaces to - // the '+' character; matches the behaviour of browser form submissions. - return urlEncodedDataPairs.join('&').replace(/%20/g, '+'); + return urlEncodedDataPairs.join('&'); };