fix: fix bugs and add tests

anuraghazra · Oct 16, 2023 · 49b72b8 · 49b72b8
1 parent 18db53d
commit 49b72b8
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 51 deletions.
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 = 400;
 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,
@@ -212,5 +185,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");