Merge pull request #216 from moneyadviceservice/deferred-component

Allow deferred components
moneyadviceservice · Feb 17, 2015 · bff9464 · bff9464
2 parents a376da0 + 8b38759
commit bff9464
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 7 deletions.
diff --git a/assets/js/lib/componentLoader.js b/assets/js/lib/componentLoader.js
@@ -31,10 +31,11 @@ define(['jquery', 'rsvp'], function($, RSVP) {
     /**
      * Create components based on the supplied DOM fragment (or document if not supplied)
      * @param {jQuery} [$container]
+     * @param {boolean} [includeDeferred] - Includes deferred objects when initialising components
      * @returns {object} - a promise that will resolve or reject depending on whether all modules
      * initialise successfully
      */
-    init: function($container) {
+    init: function($container, includeDeferred) {
       var componentsToCreate,
           instantiatedList,
           initialisedList,
@@ -44,7 +45,7 @@ define(['jquery', 'rsvp'], function($, RSVP) {
       this.components = {};
       // if no DOM fragment supplied, use the document
       $container = $container || $('body');
-      componentsToCreate = this._listComponentsToCreate($container);
+      componentsToCreate = this._listComponentsToCreate($container, includeDeferred || false);
       instantiatedList = this._createPromises(componentsToCreate);
       initialisedList = this._createPromises(componentsToCreate);
       if (componentsToCreate.length) {
@@ -74,16 +75,22 @@ define(['jquery', 'rsvp'], function($, RSVP) {
     /**
      * Make an array of objects, each containing pointers to a component container and name
      * @param {object} $container
+     * @param {boolean} [includeDeferred] - Includes deferred objects when initialising components
      * @returns {Array}
      * @private
      */
-    _listComponentsToCreate: function($container) {
+    _listComponentsToCreate: function($container, includeDeferred) {
       var componentsToCreate = [],
           $els,
           $el,
-          attrs;
+          attrs,
+          selector = '[data-dough-component]';
 
-      $els = $container.find('[data-dough-component]');
+      if (!includeDeferred) {
+        selector += ':not([data-dough-defer])';
+      }
+
+      $els = $container.is(selector)? $container : $container.find(selector);
       $els.each(function() {
         $el = $(this);
         attrs = $el.attr('data-dough-component').split(' ');

diff --git a/lib/dough/version.rb b/lib/dough/version.rb
@@ -1,3 +1,3 @@
 module Dough
-  VERSION = '5.1.0'
+  VERSION = '5.2.0'
 end
diff --git a/spec/js/fixtures/componentLoader.html b/spec/js/fixtures/componentLoader.html
@@ -30,4 +30,5 @@
     <div class="tab-selector__target is-inactive" id="panel-2" data-dough-tab-selector-target="2"></div>
   </div>
   <form data-dough-component="RangeInput Collapsable"></form>
+  <div data-dough-component="RangeInput" data-dough-defer></div>
 </div>
diff --git a/spec/js/tests/componentLoader_spec.js b/spec/js/tests/componentLoader_spec.js
@@ -36,18 +36,45 @@ describe('componentLoader', function() {
 
       // NOTE: components add a "data-dough-<componentName>-initialised='yes'" attribute to themselves once
       // they have successfully initialised
-      this.$html.find('[data-dough-component]').each(function(){
+      this.$html.find('[data-dough-component]:not([data-dough-defer])').each(function() {
         $component = $(this);
         componentNames = $component.attr('data-dough-component').split(' ');
         $.each(componentNames, function(idx, componentName) {
           if (!$component.is('[data-dough-' + componentName + '-initialised="yes"]')) {
             allInitialised = false;
+            return false;
           }
         });
       });
       expect(allInitialised).to.equal(true);
     });
 
+    it('should ignore deferred components', function() {
+      var allInitialised = true;
+
+      this.$html.find('[data-dough-component][data-dough-defer]').each(function() {
+        var $component,
+            componentName;
+
+        $component = $(this);
+        componentName = $component.attr('data-dough-component').split(' ');
+        if (!$component.is('[data-dough-' + componentName + '-initialised="yes"]')) {
+          allInitialised = false;
+          return false;
+        }
+      });
+      expect(allInitialised).to.be.false;
+    });
+
+    it('should enable a deferred component', function(done) {
+      var $deferredComponent = this.$html.find('[data-dough-component][data-dough-defer]').eq(0);
+
+      this.componentLoader.init(this.$html, true).then(function() {
+        expect($deferredComponent.is('[data-dough-' + $deferredComponent.attr('data-dough-component') + '-initialised="yes"]')).to.be.true;
+        done();
+      });
+    });
+
     it('should set a flag to indicate all components have been initialised', function() {
       expect($('body').is('[data-dough-component-loader-all-loaded="yes"]')).to.equal(true);
     });