Move componentName to constructor

assets/js/components/Collapsable.js

@@ -22,7 +22,6 @@ define(['jquery', 'DoughBaseComponent', 'eventsWithPromises'], function($, Dough
   // Class variables
   var CollapsableProto,
       defaultConfig = {
-        componentName: 'Collapsable',
         hideOnBlur: false,
         forceTo: false,
         focusTarget: true
@@ -63,6 +62,9 @@ define(['jquery', 'DoughBaseComponent', 'eventsWithPromises'], function($, Dough
    * @private
    */
   DoughBaseComponent.extend(Collapsable);
+
+  Collapsable.componentName = 'Collapsable';
+
   CollapsableProto = Collapsable.prototype;
 
   CollapsableProto._setupAccessibility = function() {

assets/js/components/DoughBaseComponent.js

@@ -19,7 +19,7 @@ define(['utilities'], function(utilities) {
 
     this.config = $.extend({}, defaultConfig || {}, config || {});
     this.setElement($el);
-    this._setComponentName(this.config.componentName);
+    this._setComponentName(this.constructor.componentName);
 
     /*
      Populate this array with the data attributes this module will use.
@@ -33,6 +33,8 @@ define(['utilities'], function(utilities) {
     return this;
   }
 
+  DoughBaseComponent.componentName = 'DoughBaseComponent';
+
   /**
    * Extend DoughBaseComponent class using the supplied constructor
    * @param {function} Subclass

assets/js/components/FieldHelpText.js

@@ -8,8 +8,6 @@ define(['jquery', 'DoughBaseComponent'], function($, DoughBaseComponent) {
   'use strict';
 
   var defaultConfig = {
-    componentName: 'FieldHelpText',
-
     // Used to show/hide tooltip with focus
     hiddenClass: 'field-help-text--hidden',
 
@@ -29,6 +27,8 @@ define(['jquery', 'DoughBaseComponent'], function($, DoughBaseComponent) {
 
   DoughBaseComponent.extend(FieldHelpText);
 
+  FieldHelpText.componentName = 'FieldHelpText';
+
   FieldHelpText.prototype.init = function() {
     var tooltipID = this.$el.attr('id');
 

assets/js/components/RangeInput.js

@@ -11,7 +11,6 @@ define(['jquery', 'DoughBaseComponent', 'featureDetect', 'eventsWithPromises'],
   'use strict';
 
   var defaultConfig = {
-        componentName: 'RangeInput',
         keepSynced: true
       },
 
@@ -29,6 +28,8 @@ define(['jquery', 'DoughBaseComponent', 'featureDetect', 'eventsWithPromises'],
 
   DoughBaseComponent.extend(RangeInput);
 
+  RangeInput.componentName = 'RangeInput';
+
   /**
    * Init - detect range type support and clone input / label
    * @param {boolean} initialised

assets/js/components/TabSelector.js

@@ -17,7 +17,6 @@ define(['jquery', 'DoughBaseComponent', 'eventsWithPromises', 'mediaQueries'],
 
       var TabSelector,
           defaultConfig = {
-            componentName: 'TabSelector',
             collapseInSmallViewport: false,
             uiEvents: {
               'click [data-dough-tab-selector-trigger]': '_handleClickEvent'
@@ -70,6 +69,8 @@ define(['jquery', 'DoughBaseComponent', 'eventsWithPromises', 'mediaQueries'],
        */
       DoughBaseComponent.extend(TabSelector);
 
+      TabSelector.componentName = 'TabSelector';
+
       /**
        * Init function
        * @returns {TabSelector}

assets/js/components/TabularTooltip.js

@@ -13,16 +13,16 @@ define(['jquery', 'DoughBaseComponent'], function($, DoughBaseComponent) {
    * @constructor
    */
   var TabularTooltip,
-      defaultConfig = {
-        componentName: 'TabularTooltip'
-      };
+      defaultConfig = {};
 
   TabularTooltip = function($el, config) {
     TabularTooltip.baseConstructor.call(this, $el, config, defaultConfig);
   };
 
   DoughBaseComponent.extend(TabularTooltip);
 
+  TabularTooltip.componentName = 'TabularTooltip';
+
   /**
    * Init
    * @param {Promise} initialised

assets/js/components/Validation.js

@@ -14,7 +14,6 @@ define(['jquery', 'DoughBaseComponent'], function($, DoughBaseComponent) {
   'use strict';
 
   var defaultConfig = {
-        componentName: 'Validation',
         fieldSelector: 'input, textarea, select',
         attributeEmpty: 'data-dough-validation-empty',
         attributeInvalid: 'data-dough-validation-invalid',
@@ -43,6 +42,8 @@ define(['jquery', 'DoughBaseComponent'], function($, DoughBaseComponent) {
 
   DoughBaseComponent.extend(Validation);
 
+  Validation.componentName = 'Validation';
+
   Validation.prototype.init = function(initialised) {
     this.ATTRIBUTE_VALIDATORS = {
       'required': '_validateRequired',

spec/js/fixtures/DoughBaseComponent.html

@@ -1 +1 @@
-<div data-dough-component="Foo"></div>
+<div data-dough-component="DoughBaseComponent"></div>

spec/js/fixtures/DoughBaseComponentExtended.html

@@ -0,0 +1 @@
+<div data-dough-component="ExtendedComponent"></div>

spec/js/tests/DoughBaseComponent_spec.js

@@ -21,7 +21,7 @@ describe('DoughBaseComponent', function() {
 
   describe('instantiation', function() {
     it('should cache the element passed to the constructor', function() {
-      var doughBaseComponent = new this.DoughBaseComponent(this.component, { componentName: 'Foo' });
+      var doughBaseComponent = new this.DoughBaseComponent(this.component);
 
       expect(doughBaseComponent.$el).to.equal(this.$html);
     });
@@ -31,27 +31,19 @@ describe('DoughBaseComponent', function() {
           doughBaseComponent;
 
       config = {
-        componentName: 'Foo',
         foo: 'bar'
       };
 
       doughBaseComponent = new this.DoughBaseComponent(this.component, config);
 
-      expect(doughBaseComponent.config).to.eql({ foo: 'bar', componentName: 'Foo' });
+      expect(doughBaseComponent.config).to.eql({ foo: 'bar' });
     });
 
     it('should set the componentName', function() {
-      var config,
-          doughBaseComponent;
-
-      config = {
-        componentName: 'Foo'
-      };
+      var doughBaseComponent = new this.DoughBaseComponent(this.component);
 
-      doughBaseComponent = new this.DoughBaseComponent(this.component, config);
-
-      expect(doughBaseComponent.componentName).to.equal('Foo');
-      expect(doughBaseComponent.componentAttributeName).to.equal('foo');
+      expect(doughBaseComponent.componentName).to.equal('DoughBaseComponent');
+      expect(doughBaseComponent.componentAttributeName).to.equal('dough-base-component');
     });
 
     it('should mix the passed config into the component\'s defaultConfig', function() {
@@ -60,7 +52,6 @@ describe('DoughBaseComponent', function() {
           defaultConfig;
 
       defaultConfig = {
-        componentName: 'Foo',
         foo: 'baz',
         baz: 'qux'
       };
@@ -72,7 +63,6 @@ describe('DoughBaseComponent', function() {
       doughBaseComponent = new this.DoughBaseComponent(this.component, config, defaultConfig);
 
       expect(doughBaseComponent.config).to.eql({
-        componentName: 'Foo',
         baz: 'qux',
         foo: 'bar'
       });
@@ -88,26 +78,26 @@ describe('DoughBaseComponent', function() {
     describe('successful', function () {
       it('should call the resolve (promise) function', function() {
         var spy = sandbox.spy(initialised, 'resolve'),
-            doughBaseComponent = new this.DoughBaseComponent(this.component, { componentName: 'Foo' });
+            doughBaseComponent = new this.DoughBaseComponent(this.component);
 
         doughBaseComponent._initialisedSuccess(initialised);
 
         expect(spy.called).to.be.true;
       });
 
       it('should stamp an initialised="yes" attribute on the component element', function() {
-        var doughBaseComponent = new this.DoughBaseComponent(this.component, { componentName: 'Foo' });
+        var doughBaseComponent = new this.DoughBaseComponent(this.component);
 
         doughBaseComponent._initialisedSuccess(initialised);
 
-        expect(doughBaseComponent.$el).to.have.attr('data-dough-foo-initialised', 'yes');
+        expect(doughBaseComponent.$el).to.have.attr('data-dough-dough-base-component-initialised', 'yes');
       });
     });
 
     describe('failed', function () {
       it('should call the reject (promise) function', function() {
         var spy = sandbox.spy(initialised, 'reject'),
-            doughBaseComponent = new this.DoughBaseComponent(this.component, { componentName: 'Foo' });
+            doughBaseComponent = new this.DoughBaseComponent(this.component);
 
         doughBaseComponent._initialisedFailure(initialised);
 
@@ -117,6 +107,12 @@ describe('DoughBaseComponent', function() {
   });
 
   describe('extending', function () {
+    var extendedComponentFixture;
+
+    beforeEach(function() {
+      extendedComponentFixture = $(window.__html__['spec/js/fixtures/DoughBaseComponentExtended.html']);
+    });
+
     it('should allow extending from the DoughBaseComponent', function() {
       var ExtendedComponent,
           extendedComponent;
@@ -125,9 +121,9 @@ describe('DoughBaseComponent', function() {
         ExtendedComponent.baseConstructor.call(this, $el, config);
       };
       this.DoughBaseComponent.extend(ExtendedComponent);
+      ExtendedComponent.componentName = 'ExtendedComponent';
 
-      extendedComponent = new ExtendedComponent(this.$html, { componentName: 'Foo' });
-
+      extendedComponent = new ExtendedComponent(extendedComponentFixture);
       expect(extendedComponent).to.be.instanceof(this.DoughBaseComponent);
     });
   });
@@ -147,7 +143,6 @@ describe('DoughBaseComponent', function() {
         spy = sandbox.stub(this.DoughBaseComponent.prototype, 'fn');
 
         doughBaseComponent = new this.DoughBaseComponent(this.component, {
-          componentName: 'Foo',
           uiEvents: {
             'click [data-dough-base-component-btn]': 'fn'
           }
@@ -169,7 +164,6 @@ describe('DoughBaseComponent', function() {
         spy = sandbox.stub(this.DoughBaseComponent.prototype, 'fn');
 
         doughBaseComponent = new this.DoughBaseComponent(this.component, {
-          componentName: 'Foo',
           uiEvents: {
             'click [data-dough-base-component-btn]': 'fn'
           }