Add unit tests for new color-related functionality

Also, fix a math error in `Color.rgbToHsv`.

Newly covered functions:
- `toRbgColorObject` from `util/cast.js`
- `hsvToRgb` from `util/colors.js`
- `rgbToHsv` from `util/colors.js`
- `mixRgb` from `util/colors.js`

src/util/color.js

@@ -37,7 +37,7 @@ Color.decimalToHex = function (decimal) {
 /**
  * Convert a Scratch decimal color to an RGB color object.
  * @param {number} decimal RGB color as decimal.
- * @returns {RGBObject} {r: R, g: G, b: B}, values between 0-255
+ * @return {RGBObject} rgb - {r: red [0,255], g: green [0,255], b: blue [0,255]}.
  */
 Color.decimalToRgb = function (decimal) {
     var r = (decimal >> 16) & 0xFF;
@@ -51,7 +51,7 @@ Color.decimalToRgb = function (decimal) {
  * CC-BY-SA Tim Down:
  * https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
  * @param {!string} hex Hex representation of the color.
- * @return {Object} {r: R, g: G, b: B}, 0-255, or null.
+ * @return {RGBObject} null on failure, or rgb: {r: red [0,255], g: green [0,255], b: blue [0,255]}.
  */
 Color.hexToRgb = function (hex) {
     var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
@@ -68,7 +68,7 @@ Color.hexToRgb = function (hex) {
 
 /**
  * Convert an RGB color object to a hex color.
- * @param {Object} rgb {r: R, g: G, b: B}, values between 0-255.
+ * @param {RGBObject} rgb - {r: red [0,255], g: green [0,255], b: blue [0,255]}.
  * @return {!string} Hex representation of the color.
  */
 Color.rgbToHex = function (rgb) {
@@ -77,7 +77,7 @@ Color.rgbToHex = function (rgb) {
 
 /**
  * Convert an RGB color object to a Scratch decimal color.
- * @param {Object} rgb {r: R, g: G, b: B}, values between 0-255.
+ * @param {RGBObject} rgb - {r: red [0,255], g: green [0,255], b: blue [0,255]}.
  * @return {!number} Number representing the color.
  */
 Color.rgbToDecimal = function (rgb) {
@@ -96,7 +96,7 @@ Color.hexToDecimal = function (hex) {
 /**
  * Convert an HSV color to RGB format.
  * @param {HSVObject} hsv - {h: hue [0,360), s: saturation [0,1], v: value [0,1]}
- * @returns {RGBObject} rgb - {r: red [0,255], g: green [0,255], b: blue [0,255]}.
+ * @return {RGBObject} rgb - {r: red [0,255], g: green [0,255], b: blue [0,255]}.
  */
 Color.hsvToRgb = function (hsv) {
     var h = hsv.h % 360;
@@ -158,12 +158,12 @@ Color.hsvToRgb = function (hsv) {
 /**
  * Convert an RGB color to HSV format.
  * @param {RGBObject} rgb - {r: red [0,255], g: green [0,255], b: blue [0,255]}.
- * @returns {HSVObject} hsv - {h: hue [0,360), s: saturation [0,1], v: value [0,1]}
+ * @return {HSVObject} hsv - {h: hue [0,360), s: saturation [0,1], v: value [0,1]}
  */
 Color.rgbToHsv = function (rgb) {
-    var r = rgb.r;
-    var g = rgb.g;
-    var b = rgb.b;
+    var r = rgb.r / 255;
+    var g = rgb.g / 255;
+    var b = rgb.b / 255;
     var x = Math.min(Math.min(r, g), b);
     var v = Math.max(Math.max(r, g), b);
 
@@ -185,7 +185,7 @@ Color.rgbToHsv = function (rgb) {
  * @param {RGBObject} rgb0 - the color corresponding to fraction1 <= 0.
  * @param {RGBObject} rgb1 - the color corresponding to fraction1 >= 1.
  * @param {number} fraction1 - the interpolation parameter. If this is 0.5, for example, mix the two colors equally.
- * @returns {RGBObject} the interpolated color.
+ * @return {RGBObject} the interpolated color.
  */
 Color.mixRgb = function (rgb0, rgb1, fraction1) {
     if (fraction1 <= 0) return rgb0;

test/unit/util_cast.js

@@ -91,6 +91,24 @@ test('toRbgColorList', function (t) {
     t.end();
 });
 
+test('toRbgColorObject', function (t) {
+    // Hex (minimal, see "color" util tests)
+    t.deepEqual(cast.toRgbColorObject('#000'), {r: 0, g: 0, b: 0});
+    t.deepEqual(cast.toRgbColorObject('#000000'), {r: 0, g: 0, b: 0});
+    t.deepEqual(cast.toRgbColorObject('#fff'), {r: 255, g: 255, b: 255});
+    t.deepEqual(cast.toRgbColorObject('#ffffff'), {r: 255, g: 255, b: 255});
+
+    // Decimal (minimal, see "color" util tests)
+    t.deepEqual(cast.toRgbColorObject(0), {r: 0, g: 0, b: 0});
+    t.deepEqual(cast.toRgbColorObject(1), {r: 0, g: 0, b: 1});
+    t.deepEqual(cast.toRgbColorObject(16777215), {r: 255, g: 255, b: 255});
+
+    // Malformed
+    t.deepEqual(cast.toRgbColorObject('ffffff'), {r: 0, g: 0, b: 0});
+    t.deepEqual(cast.toRgbColorObject('foobar'), {r: 0, g: 0, b: 0});
+    t.end();
+});
+
 test('compare', function (t) {
     // Numeric
     t.strictEqual(cast.compare(0, 0), 0);

test/unit/util_color.js

@@ -1,6 +1,43 @@
-var test = require('tap').test;
+var tap = require('tap');
+var test = tap.test;
 var color = require('../../src/util/color');
 
+/**
+ * Assert that two HSV colors are similar to each other, within a tolerance.
+ * @param {Test} t - the Tap test object.
+ * @param {HSVObject} actual - the first HSV color to compare.
+ * @param {HSVObject} expected - the other HSV color to compare.
+ */
+var hsvSimilar = function (t, actual, expected) {
+    if ((Math.abs(actual.h - expected.h) >= 1) ||
+        (Math.abs(actual.s - expected.s) >= 0.01) ||
+        (Math.abs(actual.v - expected.v) >= 0.01)
+    ) {
+        t.fail('HSV colors not similar enough', {
+            actual: actual,
+            expected: expected
+        });
+    }
+};
+
+/**
+ * Assert that two RGB colors are similar to each other, within a tolerance.
+ * @param {Test} t - the Tap test object.
+ * @param {RGBObject} actual - the first RGB color to compare.
+ * @param {RGBObject} expected - the other RGB color to compare.
+ */
+var rgbSimilar = function (t, actual, expected) {
+    if ((Math.abs(actual.r - expected.r) >= 1) ||
+        (Math.abs(actual.g - expected.g) >= 1) ||
+        (Math.abs(actual.b - expected.b) >= 1)
+    ) {
+        t.fail('RGB colors not similar enough', {
+            actual: actual,
+            expected: expected
+        });
+    }
+};
+
 test('decimalToHex', function (t) {
     t.strictEqual(color.decimalToHex(0), '#000000');
     t.strictEqual(color.decimalToHex(1), '#000001');
@@ -60,3 +97,37 @@ test('hexToDecimal', function (t) {
     t.strictEqual(color.hexToDecimal('#00ffaa'), 65450);
     t.end();
 });
+
+test('hsvToRgb', function (t) {
+    rgbSimilar(t, color.hsvToRgb({h: 0, s: 0, v: 0}), {r: 0, g: 0, b: 0});
+    rgbSimilar(t, color.hsvToRgb({h: 123, s: 0.1234, v: 0}), {r: 0, g: 0, b: 0});
+    rgbSimilar(t, color.hsvToRgb({h: 0, s: 0, v: 1}), {r: 255, g: 255, b: 255});
+    rgbSimilar(t, color.hsvToRgb({h: 321, s: 0, v: 1}), {r: 255, g: 255, b: 255});
+    rgbSimilar(t, color.hsvToRgb({h: 0, s: 1, v: 1}), {r: 255, g: 0, b: 0});
+    rgbSimilar(t, color.hsvToRgb({h: 120, s: 1, v: 1}), {r: 0, g: 255, b: 0});
+    rgbSimilar(t, color.hsvToRgb({h: 240, s: 1, v: 1}), {r: 0, g: 0, b: 255});
+    t.end();
+});
+
+test('rgbToHsv', function (t) {
+    hsvSimilar(t, color.rgbToHsv({r: 0, g: 0, b: 0}), {h: 0, s: 0, v: 0});
+    hsvSimilar(t, color.rgbToHsv({r: 64, g: 64, b: 64}), {h: 0, s: 0, v: 0.25});
+    hsvSimilar(t, color.rgbToHsv({r: 128, g: 128, b: 128}), {h: 0, s: 0, v: 0.5});
+    hsvSimilar(t, color.rgbToHsv({r: 192, g: 192, b: 192}), {h: 0, s: 0, v: 0.75});
+    hsvSimilar(t, color.rgbToHsv({r: 255, g: 255, b: 255}), {h: 0, s: 0, v: 1});
+    hsvSimilar(t, color.rgbToHsv({r: 255, g: 0, b: 0}), {h: 0, s: 1, v: 1});
+    hsvSimilar(t, color.rgbToHsv({r: 0, g: 255, b: 0}), {h: 120, s: 1, v: 1});
+    hsvSimilar(t, color.rgbToHsv({r: 0, g: 0, b: 255}), {h: 240, s: 1, v: 1});
+    t.end();
+});
+
+test('mixRgb', function (t) {
+    rgbSimilar(t, color.mixRgb({r: 10, g: 20, b: 30}, {r: 30, g: 40, b: 50}, -1), {r: 10, g: 20, b: 30});
+    rgbSimilar(t, color.mixRgb({r: 10, g: 20, b: 30}, {r: 30, g: 40, b: 50}, 0), {r: 10, g: 20, b: 30});
+    rgbSimilar(t, color.mixRgb({r: 10, g: 20, b: 30}, {r: 30, g: 40, b: 50}, 0.25), {r: 15, g: 25, b: 35});
+    rgbSimilar(t, color.mixRgb({r: 10, g: 20, b: 30}, {r: 30, g: 40, b: 50}, 0.5), {r: 20, g: 30, b: 40});
+    rgbSimilar(t, color.mixRgb({r: 10, g: 20, b: 30}, {r: 30, g: 40, b: 50}, 0.75), {r: 25, g: 35, b: 45});
+    rgbSimilar(t, color.mixRgb({r: 10, g: 20, b: 30}, {r: 30, g: 40, b: 50}, 1), {r: 30, g: 40, b: 50});
+    rgbSimilar(t, color.mixRgb({r: 10, g: 20, b: 30}, {r: 30, g: 40, b: 50}, 2), {r: 30, g: 40, b: 50});
+    t.end();
+});