From 5ed75e11be00cf14a11ec2e33af8df116012fbe6 Mon Sep 17 00:00:00 2001 From: Joydip Roy Date: Thu, 23 Jul 2020 13:05:50 +0530 Subject: [PATCH] feat: added isTemplate badge & refactored console.logs (#146) * feat: template option added husky added for same commit disable console in test \ logger utils added env checked for log modified git ignore * changed are done as per the suggesstion * changed style and font * text color dynamic * fix border and using .bagde class as common * simplified the badge svg code through a common method * chore: updated css & fixed tests Co-authored-by: anuraghazra --- .gitignore | 2 ++ api/pin.js | 5 +++-- package.json | 6 ++++++ src/fetchRepo.js | 1 + src/fetchStats.js | 4 ++-- src/fetchTopLanguages.js | 4 ++-- src/renderRepoCard.js | 35 ++++++++++++++++++++++++---------- src/retryer.js | 8 +++++--- src/utils.js | 5 +++++ tests/pin.test.js | 1 + tests/renderRepoCard.test.js | 37 +++++++++++++++++++++++------------- tests/retryer.test.js | 3 ++- 12 files changed, 78 insertions(+), 33 deletions(-) diff --git a/.gitignore b/.gitignore index 00b4859..b8b9cf0 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,6 @@ .env node_modules package-lock.json +*.lock +.vscode/ coverage diff --git a/api/pin.js b/api/pin.js index ad24b05..da7e9a7 100644 --- a/api/pin.js +++ b/api/pin.js @@ -4,6 +4,7 @@ const { parseBoolean, clampValue, CONSTANTS, + logger, } = require("../src/utils"); const fetchRepo = require("../src/fetchRepo"); const renderRepoCard = require("../src/renderRepoCard"); @@ -28,7 +29,7 @@ module.exports = async (req, res) => { try { repoData = await fetchRepo(username, repo); } catch (err) { - console.log(err); + logger.error(err); return res.send(renderError(err.message)); } @@ -52,7 +53,7 @@ module.exports = async (req, res) => { } res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`); - + res.send( renderRepoCard(repoData, { title_color, diff --git a/package.json b/package.json index c3a7935..7c113bb 100644 --- a/package.json +++ b/package.json @@ -15,9 +15,15 @@ "axios": "^0.19.2", "axios-mock-adapter": "^1.18.1", "css-to-object": "^1.1.0", + "husky": "^4.2.5", "jest": "^26.1.0" }, "dependencies": { "dotenv": "^8.2.0" + }, + "husky": { + "hooks": { + "pre-commit": "npm test" + } } } diff --git a/src/fetchRepo.js b/src/fetchRepo.js index 0c730ea..9c74b49 100644 --- a/src/fetchRepo.js +++ b/src/fetchRepo.js @@ -10,6 +10,7 @@ const fetcher = (variables, token) => { nameWithOwner isPrivate isArchived + isTemplate stargazers { totalCount } diff --git a/src/fetchStats.js b/src/fetchStats.js index 24ecfa9..ea6010f 100644 --- a/src/fetchStats.js +++ b/src/fetchStats.js @@ -1,4 +1,4 @@ -const { request } = require("./utils"); +const { request, logger } = require("./utils"); const retryer = require("./retryer"); const calculateRank = require("./calculateRank"); require("dotenv").config(); @@ -61,7 +61,7 @@ async function fetchStats(username) { let res = await retryer(fetcher, { login: username }); if (res.data.errors) { - console.log(res.data.errors); + logger.error(res.data.errors); throw Error(res.data.errors[0].message || "Could not fetch user"); } diff --git a/src/fetchTopLanguages.js b/src/fetchTopLanguages.js index 95c9b48..4fdf798 100644 --- a/src/fetchTopLanguages.js +++ b/src/fetchTopLanguages.js @@ -1,4 +1,4 @@ -const { request } = require("./utils"); +const { request, logger } = require("./utils"); const retryer = require("./retryer"); require("dotenv").config(); @@ -38,7 +38,7 @@ async function fetchTopLanguages(username) { let res = await retryer(fetcher, { login: username }); if (res.data.errors) { - console.log(res.data.errors); + logger.error(res.data.errors); throw Error(res.data.errors[0].message || "Could not fetch user"); } diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js index 50b3004..cd8b050 100644 --- a/src/renderRepoCard.js +++ b/src/renderRepoCard.js @@ -14,6 +14,7 @@ const renderRepoCard = (repo, options = {}) => { primaryLanguage, stargazers, isArchived, + isTemplate, forkCount, } = repo; const { @@ -49,14 +50,20 @@ const renderRepoCard = (repo, options = {}) => { const totalStars = kFormatter(stargazers.totalCount); const totalForks = kFormatter(forkCount); - const archiveBadge = isArchived - ? ` - + const getBadgeSVG = (label) => ` + - Archived + + ${label} + - ` - : ""; + `; const svgLanguage = ` @@ -90,17 +97,25 @@ const renderRepoCard = (repo, options = {}) => { .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} } .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} } .icon { fill: ${iconColor} } - .archive-badge { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; } - .archive-badge rect { opacity: 0.2 } + .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; } + .badge rect { opacity: 0.2 } + ${icons.contribs} - ${archiveBadge} - ${header} + + ${ + isTemplate + ? getBadgeSVG("Template") + : isArchived + ? getBadgeSVG("Archived") + : "" + } + ${encodeHTML(desc)} ${svgLanguage} diff --git a/src/retryer.js b/src/retryer.js index b62bd8a..97a607e 100644 --- a/src/retryer.js +++ b/src/retryer.js @@ -1,9 +1,11 @@ +const { logger } = require("./utils"); + const retryer = async (fetcher, variables, retries = 0) => { if (retries > 7) { throw new Error("Maximum retries exceeded"); } try { - console.log(`Trying PAT_${retries + 1}`); + logger.log(`Trying PAT_${retries + 1}`); // try to fetch with the first token since RETRIES is 0 index i'm adding +1 let response = await fetcher( @@ -18,7 +20,7 @@ const retryer = async (fetcher, variables, retries = 0) => { // if rate limit is hit increase the RETRIES and recursively call the retryer // with username, and current RETRIES if (isRateExceeded) { - console.log(`PAT_${retries + 1} Failed`); + logger.log(`PAT_${retries + 1} Failed`); retries++; // directly return from the function return retryer(fetcher, variables, retries); @@ -32,7 +34,7 @@ const retryer = async (fetcher, variables, retries = 0) => { const isBadCredential = err.response.data && err.response.data.message === "Bad credentials"; if (isBadCredential) { - console.log(`PAT_${retries + 1} Failed`); + logger.log(`PAT_${retries + 1} Failed`); retries++; // directly return from the function return retryer(fetcher, variables, retries); diff --git a/src/utils.js b/src/utils.js index fd51eed..e03f37b 100644 --- a/src/utils.js +++ b/src/utils.js @@ -116,6 +116,10 @@ function getCardColors({ return { titleColor, iconColor, textColor, bgColor }; } +const fn = () => {}; +// return console instance based on the environment +const logger = process.env.NODE_ENV !== "test" ? console : { log: fn, error: fn }; + const CONSTANTS = { THIRTY_MINUTES: 1800, TWO_HOURS: 7200, @@ -133,5 +137,6 @@ module.exports = { FlexLayout, getCardColors, clampValue, + logger, CONSTANTS, }; diff --git a/tests/pin.test.js b/tests/pin.test.js index 3f61135..580fcba 100644 --- a/tests/pin.test.js +++ b/tests/pin.test.js @@ -17,6 +17,7 @@ const data_repo = { name: "TypeScript", }, forkCount: 100, + isTemplate: false }, }; diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js index dafa979..a07bc15 100644 --- a/tests/renderRepoCard.test.js +++ b/tests/renderRepoCard.test.js @@ -217,17 +217,6 @@ describe("Test renderRepoCard", () => { ); }); - it("should render archive badge if repo is archived", () => { - document.body.innerHTML = renderRepoCard({ - ...data_repo.repository, - isArchived: true, - }); - - expect(queryByTestId(document.body, "archive-badge")).toHaveTextContent( - "Archived" - ); - }); - it("should not render star count or fork count if either of the are zero", () => { document.body.innerHTML = renderRepoCard({ ...data_repo.repository, @@ -235,7 +224,7 @@ describe("Test renderRepoCard", () => { }); expect(queryByTestId(document.body, "stargazers")).toBeNull(); - expect(queryByTestId(document.body, "forkcount")).toBeDefined(); + expect(queryByTestId(document.body, "forkcount")).toBeInTheDocument(); document.body.innerHTML = renderRepoCard({ ...data_repo.repository, @@ -243,7 +232,7 @@ describe("Test renderRepoCard", () => { forkCount: 0, }); - expect(queryByTestId(document.body, "stargazers")).toBeDefined(); + expect(queryByTestId(document.body, "stargazers")).toBeInTheDocument(); expect(queryByTestId(document.body, "forkcount")).toBeNull(); document.body.innerHTML = renderRepoCard({ @@ -255,4 +244,26 @@ describe("Test renderRepoCard", () => { expect(queryByTestId(document.body, "stargazers")).toBeNull(); expect(queryByTestId(document.body, "forkcount")).toBeNull(); }); + + it("should render badges", () => { + document.body.innerHTML = renderRepoCard({ + ...data_repo.repository, + isArchived: true, + }); + + expect(queryByTestId(document.body, "badge")).toHaveTextContent("Archived"); + + document.body.innerHTML = renderRepoCard({ + ...data_repo.repository, + isTemplate: true, + }); + expect(queryByTestId(document.body, "badge")).toHaveTextContent("Template"); + }); + + it("should not render template", () => { + document.body.innerHTML = renderRepoCard({ + ...data_repo.repository, + }); + expect(queryByTestId(document.body, "badge")).toBeNull(); + }); }); diff --git a/tests/retryer.test.js b/tests/retryer.test.js index 8b8a928..90efb2e 100644 --- a/tests/retryer.test.js +++ b/tests/retryer.test.js @@ -1,8 +1,9 @@ require("@testing-library/jest-dom"); const retryer = require("../src/retryer"); +const { logger } = require("../src/utils"); const fetcher = jest.fn((variables, token) => { - console.log(variables, token); + logger.log(variables, token); return new Promise((res, rej) => res({ data: "ok" })); });