From c37012093a7f024448c5130eaa89ba602246b284 Mon Sep 17 00:00:00 2001 From: Keegan Date: Mon, 1 Feb 2016 17:38:45 -0800 Subject: [PATCH] restructure directories and add tests for clay-item --- package.json | 16 ++-- src/scripts/components/color.js | 2 +- src/scripts/components/footer.js | 2 +- src/scripts/components/heading.js | 2 +- src/scripts/components/input.js | 2 +- src/scripts/components/radiogroup.js | 2 +- src/scripts/components/select.js | 2 +- src/scripts/components/submit.js | 2 +- src/scripts/components/text.js | 2 +- src/scripts/components/toggle.js | 2 +- src/scripts/lib/clay-config.js | 6 +- src/scripts/lib/clay-item.js | 8 +- src/templates/{items => components}/color.tpl | 0 .../{items => components}/footer.tpl | 0 .../{items => components}/heading.tpl | 0 src/templates/{items => components}/input.tpl | 0 .../{items => components}/radiogroup.tpl | 0 .../{items => components}/select.tpl | 0 .../{items => components}/submit.tpl | 0 src/templates/{items => components}/text.tpl | 0 .../{items => components}/toggle.tpl | 0 test/fixture.js | 16 +++- test/spec/lib/clay-item.js | 82 ++++++++++++++++--- 23 files changed, 108 insertions(+), 38 deletions(-) rename src/templates/{items => components}/color.tpl (100%) rename src/templates/{items => components}/footer.tpl (100%) rename src/templates/{items => components}/heading.tpl (100%) rename src/templates/{items => components}/input.tpl (100%) rename src/templates/{items => components}/radiogroup.tpl (100%) rename src/templates/{items => components}/select.tpl (100%) rename src/templates/{items => components}/submit.tpl (100%) rename src/templates/{items => components}/text.tpl (100%) rename src/templates/{items => components}/toggle.tpl (100%) diff --git a/package.json b/package.json index 4ae4bcd..7c445dc 100644 --- a/package.json +++ b/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": {} } diff --git a/src/scripts/components/color.js b/src/scripts/components/color.js index abdd54a..b728ff4 100644 --- a/src/scripts/components/color.js +++ b/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: '' diff --git a/src/scripts/components/footer.js b/src/scripts/components/footer.js index 9d8f2cc..6c761a1 100644 --- a/src/scripts/components/footer.js +++ b/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: {} diff --git a/src/scripts/components/heading.js b/src/scripts/components/heading.js index 148d439..0ad0058 100644 --- a/src/scripts/components/heading.js +++ b/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: {}, diff --git a/src/scripts/components/input.js b/src/scripts/components/input.js index be98a30..1495102 100644 --- a/src/scripts/components/input.js +++ b/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: '', diff --git a/src/scripts/components/radiogroup.js b/src/scripts/components/radiogroup.js index e905fad..530318e 100644 --- a/src/scripts/components/radiogroup.js +++ b/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: '', diff --git a/src/scripts/components/select.js b/src/scripts/components/select.js index 1cf6f7b..9716970 100644 --- a/src/scripts/components/select.js +++ b/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: '', diff --git a/src/scripts/components/submit.js b/src/scripts/components/submit.js index f25f60b..5c856cf 100644 --- a/src/scripts/components/submit.js +++ b/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: {} diff --git a/src/scripts/components/text.js b/src/scripts/components/text.js index 806435c..c35a7cd 100644 --- a/src/scripts/components/text.js +++ b/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: {} diff --git a/src/scripts/components/toggle.js b/src/scripts/components/toggle.js index c2c6d2b..c3c3bd3 100644 --- a/src/scripts/components/toggle.js +++ b/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: {} diff --git a/src/scripts/lib/clay-config.js b/src/scripts/lib/clay-config.js index 036a1a0..eef7bad 100644 --- a/src/scripts/lib/clay-config.js +++ b/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; diff --git a/src/scripts/lib/clay-item.js b/src/scripts/lib/clay-item.js index 93bfe15..08c2808 100644 --- a/src/scripts/lib/clay-item.js +++ b/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 }); } diff --git a/src/templates/items/color.tpl b/src/templates/components/color.tpl similarity index 100% rename from src/templates/items/color.tpl rename to src/templates/components/color.tpl diff --git a/src/templates/items/footer.tpl b/src/templates/components/footer.tpl similarity index 100% rename from src/templates/items/footer.tpl rename to src/templates/components/footer.tpl diff --git a/src/templates/items/heading.tpl b/src/templates/components/heading.tpl similarity index 100% rename from src/templates/items/heading.tpl rename to src/templates/components/heading.tpl diff --git a/src/templates/items/input.tpl b/src/templates/components/input.tpl similarity index 100% rename from src/templates/items/input.tpl rename to src/templates/components/input.tpl diff --git a/src/templates/items/radiogroup.tpl b/src/templates/components/radiogroup.tpl similarity index 100% rename from src/templates/items/radiogroup.tpl rename to src/templates/components/radiogroup.tpl diff --git a/src/templates/items/select.tpl b/src/templates/components/select.tpl similarity index 100% rename from src/templates/items/select.tpl rename to src/templates/components/select.tpl diff --git a/src/templates/items/submit.tpl b/src/templates/components/submit.tpl similarity index 100% rename from src/templates/items/submit.tpl rename to src/templates/components/submit.tpl diff --git a/src/templates/items/text.tpl b/src/templates/components/text.tpl similarity index 100% rename from src/templates/items/text.tpl rename to src/templates/components/text.tpl diff --git a/src/templates/items/toggle.tpl b/src/templates/components/toggle.tpl similarity index 100% rename from src/templates/items/toggle.tpl rename to src/templates/components/toggle.tpl diff --git a/test/fixture.js b/test/fixture.js index ece6706..d270f9f 100644 --- a/test/fixture.js +++ b/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; diff --git a/test/spec/lib/clay-item.js b/test/spec/lib/clay-item.js index f7fe147..a72929b 100644 --- a/test/spec/lib/clay-item.js +++ b/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); + }); }); });