restructure directories and add tests for clay-item

package.json

@@ -28,14 +28,18 @@
   },
   "homepage": "https://github.com/keegan-lillo/pebble-clay#readme",
   "devDependencies": {
+    "browserify": "^13.0.0",
     "browserify-istanbul": "^0.2.1",
     "chai": "^3.4.1",
     "deamdify": "^0.2.0",
+    "del": "^2.0.2",
     "eslint": "^1.5.1",
     "eslint-config-pebble": "^1.2.0",
     "eslint-plugin-standard": "^1.3.1",
+    "gulp": "^3.9.0",
     "gulp-autoprefixer": "^3.1.0",
     "gulp-htmlmin": "^1.3.0",
+    "gulp-inline": "0.0.15",
     "gulp-sass": "^2.1.1",
     "gulp-sourcemaps": "^1.6.0",
     "karma": "^0.13.19",
@@ -47,14 +51,10 @@
     "karma-source-map-support": "^1.1.0",
     "karma-threshold-reporter": "^0.1.15",
     "mocha": "^2.3.4",
-    "watchify": "^3.7.0",
-    "browserify": "^13.0.0",
-    "del": "^2.0.2",
-    "gulp": "^3.9.0",
-    "gulp-inline": "0.0.15",
+    "sinon": "^1.17.3",
     "stringify": "^3.2.0",
-    "vinyl-source-stream": "^1.1.0"
+    "vinyl-source-stream": "^1.1.0",
+    "watchify": "^3.7.0"
   },
-  "dependencies": {
-  }
+  "dependencies": {}
 }

src/scripts/components/color.js

@@ -4,7 +4,7 @@ var HTML = require('../vendor/minified/minified').HTML;
 
 module.exports = {
   name: 'color',
-  template: require('../../templates/items/color.tpl'),
+  template: require('../../templates/components/color.tpl'),
   manipulator: require('../lib/manipulators').val,
   defaults: {
     label: ''

src/scripts/components/footer.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   name: 'footer',
-  template: require('../../templates/items/footer.tpl'),
+  template: require('../../templates/components/footer.tpl'),
   manipulator: require('../lib/manipulators').html,
   defaults: {
     attributes: {}

src/scripts/components/heading.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   name: 'heading',
-  template: require('../../templates/items/heading.tpl'),
+  template: require('../../templates/components/heading.tpl'),
   manipulator: require('../lib/manipulators').html,
   defaults: {
     attributes: {},

src/scripts/components/input.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   name: 'input',
-  template: require('../../templates/items/input.tpl'),
+  template: require('../../templates/components/input.tpl'),
   manipulator: require('../lib/manipulators').val,
   defaults: {
     label: '',

src/scripts/components/radiogroup.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   name: 'radiogroup',
-  template: require('../../templates/items/radiogroup.tpl'),
+  template: require('../../templates/components/radiogroup.tpl'),
   manipulator: require('../lib/manipulators').radiogroup,
   defaults: {
     label: '',

src/scripts/components/select.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   name: 'select',
-  template: require('../../templates/items/select.tpl'),
+  template: require('../../templates/components/select.tpl'),
   manipulator: require('../lib/manipulators').val,
   defaults: {
     label: '',

src/scripts/components/submit.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   name: 'submit',
-  template: require('../../templates/items/submit.tpl'),
+  template: require('../../templates/components/submit.tpl'),
   manipulator: require('../lib/manipulators').val,
   defaults: {
     attributes: {}

src/scripts/components/text.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   name: 'text',
-  template: require('../../templates/items/text.tpl'),
+  template: require('../../templates/components/text.tpl'),
   manipulator: require('../lib/manipulators').html,
   defaults: {
     attributes: {}

src/scripts/components/toggle.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   name: 'toggle',
-  template: require('../../templates/items/toggle.tpl'),
+  template: require('../../templates/components/toggle.tpl'),
   manipulator: require('../lib/manipulators').checked,
   defaults: {
     attributes: {}

src/scripts/lib/clay-config.js

@@ -40,13 +40,13 @@ function ClayConfig(settings, config, $rootContainer) {
   self.EVENTS = {
     /**
      * Called before framework has initialized. This is when you would attach your
-     * custom items.
+     * custom components.
      * @const
      */
     BEFORE_BUILD: 'BEFORE_BUILD',
 
     /**
-     * Called after the config has been parsed and all items have their initial value
+     * Called after the config has been parsed and all components have their initial value
      * set
      * @const
      */
@@ -130,7 +130,7 @@ function ClayConfig(settings, config, $rootContainer) {
       $container.add($wrapper);
       _addItems(item.items, $wrapper);
     } else {
-      var clayItem = new ClayItem(item);
+      var clayItem = new ClayItem(item).initialize();
 
       if (item.id) {
         _itemsById[item.id] = clayItem;

src/scripts/lib/clay-item.js

@@ -23,8 +23,8 @@ function ClayItem(config) {
   /** @type {string|null} */
   self.appKey = config.appKey || null;
 
-  /** @type {object|null} */
-  self.config = config || null;
+  /** @type {object} */
+  self.config = config;
 
   /** @type {M} */
   self.$element = HTML(_.formatHtml(_itemType.template, _templateData));
@@ -38,7 +38,7 @@ function ClayItem(config) {
   }
 
   /**
-   * Run the initializer. This will automatically be run on item creation.
+   * Run the initializer if it exists.
    * @returns {ClayItem}
    */
   self.initialize = function() {
@@ -56,8 +56,6 @@ function ClayItem(config) {
     self[methodName] = method.bind(self);
   });
 
-  self.initialize();
-
   // prevent external modifications of properties
   utils.updateProperties(self, { writable: false, configurable: false });
 }

test/fixture.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var _ = require('../src/scripts/vendor/minified/minified')._;
+var ClayItem = require('../src/scripts/lib/clay-item');
 var idCounter = 0;
 
 /**
@@ -8,7 +9,7 @@ var idCounter = 0;
  * @param {{}} [config]
  * @returns {{}}
  */
-function fixture(type, config) {
+function configItem(type, config) {
 
   var basic = {
     type: type,
@@ -22,4 +23,15 @@ function fixture(type, config) {
   return _.extend({}, basic, config);
 }
 
-module.exports = fixture;
+/**
+ *
+ * @param {string} type
+ * @param {{}} [config]
+ * @returns {ClayItem}
+ */
+function clayItem(type, config) {
+  return new ClayItem(configItem(type, config));
+}
+
+module.exports.configItem = configItem;
+module.exports.clayItem = clayItem;

test/spec/lib/clay-item.js

@@ -1,9 +1,18 @@
 'use strict';
 
 var assert = require('chai').assert;
+var sinon = require('sinon');
 var ClayItem = require('../../../src/scripts/lib/clay-item');
-var fixture = require('../../fixture');
-var items = require('../../../src/scripts/lib/items');
+var clayItemFixture = require('../../fixture').clayItem;
+var configItemFixture = require('../../fixture').configItem;
+var componentRegistry = require('../../../src/scripts/lib/component-registry');
+
+// add some components to the registry to test
+componentRegistry.text = require('../../../src/scripts/components/text');
+componentRegistry.input = require('../../../src/scripts/components/input');
+componentRegistry.toggle = require('../../../src/scripts/components/toggle');
+componentRegistry.footer = require('../../../src/scripts/components/footer');
+componentRegistry.select = require('../../../src/scripts/components/select');
 
 /**
  * @param {Object} object
@@ -32,36 +41,87 @@ describe('ClayItem', function() {
       'trigger',
       'initialize'
     ];
-    var apiItem = new ClayItem(fixture('input'));
-    checkReadOnly(apiItem, properties);
+    var clayItem = clayItemFixture('input');
+    checkReadOnly(clayItem, properties);
   });
 
   it('attaches the manipulator methods', function() {
-    Object.keys(items).forEach(function(itemName) {
-      var clayItem = new ClayItem(fixture(itemName));
-      var manipulator = items[itemName].manipulator;
+    Object.keys(componentRegistry).forEach(function(itemName) {
+      var clayItem = clayItemFixture(itemName);
+      var manipulator = componentRegistry[itemName].manipulator;
       checkReadOnly(clayItem, Object.keys(manipulator));
     });
   });
 
   describe('.id', function() {
-    it('sets id correctly', function() {
-      var config = fixture('input');
+    it('sets id if config has id', function() {
+      var config = configItemFixture('input');
       var clayItem = new ClayItem(config);
       assert.strictEqual(clayItem.id, config.id);
     });
+
+    it('sets id to null if there is no id in the config', function() {
+      var clayItem = clayItemFixture('input', {id: undefined});
+      assert.strictEqual(clayItem.id, null);
+    });
   });
 
   describe('.appKey', function() {
     it('sets appKey correctly', function() {
-      var config = fixture('input');
+      var config = configItemFixture('input');
+      var clayItem = new ClayItem(config);
+      assert.strictEqual(clayItem.appKey, config.appKey);
+    });
+
+    it('sets appKey to null if there is no appKey in the config', function() {
+      var clayItem = clayItemFixture('input', {appKey: undefined});
+      assert.strictEqual(clayItem.appKey, null);
+    });
+  });
+
+  describe('.config', function() {
+    it('sets appKey correctly', function() {
+      var config = configItemFixture('input');
       var clayItem = new ClayItem(config);
       assert.strictEqual(clayItem.appKey, config.appKey);
     });
   });
 
-  describe('.$manipulatorTarget', function() {
+  describe('.$element', function() {
+    it('sets $element correctly', function() {
+      var clayItem = clayItemFixture('input');
+      assert.strictEqual(clayItem.$element[0].tagName, 'LABEL');
+    });
+  });
 
+  describe('.$manipulatorTarget', function() {
+    it('sets the $manipulatorTarget to the root element if there are no children',
+    function() {
+      var clayItem = clayItemFixture('footer');
+      assert.strictEqual(clayItem.$manipulatorTarget, clayItem.$element);
+    });
+    it('sets the $manipulatorTarget to the correct child element', function() {
+      var clayItem = clayItemFixture('input');
+      assert.strictEqual(clayItem.$manipulatorTarget[0].tagName, 'INPUT');
+    });
+  });
+
+  describe('.initialize()', function() {
+    it('calls component initializer  with the ClayItem as context', function() {
+      var initializeSpy = sinon.spy(componentRegistry.select, 'initialize');
+      var clayItem = clayItemFixture('select').initialize();
+      assert(initializeSpy.alwaysCalledOn(clayItem));
+      initializeSpy.restore();
+    });
+
+    it('returns itself for chaining', function() {
+      var clayItem = clayItemFixture('select');
+      assert.strictEqual(clayItem.initialize(), clayItem);
+    });
+
+    it('does nothing if there is no initialize function', function() {
+      assert.doesNotThrow(clayItemFixture('input').initialize);
+    });
   });
 
 });