Merge pull request #3173 from alphagov/dependabot/npm_and_yarn/jquery-3.4.1

Bump jquery from 1.12.4 to 3.4.1

package.json

@@ -35,7 +35,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"

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", () => {

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 =
@@ -145,15 +150,18 @@ describe('FullscreenTable', () => {
   describe("the height of the table should fit the vertical space available to it", () => {
 
     let containerBoundingClientRectSpy;
+    let containerClientRectsSpy;
 
     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
-      windowMock.setHeightTo(768);
-      container.setAttribute('style', 'height: 1000px');
-      containerBoundingClientRectSpy = jest.spyOn(container, 'getBoundingClientRect')
-      containerBoundingClientRectSpy.mockImplementation(() => { return { top: 500 } });
+      screenMock.window.setHeightTo(768);
+      screenMock.mockPositionAndDimension('container', container, {
+        'offsetHeight': 1000,
+        'offsetWidth': 641,
+        'offsetTop': 500
+      });
 
       // start module
       window.GOVUK.modules.start();
@@ -165,8 +173,7 @@ describe('FullscreenTable', () => {
 
     afterEach(() => {
 
-      windowMock.reset();
-      containerBoundingClientRectSpy.mockClear();
+      screenMock.reset();
 
     });
 
@@ -181,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');
@@ -192,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');
@@ -210,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
@@ -226,7 +233,7 @@ describe('FullscreenTable', () => {
 
     afterEach(() => {
 
-      windowMock.reset();
+      screenMock.reset();
 
     });
 
@@ -245,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 `<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/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 => {

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('&');
 
 };