Merge pull request #182 from anuraghazra/show-statcard-org-error

chore: added secondary warning message in renderError

api/index.js

@@ -33,7 +33,12 @@ module.exports = async (req, res) => {
   try {
     stats = await fetchStats(username, parseBoolean(count_private));
   } catch (err) {
-    return res.send(renderError(err.message));
+    return res.send(
+      renderError(
+        err.message,
+        "Make sure the provided username is not an organization"
+      )
+    );
   }
 
   const cacheSeconds = clampValue(

src/utils.js

@@ -1,16 +1,20 @@
 const axios = require("axios");
 const themes = require("../themes");
 
-const renderError = (message) => {
+const renderError = (message, secondaryMessage = "") => {
   return `
-    <svg width="495" height="100" viewBox="0 0 495 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="495" height="120" viewBox="0 0 495 120" fill="none" xmlns="http://www.w3.org/2000/svg">
     <style>
     .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2F80ED }
     .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #252525 }
+    .gray { fill: #858585 }
     </style>
     <rect x="0.5" y="0.5" width="494" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>
     <text x="25" y="45" class="text">Something went wrong! file an issue at https://git.io/JJmN9</text>
-    <text id="message" x="25" y="65" class="text small">${message}</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">${message}</tspan>
+      <tspan x="25" dy="18"  class="gray">${secondaryMessage}</tspan>
+    </text>
     </svg>
   `;
 };

tests/api.test.js

@@ -94,7 +94,12 @@ describe("Test /api/", () => {
     await api(req, res);
 
     expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toBeCalledWith(renderError(error.errors[0].message));
+    expect(res.send).toBeCalledWith(
+      renderError(
+        error.errors[0].message,
+        "Make sure the provided username is not an organization"
+      )
+    );
   });
 
   it("should get the query options", async () => {

tests/utils.test.js

@@ -1,3 +1,4 @@
+require("@testing-library/jest-dom");
 const {
   kFormatter,
   encodeHTML,
@@ -6,6 +7,8 @@ const {
   getCardColors,
 } = require("../src/utils");
 
+const { queryByTestId } = require("@testing-library/dom");
+
 describe("Test utils.js", () => {
   it("should test kFormatter", () => {
     expect(kFormatter(1)).toBe(1);
@@ -25,9 +28,19 @@ describe("Test utils.js", () => {
 
   it("should test renderError", () => {
     document.body.innerHTML = renderError("Something went wrong");
-    expect(document.getElementById("message").textContent).toBe(
+    expect(
-      "Something went wrong"
+      queryByTestId(document.body, "message").children[0]
+    ).toHaveTextContent(/Something went wrong/gim);
+    expect(queryByTestId(document.body, "message").children[1]).toBeEmpty(2);
+
+    // Secondary message
+    document.body.innerHTML = renderError(
+      "Something went wrong",
+      "Secondary Message"
     );
+    expect(
+      queryByTestId(document.body, "message").children[1]
+    ).toHaveTextContent(/Secondary Message/gim);
   });
 
   it("should test FlexLayout", () => {
@@ -82,7 +95,7 @@ describe("Test utils.js", () => {
       bgColor: "#fff",
     });
   });
-  
+
   it("getCardColors: should fallback to specified theme colors if is not defined", () => {
     let colors = getCardColors({
       theme: "dark",