Convert sticky-element.js to use Module pattern

[gclssvglx]

What

Currently, the sticky-element in Government Frontend does not follow the JavaScript module pattern, for example...

window.GOVUK = window.GOVUK || {}
window.GOVUK.Modules = window.GOVUK.Modules || {};

(function (Modules) {
  function StickyElementContainer ($module) {
    this.module = $module
  }

  StickyElementContainer.prototype.init = function () {
    // etc.
  }

  Modules.StickyElementContainer = StickyElementContainer
})(window.GOVUK.Modules)

Convert the existing code to be consistent with this pattern.

Why do this?

The module pattern is the standard approach and this JavaScript component does not follow the convention.

Trello

⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️

Test URLs:

• https://government-f-convert-st-2govfa.herokuapp.com/government/publications/rates-and-allowances-national-insurance-contributions/rates-and-allowances-national-insurance-contributions
• https://government-f-convert-st-2govfa.herokuapp.com/guidance/red-list-of-countries-and-territories

[andysellick]

Generally looks good, some questions about the tests though.

[andysellick]

Why do these two functions now need to be called where they weren't previously? I can see this in a few of the tests - is this related to not calling the init function?

[gclssvglx]

Yeah, this and your previous comment are related to the init() function. What I found was that the tests do not test the actual scrolling behaviour - in essence they just test some basic maths and the ability to add/remove classes on an element. I've tested both with and without the init() function in the beforeEach() and the behaviour is exactly the same. Which leads me to believe it has no value being run in the tests.

Probably out of scope of this PR - but should we create some tests that actually do test the physical scrolling behaviour?