fix: langs_count overflow when hide is set (#989)

api/top-langs.js

@@ -46,7 +46,6 @@ module.exports = async (req, res) => {
   try {
     topLangs = await fetchTopLanguages(
       username,
-      langs_count,
       parseArray(exclude_repo),
       parseArray(hide),
     );
@@ -71,6 +70,7 @@ module.exports = async (req, res) => {
         bg_color,
         theme,
         layout,
+        langs_count,
         border_radius,
         border_color,
         locale: locale ? locale.toLowerCase() : null,

src/cards/top-languages-card.js

@@ -1,5 +1,5 @@
 const Card = require("../common/Card");
-const { getCardColors, FlexLayout } = require("../common/utils");
+const { clampValue, getCardColors, FlexLayout } = require("../common/utils");
 const { createProgressNode } = require("../common/createProgressNode");
 const { langCardLocales } = require("../translations");
 const I18n = require("../common/I18n");
@@ -73,8 +73,9 @@ const renderTopLanguages = (topLangs, options = {}) => {
     layout,
     custom_title,
     locale,
+    langs_count = 5,
     border_radius,
-    border_color,
+    border_color
   } = options;
 
   const i18n = new I18n({
@@ -85,6 +86,8 @@ const renderTopLanguages = (topLangs, options = {}) => {
   let langs = Object.values(topLangs);
   let langsToHide = {};
 
+  langsCount = clampValue(parseInt(langs_count), 1, 10);
+
   // populate langsToHide map for quick lookup
   // while filtering out
   if (hide) {
@@ -98,7 +101,8 @@ const renderTopLanguages = (topLangs, options = {}) => {
     .sort((a, b) => b.size - a.size)
     .filter((lang) => {
       return !langsToHide[lowercaseTrim(lang.name)];
-    });
+    })
+    .slice(0, langsCount);
 
   const totalLanguageSize = langs.reduce((acc, curr) => {
     return acc + curr.size;

src/fetchers/top-languages-fetcher.js

@@ -36,13 +36,10 @@ const fetcher = (variables, token) => {
 
 async function fetchTopLanguages(
   username,
-  langsCount = 5,
   exclude_repo = [],
   hide = [],
 ) {
   if (!username) throw Error("Invalid username");
-  langsCount = parseInt(langsCount) + hide.length;
-  langsCount = clampValue(langsCount, 1, 10 + hide.length);
 
   const res = await retryer(fetcher, { login: username });
 
@@ -97,7 +94,6 @@ async function fetchTopLanguages(
 
   const topLangs = Object.keys(repoNodes)
     .sort((a, b) => repoNodes[b].size - repoNodes[a].size)
-    .slice(0, langsCount)
     .reduce((result, key) => {
       result[key] = repoNodes[key];
       return result;

tests/fetchTopLanguages.test.js

@@ -74,19 +74,6 @@ describe("FetchTopLanguages", () => {
     });
   });
 
-  it("should fetch langs with specified langs_count", async () => {
-    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
-
-    let repo = await fetchTopLanguages("anuraghazra", 1);
-    expect(repo).toStrictEqual({
-      javascript: {
-        color: "#0ff",
-        name: "javascript",
-        size: 200,
-      },
-    });
-  });
-
   it("should throw error", async () => {
     mock.onPost("https://api.github.com/graphql").reply(200, error);
 

tests/renderTopLanguages.test.js

@@ -1,5 +1,6 @@
 require("@testing-library/jest-dom");
 const cssToObject = require("css-to-object");
+const fetchTopLanguages = require("../src/fetchers/top-languages-fetcher");
 const renderTopLanguages = require("../src/cards/top-languages-card");
 
 const { queryByTestId, queryAllByTestId } = require("@testing-library/dom");
@@ -230,4 +231,22 @@ describe("Test renderTopLanguages", () => {
     document.body.innerHTML = renderTopLanguages(langs, { });
     expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
   });
+
+  it("should render langs with specified langs_count", async () => {
+    options = {
+      langs_count: 1
+    }
+    document.body.innerHTML = renderTopLanguages(langs, { ...options });
+    expect(queryAllByTestId(document.body, "lang-name").length).toBe(options.langs_count)
+  });
+
+  it("should render langs with specified langs_count even when hide is set", async () => {
+    options = {
+      hide: ["HTML"],
+      langs_count: 2
+    }
+    document.body.innerHTML = renderTopLanguages(langs, { ...options });
+    expect(queryAllByTestId(document.body, "lang-name").length).toBe(options.langs_count)
+  });
+
 });