test: adds colors checking tests

package.json

@@ -14,6 +14,7 @@
     "@testing-library/jest-dom": "^5.11.0",
     "axios": "^0.19.2",
     "axios-mock-adapter": "^1.18.1",
+    "css-to-object": "^1.1.0",
     "jest": "^26.1.0"
   },
   "dependencies": {

tests/renderStatsCard.test.js

@@ -1,4 +1,5 @@
 require("@testing-library/jest-dom");
+const cssToObject = require("css-to-object");
 const renderStatsCard = require("../src/renderStatsCard");
 
 const { getByTestId, queryByTestId } = require("@testing-library/dom");
@@ -51,4 +52,40 @@ describe("Test renderStatsCard", () => {
 
     expect(queryByTestId(document.body, "card-border")).not.toBeInTheDocument();
   });
+
+  it("should render default colors properly", () => {
+    document.body.innerHTML = renderStatsCard(stats);
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[".header"];
+    const statClassStyles = stylesObject[".stat"];
+    const iconClassStyles = stylesObject[".icon"];
+
+    expect(headerClassStyles.fill).toBe("#2f80ed");
+    expect(statClassStyles.fill).toBe("#333");
+    expect(iconClassStyles.fill).toBe("#4c71f2");
+  });
+
+  it("should render custom colors properly", () => {
+    const customColors = {
+      title_color: "5a0",
+      icon_color: "1b998b",
+      text_color: "9991",
+    };
+
+    document.body.innerHTML = renderStatsCard(stats, { ...customColors });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[".header"];
+    const statClassStyles = stylesObject[".stat"];
+    const iconClassStyles = stylesObject[".icon"];
+
+    expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`);
+    expect(statClassStyles.fill).toBe(`#${customColors.text_color}`);
+    expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`);
+  });
 });