avior/codestats-readme
1
0
Fork 0
mirror of https://github.com/Aviortheking/codestats-readme.git synced 2025-08-05 02:11:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

tests: added tests for renderTopLanguages & top-langs

Browse Source
This commit is contained in:
anuraghazra
2020-07-21 18:04:58 +05:30
parent b50555ad9a
commit 7c104cf8c5
4 changed files with 367 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/renderTopLanguages.js
View File

@@ -7,17 +7,31 @@ const createProgressNode = ({ width, color, name, progress }) => {
const progressPercentage = clampValue(progress, 2, 100);
return `
<text x="2" y="15" class="lang-name">${name}</text>
<text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
<text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
<svg width="${progressWidth}">
<rect rx="5" ry="5" x="0" y="25" width="${progressWidth}" height="8" fill="#ddd"></rect>
<rect rx="5" ry="5" x="0" y="25" width="${progressPercentage}%" height="8" fill="${color}"></rect>
<rect
height="8"
fill="${color}"
rx="5" ry="5" x="0" y="25"
data-testid="lang-progress"
width="${progressPercentage}%"
>
</rect>
</svg>
`;
};
const renderTopLanguages = (topLangs, options = {}) => {
const { title_color, text_color, bg_color, theme, card_width } = options;
const {
hide_title,
card_width,
title_color,
text_color,
bg_color,
theme,
} = options;
const langs = Object.values(topLangs);
@@ -34,8 +48,11 @@ const renderTopLanguages = (topLangs, options = {}) => {
});
const width = isNaN(card_width) ? 300 : card_width;
const height = 45 + (langs.length + 1) * 40;
let height = 45 + (langs.length + 1) * 40;
if (hide_title) {
height -= 30;
}
return `
<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@@ -44,9 +61,14 @@ const renderTopLanguages = (topLangs, options = {}) => {
</style>
<rect data-testid="card-bg" x="0.5" y="0.5" width="99.7%" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
<text x="25" y="35" class="header">Top Languages</text>
${
hide_title
? ""
: `<text data-testid="header" x="25" y="35" class="header">Top Languages</text>`
}
<svg x="25" y="55">
<svg data-testid="lang-items" x="25" y="${hide_title ? 25 : 55}">
${FlexLayout({
items: langs.map((lang) => {
return createProgressNode({
@@ -58,7 +80,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
}),
gap: 40,
direction: "column",
})}
}).join("")}
</svg>
</svg>
`;