Add a spec to check that:

- it has no highlighted nav items, when the page loads
- it highlights a nav item, when the page is scrolled

Mock the values for scroll position and heading position, and also
footer position to ensure the last item is highlighted.

For isPastHeading to be true, the scroll position must be greater than
the first heading position
180 > 100
and
the scroll position must be less than the first heading height (100 +
distance between headings 100) = 200
This is less than 180, so we would expect the first heading to be
active.

spec/javascripts/highlight-active-section-heading-spec.js

@@ -0,0 +1,101 @@
+/* eslint-env jasmine */
+/* eslint-disable no-multi-str */
+
+describe('A highlight active section heading module', function () {
+  'use strict'
+
+  var module
+
+  beforeEach(function () {
+    module = new GOVUK.Modules.HighlightActiveSectionHeading()
+  })
+
+  afterEach(function () {
+    $(document).off()
+  })
+
+  describe('', function () {
+    var $element = $('<div class="grid-row" data-module="highlight-active-section-heading">\
+      <div class="column-third">\
+        <div class="page-contents js-page-contents js-stick-at-top-when-scrolling">\
+          <h2 class="page-contents__title">Page contents:</h2>\
+          <ul class="page-contents__list">\
+            <li><a href="#section-1">Section 1</a></li>\
+            <li><a href="#section-2">Section 2</a></li>\
+            <li><a href="#section-3">Section 3</a></li>\
+          </ul>\
+        </div>\
+      </div>\
+      <div class="column-two-thirds">\
+        <div class="govspeak-wrapper">\
+          <div class="govuk-govspeak">\
+            <h2 id="section-1">Section 1</h2>\
+            <p>Section 1 text</p>\
+            <h2 id="section-2">Section 2</h2>\
+            <p>Section 2 text</p>\
+            <h2 id="section-3">Section 3</h2>\
+            <p>Section 3 text</p>\
+          </div>\
+        </div>\
+      </div>\
+    </div>')
+
+    // Setup window dimensions, mock positions for the first and second headings
+    function setWindowPosition (position) {
+      module.getWindowDimensions = function () {
+        return {
+          height: 768,
+          width: 1024
+        }
+      }
+      module.getFooterPosition = function () {
+        return {
+          top: 500
+        }
+      }
+      module.getHeadingPosition = function () {
+        return {
+          top: 100
+        }
+      }
+      module.getNextHeadingPosition = function () {
+        return {
+          top: 200
+        }
+      }
+      module.getWindowPositions = function () {
+        return {
+          scrollTop: position
+        }
+      }
+    }
+
+    // The anchor link with the href matching testHref should be highlighted
+    function isLinkHighlighted (testHref) {
+      var $anchor = $element.find('.js-page-contents a[href="' + testHref + '"]')
+      expect($anchor.hasClass('active')).toBe(true)
+    }
+
+    describe('On desktop', function () {
+
+      it('has no highlighted nav items, when the page loads', function () {
+        setWindowPosition(0)
+
+        module.start($element)
+
+        var $anchors = $element.find('.js-page-contents a')
+        expect($anchors.hasClass('active')).toBe(false)
+      })
+
+      it('highlights a nav item, when the page is scrolled', function () {
+        setWindowPosition(180)
+
+        module.start($element)
+
+        isLinkHighlighted('#section-1')
+      })
+
+    })
+
+  })
+})