Add tests

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

@@ -1,13 +1,22 @@
+/* eslint-env jasmine */
+/* eslint-disable no-multi-str */
+
 describe('A highlight active section heading module', function () {
+  'use strict'
 
-  var instance;
+  var GOVUK = window.GOVUK
+  var $ = window.$
+  var module
 
   beforeEach(function () {
-    instance = new GOVUK.Modules.HighlightActiveSectionHeading();
-  });
+    module = new GOVUK.Modules.HighlightActiveSectionHeading()
+  })
 
-  describe('in a large parent element', function () {
+  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">\
@@ -39,32 +48,64 @@ describe('A highlight active section heading module', function () {
           </div>\
         </div>\
       </div>\
-    </div>');
-
-    var $pageContentsItems = $element.find('.page-contents__list a');
-
-    describe('on desktop', function () {
+    </div>')
 
+    describe('On desktop', function () {
       beforeEach(function () {
-        instance._getWindowDimensions = 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)
+      })
 
-      // Before the page has scrolled, no items should be highlighted
-      it('should not have an active nav item', function () {
-        instance.start($element)
-        expect($pageContentsItems.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)
+      })
 
-      // when one of the headings is scrolled to the top of the nav
-      // one of the nav items should be highlighted
+      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)
+      }
+    })
+  })
+})