Add tests for 'shim'

A 'shim' element needs to be added to the page
when an element is made sticky to ensure the
vertical position of everything doesn't change.

When an element becomes sticky it is made
`position: fixed` which removes it from the layout
of the page. The 'shim' is an element added at the
same place in the page with the same dimensions,
so the layout isn't changed.

tests/javascripts/stick-to-window-when-scrolling.test.js

@@ -109,19 +109,39 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
     });
 
-    test("if top of viewport is below top of element but still in the scroll area on load, the element should be marked as already sticky", () => {
+    describe("if top of viewport is below top of element but still in the scroll area on load", () => {
+
+      beforeEach(() => {
 
         // scroll past the top of the form
         screenMock.scrollTo(inputForm.offsetTop + 10);
 
         window.GOVUK.stickAtTopWhenScrolling.init();
 
+      });
+
+      test("the element should be marked as already sticky", () => {
+
         // `.content-fixed-onload` adds the drop-shadow without fading in to show it did not become sticky from user interaction
         expect(inputForm.classList.contains('content-fixed-onload')).toBe(true);
         expect(inputForm.classList.contains('content-fixed')).toBe(false);
 
       });
 
+      test("a 'shim' element with dimensions matching the sticky element should be added to the document to take up the space it no longer occupies", () => {
+
+        const shim = inputForm.previousElementSibling;
+
+        expect(shim).not.toBeNull();
+        expect(shim.classList.contains('shim')).toBe(true);
+        expect(shim.style.height).toEqual(`${inputForm.offsetHeight}px`);
+        expect(shim.style.marginTop).toEqual(''); // 0px would return an empty string
+        expect(shim.style.marginBottom).toEqual(''); // 0px would return an empty string
+
+      });
+
+    });
+
     test("if top of viewport is below the furthest point the top of the element can go in the scroll area on load, the element should be marked as stopped", () => {
 
       // the element should stop a set distance from the stopping point
@@ -511,17 +531,36 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
     });
 
-    test("if bottom of viewport is above bottom of element on load, the element should be marked as already sticky", () => {
+    describe("if bottom of viewport is above bottom of element on load", () => {
+
+      beforeEach(() => {
 
         // scroll position defaults to 0 so bottom of window starts at 940px. Element bottom defaults to 1160px.
-
         window.GOVUK.stickAtBottomWhenScrolling.init();
 
+      });
+
+      test("the element should be marked as already sticky", () => {
+
         expect(pageFooter.classList.contains('content-fixed-onload')).toBe(true);
         expect(pageFooter.classList.contains('content-fixed')).toBe(false);
 
       });
 
+      test("a 'shim' element with dimensions matching the sticky element should be added to the document to take up the space it no longer occupies", () => {
+
+        const shim = pageFooter.nextElementSibling;
+
+        expect(shim).not.toBeNull();
+        expect(shim.classList.contains('shim')).toBe(true);
+        expect(shim.style.height).toEqual(`${pageFooter.offsetHeight}px`);
+        expect(shim.style.marginTop).toEqual(''); // 0px would return an empty string
+        expect(shim.style.marginBottom).toEqual(''); // 0px would return an empty string
+
+      });
+
+    });
+
     test("if bottom of viewport is above the furthest point the bottom of the element can go in the scroll area on load, the element should be marked as stopped", () => {
 
       // change window size so its bottom can go past stopping position