Merge branch 'master' of https://github.com/anuraghazra/github-readme-stats

* feat: enable multi-page stars' fetching for private vercel instances

This commit enables multi-page stars' support from fetching on private Vercel
instances. This feature can be disabled on the public Vercel instance by adding
the `FETCH_SINGLE_PAGE_STARS=true` as an env variable in the public Vercel
instance. This variable will not be present when people deploy their own Vercel
instance, causing the code to fetch multiple star pages.

* fix: improve stats multi-page fetching behavoir

This commit makes sure that the GraphQL api is only called one time per
100 repositories. The old method added one unnecesairy GraphQL call.

* docs: update documentation

* style: improve code syntax

Co-authored-by: Matteo Pierro <pierromatteo@gmail.com>

* lol happy new year

* docs: remove rate limit documentation for now

Remove the `FETCH_SINGLE_PAGE_STARS` from documentation for now since it
might confuse people.

* fix: fix error in automatic merge

* feat: make sure  env variable is read

Co-authored-by: Matteo Pierro <pierromatteo@gmail.com>
Co-authored-by: Anurag <hazru.anurag@gmail.com>

api/top-langs.js

@@ -29,6 +29,7 @@ export default async (req, res) => {
     locale,
     border_radius,
     border_color,
+    disable_animations,
   } = req.query;
   res.setHeader("Content-Type", "image/svg+xml");
 
@@ -75,6 +76,7 @@ export default async (req, res) => {
         border_radius,
         border_color,
         locale: locale ? locale.toLowerCase() : null,
+        disable_animations: parseBoolean(disable_animations),
       }),
     );
   } catch (err) {

readme.md

@@ -93,7 +93,7 @@ Visit <https://indiafightscorona.giveindia.org> and make a small donation to hel
     -   [Language Card Exclusive Options](#language-card-exclusive-options)
     -   [Wakatime Card Exclusive Option](#wakatime-card-exclusive-options)
 -   [Deploy Yourself](#deploy-on-your-own-vercel-instance)
-    - [Keep your fork up to date](#keep-your-fork-up-to-date)   
+    -   [Keep your fork up to date](#keep-your-fork-up-to-date)
 
 # GitHub Stats Card
 
@@ -259,12 +259,12 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you
 -   `bg_color` - Card's background color _(hex color)_ **or** a gradient in the form of _angle,start,end_. Default: `fffefe`
 -   `hide_border` - Hides the card's border _(boolean)_. Default: `false`
 -   `theme` - name of the theme, choose from [all available themes](./themes/README.md). Default: `default` theme. 
--   `cache_seconds` - set the cache header manually _(min: 7200, max: 86400)_. Default: `14400 seconds (4 hours)`.
+-   `cache_seconds` - set the cache header manually _(min: 14400, max: 86400)_. Default: `14400 seconds (4 hours)`.
 -   `locale` - set the language in the card _(e.g. cn, de, es, etc.)_. Default: `en`.
 -   `border_radius` - Corner rounding on the card. Default: `4.5`.
 
 > **Warning**
-> We use caching to decrease the load on our servers (see https://github.com/anuraghazra/github-readme-stats/issues/1471#issuecomment-1271551425). Our cards have a default cache of 4 hours (14400 seconds). Also, note that the cache is clamped to a minimum of 4 hours and a maximum of 24 hours.
+> We use caching to decrease the load on our servers (see <https://github.com/anuraghazra/github-readme-stats/issues/1471#issuecomment-1271551425>). Our cards have a default cache of 4 hours (14400 seconds). Also, note that the cache is clamped to a minimum of 4 hours and a maximum of 24 hours.
 
 ##### Gradient in bg_color
 
@@ -304,6 +304,7 @@ You can provide multiple comma-separated values in the bg_color option to render
 -   `langs_count` - Show more languages on the card, between 1-10 _(number)_. Default `5`.
 -   `exclude_repo` - Exclude specified repositories _(Comma-separated values)_. Default: `[] (blank array)`.
 -   `custom_title` - Sets a custom title for the card _(string)_. Default `Most Used Languages`.
+-   `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`.
 
 > **Warning**
 > Language names should be URI-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding)
@@ -353,7 +354,7 @@ Use [show_owner](#customization) variable to include the repo's owner username
 The top languages card shows a GitHub user's most frequently used top language.
 
 > **Note**
-> Top Languages does not indicate my skill level or anything like that; it's a GitHub metric to determine which languages have the most code on GitHub. It is a new feature of github-readme-stats._
+> Top Languages does not indicate my skill level or anything like that; it's a GitHub metric to determine which languages have the most code on GitHub. It is a new feature of github-readme-stats.
 
 ### Usage
 
@@ -497,7 +498,7 @@ By default, GitHub does not lay out the cards side by side. To do that, you can
 
 ## Deploy on your own Vercel instance
 
-#### [Check Out Step By Step Video Tutorial By @codeSTACKr](https://youtu.be/n6d4KHSKqGk?t=107)
+#### :film_projector: [Check Out Step By Step Video Tutorial By @codeSTACKr](https://youtu.be/n6d4KHSKqGk?t=107)
 
 > **Warning**
 > If you are on the [hobby (i.e. free)](https://vercel.com/pricing) Vercel plan, please make sure you change the `maxDuration` parameter in the [vercel.json](https://github.com/anuraghazra/github-readme-stats/blob/master/vercel.json) file from `30` to `10` (see [#1416](https://github.com/anuraghazra/github-readme-stats/issues/1416#issuecomment-950275476) for more information).

scripts/push-theme-readme.sh

@@ -9,6 +9,6 @@ git config --global user.name "GitHub Readme Stats Bot"
 git branch -d $BRANCH_NAME || true
 git checkout -b $BRANCH_NAME
 git add --all
-git commit --message "docs(theme): Auto update theme readme" || exit 0
+git commit --no-verify --message "docs(theme): Auto update theme readme"
 git remote add origin-$BRANCH_NAME https://${PERSONAL_TOKEN}@github.com/${GH_REPO}.git
 git push --force --quiet --set-upstream origin-$BRANCH_NAME $BRANCH_NAME

src/cards/top-languages-card.js

@@ -39,46 +39,53 @@ const getLongestLang = (arr) =>
  * Creates a node to display usage of a programming language in percentage
  * using text and a horizontal progress bar.
  *
- * @param {object[]} props Function properties.
+ * @param {object} props Function properties.
  * @param {number} props.width The card width
  * @param {string} props.name Name of the programming language.
  * @param {string} props.color Color of the programming language.
  * @param {string} props.progress Usage of the programming language in percentage.
+ * @param {number} props.index Index of the programming language.
  * @returns {string} Programming language SVG node.
  */
-const createProgressTextNode = ({ width, color, name, progress }) => {
+const createProgressTextNode = ({ width, color, name, progress, index }) => {
+  const staggerDelay = (index + 3) * 150;
   const paddingRight = 95;
   const progressTextX = width - paddingRight + 10;
   const progressWidth = width - paddingRight;
 
   return `
-    <text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
+    <g class="stagger" style="animation-delay: ${staggerDelay}ms">
-    <text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
+      <text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
-    ${createProgressNode({
+      <text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
-      x: 0,
+      ${createProgressNode({
-      y: 25,
+        x: 0,
-      color,
+        y: 25,
-      width: progressWidth,
+        color,
-      progress,
+        width: progressWidth,
-      progressBarBackgroundColor: "#ddd",
+        progress,
-    })}
+        progressBarBackgroundColor: "#ddd",
+        delay: staggerDelay + 300,
+      })}
+    </g>
   `;
 };
 
 /**
  * Creates a text only node to display usage of a programming language in percentage.
  *
- * @param {object[]} props Function properties.
+ * @param {object} props Function properties.
  * @param {Lang} props.lang Programming language object.
  * @param {number} props.totalSize Total size of all languages.
+ * @param {number} props.index Index of the programming language.
  * @returns {string} Compact layout programming language SVG node.
  */
-const createCompactLangNode = ({ lang, totalSize }) => {
+const createCompactLangNode = ({ lang, totalSize, index }) => {
   const percentage = ((lang.size / totalSize) * 100).toFixed(2);
+  const staggerDelay = (index + 3) * 150;
   const color = lang.color || "#858585";
 
   return `
-    <g>
+    <g class="stagger" style="animation-delay: ${staggerDelay}ms">
       <circle cx="5" cy="6" r="5" fill="${color}" />
       <text data-testid="lang-name" x="15" y="10" class='lang-name'>
         ${lang.name} ${percentage}%
@@ -104,7 +111,6 @@ const createLanguageTextNode = ({ langs, totalSize }) => {
       createCompactLangNode({
         lang,
         totalSize,
-        // @ts-ignore
         index,
       }),
     );
@@ -134,12 +140,13 @@ const createLanguageTextNode = ({ langs, totalSize }) => {
  */
 const renderNormalLayout = (langs, width, totalLanguageSize) => {
   return flexLayout({
-    items: langs.map((lang) => {
+    items: langs.map((lang, index) => {
       return createProgressTextNode({
-        width: width,
+        width,
         name: lang.name,
         color: lang.color || DEFAULT_LANG_COLOR,
         progress: ((lang.size / totalLanguageSize) * 100).toFixed(2),
+        index,
       });
     }),
     gap: 40,
@@ -187,7 +194,7 @@ const renderCompactLayout = (langs, width, totalLanguageSize) => {
 
   return `
     <mask id="rect-mask">
-      <rect x="0" y="0" width="${offsetWidth}" height="8" fill="white" rx="5" />
+      <rect x="0" y="0" width="${offsetWidth}" height="8" fill="white" rx="5"/>
     </mask>
     ${compactProgressBar}
 
@@ -276,6 +283,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     langs_count = DEFAULT_LANGS_COUNT,
     border_radius,
     border_color,
+    disable_animations,
   } = options;
 
   const i18n = new I18n({
@@ -324,11 +332,43 @@ const renderTopLanguages = (topLangs, options = {}) => {
     colors,
   });
 
-  card.disableAnimations();
+  if (disable_animations) card.disableAnimations();
+
   card.setHideBorder(hide_border);
   card.setHideTitle(hide_title);
   card.setCSS(
-    `.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }`,
+    `
+    @keyframes slideInAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: calc(100%-100px);
+      }
+    }
+    @keyframes growWidthAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: 100%;
+      }
+    }
+    .lang-name {
+      font: 400 11px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: ${colors.textColor};
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    #rect-mask rect{
+      animation: slideInAnimation 1s ease-in-out forwards;
+    }
+    .lang-progress{
+      animation: growWidthAnimation 0.6s ease-in-out forwards;
+    }
+    `,
   );
 
   return card.render(`

src/cards/types.d.ts

@@ -37,6 +37,7 @@ export type TopLangOptions = CommonOptions & {
   layout: "compact" | "normal";
   custom_title: string;
   langs_count: number;
+  disable_animations: boolean;
 };
 
 type WakaTimeOptions = CommonOptions & {

src/common/createProgressNode.js

@@ -10,6 +10,7 @@ import { clampValue } from "./utils.js";
  * @param {string} createProgressNodeParams.color Progress color.
  * @param {string} createProgressNodeParams.progress Progress value.
  * @param {string} createProgressNodeParams.progressBarBackgroundColor Progress bar bg color.
+ * @param {number} createProgressNodeParams.delay Delay before animation starts.
  * @returns {string} Progress node.
  */
 const createProgressNode = ({
@@ -19,20 +20,22 @@ const createProgressNode = ({
   color,
   progress,
   progressBarBackgroundColor,
+  delay,
 }) => {
   const progressPercentage = clampValue(progress, 2, 100);
 
   return `
     <svg width="${width}" x="${x}" y="${y}">
       <rect rx="5" ry="5" x="0" y="0" width="${width}" height="8" fill="${progressBarBackgroundColor}"></rect>
-      <rect
+      <svg data-testid="lang-progress" width="${progressPercentage}%">
-          height="8"
+        <rect
-          fill="${color}"
+            height="8"
-          rx="5" ry="5" x="0" y="0"
+            fill="${color}"
-          data-testid="lang-progress"
+            rx="5" ry="5" x="0" y="0"
-          width="${progressPercentage}%"
+            class="lang-progress"
-      >
+            style="animation-delay: ${delay}ms;"
-      </rect>
+        />
+      </svg>
     </svg>
   `;
 };

src/common/retryer.js

@@ -45,7 +45,9 @@ const retryer = async (fetcher, variables, retries = 0) => {
     // prettier-ignore
     // also checking for bad credentials if any tokens gets invalidated
     const isBadCredential = err.response.data && err.response.data.message === "Bad credentials";
-    const isAccountSuspended = err.response.data && err.response.data.message === "Sorry. Your account was suspended.";
+    const isAccountSuspended =
+      err.response.data &&
+      err.response.data.message === "Sorry. Your account was suspended.";
 
     if (isBadCredential || isAccountSuspended) {
       logger.log(`PAT_${retries + 1} Failed`);

src/fetchers/stats-fetcher.js

@@ -1,5 +1,6 @@
 // @ts-check
 import axios from "axios";
+import * as dotenv from "dotenv";
 import githubUsernameRegex from "github-username-regex";
 import { calculateRank } from "../calculateRank.js";
 import { retryer } from "../common/retryer.js";
@@ -11,46 +12,74 @@ import {
   wrapTextMultiline,
 } from "../common/utils.js";
 
+dotenv.config();
+
+// GraphQL queries.
+const GRAPHQL_REPOS_FIELD = `
+  repositories(first: 100, ownerAffiliations: OWNER, orderBy: {direction: DESC, field: STARGAZERS}, after: $after) {
+    totalCount
+    nodes {
+      name
+      stargazers {
+        totalCount
+      }
+    }
+    pageInfo {
+      hasNextPage
+      endCursor
+    }
+  }
+`;
+
+const GRAPHQL_REPOS_QUERY = `
+  query userInfo($login: String!, $after: String) {
+    user(login: $login) {
+      ${GRAPHQL_REPOS_FIELD}
+    }
+  }
+`;
+
+const GRAPHQL_STATS_QUERY = `
+  query userInfo($login: String!, $after: String) {
+    user(login: $login) {
+      name
+      login
+      contributionsCollection {
+        totalCommitContributions
+        restrictedContributionsCount
+      }
+      repositoriesContributedTo(first: 1, contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) {
+        totalCount
+      }
+      pullRequests(first: 1) {
+        totalCount
+      }
+      openIssues: issues(states: OPEN) {
+        totalCount
+      }
+      closedIssues: issues(states: CLOSED) {
+        totalCount
+      }
+      followers {
+        totalCount
+      }
+      ${GRAPHQL_REPOS_FIELD}
+    }
+  }
+`;
+
 /**
  * Stats fetcher object.
  *
  * @param {import('axios').AxiosRequestHeaders} variables Fetcher variables.
  * @param {string} token GitHub token.
- * @returns {Promise<import('../common/types').StatsFetcherResponse>} Stats fetcher response.
+ * @returns {Promise<import('../common/types').Fetcher>} Stats fetcher response.
  */
 const fetcher = (variables, token) => {
+  const query = !variables.after ? GRAPHQL_STATS_QUERY : GRAPHQL_REPOS_QUERY;
   return request(
     {
-      query: `
+      query,
-      query userInfo($login: String!) {
-        user(login: $login) {
-          name
-          login
-          contributionsCollection {
-            totalCommitContributions
-            restrictedContributionsCount
-          }
-          repositoriesContributedTo(contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) {
-            totalCount
-          }
-          pullRequests {
-            totalCount
-          }
-          openIssues: issues(states: OPEN) {
-            totalCount
-          }
-          closedIssues: issues(states: CLOSED) {
-            totalCount
-          }
-          followers {
-            totalCount
-          }
-          repositories(ownerAffiliations: OWNER) {
-            totalCount
-          }
-        }
-      }
-      `,
       variables,
     },
     {
@@ -60,39 +89,42 @@ const fetcher = (variables, token) => {
 };
 
 /**
- * Fetch first 100 repositories for a given username.
+ * Fetch stats information for a given username.
  *
- * @param {import('axios').AxiosRequestHeaders} variables Fetcher variables.
+ * @param {string} username Github username.
- * @param {string} token GitHub token.
+ * @returns {Promise<import('../common/types').StatsFetcher>} GraphQL Stats object.
- * @returns {Promise<import('../common/types').StatsFetcherResponse>} Repositories fetcher response.
+ *
+ * @description This function supports multi-page fetching if the 'FETCH_MULTI_PAGE_STARS' environment variable is set to true.
  */
-const repositoriesFetcher = (variables, token) => {
+const statsFetcher = async (username) => {
-  return request(
+  let stats;
-    {
+  let hasNextPage = true;
-      query: `
+  let endCursor = null;
-      query userInfo($login: String!, $after: String) {
+  while (hasNextPage) {
-        user(login: $login) {
+    const variables = { login: username, first: 100, after: endCursor };
-          repositories(first: 100, ownerAffiliations: OWNER, orderBy: {direction: DESC, field: STARGAZERS}, after: $after) {
+    let res = await retryer(fetcher, variables);
-            nodes {
+    if (res.data.errors) return res;
-              name
+
-              stargazers {
+    // Store stats data.
-                totalCount
+    const repoNodes = res.data.data.user.repositories.nodes;
-              }
+    if (!stats) {
-            }
+      stats = res;
-            pageInfo {
+    } else {
-              hasNextPage
+      stats.data.data.user.repositories.nodes.push(...repoNodes);
-              endCursor
+    }
-            }
+
-          }
+    // Disable multi page fetching on public Vercel instance due to rate limits.
-        }
+    const repoNodesWithStars = repoNodes.filter(
-      }
+      (node) => node.stargazers.totalCount !== 0,
-      `,
+    );
-      variables,
+    hasNextPage =
-    },
+      process.env.FETCH_MULTI_PAGE_STARS === "true" &&
-    {
+      repoNodes.length === repoNodesWithStars.length &&
-      Authorization: `bearer ${token}`,
+      res.data.data.user.repositories.pageInfo.hasNextPage;
-    },
+    endCursor = res.data.data.user.repositories.pageInfo.endCursor;
-  );
+  }
+
+  return stats;
 };
 
 /**
@@ -137,46 +169,6 @@ const totalCommitsFetcher = async (username) => {
   return 0;
 };
 
-/**
- * Fetch all the stars for all the repositories of a given username.
- *
- * @param {string} username GitHub username.
- * @param {array} repoToHide Repositories to hide.
- * @returns {Promise<number>} Total stars.
- */
-const totalStarsFetcher = async (username, repoToHide) => {
-  let nodes = [];
-  let hasNextPage = true;
-  let endCursor = null;
-  while (hasNextPage) {
-    const variables = { login: username, first: 100, after: endCursor };
-    let res = await retryer(repositoriesFetcher, variables);
-
-    if (res.data.errors) {
-      logger.error(res.data.errors);
-      throw new CustomError(
-        res.data.errors[0].message || "Could not fetch user",
-        CustomError.USER_NOT_FOUND,
-      );
-    }
-
-    const allNodes = res.data.data.user.repositories.nodes;
-    const nodesWithStars = allNodes.filter(
-      (node) => node.stargazers.totalCount !== 0,
-    );
-    nodes.push(...nodesWithStars);
-    // hasNextPage =
-    //   allNodes.length === nodesWithStars.length &&
-    //   res.data.data.user.repositories.pageInfo.hasNextPage;
-    hasNextPage = false; // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
-    endCursor = res.data.data.user.repositories.pageInfo.endCursor;
-  }
-
-  return nodes
-    .filter((data) => !repoToHide[data.name])
-    .reduce((prev, curr) => prev + curr.stargazers.totalCount, 0);
-};
-
 /**
  * Fetch stats for a given username.
  *
@@ -203,7 +195,7 @@ const fetchStats = async (
     rank: { level: "C", score: 0 },
   };
 
-  let res = await retryer(fetcher, { login: username });
+  let res = await statsFetcher(username);
 
   // Catch GraphQL errors.
   if (res.data.errors) {
@@ -259,8 +251,15 @@ const fetchStats = async (
   stats.contributedTo = user.repositoriesContributedTo.totalCount;
 
   // Retrieve stars while filtering out repositories to be hidden
-  stats.totalStars = await totalStarsFetcher(username, repoToHide);
+  stats.totalStars = user.repositories.nodes
+    .filter((data) => {
+      return !repoToHide[data.name];
+    })
+    .reduce((prev, curr) => {
+      return prev + curr.stargazers.totalCount;
+    }, 0);
 
+  // @ts-ignore // TODO: Fix this.
   stats.rank = calculateRank({
     totalCommits: stats.totalCommits,
     totalRepos: user.repositories.totalCount,

tests/api.test.js

@@ -25,7 +25,7 @@ stats.rank = calculateRank({
   issues: stats.totalIssues,
 });
 
-const data = {
+const data_stats = {
   data: {
     user: {
       name: stats.name,
@@ -40,15 +40,6 @@ const data = {
       followers: { totalCount: 0 },
       repositories: {
         totalCount: 1,
-      },
-    },
-  },
-};
-
-const repositoriesData = {
-  data: {
-    user: {
-      repositories: {
         nodes: [{ stargazers: { totalCount: 100 } }],
         pageInfo: {
           hasNextPage: false,
@@ -83,11 +74,7 @@ const faker = (query, data) => {
     setHeader: jest.fn(),
     send: jest.fn(),
   };
-  mock
+  mock.onPost("https://api.github.com/graphql").replyOnce(200, data);
-    .onPost("https://api.github.com/graphql")
-    .replyOnce(200, data)
-    .onPost("https://api.github.com/graphql")
-    .replyOnce(200, repositoriesData);
 
   return { req, res };
 };
@@ -98,7 +85,7 @@ afterEach(() => {
 
 describe("Test /api/", () => {
   it("should test the request", async () => {
-    const { req, res } = faker({}, data);
+    const { req, res } = faker({}, data_stats);
 
     await api(req, res);
 
@@ -133,7 +120,7 @@ describe("Test /api/", () => {
         text_color: "fff",
         bg_color: "fff",
       },
-      data,
+      data_stats,
     );
 
     await api(req, res);
@@ -154,7 +141,7 @@ describe("Test /api/", () => {
   });
 
   it("should have proper cache", async () => {
-    const { req, res } = faker({}, data);
+    const { req, res } = faker({}, data_stats);
 
     await api(req, res);
 
@@ -170,7 +157,7 @@ describe("Test /api/", () => {
   });
 
   it("should set proper cache", async () => {
-    const { req, res } = faker({ cache_seconds: 15000 }, data);
+    const { req, res } = faker({ cache_seconds: 15000 }, data_stats);
     await api(req, res);
 
     expect(res.setHeader.mock.calls).toEqual([
@@ -196,7 +183,7 @@ describe("Test /api/", () => {
 
   it("should set proper cache with clamped values", async () => {
     {
-      let { req, res } = faker({ cache_seconds: 200000 }, data);
+      let { req, res } = faker({ cache_seconds: 200000 }, data_stats);
       await api(req, res);
 
       expect(res.setHeader.mock.calls).toEqual([
@@ -212,7 +199,7 @@ describe("Test /api/", () => {
 
     // note i'm using block scoped vars
     {
-      let { req, res } = faker({ cache_seconds: 0 }, data);
+      let { req, res } = faker({ cache_seconds: 0 }, data_stats);
       await api(req, res);
 
       expect(res.setHeader.mock.calls).toEqual([
@@ -227,7 +214,7 @@ describe("Test /api/", () => {
     }
 
     {
-      let { req, res } = faker({ cache_seconds: -10000 }, data);
+      let { req, res } = faker({ cache_seconds: -10000 }, data_stats);
       await api(req, res);
 
       expect(res.setHeader.mock.calls).toEqual([
@@ -248,7 +235,7 @@ describe("Test /api/", () => {
         username: "anuraghazra",
         count_private: true,
       },
-      data,
+      data_stats,
     );
 
     await api(req, res);
@@ -288,7 +275,7 @@ describe("Test /api/", () => {
         text_color: "fff",
         bg_color: "fff",
       },
-      data,
+      data_stats,
     );
 
     await api(req, res);

tests/e2e/e2e.test.js

@@ -11,27 +11,22 @@ import { renderStatsCard } from "../../src/cards/stats-card.js";
 import { renderTopLanguages } from "../../src/cards/top-languages-card.js";
 import { renderWakatimeCard } from "../../src/cards/wakatime-card.js";
 
-const REPO = "dummy-cra";
+const REPO = "curly-fiesta";
-const USER = "grsdummy";
+const USER = "catelinemnemosyne";
 const STATS_DATA = {
-  name: "grsdummy",
+  name: "Cateline Mnemosyne",
-  totalPRs: 2,
+  totalPRs: 1,
-  totalCommits: 2,
+  totalCommits: 7,
   totalIssues: 1,
   totalStars: 1,
-  contributedTo: 2,
+  contributedTo: 1,
   rank: {
     level: "A+",
-    score: 50.900829325065935,
+    score: 50.893750297869225,
   },
 };
 
 const LANGS_DATA = {
-  TypeScript: {
-    color: "#3178c6",
-    name: "TypeScript",
-    size: 2049,
-  },
   HTML: {
     color: "#e34c26",
     name: "HTML",
@@ -42,19 +37,19 @@ const LANGS_DATA = {
     name: "CSS",
     size: 930,
   },
-  Python: {
+  JavaScript: {
-    color: "#3572A5",
+    color: "#f1e05a",
-    name: "Python",
+    name: "JavaScript",
-    size: 671,
+    size: 1912,
   },
 };
 
 const WAKATIME_DATA = {
   human_readable_range: "last week",
   is_already_updating: false,
-  is_coding_activity_visible: false,
+  is_coding_activity_visible: true,
   is_including_today: false,
-  is_other_usage_visible: false,
+  is_other_usage_visible: true,
   is_stuck: false,
   is_up_to_date: false,
   is_up_to_date_pending_future: false,
@@ -62,24 +57,24 @@ const WAKATIME_DATA = {
   range: "last_7_days",
   status: "pending_update",
   timeout: 15,
-  username: "grsdummy",
+  username: USER,
   writes_only: false,
 };
 
 const REPOSITORY_DATA = {
-  name: "dummy-cra",
+  name: REPO,
-  nameWithOwner: "grsdummy/dummy-cra",
+  nameWithOwner: `${USER}/cra-test`,
   isPrivate: false,
   isArchived: false,
   isTemplate: false,
   stargazers: {
     totalCount: 1,
   },
-  description: "Dummy create react app.",
+  description: "Simple cra test repo.",
   primaryLanguage: {
-    color: "#3178c6",
+    color: "#f1e05a",
-    id: "MDg6TGFuZ3VhZ2UyODc=",
+    id: "MDg6TGFuZ3VhZ2UxNDA=",
-    name: "TypeScript",
+    name: "JavaScript",
   },
   forkCount: 0,
   starCount: 1,

tests/fetchStats.test.js

@@ -4,7 +4,8 @@ import MockAdapter from "axios-mock-adapter";
 import { calculateRank } from "../src/calculateRank.js";
 import { fetchStats } from "../src/fetchers/stats-fetcher.js";
 
-const data = {
+// Test parameters.
+const data_stats = {
   data: {
     user: {
       name: "Anurag Hazra",
@@ -19,15 +20,6 @@ const data = {
       followers: { totalCount: 100 },
       repositories: {
         totalCount: 5,
-      },
-    },
-  },
-};
-
-const firstRepositoriesData = {
-  data: {
-    user: {
-      repositories: {
         nodes: [
           { name: "test-repo-1", stargazers: { totalCount: 100 } },
           { name: "test-repo-2", stargazers: { totalCount: 100 } },
@@ -42,7 +34,7 @@ const firstRepositoriesData = {
   },
 };
 
-const secondRepositoriesData = {
+const data_repo = {
   data: {
     user: {
       repositories: {
@@ -59,7 +51,7 @@ const secondRepositoriesData = {
   },
 };
 
-const repositoriesWithZeroStarsData = {
+const data_repo_zero_stars = {
   data: {
     user: {
       repositories: {
@@ -93,13 +85,12 @@ const error = {
 const mock = new MockAdapter(axios);
 
 beforeEach(() => {
+  process.env.FETCH_MULTI_PAGE_STARS = "false"; // Set to `false` to fetch only one page of stars.
   mock
     .onPost("https://api.github.com/graphql")
-    .replyOnce(200, data)
+    .replyOnce(200, data_stats)
     .onPost("https://api.github.com/graphql")
-    .replyOnce(200, firstRepositoriesData);
+    .replyOnce(200, data_repo);
-  // .onPost("https://api.github.com/graphql") // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
-  // .replyOnce(200, secondRepositoriesData); // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
 });
 
 afterEach(() => {
@@ -114,8 +105,7 @@ describe("Test fetchStats", () => {
       totalRepos: 5,
       followers: 100,
       contributions: 61,
-      // stargazers: 400, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
+      stargazers: 300,
-      stargazers: 300, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
       prs: 300,
       issues: 200,
     });
@@ -126,8 +116,7 @@ describe("Test fetchStats", () => {
       totalCommits: 100,
       totalIssues: 200,
       totalPRs: 300,
-      // totalStars: 400, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
+      totalStars: 300,
-      totalStars: 300, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
       rank,
     });
   });
@@ -136,9 +125,9 @@ describe("Test fetchStats", () => {
     mock.reset();
     mock
       .onPost("https://api.github.com/graphql")
-      .replyOnce(200, data)
+      .replyOnce(200, data_stats)
       .onPost("https://api.github.com/graphql")
-      .replyOnce(200, repositoriesWithZeroStarsData);
+      .replyOnce(200, data_repo_zero_stars);
 
     let stats = await fetchStats("anuraghazra");
     const rank = calculateRank({
@@ -178,8 +167,7 @@ describe("Test fetchStats", () => {
       totalRepos: 5,
       followers: 100,
       contributions: 61,
-      // stargazers: 400, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
+      stargazers: 300,
-      stargazers: 300, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
       prs: 300,
       issues: 200,
     });
@@ -190,8 +178,7 @@ describe("Test fetchStats", () => {
       totalCommits: 150,
       totalIssues: 200,
       totalPRs: 300,
-      // totalStars: 400, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
+      totalStars: 300,
-      totalStars: 300, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
       rank,
     });
   });
@@ -207,8 +194,7 @@ describe("Test fetchStats", () => {
       totalRepos: 5,
       followers: 100,
       contributions: 61,
-      // stargazers: 400, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
+      stargazers: 300,
-      stargazers: 300, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
       prs: 300,
       issues: 200,
     });
@@ -219,8 +205,7 @@ describe("Test fetchStats", () => {
       totalCommits: 1050,
       totalIssues: 200,
       totalPRs: 300,
-      // totalStars: 400, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
+      totalStars: 300,
-      totalStars: 300, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
       rank,
     });
   });
@@ -236,8 +221,7 @@ describe("Test fetchStats", () => {
       totalRepos: 5,
       followers: 100,
       contributions: 61,
-      // stargazers: 300, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
+      stargazers: 200,
-      stargazers: 200, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
       prs: 300,
       issues: 200,
     });
@@ -248,8 +232,82 @@ describe("Test fetchStats", () => {
       totalCommits: 1050,
       totalIssues: 200,
       totalPRs: 300,
-      // totalStars: 300, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
+      totalStars: 200,
-      totalStars: 200, // NOTE: Temporarily disable fetching of multiple pages. Done because of #2130.
+      rank,
+    });
+  });
+
+  it("should fetch two pages of stars if 'FETCH_MULTI_PAGE_STARS' env variable is set to `true`", async () => {
+    process.env.FETCH_MULTI_PAGE_STARS = true;
+
+    let stats = await fetchStats("anuraghazra");
+    const rank = calculateRank({
+      totalCommits: 100,
+      totalRepos: 5,
+      followers: 100,
+      contributions: 61,
+      stargazers: 400,
+      prs: 300,
+      issues: 200,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 100,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalStars: 400,
+      rank,
+    });
+  });
+
+  it("should fetch one page of stars if 'FETCH_MULTI_PAGE_STARS' env variable is set to `false`", async () => {
+    process.env.FETCH_MULTI_PAGE_STARS = "false";
+
+    let stats = await fetchStats("anuraghazra");
+    const rank = calculateRank({
+      totalCommits: 100,
+      totalRepos: 5,
+      followers: 100,
+      contributions: 61,
+      stargazers: 300,
+      prs: 300,
+      issues: 200,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 100,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalStars: 300,
+      rank,
+    });
+  });
+
+  it("should fetch one page of stars if 'FETCH_MULTI_PAGE_STARS' env variable is not set", async () => {
+    process.env.FETCH_MULTI_PAGE_STARS = undefined;
+
+    let stats = await fetchStats("anuraghazra");
+    const rank = calculateRank({
+      totalCommits: 100,
+      totalRepos: 5,
+      followers: 100,
+      contributions: 61,
+      stargazers: 300,
+      prs: 300,
+      issues: 200,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 100,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalStars: 300,
       rank,
     });
   });