add sunlight colors to color picker and tests

test/spec/components/color.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var assert = require('chai').assert;
+var fixture = require('../../fixture');
+
+/**
+ * @param {ClayItem} colorItem
+ * @returns {void}
+ */
+function openPicker(colorItem) {
+  colorItem.$element.select('label')[0].click();
+}
+
+describe('component - color', function() {
+  it('shows the sunlit colors in the value display', function() {
+    var clayConfig = fixture.clayConfig([
+      {
+        type: 'color',
+        sunlight: true,
+        id: '1',
+        value: 'ff0000'
+      }
+    ]);
+    var colorItem = clayConfig.getItemById('1');
+
+    assert.strictEqual(colorItem.get(), 0xff0000);
+    assert.strictEqual(
+      colorItem.$element.select('.value')[0].style.backgroundColor,
+      'rgb(227, 84, 98)'
+    );
+    colorItem.set('0000FF');
+    assert.strictEqual(
+      colorItem.$element.select('.value')[0].style.backgroundColor,
+      'rgb(0, 104, 202)'
+    );
+  });
+
+  it('shows the normal colors in the value display', function() {
+    var clayConfig = fixture.clayConfig([
+      {
+        type: 'color',
+        sunlight: false,
+        id: '1',
+        value: 'ff0000'
+      }
+    ]);
+    var colorItem = clayConfig.getItemById('1');
+
+    assert.strictEqual(colorItem.get(), 0xff0000);
+    assert.strictEqual(
+      colorItem.$element.select('.value')[0].style.backgroundColor,
+      'rgb(255, 0, 0)'
+    );
+    colorItem.set('0000FF');
+    assert.strictEqual(
+      colorItem.$element.select('.value')[0].style.backgroundColor,
+      'rgb(0, 0, 255)'
+    );
+  });
+
+  it('shows the picker when the label is clicked', function() {
+    var clayConfig = fixture.clayConfig(['color']);
+    var colorItem = clayConfig.getItemsByType('color')[0];
+    var $picker = colorItem.$element.select('.picker-wrap');
+    assert.strictEqual($picker.get('classList').contains('show'), false);
+    openPicker(colorItem);
+    assert.strictEqual($picker.get('classList').contains('show'), true);
+  });
+
+  it('only shows the picker if the item is enabled', function() {
+    var clayConfig = fixture.clayConfig(['color']);
+    var colorItem = clayConfig.getItemsByType('color')[0];
+    var $picker = colorItem.$element.select('.picker-wrap');
+    colorItem.disable();
+    assert.strictEqual($picker.get('classList').contains('show'), false);
+    openPicker(colorItem);
+    assert.strictEqual($picker.get('classList').contains('show'), false);
+    colorItem.enable();
+    openPicker(colorItem);
+    assert.strictEqual($picker.get('classList').contains('show'), true);
+  });
+
+  it('sets the value and closes picker when the user makes a selection', function() {
+    var clayConfig = fixture.clayConfig([{type: 'color', sunlight: false}]);
+    var colorItem = clayConfig.getItemsByType('color')[0];
+    var $picker = colorItem.$element.select('.picker-wrap');
+    assert.strictEqual(colorItem.get(), 0x000000);
+    openPicker(colorItem);
+    colorItem.$element.select('[data-value="16711680"]')[0].click();
+    assert.strictEqual(colorItem.get(), 0xff0000);
+    assert.strictEqual(
+      colorItem.$element.select('.value')[0].style.backgroundColor,
+      'rgb(255, 0, 0)'
+    );
+    assert.strictEqual($picker.get('classList').contains('show'), false);
+  });
+
+  it('closes the picker if a user clicks the background', function() {
+    var clayConfig = fixture.clayConfig([{type: 'color', sunlight: false}]);
+    var colorItem = clayConfig.getItemsByType('color')[0];
+    var $picker = colorItem.$element.select('.picker-wrap');
+    assert.strictEqual(colorItem.get(), 0x000000);
+    openPicker(colorItem);
+    assert.strictEqual($picker.get('classList').contains('show'), true);
+    $picker[0].click();
+    assert.strictEqual($picker.get('classList').contains('show'), false);
+  });
+});

test/spec/lib/manipulators.js

@@ -9,17 +9,21 @@ describe('manipulators', function() {
   /**
    * @param {string} itemType
    * @param {*} value
+   * @param {*} expected
    * @return {void}
    */
-  function testSetGet(itemType, value) {
+  function testSetGet(itemType, value, expected) {
+    expected = typeof expected === 'undefined' ? value : expected;
+
     describe('.set() and .get()', function() {
-      it('sets and gets the value then triggers a "change" event', function() {
+      it('sets: "' + value + '" and gets: "' + expected + '" then triggers "change"',
+      function() {
         var handlerSpy = sinon.spy();
         var clayItem = fixture.clayItem(itemType);
         clayItem.on('change', handlerSpy);
 
         clayItem.set(value);
-        assert.strictEqual(clayItem.get(), value);
+        assert.strictEqual(clayItem.get(), expected);
         assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once');
         assert(handlerSpy.calledOn(clayItem), 'handler not called on clayItem');
       });
@@ -80,4 +84,17 @@ describe('manipulators', function() {
     testDisable('toggle');
     testEnable('toggle');
   });
+
+  describe('color', function() {
+    testSetGet('color', 'FF0000', 0xff0000);
+    testSetGet('color', '#FF0000', 0xff0000);
+    testSetGet('color', '0xFF0000', 0xff0000);
+    testSetGet('color', '#ff0000', 0xff0000);
+    testSetGet('color', 0xff0000, 0xff0000);
+    testSetGet('color', '', 0x000000);
+    testSetGet('color', false, 0x000000);
+    testSetGet('color', undefined, 0x000000);
+    testDisable('color');
+    testEnable('color');
+  });
 });