#14 #53 Update color name manager and color unit tests.

brittni-and-the-polar-bear · May 26, 2024 · bed10f7 · bed10f7
1 parent 9fc885d
commit bed10f7
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 47 deletions.
diff --git a/docs/release-notes/v0.6.0-notes.md b/docs/release-notes/v0.6.0-notes.md
@@ -29,6 +29,12 @@
 ### Updated Methods
 
 ```typescript
+/**
+ * Color information and functionality.
+ * Colors are stored in RGBA format.
+ *
+ * @category Color
+ */
 declare class Color {
     /**
      * @param color - A {@link !P5Lib.Color | p5.js Color} or {@link PaletteColor} object.
@@ -44,13 +50,13 @@ declare class Color {
 ### New Methods
 
 ```typescript
+/**
+ * Color information and functionality.
+ * Colors are stored in RGBA format.
+ *
+ * @category Color
+ */
 declare class Color {
-    /**
-     * The color's name. Retrieved from a {@link PaletteColor} or the
-     * {@link ColorNameManager}.
-     */
-    private _name: string | null;
-
     /**
      * @returns The name of the color.
      */

diff --git a/src/main/color/color.ts b/src/main/color/color.ts
@@ -26,6 +26,7 @@ const p5: P5Lib = SketchContext.p5;
 /**
  * Color information and functionality.
  * Colors are stored in RGBA format.
+ *
  * @category Color
  */
 export class Color {
@@ -74,7 +75,7 @@ export class Color {
                 this.setColorValues(color);
                 this._name = null;
             } else {
-                const c: P5Lib.Color = p5.color(color.HEX);
+                const c: P5Lib.Color = p5.color(color.RGB.R, color.RGB.G, color.RGB.B);
                 this.setColorValues(c);
                 this._name = color.NAME;
             }
@@ -86,6 +87,7 @@ export class Color {
      * @param s - Some number between 0 and 100.
      * @param l - Some number between 0 and 100.
      * @param a - Some number between 0 and 1.
+     *
      * @returns A {@link !P5Lib.Color | p5.js Color} object matching the color specified
      * by the given {@link h}{@link s}{@link l}{@link a} values.
      */
@@ -110,6 +112,7 @@ export class Color {
      * @param s - Some number between 0 and 100.
      * @param l - Some number between 0 and 100.
      * @param a - Some number between 0 and 1.
+     *
      * @returns A {@link !P5Lib.Color | p5.js Color} object matching the color specified
      * by the given {@link h}{@link s}{@link l}{@link a} values.
      */
@@ -129,6 +132,7 @@ export class Color {
     /**
      * Set the current color.<br/>
      * <b>IMPORTANT: This method will set {@link _name} to `null`.</b>
+     *
      * @param c - A {@link !P5Lib.Color | p5.js Color} object.
      * The color's RGBA components will become the new values of
      * {@link red}, {@link green}, {@link blue}, and {@link alpha}.
@@ -148,7 +152,8 @@ export class Color {
     /**
      * Set the value of the {@link red} component.<br/>
      * <b>IMPORTANT: This method will set {@link _name} to `null`.</b>
-     * @param r -
+     *
+     * @param r
      */
     public set red(r: number) {
         this._red = Math.floor(p5.constrain(r, 0, 255));
@@ -165,7 +170,8 @@ export class Color {
     /**
      * Set the value of the {@link green} component.<br/>
      * <b>IMPORTANT: This method will set {@link _name} to `null`.</b>
-     * @param g -
+     *
+     * @param g
      */
     public set green(g: number) {
         this._green = Math.floor(p5.constrain(g, 0, 255));
@@ -182,7 +188,8 @@ export class Color {
     /**
      * Set the value of the {@link blue} component.<br/>
      * <b>IMPORTANT: This method will set {@link _name} to `null`.</b>
-     * @param b -
+     *
+     * @param b
      */
     public set blue(b: number) {
         this._blue = Math.floor(p5.constrain(b, 0, 255));
@@ -197,13 +204,12 @@ export class Color {
     }
 
     /**
-     * Set the value of the {@link alpha} component.<br/>
-     * <b>IMPORTANT: This method will set {@link _name} to `null`.</b>
-     * @param a -
+     * Set the value of the {@link alpha} component.
+     *
+     * @param a
      */
     public set alpha(a: number) {
         this._alpha = Math.floor(p5.constrain(a, 0, 255));
-        this._name = null;
     }
 
     /**
@@ -265,6 +271,7 @@ export class Color {
     /**
      * Set the color values.<br/>
      * <b>IMPORTANT: This method will set {@link _name} to `null`.</b>
+     *
      * @param color - A {@link !P5Lib.Color | p5.js Color} object.
      * The color's RGBA components will become the new values of
      * {@link red}, {@link green}, {@link blue}, and {@link alpha}.

diff --git a/src/test/color/color-name/color-name-manager.test.ts b/src/test/color/color-name/color-name-manager.test.ts
@@ -19,6 +19,7 @@ import nearestColor from 'nearest-color';
 
 import {ColorNameManager} from 'color';
 import {StringMap} from 'map';
+import {PaletteColor} from "palette";
 
 describe('color name manager test', (): void => {
     let nearestColorSpy: any;
@@ -71,4 +72,25 @@ describe('color name manager test', (): void => {
         expect(logSpy).toHaveBeenCalledTimes(1);
         logSpy.mockRestore();
     });
+
+    test('addColor(PaletteColor) method', (): void => {
+       const fakeColor: PaletteColor = {
+           RGB: {R: 0, G: 0, B: 0},
+           HSL: {H: 0, S: 0, L: 0},
+           HEX: '#000000',
+           NAME: 'test fake color'
+       };
+
+       const hex: string = fakeColor.HEX;
+       const expectedOriginalName: string = 'black';
+       const expectedNewName: string = fakeColor.NAME;
+
+       const originalName: string | undefined = ColorNameManager.getColorName(hex);
+       expect(originalName).toBe(expectedOriginalName);
+
+       ColorNameManager.addColor(fakeColor);
+
+       const newName: string | undefined = ColorNameManager.getColorName(hex);
+       expect(newName).toBe(expectedNewName);
+    });
 });
diff --git a/src/test/color/color.test.ts b/src/test/color/color.test.ts
@@ -22,7 +22,7 @@ import {SketchContext} from 'context';
 
 import {ColorComponents, colorToColorComponents, p5ColorToColorComponents} from '../shared/color';
 import {PaletteColor} from "palette";
-import {_0FFF4F} from "palette-colors";
+import {_0437F2, _0FFF4F, _7A00F5, _FF6BB5} from "palette-colors";
 
 const p5: P5Lib = SketchContext.p5;
 
@@ -73,28 +73,34 @@ describe('color tests', (): void => {
         expect(defaultColor.name).toBe(defaultColorName);
     });
 
-    test('color built with PaletteColor object', (): void => {
-        const c: PaletteColor = _0FFF4F;
-        const expected: ColorComponents = {
-            r: c.RGB.R, g: c.RGB.G, b: c.RGB.B, a: 255
-        }
-        const expectedName: string = c.NAME;
-
-        const color: Color = new Color(c);
-        expect(colorToColorComponents(color)).toEqual(expected);
-        expect(p5ColorToColorComponents(color.color)).toEqual(expected);
-        expect(color.name).toBe(expectedName);
-    });
+    test.each(
+        [
+            _0437F2,
+            _0FFF4F,
+            _7A00F5,
+            _FF6BB5
+        ]
+    )('color built with PaletteColor object',
+        (c: PaletteColor): void => {
+            const expected: ColorComponents = {
+                r: c.RGB.R, g: c.RGB.G, b: c.RGB.B, a: 255
+            }
+            const expectedName: string = c.NAME;
 
-    test.todo('add test to test color with multiple palette colors');
+            const color: Color = new Color(c);
+            expect(colorToColorComponents(color)).toEqual(expected);
+            expect(p5ColorToColorComponents(color.color)).toEqual(expected);
+            expect(color.name).toBe(expectedName);
+        }
+    );
 
     test('color built with (c) parameter', (): void => {
         const w: number = 153;
         const c: P5Lib.Color = p5.color(w);
         const expected: ColorComponents = {
             r: w, g: w, b: w, a: 255
         }
-        const expectedName: string = '';
+        const expectedName: string = 'million grey';
 
         const color: Color = new Color(c);
         expect(colorToColorComponents(color)).toEqual(expected);
@@ -109,7 +115,7 @@ describe('color tests', (): void => {
         const expected: ColorComponents = {
             r: w, g: w, b: w, a: a
         }
-        const expectedName: string = '';
+        const expectedName: string = 'million grey';
 
         const color: Color = new Color(c);
         expect(colorToColorComponents(color)).toEqual(expected);
@@ -125,7 +131,7 @@ describe('color tests', (): void => {
         const expected: ColorComponents = {
             r: r, g: g, b: b, a: 255
         }
-        const expectedName: string = '';
+        const expectedName: string = 'vivid cerise';
 
         const color: Color = new Color(c);
         expect(colorToColorComponents(color)).toEqual(expected);
@@ -142,7 +148,7 @@ describe('color tests', (): void => {
         const expected: ColorComponents = {
             r: r, g: g, b: b, a: a
         }
-        const expectedName: string = '';
+        const expectedName: string = 'vivid cerise';
 
         const color: Color = new Color(c);
         expect(colorToColorComponents(color)).toEqual(expected);
@@ -158,7 +164,7 @@ describe('color tests', (): void => {
         const expected: ColorComponents = {
             r: 16, g: 104, b: 116, a: 255
         }
-        const expectedName: string = '';
+        const expectedName: string = 'blue enchantment';
 
         const color: Color = new Color(c);
         expect(colorToColorComponents(color)).toEqual(expected);
@@ -175,7 +181,7 @@ describe('color tests', (): void => {
         const expected: ColorComponents = {
             r: 16, g: 104, b: 116, a: Math.floor(255 * a)
         }
-        const expectedName: string = '';
+        const expectedName: string = 'blue enchantment';
 
         const color: Color = new Color(c);
         expect(colorToColorComponents(color)).toEqual(expected);
@@ -205,7 +211,7 @@ describe('color tests', (): void => {
         const expected: ColorComponents = {
             r: w, g: w, b: w, a: 255
         }
-        const expectedName: string = '';
+        const expectedName: string = 'million grey';
 
         const color: Color = new Color();
         expect(color.name).toBe(defaultColorName);
@@ -222,7 +228,7 @@ describe('color tests', (): void => {
         const expected: ColorComponents = {
             r: w, g: w, b: w, a: a
         }
-        const expectedName: string = '';
+        const expectedName: string = 'million grey';
 
         const color: Color = new Color();
         expect(color.name).toBe(defaultColorName);
@@ -240,7 +246,7 @@ describe('color tests', (): void => {
         const expected: ColorComponents = {
             r: r, g: g, b: b, a: 255
         }
-        const expectedName: string = '';
+        const expectedName: string = 'vivid cerise';
 
         const color: Color = new Color();
         expect(color.name).toBe(defaultColorName);
@@ -258,7 +264,7 @@ describe('color tests', (): void => {
         const expected: ColorComponents = {
             r: r, g: g, b: b, a: 255
         }
-        const expectedName: string = '';
+        const expectedName: string = 'vivid cerise';
 
         const color: Color = new Color();
         expect(color.name).toBe(defaultColorName);
@@ -276,7 +282,7 @@ describe('color tests', (): void => {
         const expected: ColorComponents = {
             r: 16, g: 104, b: 116, a: 255
         }
-        const expectedName: string = '';
+        const expectedName: string = 'blue enchantment';
 
         const color: Color = new Color();
         expect(color.name).toBe(defaultColorName);
@@ -295,7 +301,7 @@ describe('color tests', (): void => {
         const expected: ColorComponents = {
             r: 16, g: 104, b: 116, a: Math.floor(255 * a)
         }
-        const expectedName: string = '';
+        const expectedName: string = 'blue enchantment';
 
         const color: Color = new Color();
         expect(color.name).toBe(defaultColorName);
@@ -313,7 +319,7 @@ describe('color tests', (): void => {
         const expected: ColorComponents = {
             r: r, g: g, b: b, a: 255
         }
-        const expectedName: string = '';
+        const expectedName: string = 'orbital';
 
         const color: Color = new Color();
         expect(color.name).toBe(defaultColorName);
@@ -324,7 +330,7 @@ describe('color tests', (): void => {
     });
 
     test('set red to value > 255', (): void => {
-        const expectedName: string = '';
+        const expectedName: string = 'red';
 
         const color: Color = new Color();
         expect(color.red).toBe(0);
@@ -347,7 +353,7 @@ describe('color tests', (): void => {
 
     test('set red to valid value', (): void => {
         const value: number = 40;
-        const expectedName: string = '';
+        const expectedName: string = 'sepia black';
 
         const color: Color = new Color();
         expect(color.red).toBe(0);
@@ -359,7 +365,7 @@ describe('color tests', (): void => {
     });
 
     test('set green to value > 255', (): void => {
-        const expectedName: string = '';
+        const expectedName: string = 'green';
 
         const color: Color = new Color();
         expect(color.green).toBe(0);
@@ -382,7 +388,7 @@ describe('color tests', (): void => {
 
     test('set green to valid value', (): void => {
         const value: number = 40;
-        const expectedName: string = '';
+        const expectedName: string = 'tides of darkness';
 
         const color: Color = new Color();
         expect(color.green).toBe(0);
@@ -394,7 +400,7 @@ describe('color tests', (): void => {
     });
 
     test('set blue to value > 255', (): void => {
-        const expectedName: string = '';
+        const expectedName: string = 'blue';
 
         const color: Color = new Color();
         expect(color.blue).toBe(0);
@@ -417,7 +423,7 @@ describe('color tests', (): void => {
 
     test('set blue to valid value', (): void => {
         const value: number = 40;
-        const expectedName: string = '';
+        const expectedName: string = 'midnight';
 
         const color: Color = new Color();
         expect(color.blue).toBe(0);