From 61a0f517db9567e24266e1c6a2bbc22087cded34 Mon Sep 17 00:00:00 2001
From: JoaoVSouto <joaovitorss99@hotmail.com>
Date: Sat, 11 Jul 2020 23:28:28 -0300
Subject: [PATCH] test: adds colors checking tests

---
 package.json                  |  1 +
 tests/renderStatsCard.test.js | 37 +++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/package.json b/package.json
index 1d3b262..4a95aa8 100644
--- a/package.json
+++ b/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": {
diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js
index d7bc8d2..541a89f 100644
--- a/tests/renderStatsCard.test.js
+++ b/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}`);
+  });
 });