Fixed Magellan issue when target does not exist.

Prevent any scrolling action when the target of the clicked link does not exist.
Previously the `.getOffset().top` created an JS error because `Cannot read property 'top' of undefined`.
Also added a basic test for scrolling and a test for the graceful failing when the target does not exist.

diff --git a/js/foundation.magellan.js b/js/foundation.magellan.js
index 64b264c71d9b5dc9e9d05f13b54b7c48c605ec47..5f50c35dbef7ed2fdcfb6a4b5c3a460552f823cc 100644 (file)
--- a/js/foundation.magellan.js
+++ b/js/foundation.magellan.js
@@ -103,6 +103,8 @@ class Magellan {
    * @function
    */
   scrollToLoc(loc) {
+    // Do nothing if target does not exist to prevent errors
+    if (!$(loc).length) {return false;}
     var scrollPos = Math.round($(loc).offset().top - this.options.threshold / 2 - this.options.barOffset);
 
     $('html, body').stop(true).animate({ scrollTop: scrollPos }, this.options.animationDuration, this.options.animationEasing);

diff --git a/test/javascript/components/magellan.js b/test/javascript/components/magellan.js
index 26678f2c50b2ac14cbd2700eca63bdbcde877e42..23e6d4f5edffc25a70651046bfdea5ac5bea4017 100644 (file)
--- a/test/javascript/components/magellan.js
+++ b/test/javascript/components/magellan.js
@@ -1,6 +1,31 @@
 describe('Magellan', function() {
        var plugin;
-       var $html;
+       var $html, $content;    
+
+  var generateUl = function(count) {
+       var html = '';
+       html += '<ul class="vertical-menu">';
+       for (var c = 0; c < count; c++) {
+               html += '<li><a href="#target-' + c + '">Section ' + c + '</a></li>';
+       }
+       html += '</ul>';
+       return html;
+  };
+  var generateContent = function(count) {
+       var html = '';
+       html += '<div>';
+       for (var c = 0; c < count; c++) {
+               html += '<div id="target-' + c + '" style="height: 1000px";>Section ' + c + '</div>';
+       }
+       html += '</div>';
+       return html;
+  };
+
+  afterEach(function() {
+    plugin.destroy();
+    $html.remove();
+    $content.remove();
+  });
 
        // afterEach(function() {
        //      plugin.destroy();
@@ -17,4 +42,54 @@ describe('Magellan', function() {
                // });
        });
 
+
+       describe('scrollToLoc()', function() {
+    it('scrolls the selected element into viewport', function(done) {
+       var count = 5, duration = 200;
+      $html = $(generateUl(count)).appendTo('body');
+      $content = $(generateContent(count)).appendTo('body');
+      plugin = new Foundation.Magellan($html, {
+       animationDuration: duration
+      });
+
+
+
+      // Jump to last section
+      var target = $html.find('a').eq(-1).attr('href');
+      plugin.scrollToLoc(target);      
+
+      // The `update` event doesn't work properly because it fires too often
+      setTimeout(function() {
+       var isInViewport = false;
+       if ($content.find('div').eq(-1).offset().top > $('body').scrollTop() && $content.offset().top < $('body').scrollTop() + $('body').innerHeight()) {
+               isInViewport = true;
+       }
+       isInViewport.should.equal(true);
+       done();
+      }, duration);
+
+    });
+
+
+    it('fails gracefully when target does not exist', function() {
+       var count = 5, duration = 200;
+      $html = $(generateUl(count)).appendTo('body');
+      $content = $(generateContent(count - 1)).appendTo('body');
+      plugin = new Foundation.Magellan($html, {
+       animationDuration: duration
+      });
+
+      var hasError = false;
+      try {
+                               var target = $html.find('a').eq(-1).attr('href');
+             plugin.scrollToLoc(target); 
+      } catch (err) {
+       hasError = true;
+      }
+      hasError.should.equal(false);
+      
+    });
+
+  });
+
 });
\ No newline at end of file