From c0f7e25726675c1ebf32b22b33235bf034e8fc30 Mon Sep 17 00:00:00 2001
From: Breno Queiroz Lima <72840950+brenob6@users.noreply.github.com>
Date: Thu, 25 Jul 2024 06:08:02 -0300
Subject: [PATCH] fix(util): hexToRgb function (brenob6) (#5643)

* fix: invalid return values

* add: hexToRgb test suite

* test: update hexToRgb test value

* add more tests

---------

Co-authored-by: Miodec <jack@monkeytype.com>
---
 frontend/__tests__/utils/colors.spec.ts | 70 +++++++++++++++++++++++++
 frontend/src/ts/utils/colors.ts         | 16 +++---
 2 files changed, 78 insertions(+), 8 deletions(-)
 create mode 100644 frontend/__tests__/utils/colors.spec.ts

diff --git a/frontend/__tests__/utils/colors.spec.ts b/frontend/__tests__/utils/colors.spec.ts
new file mode 100644
index 000000000..1328711f8
--- /dev/null
+++ b/frontend/__tests__/utils/colors.spec.ts
@@ -0,0 +1,70 @@
+import { hexToRgb } from "../../src/ts/utils/colors";
+
+describe("colors.ts", () => {
+  describe("hexToRgb", () => {
+    it("Invalid hex values", () => {
+      expect(hexToRgb("ffff")).toEqual(undefined);
+      expect(hexToRgb("fff0000")).toEqual(undefined);
+      expect(hexToRgb("#ff")).toEqual(undefined);
+      expect(hexToRgb("ffffff")).toEqual(undefined);
+      expect(hexToRgb("fff")).toEqual(undefined);
+    });
+    it("Valid hex value", () => {
+      expect(hexToRgb("#ffffff")).toEqual({
+        r: 255,
+        g: 255,
+        b: 255,
+      });
+      expect(hexToRgb("#000000")).toEqual({
+        r: 0,
+        g: 0,
+        b: 0,
+      });
+      expect(hexToRgb("#fff")).toEqual({
+        r: 255,
+        g: 255,
+        b: 255,
+      });
+      expect(hexToRgb("#000")).toEqual({
+        r: 0,
+        g: 0,
+        b: 0,
+      });
+      expect(hexToRgb("#ff0000")).toEqual({
+        r: 255,
+        g: 0,
+        b: 0,
+      });
+      expect(hexToRgb("#00ff00")).toEqual({
+        r: 0,
+        g: 255,
+        b: 0,
+      });
+      expect(hexToRgb("#0000ff")).toEqual({
+        r: 0,
+        g: 0,
+        b: 255,
+      });
+      expect(hexToRgb("#f00")).toEqual({
+        r: 255,
+        g: 0,
+        b: 0,
+      });
+      expect(hexToRgb("#0f0")).toEqual({
+        r: 0,
+        g: 255,
+        b: 0,
+      });
+      expect(hexToRgb("#00f")).toEqual({
+        r: 0,
+        g: 0,
+        b: 255,
+      });
+      expect(hexToRgb("#123456")).toEqual({
+        r: 18,
+        g: 52,
+        b: 86,
+      });
+    });
+  });
+});
diff --git a/frontend/src/ts/utils/colors.ts b/frontend/src/ts/utils/colors.ts
index c8b055e9a..8c24118a3 100644
--- a/frontend/src/ts/utils/colors.ts
+++ b/frontend/src/ts/utils/colors.ts
@@ -44,27 +44,27 @@ export function blendTwoHexColors(
  * @param hex The hexadecimal color string (e.g., "#ff0000" or "#f00").
  * @returns An object with 'r', 'g', and 'b' properties representing the red, green, and blue components of the color, or undefined if the input is invalid.
  */
-function hexToRgb(hex: string):
+export function hexToRgb(hex: string):
   | {
       r: number;
       g: number;
       b: number;
     }
   | undefined {
-  if (hex.length !== 4 && hex.length !== 7 && !hex.startsWith("#")) {
+  if ((hex.length !== 4 && hex.length !== 7) || !hex.startsWith("#")) {
     return undefined;
   }
   let r: number;
   let g: number;
   let b: number;
   if (hex.length === 4) {
-    r = ("0x" + hex[1] + hex[1]) as unknown as number;
-    g = ("0x" + hex[2] + hex[2]) as unknown as number;
-    b = ("0x" + hex[3] + hex[3]) as unknown as number;
+    r = Number("0x" + hex[1] + hex[1]);
+    g = Number("0x" + hex[2] + hex[2]);
+    b = Number("0x" + hex[3] + hex[3]);
   } else if (hex.length === 7) {
-    r = ("0x" + hex[1] + hex[2]) as unknown as number;
-    g = ("0x" + hex[3] + hex[4]) as unknown as number;
-    b = ("0x" + hex[5] + hex[6]) as unknown as number;
+    r = Number("0x" + hex[1] + hex[2]);
+    g = Number("0x" + hex[3] + hex[4]);
+    b = Number("0x" + hex[5] + hex[6]);
   } else {
     return undefined;
   }