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,111 @@
+/* eslint-env jasmine */
+/* eslint-disable no-multi-str */
+
+describe('A highlight active section heading module', function () {
+  'use strict'
+
+  var GOVUK = window.GOVUK
+  var $ = window.$
+  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="#meeting-the-digital-service-standard">Meeting the Digital Service Standard</a></li>\
+            <li><a href="#understand-your-users">Understand your users</a></li>\
+            <li><a href="#research-continually">Research continually</a></li>\
+          </ul>\
+        </div>\
+      </div>\
+      <div class="column-two-thirds">\
+        <div class="govspeak-wrapper">\
+          <div class="govuk-govspeak">\
+            <p>User research gives your team the understanding it needs to design a good user experience. It also enables you to test your service and evaluate how successful you’ve been at meeting your users’ needs. </p>\
+            <p>Without it, you won’t know what to build, how to build it or what problems you’re trying to solve.</p>\
+            <h2 id="meeting-the-digital-service-standard">Meeting the Digital Service Standard</h2>\
+            <p>To pass <a href="/service-manual/digital-by-default#criterion-1">point 1 (understand user needs)</a> in your <a href="/service-manual/service-assessments/check-if-you-need-a-service-assessment">service assessments</a>, you must show that you’ve researched the needs of all your users, including those with the lowest level of digital access, skill and literacy.</p>\
+            <p>To pass <a href="/service-manual/digital-by-default#criterion-2">point 2 (do ongoing research)</a> you must show that you have an ongoing plan to research and test your service with all your users, including those with access and support needs.</p>\
+            <h2 id="understand-your-users">Understand your users</h2>\
+            <p>To deliver a service that meets your <a href="/service-manual/user-research/start-by-learning-user-needs">users’ needs</a>, you have to understand:</p>\
+            <ul>\
+              <li>who your likely users are</li>\
+              <li>what they’re trying to do</li>\
+              <li>how they’re trying to do it now</li>\
+            </ul>\
+            <p>Unlike market research, you need to work out how your users think and behave rather than find out what they like or think they want.</p>\
+            <p>If you understand your users’ circumstances, influences and expectations, it will help you design a service that’s easy to use and valued by the people who need it.</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
+          }
+        }
+        module.start($element)
+        var $anchor = $element.find('.js-page-contents a')
+        expect($anchor.hasClass('active')).toBe(true)
+      })
+
+      it('highlights a nav item, when the setActiveItem function is passed a href', function () {
+        module.start($element)
+
+        var testHref = '#understand-your-users'
+        module.setActiveItem(testHref)
+
+        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)
+      }
+    })
+  })
+})