Skip to content

Commit a841f3c

Browse files
committed
refactor: improve code and added tests
1 parent 89f7b6c commit a841f3c

File tree

6 files changed

+67
-42
lines changed

6 files changed

+67
-42
lines changed

src/cards/top-languages-card.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,18 @@ const Card = require("../common/Card");
22
const I18n = require("../common/I18n");
33
const { langCardLocales } = require("../translations");
44
const { createProgressNode } = require("../common/createProgressNode");
5-
const { clampValue, getCardColors, flexLayout } = require("../common/utils");
5+
const {
6+
clampValue,
7+
getCardColors,
8+
flexLayout,
9+
lowercaseTrim,
10+
} = require("../common/utils");
611

712
const DEFAULT_CARD_WIDTH = 300;
813
const DEFAULT_LANGS_COUNT = 5;
914
const DEFAULT_LANG_COLOR = "#858585";
1015
const CARD_PADDING = 25;
1116

12-
const lowercaseTrim = (name) => name.toLowerCase().trim();
13-
1417
const createProgressTextNode = ({ width, color, name, progress }) => {
1518
const paddingRight = 95;
1619
const progressTextX = width - paddingRight + 10;

src/cards/wakatime-card.js

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@ const { getStyles } = require("../getStyles");
44
const { wakatimeCardLocales } = require("../translations");
55
const languageColors = require("../common/languageColors.json");
66
const { createProgressNode } = require("../common/createProgressNode");
7-
const { clampValue, getCardColors, flexLayout } = require("../common/utils");
7+
const {
8+
clampValue,
9+
getCardColors,
10+
flexLayout,
11+
lowercaseTrim,
12+
} = require("../common/utils");
813

914
const noCodingActivityNode = ({ color, text }) => {
1015
return `
@@ -61,34 +66,37 @@ const createTextNode = ({
6166
const cardProgress = hideProgress
6267
? null
6368
: createProgressNode({
64-
x: 110,
65-
y: 4,
66-
progress: percent,
67-
color: progressBarColor,
68-
width: 220,
69-
name: label,
70-
progressBarBackgroundColor,
71-
});
69+
x: 110,
70+
y: 4,
71+
progress: percent,
72+
color: progressBarColor,
73+
width: 220,
74+
name: label,
75+
progressBarBackgroundColor,
76+
});
7277

7378
return `
7479
<g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
75-
<text class="stat bold" y="12.5">${label}:</text>
80+
<text class="stat bold" y="12.5" data-testid="${id}">${label}:</text>
7681
<text
7782
class="stat"
7883
x="${hideProgress ? 170 : 350}"
7984
y="12.5"
80-
data-testid="${id}"
8185
>${value}</text>
8286
${cardProgress}
8387
</g>
8488
`;
8589
};
8690

8791
const recalculatePercentages = (languages) => {
88-
let totalSum = 0;
89-
languages.forEach(language => totalSum += language.percent);
92+
// recalculating percentages so that,
93+
// compact layout's progress bar does not break when hiding languages
94+
const totalSum = languages.reduce(
95+
(totalSum, language) => totalSum + language.percent,
96+
0,
97+
);
9098
const weight = (100 / totalSum).toFixed(2);
91-
languages.forEach(language => {
99+
languages.forEach((language) => {
92100
language.percent = (language.percent * weight).toFixed(2);
93101
});
94102
};
@@ -114,9 +122,12 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
114122
border_color,
115123
} = options;
116124

117-
if (Array.isArray(hide) && hide.length > 0) {
118-
const lowercase_hide = new Set(hide.map(lang => lang.trim().toLowerCase()));
119-
languages = languages.filter(lang => !lowercase_hide.has(lang.name.trim().toLowerCase()));
125+
const shouldHideLangs = Array.isArray(hide) && hide.length > 0;
126+
if (shouldHideLangs) {
127+
const languagesToHide = new Set(hide.map((lang) => lowercaseTrim(lang)));
128+
languages = languages.filter(
129+
(lang) => !languagesToHide.has(lowercaseTrim(lang.name)),
130+
);
120131
recalculatePercentages(languages);
121132
}
122133

@@ -147,8 +158,8 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
147158

148159
const filteredLanguages = languages
149160
? languages
150-
.filter((language) => language.hours || language.minutes)
151-
.slice(0, langsCount)
161+
.filter((language) => language.hours || language.minutes)
162+
.slice(0, langsCount)
152163
: [];
153164

154165
// Calculate the card height depending on how many items there are
@@ -202,17 +213,16 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
202213
</mask>
203214
${compactProgressBar}
204215
${createLanguageTextNode({
205-
x: 0,
206-
y: 25,
207-
langs: filteredLanguages,
208-
totalSize: 100,
209-
}).join("")}
216+
x: 0,
217+
y: 25,
218+
langs: filteredLanguages,
219+
totalSize: 100,
220+
}).join("")}
210221
`;
211222
} else {
212223
finalLayout = flexLayout({
213224
items: filteredLanguages.length
214-
? filteredLanguages
215-
.map((language) => {
225+
? filteredLanguages.map((language) => {
216226
return createTextNode({
217227
id: language.name,
218228
label: language.name,
@@ -224,11 +234,11 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
224234
});
225235
})
226236
: [
227-
noCodingActivityNode({
228-
color: textColor,
229-
text: i18n.t("wakatimecard.nocodingactivity"),
230-
}),
231-
],
237+
noCodingActivityNode({
238+
color: textColor,
239+
text: i18n.t("wakatimecard.nocodingactivity"),
240+
}),
241+
],
232242
gap: lheight,
233243
direction: "column",
234244
}).join("");

src/common/utils.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@ function measureText(str, fontSize = 10) {
230230
.reduce((cur, acc) => acc + cur) * fontSize
231231
);
232232
}
233+
const lowercaseTrim = (name) => name.toLowerCase().trim();
233234

234235
module.exports = {
235236
renderError,
@@ -248,4 +249,5 @@ module.exports = {
248249
logger,
249250
CONSTANTS,
250251
CustomError,
252+
lowercaseTrim,
251253
};

tests/__snapshots__/renderWakatimeCard.test.js.snap

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,11 @@ exports[`Test Render Wakatime Card should render correctly 1`] = `
9999
<svg x=\\"0\\" y=\\"0\\" width=\\"100%\\">
100100
<g transform=\\"translate(0, 0)\\">
101101
<g class=\\"stagger\\" style=\\"animation-delay: NaNms\\" transform=\\"translate(25, 0)\\">
102-
<text class=\\"stat bold\\" y=\\"12.5\\">Other:</text>
102+
<text class=\\"stat bold\\" y=\\"12.5\\" data-testid=\\"Other\\">Other:</text>
103103
<text
104104
class=\\"stat\\"
105105
x=\\"350\\"
106106
y=\\"12.5\\"
107-
data-testid=\\"Other\\"
108107
>19 mins</text>
109108
110109
<svg width=\\"220\\" x=\\"110\\" y=\\"4\\">
@@ -122,12 +121,11 @@ exports[`Test Render Wakatime Card should render correctly 1`] = `
122121
</g>
123122
</g><g transform=\\"translate(0, 25)\\">
124123
<g class=\\"stagger\\" style=\\"animation-delay: NaNms\\" transform=\\"translate(25, 0)\\">
125-
<text class=\\"stat bold\\" y=\\"12.5\\">TypeScript:</text>
124+
<text class=\\"stat bold\\" y=\\"12.5\\" data-testid=\\"TypeScript\\">TypeScript:</text>
126125
<text
127126
class=\\"stat\\"
128127
x=\\"350\\"
129128
y=\\"12.5\\"
130-
data-testid=\\"TypeScript\\"
131129
>1 min</text>
132130
133131
<svg width=\\"220\\" x=\\"110\\" y=\\"4\\">

tests/renderTopLanguages.test.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
require("@testing-library/jest-dom");
22
const cssToObject = require("css-to-object");
3-
const fetchTopLanguages = require("../src/fetchers/top-languages-fetcher");
43
const renderTopLanguages = require("../src/cards/top-languages-card");
54

65
const { queryByTestId, queryAllByTestId } = require("@testing-library/dom");

tests/renderWakatimeCard.test.js

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
require("@testing-library/jest-dom");
2-
const renderWakatimeCard = require("../src/cards/wakatime-card");
2+
const { queryByTestId } = require("@testing-library/dom");
33

4+
const renderWakatimeCard = require("../src/cards/wakatime-card");
45
const { wakaTimeData } = require("./fetchWakatime.test");
56

67
describe("Test Render Wakatime Card", () => {
@@ -16,6 +17,16 @@ describe("Test Render Wakatime Card", () => {
1617
expect(card).toMatchSnapshot();
1718
});
1819

20+
it("should hide languages when hide is passed", () => {
21+
document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, {
22+
hide: ["YAML", "Other"],
23+
});
24+
25+
expect(queryByTestId(document.body, /YAML/i)).toBeNull();
26+
expect(queryByTestId(document.body, /Other/i)).toBeNull();
27+
expect(queryByTestId(document.body, /TypeScript/i)).not.toBeNull();
28+
});
29+
1930
it("should render translations", () => {
2031
document.body.innerHTML = renderWakatimeCard({}, { locale: "cn" });
2132
expect(document.getElementsByClassName("header")[0].textContent).toBe(
@@ -28,9 +39,11 @@ describe("Test Render Wakatime Card", () => {
2839
});
2940

3041
it("should render without rounding", () => {
31-
document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, { border_radius: "0" });
42+
document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, {
43+
border_radius: "0",
44+
});
3245
expect(document.querySelector("rect")).toHaveAttribute("rx", "0");
33-
document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, { });
46+
document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, {});
3447
expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
3548
});
3649
});

0 commit comments

Comments
 (0)