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
- it highlights a nav item, when the setActiveItem function is passed a
href

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

@@ -0,0 +1,92 @@
+/* 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>')
+
+    describe('On desktop', function () {
+      beforeEach(function () {
+        module.getWindowDimensions = function () {
+          return {
+            height: 768,
+            width: 1024
+          }
+        }
+        module.getHeadingPosition = function (theID) {
+          return {
+            top: 200
+          }
+        }
+        module.getNextHeadingPosition = function (theNextID) {
+          return {
+            top: 400
+          }
+        }
+      })
+
+      it('has no highlighted nav items, when the page loads', function () {
+        module.getWindowPositions = function () {
+          return {
+            scrollTop: 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 () {
+        module.getWindowPositions = function () {
+          return {
+            scrollTop: 300
+          }
+        }
+        var testHref = '#section-3'
+        module.start($element)
+        isLinkHighlighted(testHref)
+      })
+
+      // 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)
+      }
+    })
+  })
+})