Allow floats in the slider component and update docs

test/spec/components/slider.js

@@ -3,7 +3,7 @@
 var assert = require('chai').assert;
 var fixture = require('../../fixture');
 
-describe('component - select', function() {
+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];
@@ -55,4 +55,14 @@ describe('component - select', function() {
     $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

@@ -235,13 +235,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',
@@ -264,7 +272,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,
@@ -273,7 +289,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);
@@ -289,7 +307,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));
 
@@ -389,4 +411,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

@@ -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'
@@ -121,10 +122,11 @@ describe('ClayConfig', function() {
       var clayConfig = fixtures.clayConfig(config, true, true, settings);
 
       assert.deepEqual(clayConfig.serialize(), {
-        test1: 'default val',
-        test2: 'val-2',
-        test3: false,
-        test4: []
+        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');
@@ -132,17 +134,29 @@ describe('ClayConfig', function() {
       clayConfig.getItemByAppKey('test4').set(['cb-1', 'cb-3']);
 
       assert.deepEqual(clayConfig.serialize(), {
-        test1: 'val-1',
-        test2: 'val-2',
-        test3: true,
-        test4: ['cb-1', 'cb-3']
+        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'],
+        test5: 12.5
+      });
       assert.doesNotThrow(function() {
-        settings = clayConfig.serialize();
-        fixtures.clayConfig(config, true, true, settings);
+        fixtures.clayConfig(config, true, true, loadedSettings);
       });
     });
   });

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);
-    });
-  });
 });