From e65946680a4b8d23968fba2c3a116689c8e38ae9 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 8 Nov 2019 12:40:54 +0000
Subject: [PATCH] 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", () => {