From 13c40a25d1b7183ecbe7dc9fd3b0908737dd0fa0 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 2 Aug 2019 17:00:26 +0100
Subject: [PATCH 01/11] Changes to `WindowMock` helper

This includes the following fixes:

1. fix error in `WindowMock.setWidthTo`

   It was returning height, not width.

2. Fix for `WindowMock.reset`

   Changes to the scroll position need to go
   through the `scrollTo` method.

It also includes the following changes

1. Improve mocking of window scrollTop

   Increases the number of DOM API methods mocked
   to return the intended scrollTop value.

2. Change WindowMock.scrollBy to
   WindowMock.scrollTo

   Because you're not scrolling by an amount,
   you're scrolling to a position.

3. Give WindowMock getters for position/dimension

   It's useful to be able to get the
   position/dimension of the window in tests when
   you're resizing and scrolling it as part of the
   test.

4. Assign WindowMock spies on instantiation

   Assigning them whenever a dimension is set doesn't
   make sense. You're just setting a value, not
   changing how that value is accessed.
---
 tests/javascripts/fullscreenTable.test.js |  2 +-
 tests/javascripts/support/helpers.js      | 49 ++++++++++++++++++-----
 2 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/tests/javascripts/fullscreenTable.test.js b/tests/javascripts/fullscreenTable.test.js
index c1130f1ce..968712134 100644
--- a/tests/javascripts/fullscreenTable.test.js
+++ b/tests/javascripts/fullscreenTable.test.js
@@ -181,7 +181,7 @@ describe('FullscreenTable', () => {
     test("when the page has scrolled", () => {
 
       // scroll the window so the table fills the height of the window (768px)
-      windowMock.scrollBy(500);
+      windowMock.scrollTo(500);
 
       // the frames should crop to the window height
       expect(window.getComputedStyle(tableFrame)['height']).toEqual('768px');
diff --git a/tests/javascripts/support/helpers.js b/tests/javascripts/support/helpers.js
index ee56ae375..10a4445b0 100644
--- a/tests/javascripts/support/helpers.js
+++ b/tests/javascripts/support/helpers.js
@@ -173,27 +173,52 @@ class WindowMock {
       height: window.innerHeight,
       width: window.innerWidth
     };
-    this._spies = {
+    this.spies = {
       document: {}
     };
     this._jest = jest;
+    this._setSpies();
+  }
+
+  get top () {
+    return window.scrollY;
+  }
+
+  get bottom () {
+    return window.scrollY + window.innerHeight;
+  }
+
+  get height () {
+    return window.innerHeight;
+  }
+
+  get width () {
+    return window.innerWidth
+  }
+
+  get scrollPosition () {
+    return window.scrollY;
+  }
+
+  _setSpies () {
+
+    // 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(() => window.innerHeight);
+
+    // 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(() => window.innerWidth);
+
   }
 
   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);
 
   }
 
@@ -205,9 +230,11 @@ class WindowMock {
 
   }
 
-  scrollBy (scrollPosition) {
+  scrollTo (scrollPosition) {
 
     document.documentElement.scrollTop = scrollPosition;
+    window.scrollY = scrollPosition;
+    window.pageYOffset = scrollPosition;
     triggerEvent(window, 'scroll');
 
   }
@@ -216,11 +243,11 @@ class WindowMock {
 
     window.innerHeight = this._defaults.height;
     window.innerWidth = this._defaults.width;
-    document.documentElement.scrollTop = 0;
+    this.scrollTo(0);
 
     // reset all spies
-    Object.keys(this._spies).forEach(key => {
-      const objectSpies = this._spies[key];
+    Object.keys(this.spies).forEach(key => {
+      const objectSpies = this.spies[key];
       Object.keys(objectSpies).forEach(key => objectSpies[key].mockClear());
     });
 

From 9ef093cfdabfc2ae7c6d3b1618fdd4e157fd38f8 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 19 Jul 2019 11:54:12 +0100
Subject: [PATCH 02/11] Add ScreenMock to helpers

Mocks DOM API calls for position and dimension of
elements and provides an API to allow access to
them.
---
 tests/javascripts/support/helpers.js | 175 +++++++++++++++++++++++++++
 1 file changed, 175 insertions(+)

diff --git a/tests/javascripts/support/helpers.js b/tests/javascripts/support/helpers.js
index 10a4445b0..ed43d21a2 100644
--- a/tests/javascripts/support/helpers.js
+++ b/tests/javascripts/support/helpers.js
@@ -1,3 +1,20 @@
+function getDescriptorForProperty (prop, obj) {
+  const descriptors = Object.getOwnPropertyDescriptors(obj);
+  const prototype = Object.getPrototypeOf(obj);
+
+  if ((descriptors !== {}) && (prop in descriptors)) {
+    return descriptors[prop];
+  }
+
+  // if not in this object's descriptors, check the prototype chain
+  if (prototype !== null) {
+    return getDescriptorForProperty(prop, prototype);
+  }
+
+  // no descriptor for this prop and no prototypes left in the chain
+  return null;
+};
+
 const triggerEvent = (el, evtType, options) => {
   const eventInit = {
     bubbles: true,
@@ -235,6 +252,7 @@ class WindowMock {
     document.documentElement.scrollTop = scrollPosition;
     window.scrollY = scrollPosition;
     window.pageYOffset = scrollPosition;
+
     triggerEvent(window, 'scroll');
 
   }
@@ -297,6 +315,162 @@ class SelectionMock extends DOMInterfaceMock {
   }
 
 }
+class ScreenRenderItem {
+  constructor (jest, node) {
+
+    this._jest = jest;
+    this._node = node;
+    this._storeProps();
+    this._mockAPICalls();
+
+  }
+
+  setData (itemData) {
+
+    // check all the item data is present
+    const itemProps = Object.keys(itemData);
+    const missingKeys = ScreenRenderItem.REQUIRED_PROPS.filter(prop => !itemProps.includes(prop));
+
+    this._data = {};
+
+    if (missingKeys.length) {
+      throw Error(`${itemData.name ? itemData.name : itemProps.join(', ')} is missing these properties: ${missingKeys.join(', ')}`);
+    }
+
+    // default left if not set
+    if (!('offsetLeft' in itemData)) { itemData.offsetLeft = 0; }
+
+    // copy onto internal store
+    Object.assign(this._data, itemData);
+
+  }
+
+  _getBoundingClientRect () {
+    const {offsetHeight, offsetWidth, offsetTop, offsetLeft} = this._data;
+    const x = offsetLeft - window.scrollX;
+    const y = offsetTop - window.scrollY;
+
+    return {
+      'x': x,
+      'y': y,
+      'top': (offsetHeight < 0) ? y + offsetHeight : y,
+      'left': (offsetWidth < 0) ? x + offsetWidth : x,
+      'bottom': (offsetTop + offsetHeight) - window.scrollY,
+      'right': (offsetLeft + offsetWidth) - window.scrollX,
+    };
+
+  }
+
+  reset () {
+
+    // reset DOMRect mock
+    this._node.getBoundingClientRect.mockClear();
+
+    ScreenRenderItem.OFFSET_PROPS.forEach(prop => {
+
+      if (prop in this._propStore) {
+        // replace property implementation
+        Object.defineProperty(this._node, prop, this._propStore[prop]);
+      }
+
+    });
+
+  }
+
+  _storeProps () {
+
+    this._propStore = {};
+
+    ScreenRenderItem.OFFSET_PROPS.forEach(prop => {
+      const descriptor = getDescriptorForProperty(prop, this._node);
+
+      if (descriptor !== null) {
+        this._propStore[prop] = descriptor;
+      }
+    });
+
+  }
+
+  // mock any calls to the node's DOM API for position/dimension
+  _mockAPICalls () {
+
+    // proxy boundingClientRect property calls to item data
+    this._jest.spyOn(this._node, 'getBoundingClientRect').mockImplementation(() => this._getBoundingClientRect());
+
+    // handle calls to offset properties
+    ScreenRenderItem.OFFSET_PROPS.forEach(prop => {
+
+      this._jest.spyOn(this._node, prop, 'get').mockImplementation(() => this._data[prop]);
+
+      // proxy DOM API sets for offsetValues (not possible to mock directly)
+      Object.defineProperty(this._node, prop, {
+        configurable: true,
+        set: jest.fn(value => {
+          this._data[prop] = value;
+          return true;
+        })
+      });
+
+    });
+
+  }
+
+}
+ScreenRenderItem.OFFSET_PROPS = ['offsetHeight', 'offsetWidth', 'offsetTop', 'offsetLeft'];
+ScreenRenderItem.REQUIRED_PROPS = ['name', 'offsetHeight', 'offsetHeight', 'offsetWidth', 'offsetTop'];
+
+class ScreenMock {
+  constructor (jest) {
+
+    this._jest = jest
+    this._items = {};
+
+  }
+
+  mockPositionAndDimension (itemName, node, itemData) {
+
+    if (itemName in this._items) { throw new Error(`${itemName} already has its position and dimension mocked`); }
+
+    const data = Object.assign({ 'name': itemName }, itemData);
+    const item = new ScreenRenderItem(this._jest, node);
+
+    item.setData(data);
+
+    this._items[itemName] = item;
+
+  }
+
+  setWindow (windowData) {
+
+    this.window = new WindowMock(this._jest);
+
+    // check all the window data is present
+    const missingKeys = Object.keys(windowData).filter(key => !ScreenMock.REQUIRED_WINDOW_PROPS.includes(key));
+
+    if (missingKeys.length) {
+      throw Error(`Window definition is missing these properties: ${missingKeys.join(', ')}`);
+    }
+
+    this.window.setHeightTo(windowData.height);
+    this.window.setWidthTo(windowData.width);
+    this.window.scrollTo(windowData.scrollTop);
+
+  }
+
+  scrollTo (scrollTop) {
+
+    this.window.scrollTo(scrollTop);
+
+  }
+
+  reset () {
+
+    Object.keys(this._items).forEach(itemName => this._items[itemName].reset());
+
+  }
+
+}
+ScreenMock.REQUIRED_WINDOW_PROPS = ['height', 'width', 'scrollTop'];
 
 // function to ask certain questions of a DOM Element
 const element = function (el) {
@@ -311,3 +485,4 @@ exports.RangeMock = RangeMock;
 exports.SelectionMock = SelectionMock;
 exports.element = element;
 exports.WindowMock = WindowMock;
+exports.ScreenMock = ScreenMock;

From 823c5a61194c4a9fbc22eb4c1bb25e2647a19290 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 22 Jul 2019 14:11:43 +0100
Subject: [PATCH 03/11] Add `clearEvents` method & refactor `setEvents`

`clearEvents` helps write the tests and also gives
users the opportunity to remove all of this
functionality.

Refactor of `setEvents` tidies up use of `self`.
---
 .../stick-to-window-when-scrolling.js         | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/stick-to-window-when-scrolling.js b/app/assets/javascripts/stick-to-window-when-scrolling.js
index 0a3176beb..c75779109 100644
--- a/app/assets/javascripts/stick-to-window-when-scrolling.js
+++ b/app/assets/javascripts/stick-to-window-when-scrolling.js
@@ -710,21 +710,36 @@
     this.recalculate();
   };
   Sticky.prototype.setEvents = function () {
-    var self = this;
+    this._scrollEvent = this.onScroll.bind(this);
+    this._resizeEvent = this.onResize.bind(this);
 
     // flag when scrolling takes place and check (and re-position) sticky elements relative to
     // window position
-    if (self._scrollTimeout === false) {
-      $(global).scroll(function (e) { self.onScroll(); });
-      self._scrollTimeout = global.setInterval(function (e) { self.checkScroll(); }, 50);
+    if (this._scrollTimeout === false) {
+      $(global).scroll(this._scrollEvent);
+      this._scrollTimeout = global.setInterval(this.checkScroll.bind(this), 50);
     }
 
     // Recalculate all dimensions when the window resizes
-    if (self._resizeTimeout === false) {
-      $(global).resize(function (e) { self.onResize(); });
-      self._resizeTimeout = global.setInterval(function (e) { self.checkResize(); }, 50);
+    if (this._resizeTimeout === false) {
+      $(global).resize(this._resizeEvent);
+      this._resizeTimeout = global.setInterval(this.checkResize.bind(this), 50);
     }
   };
+  Sticky.prototype.clearEvents = function () {
+    if (this._scrollTimeout !== false) {
+      $(global).off('scroll', this._scrollEvent);
+      global.clearInterval(this._scrollTimeout);
+      this._scrollTimeout = false;
+    }
+
+    if (this._resizeTimeout !== false) {
+      $(global).off('resize', this._resizeEvent);
+      global.clearInterval(this._resizeTimeout);
+      this._resizeTimeout = false;
+    }
+
+  };
   Sticky.prototype.viewportIsWideEnough = function (windowWidth) {
     return windowWidth > 768;
   };

From 85d54637fa2b7603b80317568ab31a20e9046e4c Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 7 Aug 2019 12:23:07 +0100
Subject: [PATCH 04/11] Add tests for most scenarios

---
 .../stick-to-window-when-scrolling.test.js    | 433 ++++++++++++++++++
 1 file changed, 433 insertions(+)
 create mode 100644 tests/javascripts/stick-to-window-when-scrolling.test.js

diff --git a/tests/javascripts/stick-to-window-when-scrolling.test.js b/tests/javascripts/stick-to-window-when-scrolling.test.js
new file mode 100644
index 000000000..863cc7f45
--- /dev/null
+++ b/tests/javascripts/stick-to-window-when-scrolling.test.js
@@ -0,0 +1,433 @@
+const helpers = require('./support/helpers');
+const STOP_PADDING = 10;
+function getScreenItemBottomPosition (screenItem) {
+  return screenItem.offsetTop + screenItem.offsetHeight;
+};
+
+beforeAll(() => {
+  require('../../app/assets/javascripts/stick-to-window-when-scrolling.js');
+});
+
+afterAll(() => {
+  require('./support/teardown.js');
+});
+
+describe("Stick to top/bottom of window when scrolling", () => {
+
+  let screenMock;
+
+  describe("If intending to stick to the top", () => {
+
+    let inputForm;
+    let formFooter;
+    let footer;
+    let windowHeight;
+
+    beforeEach(() => {
+
+      document.body.innerHTML = `
+        <div class="grid-row">
+          <main class="column-three-quarters column-main">
+            <form method="post" autocomplete="off">
+              <div class="grid-row js-stick-at-top-when-scrolling">
+                <div class="column-two-thirds ">
+                  <div class="form-group" data-module="">
+                    <label class="form-label" for="placeholder_value">
+                      name
+                    </label>
+                    <input class="form-control form-control-1-1 " data-module="" id="placeholder_value" name="placeholder_value" required="" rows="8" type="text" value="">
+                  </div>
+                </div>
+              </div>
+              <div class="page-footer">
+                <button type="submit" class="button">Continue</button>
+              </div>
+            </form>
+          </main>
+        </div>
+        <footer class="js-footer"></footer>`;
+
+      inputForm = document.querySelector('form > .grid-row');
+      formFooter = document.querySelector('.page-footer');
+      footer = document.querySelector('.js-footer');
+
+      windowHeight = 940;
+
+      // mock the rendering of all components
+      screenMock = new helpers.ScreenMock(jest);
+      screenMock.setWindow({
+        width: 1990,
+        height: windowHeight,
+        scrollTop: 0
+      });
+      screenMock.mockPositionAndDimension('inputForm', inputForm, {
+        offsetHeight: 168,
+        offsetWidth: 727,
+        offsetTop: 238
+      });
+      screenMock.mockPositionAndDimension('formFooter', formFooter, {
+        offsetHeight: 200,
+        offsetWidth: 727,
+        offsetTop: inputForm.offsetTop + 200
+      });
+      screenMock.mockPositionAndDimension('footer', footer, {
+        offsetHeight: 535,
+        offsetWidth: 1990,
+        offsetTop: formFooter.offsetTop + formFooter.offsetHeight
+      });
+
+      getFurthestTopPoint = (stickysHeight) => {
+        return footer.offsetTop - PADDING_BEFORE_STOPPING_POINT - stickysHeight;
+      };
+
+      // the sticky JS polls for changes to position/dimension so we need to fake setTimeout and setInterval
+      jest.useFakeTimers();
+
+    });
+
+    afterEach(() => {
+
+      document.body.innerHTML = '';
+
+      window.GOVUK.stickAtTopWhenScrolling.clearEvents();
+
+      screenMock.reset();
+
+    });
+
+    test("if top of viewport is above top of element on load, the element should not be marked as sticky", () => {
+
+      // scroll position defaults to 0, element top defaults to 138px
+
+      window.GOVUK.stickAtTopWhenScrolling.init();
+
+      expect(inputForm.classList.contains('content-fixed-onload')).toBe(false);
+      expect(inputForm.classList.contains('content-fixed')).toBe(false);
+
+    });
+
+    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", () => {
+
+      // scroll past the top of the form
+      screenMock.scrollTo(inputForm.offsetTop + 10);
+
+      window.GOVUK.stickAtTopWhenScrolling.init();
+
+      // `.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("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
+      const furthestPoint = (footer.offsetTop - inputForm.offsetHeight) - STOP_PADDING;
+
+      // scroll past the furthest point
+      screenMock.scrollTo(furthestPoint + 10);
+
+      window.GOVUK.stickAtTopWhenScrolling.init();
+
+      // `.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);
+
+      // elements are stopped by adding inline styles
+      expect(inputForm.style.position).toEqual('absolute');
+      expect(inputForm.style.top).toEqual(`${furthestPoint}px`);
+
+    });
+
+    describe("if viewport top starts above element top", () => {
+
+      beforeEach(() => {
+
+        // default scroll position is above top of form
+        window.GOVUK.stickAtTopWhenScrolling.init();
+
+      });
+
+      test("if window is scrolled so top of it is below the top of the element, the element should be marked so it becomes sticky to the user", () => {
+
+        // scroll past top of form
+        screenMock.scrollTo(inputForm.offsetTop + 10);
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
+
+        // `content-fixed` fades the drop-shadow in to show it became sticky from user interaction
+        expect(inputForm.classList.contains('content-fixed')).toBe(true);
+        expect(inputForm.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+      });
+
+      test("if window is scrolled so top of it is below the furthest point the top of the element can go in the scroll area, the element should be stopped", () => {
+
+        const furthestPoint = (footer.offsetTop - inputForm.offsetHeight) - STOP_PADDING;
+
+        // scroll past top of form
+        screenMock.scrollTo(furthestPoint + 10);
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
+
+        // `content-fixed` fades the drop-shadow in to show it became sticky from user interaction
+        expect(inputForm.classList.contains('content-fixed')).toBe(true);
+        expect(inputForm.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+        // elements are stopped by adding inline styles
+        expect(inputForm.style.position).toEqual('absolute');
+        expect(inputForm.style.top).toEqual(`${furthestPoint}px`);
+
+      });
+
+    });
+
+    describe("if viewport top starts below element top", () => {
+
+      beforeEach(() => {
+
+        // scroll past top of form
+        screenMock.scrollTo(inputForm.offsetTop + 10);
+
+        window.GOVUK.stickAtTopWhenScrolling.init();
+
+      });
+
+      test("if window is scrolled so top of it is above the top of the element, the element should be made not sticky", () => {
+
+        // scroll to top
+        screenMock.scrollTo(0);
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
+
+        expect(inputForm.classList.contains('content-fixed')).toBe(false);
+        expect(inputForm.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+      });
+
+    });
+
+  });
+
+  describe("If intending to stick to the bottom", () => {
+
+    let header;
+    let content;
+    let pageFooter;
+    let windowHeight;
+    let furthestBottomPoint;
+
+    beforeEach(() => {
+
+      document.body.innerHTML = `
+        <main role="main" class="column-three-quarters column-main">
+          <a class="govuk-back-link" href="">Back</a>
+          <h1 class="heading-large js-header">
+            Preview of ‘Content email’
+          </h1>
+          <div class="wrapper">
+            <div class="email-message-body">
+              <h2>This is the title</h2>
+              <p>This is a paragraph, defined as a block of content where the contents run horizontally across lines.</p>
+              <table role="presentation">
+                <tbody>
+                  <tr>
+                    <td>
+                      <ul>
+                        <li>these</li>
+                        <li>are</li>
+                        <li>bullet points</li>
+                      </ul>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <blockquote>
+                <p>This block of text is formatted to stand out from the rest</p>
+              </blockquote>
+              <p>This is a paragraph with a horizontal line underneath.</p>
+              <hr>
+              <p>This is a paragraph with a horizontal line above.</p>
+              <p>This paragraph has a link in it: <a href="https://www.gov.uk">https://www.gov.uk</a>.</p>
+            </div>
+            <div class="page-footer js-stick-at-bottom-when-scrolling">
+              <form method="post" action="">
+                  <button type="submit" class="button">Send 1 email </button>
+              </form>
+            </div>
+          </div>
+        </main>`;
+
+      heading = document.querySelector('.js-header');
+      content = document.querySelector('.email-message-body');
+      pageFooter = document.querySelector('.page-footer');
+
+      windowHeight = 940;
+
+      // mock the rendering of all components
+      screenMock = new helpers.ScreenMock(jest);
+      screenMock.setWindow({
+        width: 1990,
+        height: windowHeight,
+        scrollTop: 0
+      });
+      screenMock.mockPositionAndDimension('heading', heading, {
+        offsetHeight: 75,
+        offsetWidth: 727,
+        offsetTop: 185
+      });
+      screenMock.mockPositionAndDimension('content', content, {
+        offsetHeight: 900,
+        offsetWidth: 727,
+        offsetTop: heading.offsetTop + heading.offsetHeight
+      });
+      screenMock.mockPositionAndDimension('pageFooter', pageFooter, {
+        offsetHeight: 50,
+        offsetWidth: 727,
+        offsetTop: content.offsetTop + content.offsetHeight
+      });
+
+      furthestBottomPoint = () => {
+        const headingBottom = getScreenItemBottomPosition(headingItem);
+
+        // the element should stop so its top at the bottom of the heading, with a set amount of padding to separate them
+        return (headingBottom + pageFooterItem.height) + STOP_PADDING;
+      };
+
+      // the sticky JS polls for changes to position/dimension so we need to fake setTimeout and setInterval
+      jest.useFakeTimers();
+
+    });
+
+    afterEach(() => {
+
+      window.GOVUK.stickAtBottomWhenScrolling.clearEvents();
+
+    });
+
+    test("if bottom of viewport is below bottom of element on load, the element should not be marked as sticky", () => {
+
+      const pageFooterBottom = getScreenItemBottomPosition(pageFooter);
+
+      // scroll so the bottom of the window goes past the bottom of the element
+      screenMock.scrollTo((pageFooterBottom - windowHeight) + 10);
+
+      window.GOVUK.stickAtBottomWhenScrolling.init();
+
+      // `.content-fixed-onload` adds the drop-shadow without fading in to show it did not become sticky from user interaction
+      expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false);
+      expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+
+    });
+
+    test("if bottom of viewport is above bottom of element on load, the element should be marked as already sticky", () => {
+
+      // scroll position defaults to 0 so bottom of window starts at 940px. Element bottom defaults to 1160px.
+
+      window.GOVUK.stickAtBottomWhenScrolling.init();
+
+      expect(pageFooter.classList.contains('content-fixed-onload')).toBe(true);
+      expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+
+    });
+
+    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
+      const windowHeight = 200;
+
+      screenMock.window.setHeightTo(windowHeight);
+
+      // scroll the window bottom past the furthest point
+      screenMock.scrollTo((furthestBottomPoint() - windowHeight) - 10);
+
+      window.GOVUK.stickAtBottomWhenScrolling.init();
+
+      // `.content-fixed-onload` adds the drop-shadow without fading in to show it did not become sticky from user interaction
+      expect(pageFooter.classList.contains('content-fixed-onload')).toBe(true);
+      expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+
+      // elements are stopped by adding inline styles
+      expect(pageFooter.style.position).toEqual('absolute');
+      expect(pageFooter.style.top).toEqual(`${furthestBottomPoint() - pageFooter.offsetHeight}px`);
+
+    });
+
+    describe("if viewport bottom starts below element bottom", () => {
+
+      let pageFooterBottom;
+
+      beforeEach(() => {
+
+        pageFooterBottom = getScreenItemBottomPosition(pageFooter);
+
+        // change window size so its bottom can go past stopping position
+        const windowHeight = 600;
+
+        screenMock.window.setHeightTo(windowHeight);
+
+        // scroll to just below the element
+        screenMock.scrollTo((pageFooterBottom - windowHeight) + 10);
+
+        // default scroll position is above top of form
+        window.GOVUK.stickAtBottomWhenScrolling.init();
+
+      });
+
+      test("if window is scrolled so bottom of it is above the bottom of the element, the element should be marked so it becomes sticky to the user", () => {
+
+        // scroll above bottom of sticky element
+        screenMock.scrollTo((pageFooterBottom - windowHeight) - 10);
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
+
+        // `content-fixed` fades the drop-shadow in to show it became sticky from user interaction
+        expect(pageFooter.classList.contains('content-fixed')).toBe(true);
+        expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+      });
+
+      test("if window is scrolled so bottom of it is above the furthest point the bottom of the element can go in the scroll area, the element should be stopped", () => {
+
+        // scroll past top of content
+        screenMock.scrollTo((furthestBottomPoint() - windowHeight) - 10);
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
+
+        // `content-fixed` fades the drop-shadow in to show it became sticky from user interaction
+        expect(pageFooter.classList.contains('content-fixed')).toBe(true);
+        expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+        // elements are stopped by adding inline styles
+        expect(pageFooter.style.position).toEqual('absolute');
+        expect(pageFooter.style.top).toEqual(`${furthestBottomPoint() pageFooter.offsetHeight}px`);
+
+      });
+
+    });
+
+    describe("if viewport bottom starts above element bottom", () => {
+
+      let pageFooterBottom;
+
+      beforeEach(() => {
+
+        // scroll position defaults to 0 so bottom of window starts at 940px. Element bottom defaults to 1160px so will be sticky on load.
+
+        pageFooterBottom = getScreenItemBottomPosition(pageFooter);
+
+        window.GOVUK.stickAtBottomWhenScrolling.init();
+
+      });
+
+      test("if window is scrolled so bottom of it is below the bottom of the element, the element should be made not sticky", () => {
+
+        // scroll so bottom of window is below bottom of element
+        screenMock.scrollTo((pageFooterBottom - windowHeight) + 10);
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
+
+        expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+        expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+      });
+
+    });
+
+  });
+
+});

From 8a82d42bf7aaa040f140d44deb421b08e14e4c14 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 24 Jul 2019 09:54:18 +0100
Subject: [PATCH 05/11] Add tests for 'dialog' mode

'dialog' mode was introduced as part of this work:

https://github.com/alphagov/notifications-admin/pull/2682

It lets multiple elements sticky to the viewport
together so a set of UI can be present for a set
scrolling range. It's called a 'dialog' because
the behaviour is closest to that of a modal
dialog.
---
 .../stick-to-window-when-scrolling.test.js    | 422 +++++++++++++++++-
 tests/javascripts/support/helpers.js          |  35 ++
 2 files changed, 441 insertions(+), 16 deletions(-)

diff --git a/tests/javascripts/stick-to-window-when-scrolling.test.js b/tests/javascripts/stick-to-window-when-scrolling.test.js
index 863cc7f45..05da2a1b4 100644
--- a/tests/javascripts/stick-to-window-when-scrolling.test.js
+++ b/tests/javascripts/stick-to-window-when-scrolling.test.js
@@ -1,5 +1,7 @@
 const helpers = require('./support/helpers');
-const STOP_PADDING = 10;
+const PADDING_BETWEEN_STICKYS = 40;
+const PADDING_BEFORE_STOPPING_POINT = 10;
+
 function getScreenItemBottomPosition (screenItem) {
   return screenItem.offsetTop + screenItem.offsetHeight;
 };
@@ -22,6 +24,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
     let formFooter;
     let footer;
     let windowHeight;
+    let getFurthestTopPoint;
 
     beforeEach(() => {
 
@@ -122,10 +125,10 @@ describe("Stick to top/bottom of window when scrolling", () => {
     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
-      const furthestPoint = (footer.offsetTop - inputForm.offsetHeight) - STOP_PADDING;
+      const furthestTopPoint = getFurthestTopPoint(inputForm.offsetHeight);
 
       // scroll past the furthest point
-      screenMock.scrollTo(furthestPoint + 10);
+      screenMock.scrollTo(furthestTopPoint + 10);
 
       window.GOVUK.stickAtTopWhenScrolling.init();
 
@@ -135,7 +138,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
       // elements are stopped by adding inline styles
       expect(inputForm.style.position).toEqual('absolute');
-      expect(inputForm.style.top).toEqual(`${furthestPoint}px`);
+      expect(inputForm.style.top).toEqual(`${furthestTopPoint}px`);
 
     });
 
@@ -162,10 +165,10 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
       test("if window is scrolled so top of it is below the furthest point the top of the element can go in the scroll area, the element should be stopped", () => {
 
-        const furthestPoint = (footer.offsetTop - inputForm.offsetHeight) - STOP_PADDING;
+        const furthestTopPoint = getFurthestTopPoint(inputForm.offsetHeight);
 
         // scroll past top of form
-        screenMock.scrollTo(furthestPoint + 10);
+        screenMock.scrollTo(furthestTopPoint + 10);
         jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
 
         // `content-fixed` fades the drop-shadow in to show it became sticky from user interaction
@@ -174,7 +177,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
         // elements are stopped by adding inline styles
         expect(inputForm.style.position).toEqual('absolute');
-        expect(inputForm.style.top).toEqual(`${furthestPoint}px`);
+        expect(inputForm.style.top).toEqual(`${furthestTopPoint}px`);
 
       });
 
@@ -204,6 +207,198 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
     });
 
+    describe("if mode is set to 'dialog' and multiple sticky elements share the same scroll area", () => {
+
+      let radios;
+
+      beforeEach(() => {
+
+        const inputFormBottom = getScreenItemBottomPosition(inputForm);
+
+        // set mode to 'dialog' so sticky elements are treated as one item
+        window.GOVUK.stickAtTopWhenScrolling.setMode('dialog')
+
+        // add another sticky element before the form footer
+        radios = helpers.getRadioGroup({
+          cssClasses: ['js-stick-at-top-when-scrolling'],
+          name: 'send-time',
+          label: 'send time',
+          fields: [
+            {
+              label: 'Now',
+              value: 'now',
+              checked: true
+            },
+            {
+              label: 'Tomorrow',
+              value: 'tomorrow',
+              checked: false
+            },
+            {
+              label: 'Friday',
+              value: 'friday',
+              checked: false
+            }
+          ]
+        });
+        formFooter.parentNode.insertBefore(radios, formFooter);
+        screenMock.mockPositionAndDimension('radios', radios, {
+          offsetHeight: 175,
+          offsetWidth: 727,
+          offsetTop: inputFormBottom
+        });
+        const radiosBottom = getScreenItemBottomPosition(radios);
+
+        // adjust other screen items
+
+        // formFooter top should be at the radios bottom
+        formFooter.offsetTop = radiosBottom;
+
+        // footer top should be at formFooter's bottom
+        footer.offsetTop = getScreenItemBottomPosition(formFooter);
+
+      });
+
+      describe("if window top is below the top of the highest element on load", () => {
+
+        beforeEach(() => {
+
+          // scroll past top of first sticky element
+          screenMock.scrollTo(inputForm.offsetTop + 10);
+
+          window.GOVUK.stickAtTopWhenScrolling.init();
+
+        });
+
+        test("both 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(radios.classList.contains('content-fixed-onload')).toBe(true);
+          expect(radios.classList.contains('content-fixed')).toBe(false);
+          expect(inputForm.classList.contains('content-fixed-onload')).toBe(true);
+          expect(inputForm.classList.contains('content-fixed')).toBe(false);
+
+        });
+
+        test("the lowest element should have the drop-shadow", () => {
+
+          expect(radios.classList.contains('content-fixed__top')).toBe(true);
+
+        });
+
+        test("they should be stacked from the top edge of the viewport in the order they appear in the document", () => {
+
+          expect(inputForm.style.top).toEqual('0px');
+
+          // dialog mode removes enough padding to deal with that each sticky element is given to give its content enough space from the surrounding page
+          expect(radios.style.top).toEqual(`${inputForm.offsetHeight - PADDING_BETWEEN_STICKYS}px`);
+
+        });
+
+      });
+
+      describe("if window top is below the furthest point the highest element can go on load", () => {
+
+        let furthestTopPoint;
+
+        beforeEach(() => {
+
+          // ensure each sticky element is positioned correctly relative to the furthest point
+          const dialogHeight = (inputForm.offsetHeight + radios.offsetHeight) - PADDING_BETWEEN_STICKYS;
+
+          furthestTopPoint = getFurthestTopPoint(dialogHeight);
+
+          // scroll past top of first sticky element
+          screenMock.scrollTo(furthestTopPoint + 10);
+
+          window.GOVUK.stickAtTopWhenScrolling.init();
+
+        });
+
+        test("both should be stopped so the bottom of their stack is at the furthest point", () => {
+
+          expect(inputForm.style.position).toEqual('absolute');
+          expect(radios.style.position).toEqual('absolute');
+
+          expect(inputForm.style.top).toEqual(`${furthestTopPoint}px`);
+          expect(radios.style.top).toEqual(`${footer.offsetTop - PADDING_BEFORE_STOPPING_POINT - radios.offsetHeight}px`);
+
+        });
+
+      });
+
+      describe("if the group of sticky elements is taller than the window when stuck together", () => {
+
+        // the sticky behaviour should stick as many elements as possible to the top of the viewport
+        // the rest should be put back into their place in the document
+        beforeEach(() => {
+
+          const windowHeight = 460;
+
+          function makeStickysBiggerThanWindow () {
+
+            // make the radios too big to fit in the viewport
+            const fields = ['Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
+              .map(field => {
+                return {
+                  label: field,
+                  value: field.toLowerCase(),
+                  checked: false
+                }
+              });
+
+            radios.querySelector('fieldset').insertAdjacentHTML('beforeend', helpers.getRadios(fields));
+
+            radios.offsetHeight = 475;
+
+          };
+
+          function adjustScreenPositions () {
+
+            const radiosBottom = getScreenItemBottomPosition(radios);
+
+            screenMock.window.setHeightTo(windowHeight);
+
+            // formFooter top should be at the radios bottom
+            formFooter.offsetTop = radiosBottom;
+
+            // footer top should be at formFooter's bottom
+            footer.offsetTop = getScreenItemBottomPosition(formFooter);
+
+          };
+
+          makeStickysBiggerThanWindow();
+          adjustScreenPositions();
+
+          screenMock.scrollTo(inputForm.offsetTop + 10);
+
+          window.GOVUK.stickAtTopWhenScrolling.init()
+
+        });
+
+        test("the number of elements in the group that are stuck should be reduced until it fits into the viewport", () => {
+
+          // when the group is stuck, pageFooter is closest to the viewport edge so should stay sticky
+          expect(inputForm.classList.contains('content-fixed-onload')).toBe(true);
+          expect(inputForm.classList.contains('content-fixed')).toBe(false);
+
+          // radios are made not sticky
+          expect(radios.classList.contains('content-fixed-onload')).toBe(false);
+          expect(radios.classList.contains('content-fixed')).toBe(false);
+
+        });
+
+        test("window is scrolled so the sticky elements (stuck and not stuck) appear in sequence", () => {
+
+          // we assume it's useful to start by seeing all the elements in the position they normally sit in the page
+          expect(screenMock.window.top).toEqual(inputForm.offsetTop);
+
+        });
+
+      });
+
+    });
+
   });
 
   describe("If intending to stick to the bottom", () => {
@@ -212,7 +407,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
     let content;
     let pageFooter;
     let windowHeight;
-    let furthestBottomPoint;
+    let getFurthestBottomPoint;
 
     beforeEach(() => {
 
@@ -284,11 +479,10 @@ describe("Stick to top/bottom of window when scrolling", () => {
         offsetTop: content.offsetTop + content.offsetHeight
       });
 
-      furthestBottomPoint = () => {
-        const headingBottom = getScreenItemBottomPosition(headingItem);
+      getFurthestBottomPoint = (stickysTotalHeight) => {
+        const headingBottom = getScreenItemBottomPosition(heading);
 
-        // the element should stop so its top at the bottom of the heading, with a set amount of padding to separate them
-        return (headingBottom + pageFooterItem.height) + STOP_PADDING;
+        return headingBottom + PADDING_BEFORE_STOPPING_POINT + stickysTotalHeight;
       };
 
       // the sticky JS polls for changes to position/dimension so we need to fake setTimeout and setInterval
@@ -332,11 +526,12 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
       // change window size so its bottom can go past stopping position
       const windowHeight = 200;
+      const furthestBottomPoint = getFurthestBottomPoint(pageFooter.offsetHeight);
 
       screenMock.window.setHeightTo(windowHeight);
 
       // scroll the window bottom past the furthest point
-      screenMock.scrollTo((furthestBottomPoint() - windowHeight) - 10);
+      screenMock.scrollTo((furthestBottomPoint - windowHeight) - 10);
 
       window.GOVUK.stickAtBottomWhenScrolling.init();
 
@@ -346,7 +541,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
       // elements are stopped by adding inline styles
       expect(pageFooter.style.position).toEqual('absolute');
-      expect(pageFooter.style.top).toEqual(`${furthestBottomPoint() - pageFooter.offsetHeight}px`);
+      expect(pageFooter.style.top).toEqual(`${furthestBottomPoint - pageFooter.offsetHeight}px`);
 
     });
 
@@ -385,8 +580,10 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
       test("if window is scrolled so bottom of it is above the furthest point the bottom of the element can go in the scroll area, the element should be stopped", () => {
 
+        const furthestBottomPoint = getFurthestBottomPoint(pageFooter.offsetHeight);
+
         // scroll past top of content
-        screenMock.scrollTo((furthestBottomPoint() - windowHeight) - 10);
+        screenMock.scrollTo((furthestBottomPoint - windowHeight) - 10);
         jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
 
         // `content-fixed` fades the drop-shadow in to show it became sticky from user interaction
@@ -395,7 +592,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
         // elements are stopped by adding inline styles
         expect(pageFooter.style.position).toEqual('absolute');
-        expect(pageFooter.style.top).toEqual(`${furthestBottomPoint() pageFooter.offsetHeight}px`);
+        expect(pageFooter.style.top).toEqual(`${furthestBottomPoint - pageFooter.offsetHeight}px`);
 
       });
 
@@ -428,6 +625,199 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
     });
 
+    describe("if mode is set to 'dialog' and multiple sticky elements have the same scroll area", () => {
+
+      let radios;
+
+      beforeEach(() => {
+
+        const contentBottom = getScreenItemBottomPosition(content);
+
+        // set mode to 'dialog' so sticky elements are treated as one item
+        window.GOVUK.stickAtBottomWhenScrolling.setMode('dialog')
+
+        // add another sticky element before the form footer
+        radios = helpers.getRadioGroup({
+          cssClasses: ['js-stick-at-bottom-when-scrolling'],
+          name: 'send-time',
+          label: 'Send time',
+          fields: [
+            {
+              label: 'Now',
+              value: 'now',
+              checked: true
+            },
+            {
+              label: 'Tomorrow',
+              value: 'tomorrow',
+              checked: false
+            },
+            {
+              label: 'Friday',
+              value: 'friday',
+              checked: false
+            }
+          ]
+        });
+
+        pageFooter.parentNode.insertBefore(radios, pageFooter);
+        screenMock.mockPositionAndDimension('radios', radios, {
+          offsetHeight: 175,
+          offsetWidth: 727,
+          offsetTop: contentBottom
+        });
+        const radiosBottom = getScreenItemBottomPosition(radios);
+
+        // adjust other screen items
+
+        // pageFooter top should be at the radios bottom
+        pageFooter.offsetTop = radiosBottom;
+
+      });
+
+      describe("if window bottom is above the bottom of the lowest element on load", () => {
+
+        let pageFooterBottom;
+
+        beforeEach(() => {
+
+          pageFooterBottom = getScreenItemBottomPosition(pageFooter);
+
+          // scroll to just above the element
+          screenMock.scrollTo((pageFooterBottom - windowHeight) - 10);
+
+          window.GOVUK.stickAtBottomWhenScrolling.init();
+
+        });
+
+        test("both should be marked as already sticky", () => {
+
+          expect(pageFooter.classList.contains('content-fixed-onload')).toBe(true);
+          expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+
+        });
+
+        test("the highest element should have the drop-shadow", () => {
+
+          expect(radios.classList.contains('content-fixed__bottom')).toBe(true);
+
+        });
+
+        test("they should be stacked from the bottom edge of the viewport in the order they appear in the document", () => {
+
+          expect(radios.style.bottom).toEqual(`${pageFooter.offsetHeight - PADDING_BETWEEN_STICKYS}px`);
+
+        });
+
+      });
+
+      describe("if window bottom is above the furthest point the lowest element can go on load", () => {
+
+        let headingBottom;
+
+        beforeEach(() => {
+
+          const dialogHeight = (pageFooter.offsetHeight + radios.offsetHeight) - PADDING_BETWEEN_STICKYS;
+          const furthestBottomPoint = getFurthestBottomPoint(dialogHeight);
+
+          // change window size so its bottom can go past stopping position
+          const windowHeight = 200;
+
+          headingBottom = getScreenItemBottomPosition(heading);
+
+          screenMock.window.setHeightTo(windowHeight);
+
+          screenMock.scrollTo((furthestBottomPoint - windowHeight) - 10)
+
+          window.GOVUK.stickAtBottomWhenScrolling.init();
+
+        });
+
+        test("both should be stopped so the top of their stack is at the furthest point", () => {
+
+          expect(radios.style.position).toEqual('absolute');
+          expect(pageFooter.style.position).toEqual('absolute');
+          expect(radios.style.top).toEqual(`${headingBottom + PADDING_BEFORE_STOPPING_POINT}px`);
+          expect(pageFooter.style.top).toEqual(`${headingBottom + PADDING_BEFORE_STOPPING_POINT + (radios.offsetHeight - PADDING_BETWEEN_STICKYS)}px`);
+
+        });
+
+      });
+
+      describe("if the group of sticky elements is taller than the window when stuck together", () => {
+
+        let windowHeight;
+        let pageFooterBottom;
+
+        // the sticky behaviour should stick as many elements as possible to the bottom of the viewport
+        // the rest should be put back into their place in the document
+        beforeEach(() => {
+
+          windowHeight = 460;
+
+          function makeStickysBiggerThanWindow () {
+
+            // make the radios too big to fit in the viewport
+            const fields = ['Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
+              .map(field => {
+                return {
+                  label: field,
+                  value: field.toLowerCase(),
+                  checked: false
+                }
+              });
+
+            radios.querySelector('fieldset').insertAdjacentHTML('beforeend', helpers.getRadios(fields));
+
+            radios.offsetHeight = 475;
+
+          };
+
+          function adjustScreenPositions () {
+
+            const radiosBottom = getScreenItemBottomPosition(radios);
+
+            screenMock.window.setHeightTo(windowHeight);
+
+            // formFooter top should be at the radios bottom
+            pageFooter.offsetTop = radiosBottom;
+
+          };
+
+          makeStickysBiggerThanWindow();
+          adjustScreenPositions();
+
+          pageFooterBottom = getScreenItemBottomPosition(pageFooter);
+
+          screenMock.scrollTo((pageFooterBottom - windowHeight) - 10);
+
+          window.GOVUK.stickAtBottomWhenScrolling.init()
+
+        });
+
+        test("the number of elements in the group that are stuck should be reduced until it fits into the viewport", () => {
+
+          // when the group is stuck, pageFooter is closest to the viewport edge so should stay sticky
+          expect(pageFooter.classList.contains('content-fixed-onload')).toBe(true);
+          expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+
+          // radios are made not sticky
+          expect(radios.classList.contains('content-fixed-onload')).toBe(false);
+          expect(radios.classList.contains('content-fixed')).toBe(false);
+
+        });
+
+        test("window is scrolled so the sticky elements (stuck and not stuck) appear in sequence", () => {
+
+          // we assume it's useful to start by seeing all the elements in the position they normally sit in the page
+          expect(screenMock.window.top).toEqual(pageFooterBottom - windowHeight);
+
+        });
+
+      });
+
+    });
+
   });
 
 });
diff --git a/tests/javascripts/support/helpers.js b/tests/javascripts/support/helpers.js
index ed43d21a2..5d3df2c22 100644
--- a/tests/javascripts/support/helpers.js
+++ b/tests/javascripts/support/helpers.js
@@ -86,6 +86,39 @@ const triggerEvent = (el, evtType, options) => {
   el.dispatchEvent(evt);
 };
 
+function getRadios (fields) {
+  const result = '';
+
+  return fields.map((field, idx) => {
+    const count = idx + 1;
+
+    return `
+      <div class="multiple-choice">
+        <input id="choose-${field.name}-1" name="choose-${field.name}-1" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
+        <label class="block-label" for="choose-${field.name}-1">
+          ${field.label}
+        </label>
+      </div>`;
+  }).join("\n");
+};
+
+function getRadioGroup (data) {
+  let radioGroup = document.createElement('div');
+
+  data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
+  radioGroup.innerHTML = `
+    <div class="form-group ">
+      <fieldset id="choose-${data.name}">
+        <legend class="form-label">
+           Choose ${data.label}
+        </legend>
+        ${getRadios(data.fields)}
+      </fieldset>
+    </div>`;
+
+    return radioGroup;
+};
+
 function clickElementWithMouse (el) {
   triggerEvent(el, 'mousedown');
   triggerEvent(el, 'mouseup');
@@ -483,6 +516,8 @@ exports.moveSelectionToRadio = moveSelectionToRadio;
 exports.activateRadioWithSpace = activateRadioWithSpace;
 exports.RangeMock = RangeMock;
 exports.SelectionMock = SelectionMock;
+exports.getRadioGroup = getRadioGroup;
+exports.getRadios = getRadios;
 exports.element = element;
 exports.WindowMock = WindowMock;
 exports.ScreenMock = ScreenMock;

From 381e745ec8334aaf69f5fad48e3ad50a5fc24158 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 24 Jul 2019 17:47:43 +0100
Subject: [PATCH 06/11] Make helper plug gap in JSDOM's DOM API

Errors fired from JSDOM showed it doesn't support
`window.scrollTo` (or `window.scroll` for that
matter).

This stubs it, to the extent that our use (jQuery
really) of it works.
---
 tests/javascripts/support/helpers.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/tests/javascripts/support/helpers.js b/tests/javascripts/support/helpers.js
index 5d3df2c22..9e859e44a 100644
--- a/tests/javascripts/support/helpers.js
+++ b/tests/javascripts/support/helpers.js
@@ -228,6 +228,7 @@ class WindowMock {
     };
     this._jest = jest;
     this._setSpies();
+    this._plugJSDOM();
   }
 
   get top () {
@@ -260,6 +261,27 @@ class WindowMock {
 
   }
 
+  _plugJSDOM () {
+
+    const self = this;
+
+    // JSDOM doesn't support .scrollTo
+    window.scrollTo = function () {
+      let y;
+
+      // data sent as props in an object
+      if (arguments.length === 1) {
+        y = arguments[0].y;
+      } else {
+        y = arguments[1];
+      }
+
+      self.scrollTo(y);
+
+    };
+
+  }
+
   setHeightTo (height) {
 
     window.innerHeight = height;

From ab6e81a8a67e243730f01aaea7f4bde042cb0320 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 25 Jul 2019 14:02:33 +0100
Subject: [PATCH 07/11] 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.
---
 .../stick-to-window-when-scrolling.test.js    | 63 +++++++++++++++----
 1 file changed, 51 insertions(+), 12 deletions(-)

diff --git a/tests/javascripts/stick-to-window-when-scrolling.test.js b/tests/javascripts/stick-to-window-when-scrolling.test.js
index 05da2a1b4..3fb8ff1bb 100644
--- a/tests/javascripts/stick-to-window-when-scrolling.test.js
+++ b/tests/javascripts/stick-to-window-when-scrolling.test.js
@@ -109,16 +109,36 @@ 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", () => {
 
-      // scroll past the top of the form
-      screenMock.scrollTo(inputForm.offsetTop + 10);
+      beforeEach(() => {
 
-      window.GOVUK.stickAtTopWhenScrolling.init();
+        // scroll past the top of the form
+        screenMock.scrollTo(inputForm.offsetTop + 10);
 
-      // `.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);
+        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
+
+      });
 
     });
 
@@ -511,14 +531,33 @@ 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", () => {
 
-      // scroll position defaults to 0 so bottom of window starts at 940px. Element bottom defaults to 1160px.
+      beforeEach(() => {
 
-      window.GOVUK.stickAtBottomWhenScrolling.init();
+        // scroll position defaults to 0 so bottom of window starts at 940px. Element bottom defaults to 1160px.
+        window.GOVUK.stickAtBottomWhenScrolling.init();
 
-      expect(pageFooter.classList.contains('content-fixed-onload')).toBe(true);
-      expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+      });
+
+      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
+
+      });
 
     });
 

From fac116b835551e93ec6ebb15c9a25db3e0e50412 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 29 Jul 2019 09:18:49 +0100
Subject: [PATCH 08/11] Add tests for handling overlap of activeElement

If an element receives focus when underneath a
stick element, the window should scroll so the
focused element is revealed.

Includes some changes to the WindowMock API to
allow access to data from Jest spies.
---
 .../stick-to-window-when-scrolling.test.js    | 135 ++++++++++++++++++
 tests/javascripts/support/helpers.js          |   9 +-
 2 files changed, 141 insertions(+), 3 deletions(-)

diff --git a/tests/javascripts/stick-to-window-when-scrolling.test.js b/tests/javascripts/stick-to-window-when-scrolling.test.js
index 3fb8ff1bb..6df9a3817 100644
--- a/tests/javascripts/stick-to-window-when-scrolling.test.js
+++ b/tests/javascripts/stick-to-window-when-scrolling.test.js
@@ -6,6 +6,29 @@ function getScreenItemBottomPosition (screenItem) {
   return screenItem.offsetTop + screenItem.offsetHeight;
 };
 
+function getStickyGroupPosition (screenMock, opts) {
+
+  const edgePosition = screenMock.window[opts.edge];
+  const height = opts.stickyEls
+                  .map(el => el.offsetHeight)
+                  .reduce((accumulator, height) => accumulator + height);
+
+  if (opts.edge === 'top') {
+    return {
+      top: screenMock.window.top,
+      bottom: edgePosition + height,
+      height: height
+    };
+  } else {
+    return {
+      top: edgePosition - height,
+      bottom: screenMock.window.bottom,
+      height: height
+    }
+  }
+
+};
+
 beforeAll(() => {
   require('../../app/assets/javascripts/stick-to-window-when-scrolling.js');
 });
@@ -227,6 +250,62 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
     });
 
+    describe("if element is made sticky and another element underneath it is focused", () => {
+
+      let checkbox;
+      let checkboxBottom;
+
+      beforeEach(() => {
+
+        const inputFormBottom = getScreenItemBottomPosition(inputForm);
+
+        inputForm.insertAdjacentHTML('afterEnd', '<input type="checkbox" name="confirm" value="yes" />');
+        checkbox = document.querySelector('input[type=checkbox]');
+
+        screenMock.mockPositionAndDimension('checkbox', checkbox, {
+          offsetHeight: 50, // 118px smaller than the sticky
+          offsetWidth: 727,
+          offsetTop: inputFormBottom
+        });
+
+        checkboxBottom = getScreenItemBottomPosition(checkbox);
+
+        // move the sticky over the checkbox. It's 168px high so this position will cause it to overlap.
+        screenMock.scrollTo(checkbox.offsetTop - 10);
+
+        window.GOVUK.stickAtTopWhenScrolling.init();
+
+      });
+
+      afterEach(() => {
+
+        screenMock.window.spies.window.scrollTo.mockClear();
+
+      });
+
+      test("the window should scroll so the focused element is revealed", () => {
+
+        // update inputForm position as DOM normally would
+        inputForm.offsetTop = screenMock.window.top;
+
+        let stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [inputForm], edge: 'top' });
+
+        // sticky position should overlap checkbox position
+        expect(stickyPosition.top).toBeLessThanOrEqual(checkbox.offsetTop);
+        expect(stickyPosition.bottom).toBeGreaterThanOrEqual(checkboxBottom);
+
+        // the sticky element (page footer) is 50 high so should cover the last of the radios if the bottom edge of the viewport is at its bottom
+        checkbox.focus();
+
+        stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [inputForm], edge: 'top' });
+
+        // the bottom of the sticky element should be at the top of the checkbox
+        expect(screenMock.window.spies.window.scrollTo.mock.calls[0]).toEqual([0, checkbox.offsetTop - stickyPosition.height]);
+
+      });
+
+    });
+
     describe("if mode is set to 'dialog' and multiple sticky elements share the same scroll area", () => {
 
       let radios;
@@ -664,6 +743,62 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
     });
 
+    describe("if element is made sticky and another element underneath it is focused", () => {
+
+      let checkbox;
+      let checkboxBottom;
+
+      beforeEach(() => {
+
+        const contentBottom = getScreenItemBottomPosition(content);
+
+        content.insertAdjacentHTML('afterEnd', '<input type="checkbox" name="confirm" value="yes" />');
+        checkbox = document.querySelector('input[type=checkbox]');
+
+        screenMock.mockPositionAndDimension('checkbox', checkbox, {
+          offsetHeight: 40, // 10px smaller than the sticky
+          offsetWidth: 727,
+          offsetTop: contentBottom
+        });
+
+        checkboxBottom = getScreenItemBottomPosition(checkbox);
+
+        // move the sticky over the checkbox. It's 50px high so this position will cause it to overlap.
+        screenMock.scrollTo((checkboxBottom - windowHeight) + 5);
+
+        window.GOVUK.stickAtBottomWhenScrolling.init();
+
+      });
+
+      afterEach(() => {
+
+        screenMock.window.spies.window.scrollTo.mockClear();
+
+      });
+
+      test("the window should scroll so the focused element is revealed", () => {
+
+        // update inputForm position as DOM normally would
+        pageFooter.offsetTop = screenMock.window.bottom - pageFooter.offsetHeight;
+
+        let stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [pageFooter], edge: 'bottom' });
+
+        // sticky position should overlap checkbox position
+        expect(stickyPosition.top).toBeLessThanOrEqual(checkbox.offsetTop);
+        expect(stickyPosition.bottom).toBeGreaterThanOrEqual(checkboxBottom);
+
+        // the sticky element (page footer) is 50 high so should cover the last of the radios if the bottom edge of the viewport is at its bottom
+        checkbox.focus();
+
+        stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [pageFooter], edge: 'bottom' });
+
+        // the top of the sticky element should be at the bottom of the checkbox
+        expect(screenMock.window.spies.window.scrollTo.mock.calls[0]).toEqual([0, (checkboxBottom + pageFooter.offsetHeight) - windowHeight]);
+
+      });
+
+    });
+
     describe("if mode is set to 'dialog' and multiple sticky elements have the same scroll area", () => {
 
       let radios;
diff --git a/tests/javascripts/support/helpers.js b/tests/javascripts/support/helpers.js
index 9e859e44a..5c1408fff 100644
--- a/tests/javascripts/support/helpers.js
+++ b/tests/javascripts/support/helpers.js
@@ -224,7 +224,8 @@ class WindowMock {
       width: window.innerWidth
     };
     this.spies = {
-      document: {}
+      document: {},
+      window: {}
     };
     this._jest = jest;
     this._setSpies();
@@ -266,7 +267,7 @@ class WindowMock {
     const self = this;
 
     // JSDOM doesn't support .scrollTo
-    window.scrollTo = function () {
+    this.spies.window.scrollTo = this._jest.fn(function () {
       let y;
 
       // data sent as props in an object
@@ -278,7 +279,9 @@ class WindowMock {
 
       self.scrollTo(y);
 
-    };
+    });
+
+     window.scrollTo = this.spies.window.scrollTo;
 
   }
 

From 6871dbcffeba4407dc9f8647a6063c045690fbea Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 29 Jul 2019 16:12:38 +0100
Subject: [PATCH 09/11] Add tests for when caret is underneath sticky

If focus moves to a textarea, we care more about
the caret being overlapped than the textarea.

This adds tests for the caret being overlapped on
load and as a result of it moving underneath the
sticky element from a keyboard event.
---
 .../stick-to-window-when-scrolling.test.js    | 241 ++++++++++++++++++
 1 file changed, 241 insertions(+)

diff --git a/tests/javascripts/stick-to-window-when-scrolling.test.js b/tests/javascripts/stick-to-window-when-scrolling.test.js
index 6df9a3817..b7d80b5b9 100644
--- a/tests/javascripts/stick-to-window-when-scrolling.test.js
+++ b/tests/javascripts/stick-to-window-when-scrolling.test.js
@@ -6,6 +6,16 @@ function getScreenItemBottomPosition (screenItem) {
   return screenItem.offsetTop + screenItem.offsetHeight;
 };
 
+function getCaretPosition (caretPosition, textarea) {
+
+  return {
+    top: textarea.offsetTop + caretPosition.top,
+    bottom: textarea.offsetTop + caretPosition.top + caretPosition.height,
+    height: caretPosition.height
+  };
+
+};
+
 function getStickyGroupPosition (screenMock, opts) {
 
   const edgePosition = screenMock.window[opts.edge];
@@ -29,6 +39,21 @@ function getStickyGroupPosition (screenMock, opts) {
 
 };
 
+class CaretCoordinates {
+  constructor (data) {
+    this.top = 5.5;
+    this.left = 2;
+    this.height = 19;
+  }
+
+  moveToLine (lineNumber) {
+    const lineHeight = 30;
+    const verticalPadding = 5.5;
+
+    this.top = ((lineNumber - 1) * lineHeight) + verticalPadding;
+  }
+}
+
 beforeAll(() => {
   require('../../app/assets/javascripts/stick-to-window-when-scrolling.js');
 });
@@ -306,6 +331,116 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
     });
 
+    describe("if element is made sticky and overlaps a textarea", () => {
+
+      let textarea;
+      let textareaBottom;
+      let caretCoordinates;
+      let caretCoordinatesMock;
+
+      beforeEach(() => {
+
+        const inputFormBottom = getScreenItemBottomPosition(inputForm);
+
+        inputForm.insertAdjacentHTML('afterEnd', '<textarea name="notes"></textarea>');
+        textarea = document.querySelector('textarea');
+
+        // line height: 30px, text height: 19px, lines: 10
+        screenMock.mockPositionAndDimension('textarea', textarea, {
+          offsetHeight: 300,
+          offsetWidth: 727,
+          offsetTop: inputFormBottom
+        });
+
+        textareaBottom = getScreenItemBottomPosition(textarea);
+
+        // mock calls for caret position, relative to textarea
+        caretCoordinatesMock = jest.fn(() => caretCoordinates);
+        window.getCaretCoordinates = caretCoordinatesMock;
+
+        // start caret on first line
+        caretCoordinates = new CaretCoordinates();
+
+        // move the sticky so it overlaps the top 168px of the textarea.
+        screenMock.scrollTo(textarea.offsetTop);
+
+        // update inputForm position as DOM normally would
+        inputForm.offsetTop = screenMock.window.top;
+
+        window.GOVUK.stickAtTopWhenScrolling.init();
+
+      });
+
+      afterEach(() => {
+
+        screenMock.window.spies.window.scrollTo.mockClear();
+        caretCoordinatesMock.mockClear();
+
+      });
+
+      test("if the textarea receives focus while its caret is underneath, the window should scroll to reveal the caret", () => {
+
+        // caret is on first line
+        const stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [inputForm], edge: 'top' });
+        const caretPosition = getCaretPosition(caretCoordinates, textarea);
+
+        // sticky position should overlap caret position
+        expect(stickyPosition.top).toBeLessThanOrEqual(caretPosition.top);
+        expect(stickyPosition.bottom).toBeGreaterThanOrEqual(caretPosition.bottom);
+
+        // the sticky element (page footer) is 50 high so should cover the last of the radios if the bottom edge of the viewport is at its bottom
+        textarea.focus();
+
+        // the bottom of the sticky element should be at the top of the checkbox
+        expect(screenMock.window.spies.window.scrollTo.mock.calls[0]).toEqual([0, caretPosition.top - stickyPosition.height]);
+
+      });
+
+      test("if the caret is moved so it isn't underneath the sticky element, the window shouldn't scroll", () => {
+
+        // start caret on 7th line which isn't under the sticky element.
+        caretCoordinates.moveToLine(7);
+
+        const stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [inputForm], edge: 'top' });
+        const caretPosition = getCaretPosition(caretCoordinates, textarea);
+
+        // the sticky element should be above the caret
+        expect(stickyPosition.bottom).toBeLessThan(caretPosition.top);
+
+        textarea.focus();
+
+        // no scrolling should have happened
+        expect(screenMock.window.spies.window.scrollTo.mock.calls.length).toEqual(0);
+
+      });
+
+      test("if the caret is moved to be underneath the sticky element, the window should scroll to reveal the caret", () => {
+
+        // start caret on 7th line which isn't under the sticky element.
+        caretCoordinates.moveToLine(7);
+
+        // make sure the textarea has focus
+        textarea.focus();
+
+        // line 6 is under the sticky element
+        caretCoordinates.moveToLine(6);
+
+        const stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [inputForm], edge: 'top' });
+        const caretPosition = getCaretPosition(caretCoordinates, textarea);
+
+        // sticky should now overlap the caret
+        expect(stickyPosition.bottom).toBeGreaterThanOrEqual(caretPosition.top);
+
+        // the sticky element (page footer) is 50 high so should cover the last of the radios if the bottom edge of the viewport is at its bottom
+        helpers.triggerEvent(textarea, 'keyup', { interface: window.KeyboardEvent });
+
+        // the bottom of the sticky element should be at the top of the checkbox
+        expect(screenMock.window.spies.window.scrollTo.mock.calls[0]).toEqual([0, caretPosition.top - stickyPosition.height]);
+
+      });
+
+    });
+
     describe("if mode is set to 'dialog' and multiple sticky elements share the same scroll area", () => {
 
       let radios;
@@ -799,6 +934,112 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
     });
 
+    describe("if element is made sticky and overlaps a textarea", () => {
+
+      let textarea;
+      let textareaBottom;
+      let caretCoordinates;
+      let caretCoordinatesMock;
+
+      beforeEach(() => {
+
+        const contentBottom = getScreenItemBottomPosition(content);
+
+        content.insertAdjacentHTML('afterEnd', '<textarea name="notes"></textarea>');
+        textarea = document.querySelector('textarea');
+
+        // line height: 30px, text height: 19px, 10 lines.
+        screenMock.mockPositionAndDimension('textarea', textarea, {
+          offsetHeight: 300,
+          offsetWidth: 727,
+          offsetTop: contentBottom
+        });
+
+        textareaBottom = getScreenItemBottomPosition(textarea);
+
+        // start caret on the last line
+        caretCoordinates = new CaretCoordinates();
+        caretCoordinates.moveToLine(10);
+        caretCoordinatesMock = jest.fn(() => caretCoordinates);
+        window.getCaretCoordinates = caretCoordinatesMock;
+
+        // move the sticky so it overlaps the bottom 50px of the textarea.
+        screenMock.scrollTo(textareaBottom - windowHeight);
+
+        // update content position as DOM normally would
+        pageFooter.offsetTop = screenMock.window.bottom - pageFooter.offsetHeight;
+
+        window.GOVUK.stickAtBottomWhenScrolling.init();
+
+      });
+
+      afterEach(() => {
+
+        screenMock.window.spies.window.scrollTo.mockClear();
+        caretCoordinatesMock.mockClear();
+
+      });
+
+      test("if the textarea receives focus while its caret is underneath, the window should scroll to reveal the caret", () => {
+
+        const stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [pageFooter], edge: 'bottom' });
+        const caretPosition = getCaretPosition(caretCoordinates, textarea);
+
+        // sticky position should overlap caret position
+        expect(stickyPosition.top).toBeLessThan(caretPosition.bottom);
+
+        textarea.focus();
+
+        // the top of the sticky element should be at the bottom of the caret
+        expect(screenMock.window.spies.window.scrollTo.mock.calls[0]).toEqual([0, caretPosition.bottom - (windowHeight - stickyPosition.height)]);
+
+      });
+
+      test("if the caret is moved so it isn't underneath the sticky element, the window shouldn't scroll", () => {
+
+        // start caret on 8th line which isn't under the sticky element.
+        caretCoordinates.moveToLine(8);
+
+        const stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [pageFooter], edge: 'bottom' });
+        const caretPosition = getCaretPosition(caretCoordinates, textarea);
+
+        // the sticky element should be below the caret
+        expect(stickyPosition.top).toBeGreaterThan(caretPosition.bottom);
+
+        textarea.focus();
+
+        // no scrolling should have happened
+        expect(screenMock.window.spies.window.scrollTo.mock.calls.length).toEqual(0);
+
+      });
+
+      test("if the caret is moved to be underneath the sticky element, the window should scroll to reveal the caret", () => {
+
+        // start caret on 8th line which isn't under the sticky element.
+        caretCoordinates.moveToLine(8);
+
+        // make sure the textarea has focus
+        textarea.focus();
+
+        // move the caret underneath the sticky element
+        caretCoordinates.moveToLine(9);
+
+        const stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [pageFooter], edge: 'bottom' });
+        const caretPosition = getCaretPosition(caretCoordinates, textarea);
+
+        // sticky position should overlap caret position
+        expect(stickyPosition.top).toBeLessThan(caretPosition.bottom);
+
+        // simulate a press of the down arrow
+        helpers.triggerEvent(textarea, 'keyup', { interface: window.KeyboardEvent });
+
+        // the top of the sticky element should be at the bottom of the caret
+        expect(screenMock.window.spies.window.scrollTo.mock.calls[0]).toEqual([0, caretPosition.bottom - (windowHeight - stickyPosition.height)]);
+
+      });
+
+    });
+
     describe("if mode is set to 'dialog' and multiple sticky elements have the same scroll area", () => {
 
       let radios;

From fbc68b7bf283afb58691c8a6dab219fd7d894173 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 30 Jul 2019 16:21:29 +0100
Subject: [PATCH 10/11] Add tests for viewports < 769px wide

Elements should not stick unless the viewport is
768px wide or larger.
---
 .../stick-to-window-when-scrolling.test.js    | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/tests/javascripts/stick-to-window-when-scrolling.test.js b/tests/javascripts/stick-to-window-when-scrolling.test.js
index b7d80b5b9..ce2a8ffb0 100644
--- a/tests/javascripts/stick-to-window-when-scrolling.test.js
+++ b/tests/javascripts/stick-to-window-when-scrolling.test.js
@@ -157,6 +157,23 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
     });
 
+    test("if the window is 768px or less wide and the top of the viewport is below top of element on load, the element should not be marked as sticky", () => {
+
+      screenMock.window.resizeTo({
+        height: windowHeight,
+        width: 768
+      });
+
+      // scroll past top of form
+      screenMock.scrollTo(inputForm.offsetTop + 10);
+
+      window.GOVUK.stickAtTopWhenScrolling.init();
+
+      expect(inputForm.classList.contains('content-fixed')).toBe(false);
+      expect(inputForm.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+    });
+
     describe("if top of viewport is below top of element but still in the scroll area on load", () => {
 
       beforeEach(() => {
@@ -745,6 +762,25 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
     });
 
+    test("if the window is 768px or less wide and the bottom of the viewport is above bottom of element on load, the element should not be marked as sticky", () => {
+
+      const pageFooterBottom = getScreenItemBottomPosition(pageFooter);
+
+      screenMock.window.resizeTo({
+        height: windowHeight,
+        width: 768
+      });
+
+      // scroll past top of form
+      screenMock.scrollTo(pageFooterBottom - 10);
+
+      window.GOVUK.stickAtTopWhenScrolling.init();
+
+      expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+      expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+    });
+
     describe("if bottom of viewport is above bottom of element on load", () => {
 
       beforeEach(() => {

From 78d6419f80a9eb570c79ce17252da21926a800a6 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 2 Aug 2019 14:03:03 +0100
Subject: [PATCH 11/11] Add tests for window resizing

---
 .../stick-to-window-when-scrolling.test.js    | 68 ++++++++++++++++++-
 1 file changed, 65 insertions(+), 3 deletions(-)

diff --git a/tests/javascripts/stick-to-window-when-scrolling.test.js b/tests/javascripts/stick-to-window-when-scrolling.test.js
index ce2a8ffb0..fec68663f 100644
--- a/tests/javascripts/stick-to-window-when-scrolling.test.js
+++ b/tests/javascripts/stick-to-window-when-scrolling.test.js
@@ -510,6 +510,12 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
       });
 
+      afterEach(() => {
+
+        window.GOVUK.stickAtTopWhenScrolling.setMode('default');
+
+      });
+
       describe("if window top is below the top of the highest element on load", () => {
 
         beforeEach(() => {
@@ -850,7 +856,6 @@ describe("Stick to top/bottom of window when scrolling", () => {
         // scroll to just below the element
         screenMock.scrollTo((pageFooterBottom - windowHeight) + 10);
 
-        // default scroll position is above top of form
         window.GOVUK.stickAtBottomWhenScrolling.init();
 
       });
@@ -871,7 +876,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
         const furthestBottomPoint = getFurthestBottomPoint(pageFooter.offsetHeight);
 
-        // scroll past top of content
+        // scroll past furthest point
         screenMock.scrollTo((furthestBottomPoint - windowHeight) - 10);
         jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
 
@@ -885,20 +890,43 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
       });
 
+      test("if window resizes so bottom is above the bottom of the element, the element should be marked so it becomes sticky to the user", () => {
+
+        // resize window so the bottom is 30px above the bottom of the element
+        screenMock.window.resizeTo({ height: 560, width: screenMock.window.width });
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a resize
+
+        // `content-fixed` fades the drop-shadow in to show it became sticky from user interaction
+        expect(pageFooter.classList.contains('content-fixed')).toBe(true);
+        expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+      });
+
     });
 
     describe("if viewport bottom starts above element bottom", () => {
 
       let pageFooterBottom;
+      let pageFooterShim;
 
       beforeEach(() => {
 
         // scroll position defaults to 0 so bottom of window starts at 940px. Element bottom defaults to 1160px so will be sticky on load.
-
         pageFooterBottom = getScreenItemBottomPosition(pageFooter);
 
+        // shim will be inserted, inheriting space in the page from pageFooter so store this data
+        const pageFooterData = {
+          offsetHeight: pageFooter.offsetHeight,
+          offsetWidth: pageFooter.offsetWidth,
+          offsetTop: pageFooter.offsetTop
+        };
+
         window.GOVUK.stickAtBottomWhenScrolling.init();
 
+        // add mock for shim
+        pageFooterShim = document.querySelector('.shim');
+        screenMock.mockPositionAndDimension('pageFooterShim', pageFooterShim, pageFooterData);
+
       });
 
       test("if window is scrolled so bottom of it is below the bottom of the element, the element should be made not sticky", () => {
@@ -912,6 +940,34 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
       });
 
+      test("if window resizes so bottom is below the bottom of the element, the element should be made not sticky", () => {
+
+        // resize window so the bottom is 30px above the bottom of the element
+        screenMock.window.resizeTo({ height: pageFooterBottom + 10, width: screenMock.window.width });
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a resize
+
+        expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+        expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false);
+
+      });
+
+      test("if window resizes so bottom is above the furthest point the bottom of the element can go in the scroll area, the element should be stopped", () => {
+
+        const furthestBottomPoint = getFurthestBottomPoint(pageFooter.offsetHeight);
+
+        // resize window so the bottom is above the furthest point
+        screenMock.window.resizeTo({ height: furthestBottomPoint - 10, width: screenMock.window.width });
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a resize
+
+        expect(pageFooter.classList.contains('content-fixed')).toBe(false); // applied if made sticky after page load
+        expect(pageFooter.classList.contains('content-fixed-onload')).toBe(true); // check the class for onload isn't applied
+
+        // elements are stopped by adding inline styles
+        expect(pageFooter.style.position).toEqual('absolute');
+        expect(pageFooter.style.top).toEqual(`${furthestBottomPoint - pageFooter.offsetHeight}px`);
+
+      });
+
     });
 
     describe("if element is made sticky and another element underneath it is focused", () => {
@@ -1126,6 +1182,12 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
       });
 
+      afterEach(() => {
+
+        window.GOVUK.stickAtBottomWhenScrolling.setMode('default');
+
+      });
+
       describe("if window bottom is above the bottom of the lowest element on load", () => {
 
         let pageFooterBottom;