fix: fix bugs and add tests

rickstaa · rickstaa · commit a732a27d8d33 · 2023-10-16T11:07:23.000+02:00
diff --git a/api/pin.js b/api/pin.js
@@ -24,7 +24,7 @@ export default async (req, res) => {
     locale,
     border_radius,
     border_color,
-    card_width, // Add the card-width option
+    card_width,
   } = req.query;
 
   res.setHeader("Content-Type", "image/svg+xml");
@@ -81,7 +81,7 @@ export default async (req, res) => {
         border_color,
         show_owner: parseBoolean(show_owner),
         locale: locale ? locale.toLowerCase() : null,
-        card_width: parseInt(card_width) || undefined, // Use the specified card width
+        card_width: parseInt(card_width, 10),
       }),
     );
   } catch (err) {
diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js
@@ -15,6 +15,8 @@ import {
 } from "../common/utils.js";
 import { repoCardLocales } from "../translations.js";
 
+const DEFAULT_CARD_WIDTH = 300;
+const MIN_CARD_WIDTH = 280;
 const ICON_SIZE = 16;
 
 /**
@@ -49,8 +51,6 @@ const getBadgeSVG = (label, textColor) => `
  *
  * @param {RepositoryData} repo Repository data.
  * @param {Partial<RepoCardOptions>} options Card options.
- * @param {number} card_width The width of the card.
- * @param {number} card_height The height of the card.
  * @returns {string} Repository card SVG object.
  */
 const renderRepoCard = (repo, options = {}) => {
@@ -76,7 +76,6 @@ const renderRepoCard = (repo, options = {}) => {
     border_color,
     locale,
     card_width,
-    card_height,
   } = options;
 
   const lineHeight = 10;
@@ -91,13 +90,21 @@ const renderRepoCard = (repo, options = {}) => {
     .map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
     .join("");
 
-  const height = card_height || (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
-
   const i18n = new I18n({
     locale,
     translations: repoCardLocales,
   });
 
+  let width = card_width
+    ? isNaN(card_width)
+      ? DEFAULT_CARD_WIDTH
+      : card_width < MIN_CARD_WIDTH
+        ? MIN_CARD_WIDTH
+        : card_width
+    : DEFAULT_CARD_WIDTH;
+  const height =
+    (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
+
   // returns theme based colors with proper overrides and defaults
   const colors = getCardColors({
     title_color,
@@ -118,13 +125,13 @@ const renderRepoCard = (repo, options = {}) => {
     icons.star,
     totalStars,
     "stargazers",
-    ICON_SIZE
+    ICON_SIZE,
   );
   const svgForks = iconWithLabel(
     icons.fork,
     totalForks,
     "forkcount",
-    ICON_SIZE
+    ICON_SIZE,
   );
 
   const starAndForkCount = flexLayout({
@@ -137,40 +144,6 @@ const renderRepoCard = (repo, options = {}) => {
     gap: 25,
   }).join("");
 
-  // Calculate the card width and height based on the provided arguments or defaults;
-  
-  const width = card_width || 400;
-  const CARD_MIN_WIDTH = 287;
-  const CARD_DEFAULT_WIDTH = 287;
-  const RANK_CARD_MIN_WIDTH = 420;
-  const RANK_CARD_DEFAULT_WIDTH = 450;
-  const RANK_ONLY_CARD_MIN_WIDTH = 290;
-  const RANK_ONLY_CARD_DEFAULT_WIDTH = 290;
-    const minCardWidth =
-    (hide_rank
-      ? clampValue(
-          50 /* padding */ + calculateTextWidth() * 2,
-          CARD_MIN_WIDTH,
-          Infinity,
-        )
-      : statItems.length
-      ? RANK_CARD_MIN_WIDTH
-      : RANK_ONLY_CARD_MIN_WIDTH) + iconWidth;
-  const defaultCardWidth =
-    (hide_rank
-      ? CARD_DEFAULT_WIDTH
-      : statItems.length
-      ? RANK_CARD_DEFAULT_WIDTH
-      : RANK_ONLY_CARD_DEFAULT_WIDTH) + iconWidth;
-  let width = card_width
-    ? isNaN(card_width)
-      ? defaultCardWidth
-      : card_width
-    : defaultCardWidth;
-  if (width < minCardWidth) {
-    width = minCardWidth;
-  }
-
   const card = new Card({
     defaultTitle: header.length > 35 ? `${header.slice(0, 35)}...` : header,
     titlePrefixIcon: icons.contribs,
@@ -192,13 +165,12 @@ const renderRepoCard = (repo, options = {}) => {
   `);
 
   return card.render(`
-    ${
-      isTemplate
-        ? // @ts-ignore
-          getBadgeSVG(i18n.t("repocard.template"), colors.textColor)
-        : isArchived
+    ${isTemplate
+      ? // @ts-ignore
+      getBadgeSVG(i18n.t("repocard.template"), colors.textColor)
+      : isArchived
         ? // @ts-ignore
-          getBadgeSVG(i18n.t("repocard.archived"), colors.textColor)
+        getBadgeSVG(i18n.t("repocard.archived"), colors.textColor)
         : ""
     }
 
@@ -212,5 +184,5 @@ const renderRepoCard = (repo, options = {}) => {
   `);
 };
 
-export { renderRepoCard };
+export { renderRepoCard, DEFAULT_CARD_WIDTH, MIN_CARD_WIDTH };
 export default renderRepoCard;
diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js
@@ -541,5 +541,5 @@ const renderStatsCard = (stats, options = {}) => {
   `);
 };
 
-export { renderStatsCard };
+export { renderStatsCard, RANK_CARD_DEFAULT_WIDTH, RANK_CARD_MIN_WIDTH };
 export default renderStatsCard;
diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js
@@ -431,7 +431,7 @@ const renderDonutVerticalLayout = (langs, totalLanguageSize) => {
 
     circles.push(`
       <g class="stagger" style="animation-delay: ${delay}ms">
-        <circle 
+        <circle
           cx="150"
           cy="100"
           r="${radius}"
@@ -885,6 +885,7 @@ export {
   donutCenterTranslation,
   trimTopLanguages,
   renderTopLanguages,
+  DEFAULT_CARD_WIDTH,
   MIN_CARD_WIDTH,
   getDefaultLanguagesCountByLayout,
 };
diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts
@@ -32,6 +32,7 @@ export type StatCardOptions = CommonOptions & {
 
 export type RepoCardOptions = CommonOptions & {
   show_owner: boolean;
+  card_width: number;
 };
 
 export type TopLangOptions = CommonOptions & {
diff --git a/tests/pin.test.js b/tests/pin.test.js
@@ -73,6 +73,7 @@ describe("Test /api/pin", () => {
         text_color: "fff",
         bg_color: "fff",
         full_name: "1",
+        card_width: 100,
       },
     };
     const res = {
diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js
@@ -1,7 +1,11 @@
 import { queryByTestId } from "@testing-library/dom";
 import "@testing-library/jest-dom";
 import { cssToObject } from "@uppercod/css-to-object";
-import { renderRepoCard } from "../src/cards/repo-card.js";
+import {
+  renderRepoCard,
+  DEFAULT_CARD_WIDTH,
+  MIN_CARD_WIDTH,
+} from "../src/cards/repo-card.js";
 import { expect, it, describe } from "@jest/globals";
 
 import { themes } from "../themes/index.js";
@@ -338,4 +342,56 @@ describe("Test renderRepoCard", () => {
       "No description provided",
     );
   });
+
+  it("should render with custom width set", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      description: undefined,
+      isArchived: true,
+    });
+
+    expect(document.querySelector("svg")).toHaveAttribute(
+      "width",
+      DEFAULT_CARD_WIDTH.toString(),
+    );
+
+    document.body.innerHTML = renderRepoCard(
+      {
+        ...data_repo.repository,
+        description: undefined,
+        isArchived: true,
+      },
+      { card_width: 400 },
+    );
+    expect(document.querySelector("svg")).toHaveAttribute("width", "400");
+  });
+
+  it("should render with min width", () => {
+    document.body.innerHTML = renderRepoCard(
+      {
+        ...data_repo.repository,
+        description: undefined,
+        isArchived: true,
+      },
+      { card_width: 190 },
+    );
+
+    expect(document.querySelector("svg")).toHaveAttribute(
+      "width",
+      MIN_CARD_WIDTH.toString(),
+    );
+
+    document.body.innerHTML = renderRepoCard(
+      {
+        ...data_repo.repository,
+        description: undefined,
+        isArchived: true,
+      },
+      { card_width: 100 },
+    );
+    expect(document.querySelector("svg")).toHaveAttribute(
+      "width",
+      MIN_CARD_WIDTH.toString(),
+    );
+  });
 });
diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js
@@ -4,7 +4,11 @@ import {
   queryByTestId,
 } from "@testing-library/dom";
 import { cssToObject } from "@uppercod/css-to-object";
-import { renderStatsCard } from "../src/cards/stats-card.js";
+import {
+  renderStatsCard,
+  RANK_CARD_DEFAULT_WIDTH,
+  RANK_CARD_MIN_WIDTH,
+} from "../src/cards/stats-card.js";
 import { expect, it, describe } from "@jest/globals";
 import { CustomError } from "../src/common/utils.js";
 
@@ -131,15 +135,21 @@ describe("Test renderStatsCard", () => {
 
   it("should render with custom width set", () => {
     document.body.innerHTML = renderStatsCard(stats);
-    expect(document.querySelector("svg")).toHaveAttribute("width", "450");
+    expect(document.querySelector("svg")).toHaveAttribute(
+      "width",
+      RANK_CARD_DEFAULT_WIDTH.toString(),
+    );
 
     document.body.innerHTML = renderStatsCard(stats, { card_width: 500 });
     expect(document.querySelector("svg")).toHaveAttribute("width", "500");
   });
 
   it("should render with custom width set and limit minimum width", () => {
     document.body.innerHTML = renderStatsCard(stats, { card_width: 1 });
-    expect(document.querySelector("svg")).toHaveAttribute("width", "420");
+    expect(document.querySelector("svg")).toHaveAttribute(
+      "width",
+      RANK_CARD_MIN_WIDTH.toString(),
+    );
 
     // Test default minimum card width without rank circle.
     document.body.innerHTML = renderStatsCard(stats, {
diff --git a/tests/renderTopLanguagesCard.test.js b/tests/renderTopLanguagesCard.test.js
@@ -15,6 +15,7 @@ import {
   donutCenterTranslation,
   trimTopLanguages,
   renderTopLanguages,
+  DEFAULT_CARD_WIDTH,
   MIN_CARD_WIDTH,
   getDefaultLanguagesCountByLayout,
 } from "../src/cards/top-languages-card.js";
@@ -428,7 +429,10 @@ describe("Test renderTopLanguages", () => {
   it("should render with custom width set", () => {
     document.body.innerHTML = renderTopLanguages(langs, {});
 
-    expect(document.querySelector("svg")).toHaveAttribute("width", "300");
+    expect(document.querySelector("svg")).toHaveAttribute(
+      "width",
+      DEFAULT_CARD_WIDTH.toString(),
+    );
 
     document.body.innerHTML = renderTopLanguages(langs, { card_width: 400 });
     expect(document.querySelector("svg")).toHaveAttribute("width", "400");
