diff --git a/spec/javascripts/highlight-active-section-heading-spec.js b/spec/javascripts/highlight-active-section-heading-spec.js
index 7acb66d5..5f76643f 100644
--- a/spec/javascripts/highlight-active-section-heading-spec.js
+++ b/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 = $('
\
\
\
@@ -39,32 +48,64 @@ describe('A highlight active section heading module', function () {
\
\
\
- ');
-
- var $pageContentsItems = $element.find('.page-contents__list a');
-
- describe('on desktop', function () {
+ ')
+ 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)
+ }
+ })
+ })
+})