From 92dcc89a3db37644769ad507599ea5ad1582fdb6 Mon Sep 17 00:00:00 2001
From: Anurag Hazra <hazru.anurag@gmail.com>
Date: Tue, 21 Jul 2020 13:15:53 +0530
Subject: [PATCH] tests: added more tests for themes (#125)

---
 tests/renderRepoCard.test.js  | 23 +++++++++++++++++++++++
 tests/renderStatsCard.test.js | 23 +++++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js
index f94ee4a..dafa979 100644
--- a/tests/renderRepoCard.test.js
+++ b/tests/renderRepoCard.test.js
@@ -149,6 +149,29 @@ describe("Test renderRepoCard", () => {
     );
   });
 
+  it("should render with all the themes", () => {
+    Object.keys(themes).forEach((name) => {
+      document.body.innerHTML = renderRepoCard(data_repo.repository, {
+        theme: name,
+      });
+
+      const styleTag = document.querySelector("style");
+      const stylesObject = cssToObject(styleTag.innerHTML);
+
+      const headerClassStyles = stylesObject[".header"];
+      const descClassStyles = stylesObject[".description"];
+      const iconClassStyles = stylesObject[".icon"];
+
+      expect(headerClassStyles.fill).toBe(`#${themes[name].title_color}`);
+      expect(descClassStyles.fill).toBe(`#${themes[name].text_color}`);
+      expect(iconClassStyles.fill).toBe(`#${themes[name].icon_color}`);
+      expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+        "fill",
+        `#${themes[name].bg_color}`
+      );
+    });
+  });
+
   it("should render custom colors with themes", () => {
     document.body.innerHTML = renderRepoCard(data_repo.repository, {
       title_color: "5a0",
diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js
index c161f12..06c3230 100644
--- a/tests/renderStatsCard.test.js
+++ b/tests/renderStatsCard.test.js
@@ -148,6 +148,29 @@ describe("Test renderStatsCard", () => {
     );
   });
 
+  it("should render with all the themes", () => {
+    Object.keys(themes).forEach((name) => {
+      document.body.innerHTML = renderStatsCard(stats, {
+        theme: name,
+      });
+
+      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(`#${themes[name].title_color}`);
+      expect(statClassStyles.fill).toBe(`#${themes[name].text_color}`);
+      expect(iconClassStyles.fill).toBe(`#${themes[name].icon_color}`);
+      expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+        "fill",
+        `#${themes[name].bg_color}`
+      );
+    });
+  });
+
   it("should render custom colors with themes and fallback to default colors if invalid", () => {
     document.body.innerHTML = renderStatsCard(stats, {
       title_color: "invalid color",