Merge branch 'master' into #52/custom-color-picker-layout

test/spec/components/slider.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var assert = require('chai').assert;
+var fixture = require('../../fixture');
+
+describe('component - slider', function() {
+  it('sets the value display to the correct value on set', function() {
+    var clayConfig = fixture.clayConfig(['slider']);
+    var sliderItem = clayConfig.getItemsByType('slider')[0];
+    var $valueDisplay = sliderItem.$element.select('.value');
+    var $valueDisplayPad = sliderItem.$element.select('.value-pad');
+
+    assert.strictEqual($valueDisplay.get('value'), '50');
+    assert.strictEqual($valueDisplayPad.get('innerHTML'), '50');
+    sliderItem.set(75);
+    assert.strictEqual($valueDisplay.get('value'), '75');
+    assert.strictEqual($valueDisplayPad.get('innerHTML'), '75');
+  });
+
+  it('sets the value display to the correct value on slider change', function() {
+    var clayConfig = fixture.clayConfig(['slider']);
+    var sliderItem = clayConfig.getItemsByType('slider')[0];
+    var $valueDisplay = sliderItem.$element.select('.value');
+    var $valueDisplayPad = sliderItem.$element.select('.value-pad');
+    var $slider = sliderItem.$element.select('.slider');
+
+    assert.strictEqual($valueDisplay.get('value'), '50');
+    assert.strictEqual($valueDisplayPad.get('innerHTML'), '50');
+    $slider.set('value', 75).trigger('change');
+    assert.strictEqual($valueDisplay.get('value'), '75');
+    assert.strictEqual($valueDisplayPad.get('innerHTML'), '75');
+  });
+
+  it('sets the value-pad to the same value as what the user is typing', function() {
+    var clayConfig = fixture.clayConfig(['slider']);
+    var sliderItem = clayConfig.getItemsByType('slider')[0];
+    var $valueDisplay = sliderItem.$element.select('.value');
+    var $valueDisplayPad = sliderItem.$element.select('.value-pad');
+
+    assert.strictEqual($valueDisplay.get('value'), '50');
+    assert.strictEqual($valueDisplayPad.get('innerHTML'), '50');
+    $valueDisplay.set('value', 75).trigger('input');
+    assert.strictEqual($valueDisplay.get('value'), '75');
+    assert.strictEqual($valueDisplayPad.get('innerHTML'), '75');
+  });
+
+  it('sets the slider to the correct value on user input', function() {
+    var clayConfig = fixture.clayConfig(['slider']);
+    var sliderItem = clayConfig.getItemsByType('slider')[0];
+    var $valueDisplay = sliderItem.$element.select('.value');
+    var $slider = sliderItem.$element.select('.slider');
+
+    assert.strictEqual($valueDisplay.get('value'), '50');
+    assert.strictEqual($slider.get('value'), '50');
+    $valueDisplay.set('value', 75).trigger('change');
+    assert.strictEqual($slider.get('value'), '75');
+  });
+
+  it('sets the precision correctly', function() {
+    var clayConfig = fixture.clayConfig([{
+      type: 'slider',
+      step: 0.25
+    }]);
+    var sliderItem = clayConfig.getItemsByType('slider')[0];
+
+    assert.strictEqual(sliderItem.precision, 2);
+  });
+});

test/spec/index.js

@@ -230,13 +230,21 @@ describe('Clay', function() {
     });
   });
 
-  describe('.getSettings()', function() {
+  describe('.getSettings', function() {
     it('stores the response to localStorage and returns the decoded data',
     function() {
       var clay = fixture.clay([]);
-      var result = clay.getSettings('%7B%22appKey%22%3A%22value%22%7D');
-      assert.equal(localStorage.getItem('clay-settings'), '{"appKey":"value"}');
-      assert.deepEqual(result, {appKey: 'value'});
+      var settings = encodeURIComponent(JSON.stringify({
+        key1: 'value1',
+        key2: {value: 'value2'}
+      }));
+      var expected = {
+        key1: 'value1',
+        key2: 'value2'
+      };
+      var result = clay.getSettings(settings);
+      assert.equal(localStorage.getItem('clay-settings'), JSON.stringify(expected));
+      assert.deepEqual(result, expected);
     });
 
     it('does not store the response if it is invalid JSON and logs an error',
@@ -259,7 +267,15 @@ describe('Clay', function() {
         test4: ['cb-1', 'cb-3'],
         test5: 12345,
         test6: [1, 2, 3, 4],
-        test7: [true, false, true]
+        test7: [true, false, true],
+        test8: {
+          precision: 2,
+          value: 12.34
+        },
+        test9: {
+          precision: 1,
+          value: [1, 2, 3, 4]
+        }
       }));
       var expected = {
         test1: 0,
@@ -268,7 +284,9 @@ describe('Clay', function() {
         test4: ['cb-1', 0, 'cb-3', 0],
         test5: 12345,
         test6: [1, 2, 3, 4],
-        test7: [1, 0, 1]
+        test7: [1, 0, 1],
+        test8: 1234,
+        test9: [10, 20, 30, 40]
       };
 
       assert.deepEqual(clay.getSettings(response), expected);
@@ -284,7 +302,11 @@ describe('Clay', function() {
         test4: ['cb-1', 'cb-3'],
         test5: 12345,
         test6: [1, 2, 3, 4],
-        test7: [true, false, true]
+        test7: [true, false, true],
+        test8: {
+          precision: 2,
+          value: 12.34
+        }
       };
       var response = encodeURIComponent(JSON.stringify(settings));
 
@@ -381,4 +403,98 @@ describe('Clay', function() {
     });
 
   });
+
+  describe('.prepareForAppMessage', function() {
+    it('converts an array correctly when array contains numbers', function() {
+      assert.deepEqual(Clay.prepareForAppMessage([1, 2, 3]), [1, 2, 3]);
+      assert.deepEqual(Clay.prepareForAppMessage(
+        {value: [1.5, 2.34, 3], precision: 2}),
+        [150, 234, 300]
+      );
+    });
+
+    it('converts an array correctly when array contains booleans', function() {
+      assert.deepEqual(Clay.prepareForAppMessage([true, false, true]), [1, 0, 1]);
+      assert.deepEqual(
+        Clay.prepareForAppMessage([{value: true}, false, true]),
+        [1, 0, 1]);
+    });
+
+    it('converts booleans to ints', function() {
+      assert.strictEqual(Clay.prepareForAppMessage(false), 0);
+      assert.strictEqual(Clay.prepareForAppMessage(true), 1);
+      assert.strictEqual(Clay.prepareForAppMessage({value: false}), 0);
+      assert.strictEqual(Clay.prepareForAppMessage({value: true}), 1);
+    });
+
+    it('leaves strings alone', function() {
+      assert.strictEqual(Clay.prepareForAppMessage('test'), 'test');
+      assert.strictEqual(Clay.prepareForAppMessage({value: 'test'}), 'test');
+    });
+
+    it('Multiples the number by the precision', function() {
+      assert.strictEqual(Clay.prepareForAppMessage(123), 123);
+      assert.strictEqual(Clay.prepareForAppMessage({
+        value: 1.23,
+        precision: 3
+      }), 1230);
+      assert.strictEqual(Clay.prepareForAppMessage({
+        value: 123,
+        precision: 2
+      }), 12300);
+      assert.strictEqual(Clay.prepareForAppMessage({
+        value: 1.23456,
+        precision: 4
+      }), 12345);
+    });
+
+    it('ignores precision for anything but numbers', function() {
+      assert.strictEqual(Clay.prepareForAppMessage({
+        value: 'not a number',
+        precision: 3
+      }), 'not a number');
+
+      assert.deepEqual(Clay.prepareForAppMessage({
+        value: ['not', 'a', 'number'],
+        precision: 3
+      }), ['not', 'a', 'number']);
+    });
+
+    it('treats an undefined precision as 0', function() {
+      assert.strictEqual(Clay.prepareForAppMessage({
+        value: 12.45,
+        precision: undefined
+      }), 12);
+    });
+  });
+
+  describe('.prepareSettingsForAppMessage', function() {
+    it('converts the settings correctly', function() {
+      var settings = {
+        test1: false,
+        test2: 'val-2',
+        test3: true,
+        test4: ['cb-1', 'cb-3'],
+        test5: 12345,
+        test6: [1, 2, 3, 4],
+        test7: [true, false, true],
+        test8: {
+          precision: 2,
+          value: 12.34
+        }
+      };
+      var expected = {
+        test1: 0,
+        test2: 'val-2',
+        test3: 1,
+        test4: ['cb-1', 0, 'cb-3', 0],
+        test5: 12345,
+        test6: [1, 2, 3, 4],
+        test7: [1, 0, 1],
+        test8: 1234
+      };
+
+      assert.deepEqual(Clay.prepareSettingsForAppMessage(settings), expected);
+    });
+  });
 });

test/spec/lib/clay-config.js

@@ -15,7 +15,7 @@ describe('ClayConfig', function() {
       'getItemByAppKey',
       'getItemById',
       'getItemsByType',
-      'getSettings',
+      'serialize',
       'registerComponent',
       'build',
       'on',
@@ -39,7 +39,7 @@ describe('ClayConfig', function() {
       'getItemByAppKey',
       'getItemById',
       'getItemsByType',
-      'getSettings'
+      'serialize'
     ].forEach(function(method) {
       it('.' + method + '()', function() {
         var clayConfig = fixtures.clayConfig(['input', 'text'], false);
@@ -99,7 +99,7 @@ describe('ClayConfig', function() {
     });
   });
 
-  describe('.getSettings()', function() {
+  describe('.serialize()', function() {
     it('returns the correct settings', function() {
       var config = [
         {type: 'input', appKey: 'test1', defaultValue: 'default val'},
@@ -112,7 +112,8 @@ describe('ClayConfig', function() {
           {label: 'label-1', value: 'cb-1'},
           {label: 'label-2', value: 'cb-2'},
           {label: 'label-2', value: 'cb-3'}
-        ]}
+        ]},
+        {type: 'slider', appKey: 'test5', step: 0.05, defaultValue: 12.5}
       ];
       var settings = {
         test2: 'val-2'
@@ -120,29 +121,42 @@ describe('ClayConfig', function() {
 
       var clayConfig = fixtures.clayConfig(config, true, true, settings);
 
-      assert.deepEqual(clayConfig.getSettings(), {
-        test1: 'default val',
-        test2: 'val-2',
-        test3: false,
-        test4: []
+      assert.deepEqual(clayConfig.serialize(), {
+        test1: {value: 'default val'},
+        test2: {value: 'val-2'},
+        test3: {value: false},
+        test4: {value: []},
+        test5: {value: 12.5, precision: 2}
       });
 
       clayConfig.getItemByAppKey('test1').set('val-1');
       clayConfig.getItemByAppKey('test3').set(true);
       clayConfig.getItemByAppKey('test4').set(['cb-1', 'cb-3']);
 
-      assert.deepEqual(clayConfig.getSettings(), {
+      assert.deepEqual(clayConfig.serialize(), {
+        test1: {value: 'val-1'},
+        test2: {value: 'val-2'},
+        test3: {value: true},
+        test4: {value: ['cb-1', 'cb-3']},
+        test5: {value: 12.5, precision: 2}
+      });
+
+      // make sure the result of serialize() can actually be fed back in to
+      // a new instance of ClayConfig
+      var clay = fixtures.clay(config);
+      var response = encodeURIComponent(JSON.stringify(clayConfig.serialize()));
+      clay.getSettings(response);
+      var loadedSettings = JSON.parse(localStorage.getItem('clay-settings'));
+
+      assert.deepEqual(loadedSettings, {
         test1: 'val-1',
         test2: 'val-2',
         test3: true,
-        test4: ['cb-1', 'cb-3']
+        test4: ['cb-1', 'cb-3'],
+        test5: 12.5
       });
-
-      // make sure the result of getSettings() can actually be fed back in to
-      // a new instance of ClayConfig
       assert.doesNotThrow(function() {
-        settings = clayConfig.getSettings();
-        fixtures.clayConfig(config, true, true, settings);
+        fixtures.clayConfig(config, true, true, loadedSettings);
       });
     });
   });

test/spec/lib/manipulators.js

@@ -143,43 +143,67 @@ describe('manipulators', function() {
   }
 
   describe('html', function() {
-    testSetGet('text', 'test123');
-    testSetGet('button', '<span>some HTML</span>');
-    testShow('text');
-    testHide('text');
+    var type = 'text';
+    testSetGet(type, 'test123');
+    testSetGet(type, '<span>some HTML</span>');
+    testShow(type);
+    testHide(type);
   });
 
   describe('button', function() {
-    testSetGet('button', 'test123');
-    testSetGet('button', '<span>some HTML</span>');
-    testDisable('button');
-    testEnable('button');
-    testShow('button');
-    testHide('button');
+    var type = 'button';
+    testSetGet(type, 'test123');
+    testSetGet(type, '<span>some HTML</span>');
+    testDisable(type);
+    testEnable(type);
+    testShow(type);
+    testHide(type);
   });
 
   describe('val', function() {
-    testSetGet('input', 'test321');
-    testSetGet('input', 1234, '1234');
-    testDisable('input');
-    testEnable('input');
-    testShow('text');
-    testHide('text');
+    var type = 'input';
+    testSetGet(type, 'test321');
+    testSetGet(type, 1234, '1234');
+    testDisable(type);
+    testEnable(type);
+    testShow(type);
+    testHide(type);
+  });
+
+  describe('slider', function() {
+    var type = {
+      type: 'slider',
+      min: 0,
+      max: 100,
+      step: 0.1
+    };
+
+    testSetGet(type, '12', 12);
+    testSetGet(type, 12);
+    testSetGet(type, '12.3', 12.3);
+    testSetGet(type, 12.3);
+    testSetGet(type, 12.34, 12.3);
+    testSetGet(type, '12.34', 12.3);
+    testDisable(type);
+    testEnable(type);
+    testShow(type);
+    testHide(type);
   });
 
   describe('checked', function() {
-    testSetGet({type: 'toggle', defaultValue: false}, 1, true);
-    testSetGet({type: 'toggle', defaultValue: false}, true);
-    testSetGet({type: 'toggle', defaultValue: true}, 0, false);
-    testSetGet({type: 'toggle', defaultValue: true}, false);
-    testDisable('toggle');
-    testEnable('toggle');
-    testShow('toggle');
-    testHide('toggle');
+    var type = 'toggle';
+    testSetGet({type: type, defaultValue: false}, 1, true);
+    testSetGet({type: type, defaultValue: false}, true);
+    testSetGet({type: type, defaultValue: true}, 0, false);
+    testSetGet({type: type, defaultValue: true}, false);
+    testDisable(type);
+    testEnable(type);
+    testShow(type);
+    testHide(type);
   });
 
   describe('radiogroup', function() {
-    var item = {
+    var type = {
       type: 'radiogroup',
       clayId: 1,
       options: [
@@ -188,17 +212,17 @@ describe('manipulators', function() {
         { label: '3', value: 'three "quote' }
       ]
     };
-    testSetGet(item, 'one');
-    testSetGet(item, 'two');
-    testSetGet(item, 'three "quote');
-    testDisable(item);
-    testEnable(item);
-    testShow(item);
-    testHide(item);
+    testSetGet(type, 'one');
+    testSetGet(type, 'two');
+    testSetGet(type, 'three "quote');
+    testDisable(type);
+    testEnable(type);
+    testShow(type);
+    testHide(type);
   });
 
   describe('checkboxgroup', function() {
-    var item = {
+    var type = {
       type: 'checkboxgroup',
       clayId: 1,
       defaultValue: ['two'],
@@ -208,28 +232,29 @@ describe('manipulators', function() {
         { label: '3', value: 'three "quote' }
       ]
     };
-    testSetGet(item, ['one', 'two']);
-    testSetGet(item, ['three "quote']);
-    testSetGet(item, []);
-    testSetGet(item, false, []);
-    testDisable(item);
-    testEnable(item);
-    testShow(item);
-    testHide(item);
+    testSetGet(type, ['one', 'two']);
+    testSetGet(type, ['three "quote']);
+    testSetGet(type, []);
+    testSetGet(type, false, []);
+    testDisable(type);
+    testEnable(type);
+    testShow(type);
+    testHide(type);
   });
 
   describe('color', function() {
-    testSetGet('color', 'FF0000', 0xff0000);
-    testSetGet('color', '#FF0000', 0xff0000);
-    testSetGet('color', '0xFF0000', 0xff0000);
-    testSetGet('color', '#ff0000', 0xff0000);
-    testSetGet('color', 0xff0000, 0xff0000);
-    testSetGet({type: 'color', defaultValue: 0x00ff00}, '', 0x000000);
-    testSetGet({type: 'color', defaultValue: 0x00ff00}, false, 0x000000);
-    testSetGet({type: 'color', defaultValue: 0x00ff00}, undefined, 0x000000);
-    testDisable('color');
-    testEnable('color');
-    testShow('color');
-    testHide('color');
+    var type = 'color';
+    testSetGet(type, 'FF0000', 0xff0000);
+    testSetGet(type, '#FF0000', 0xff0000);
+    testSetGet(type, '0xFF0000', 0xff0000);
+    testSetGet(type, '#ff0000', 0xff0000);
+    testSetGet(type, 0xff0000, 0xff0000);
+    testSetGet({type: type, defaultValue: 0x00ff00}, '', 0x000000);
+    testSetGet({type: type, defaultValue: 0x00ff00}, false, 0x000000);
+    testSetGet({type: type, defaultValue: 0x00ff00}, undefined, 0x000000);
+    testDisable(type);
+    testEnable(type);
+    testShow(type);
+    testHide(type);
   });
 });

test/spec/lib/utils.js

@@ -26,60 +26,5 @@ describe('Utils', function() {
       );
     });
   });
-
-  describe('.prepareForAppMessage', function() {
-    it('converts an array correctly when array contains strings', function() {
-      assert.deepEqual(
-        utils.prepareForAppMessage(['one', 'two']),
-        ['one', 0, 'two', 0]
-      );
-    });
-
-    it('converts an array correctly when array contains numbers', function() {
-      assert.deepEqual(utils.prepareForAppMessage([1, 2, 3]), [1, 2, 3]);
-    });
-
-    it('converts an array correctly when array contains booleans', function() {
-      assert.deepEqual(utils.prepareForAppMessage([true, false, true]), [1, 0, 1]);
-    });
-
-    it('converts booleans to ints', function() {
-      assert.strictEqual(utils.prepareForAppMessage(false), 0);
-      assert.strictEqual(utils.prepareForAppMessage(true), 1);
-    });
-
-    it('leaves strings alone', function() {
-      assert.strictEqual(utils.prepareForAppMessage('test'), 'test');
-    });
-
-    it('leaves numbers alone', function() {
-      assert.strictEqual(utils.prepareForAppMessage(123), 123);
-    });
-  });
-
-  describe('.prepareSettingsForAppMessage', function() {
-    it('converts the settings correctly', function() {
-      var settings = {
-        test1: false,
-        test2: 'val-2',
-        test3: true,
-        test4: ['cb-1', 'cb-3'],
-        test5: 12345,
-        test6: [1, 2, 3, 4],
-        test7: [true, false, true]
-      };
-      var expected = {
-        test1: 0,
-        test2: 'val-2',
-        test3: 1,
-        test4: ['cb-1', 0, 'cb-3', 0],
-        test5: 12345,
-        test6: [1, 2, 3, 4],
-        test7: [1, 0, 1]
-      };
-
-      assert.deepEqual(utils.prepareSettingsForAppMessage(settings), expected);
-    });
-  });
 });