Revision for Code Review

cfgov/jinja2/v1/_includes/organisms/footer.html

@@ -22,9 +22,10 @@
             <a class="btn
                       btn__secondary
                       o-footer_top-button"
+                data-gtm_ignore="true"
                 data-js-hook="behavior_return-to-top"
                 href="#">
-                Back to top <span clasbs="cf-icon cf-icon-arrow-up"></span>
+                Back to top <span class="cf-icon cf-icon-arrow-up"></span>
             </a>
 
             <ul class="o-footer_nav-list">

cfgov/unprocessed/js/modules/footer-button.js

@@ -10,55 +10,51 @@
 'use strict';
 
 // Required modules.
-var dataHook = require( './util/data-hook' );
+var behavior = require( './util/behavior' );
 
 /**
  * Set up event handler for button to scroll to top of page.
  */
 function init() {
-  var scrollDuration = 300;
-  var behaviorElement = dataHook.get( 'return-to-top' );
-
-  if ( behaviorElement === null ||
-       'requestAnimationFrame' in window === false ) {
+  if ( 'requestAnimationFrame' in window === false ) {
     return;
   }
 
-  // Disable Google Tag Manager tracking on this link.
-  behaviorElement.setAttribute( 'data-gtm_ignore', 'true' );
-  behaviorElement.addEventListener( 'click', function( event ) {
+  behavior.attach( 'return-to-top', 'click', function( event ) {
     event.preventDefault();
-    _scrollToTop( scrollDuration );
+    _scrollToTop();
   } );
 }
 
 /**
  * @param {integer} scrollDuration
  *  Duration of the scroll to top of the page.
  */
-function _scrollToTop( scrollDuration ) {
+function _scrollToTop() {
+  var SCROLL_DURATION = 300;
+  var SCROLL_STEP_DURATION = 10;
   var scrollHeight = window.scrollY;
-  var scrollStep = Math.PI / ( scrollDuration / 15 );
+  var scrollStep = Math.PI / ( SCROLL_DURATION / SCROLL_STEP_DURATION );
   var cosParameter = scrollHeight / 2;
   var scrollCount = 0;
   var scrollMargin;
-  requestAnimationFrame( _step );
+
+  window.requestAnimationFrame( _step );
 
   /**
    * Decrement scroll Y position.
    */
   function _step() {
-    setTimeout( function() {
+    window.setTimeout( function() {
       if ( window.scrollY !== 0 ) {
-        requestAnimationFrame( _step );
+        window.requestAnimationFrame( _step );
         scrollCount += 1;
         scrollMargin = cosParameter - cosParameter *
                        Math.cos( scrollCount * scrollStep );
         window.scrollTo( 0, scrollHeight - scrollMargin );
       }
-    }, 15 );
+    }, SCROLL_STEP_DURATION );
   }
-
 }
 
 module.exports = { init: init };

test/unit_tests/organisms/Footer-spec.js

@@ -1,10 +1,83 @@
 'use strict';
-var BASE_JS_PATH = '../../../cfgov/unprocessed/js/';
 
 var chai = require( 'chai' );
 var expect = chai.expect;
-var Footer = require( BASE_JS_PATH + 'organisms/Footer' );
+var jsdom = require( 'mocha-jsdom' );
+var sinon = require( 'sinon' );
+
+var BASE_JS_PATH = '../../../cfgov/unprocessed/js/';
+var FooterButton = require( BASE_JS_PATH + 'modules/footer-button.js' );
+
+var footerBtnDom;
+var bodyDom;
+var sandbox;
+var lastTime = 0;
+
+var HTML_SNIPPET =
+    '<a class="btn btn__secondary o-footer_top-button" ' +
+        'data-gtm_ignore="true" data-js-hook="behavior_return-to-top" ' +
+        'href="#">' +
+        'Back to top <span class="cf-icon cf-icon-arrow-up"></span>' +
+    '</a>';
+
+function triggerClick( target ) {
+  var clickEvent = new MouseEvent( 'click', {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  } );
+
+  target.dispatchEvent( clickEvent );
+}
+
+function scrollTo( xCoord, yCoord ) {
+  window.scrollX = xCoord;
+  window.scrollY = yCoord;
+}
+
+function requestAnimationFrame( callback ) {
+  var currTime = new Date().getTime();
+  var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
+  var id = window.setTimeout(
+    function() {
+      callback( currTime + timeToCall );
+    }, timeToCall
+  );
+
+  lastTime = currTime + timeToCall;
+
+  return id;
+}
 
 describe( 'Footer', function() {
-  // TODO: Implement tests.
+  jsdom();
+
+  before( function() {
+    sandbox = sinon.sandbox.create();
+  } );
+
+  beforeEach( function( ) {
+    bodyDom = document.body;
+    bodyDom.innerHTML = HTML_SNIPPET;
+    footerBtnDom = document.querySelector( '.o-footer_top-button' );
+
+    window.requestAnimationFrame = requestAnimationFrame;
+    window.scrollTo = scrollTo;
+  } );
+
+  afterEach( function() {
+    sandbox.restore();
+  } );
+
+  it( 'button should initiate scroll to page top when clicked',
+    function( done ) {
+      window.scrollY = 10;
+      FooterButton.init();
+      triggerClick( footerBtnDom );
+      this.timeout( 3000 );
+      window.setTimeout( function( ) {
+        expect( window.scrollY ).to.equal( 0 );
+        done();
+      }, 2000 );
+    } );
 } );