tiennm99/github-readme-stats
1
0
Fork 0
mirror of https://github.com/tiennm99/github-readme-stats.git synced 2026-08-09 00:25:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix #1170: Allow customizable width for GitHub Stats Card (#1334)

Browse Source 
* Change default stats card width with hide rank

* Add tests for stats card with card_width

* Add card_width Stats Card description to readme

* fix: add icon width to stats-card min width calculation

* fix: fixes rank circle padding problem

This commit fixes a padding problem that was introduced in
f9c0e0bff64f325235ccbf936c9d5f7a918ac790. In the new code, the padding
around the rank circle will be 50 when the stats card is bigger than
450. When it is smaller than 450 the left and right padding will shrink
equally.

* style: run prettier

* tests: add extra stats 'card_width' tests

This commit makes sure we also test the stats card width for the case that the 'show_icons'
option is enabled.

* style: run prettier

Co-authored-by: rickstaa <rick.staa@outlook.com>
This commit is contained in:
Artem Kostiuk
2022-09-16 12:50:30 +02:00
committed by GitHub
co-authored by rickstaa
parent 192170c111
commit b0bb994ad3
4 changed files with 108 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/renderStatsCard.test.js
+46
View File
@@ -75,6 +75,52 @@ describe("Test renderStatsCard", () => {
expect(queryByTestId(document.body, "rank-circle")).not.toBeInTheDocument();
});
it("should render with custom width set", () => {
document.body.innerHTML = renderStatsCard(stats);
expect(document.querySelector("svg")).toHaveAttribute("width", "495");
document.body.innerHTML = renderStatsCard(stats, { card_width: 400 });
expect(document.querySelector("svg")).toHaveAttribute("width", "400");
});
it("should render with custom width set and limit minimum width", () => {
document.body.innerHTML = renderStatsCard(stats, { card_width: 1 });
expect(document.querySelector("svg")).toHaveAttribute("width", "340");
document.body.innerHTML = renderStatsCard(stats, {
card_width: 1,
hide_rank: true,
});
expect(document.querySelector("svg")).toHaveAttribute(
"width",
"305.81250000000006",
);
document.body.innerHTML = renderStatsCard(stats, {
card_width: 1,
hide_rank: true,
show_icons: true,
});
expect(document.querySelector("svg")).toHaveAttribute(
"width",
"305.81250000000006",
);
document.body.innerHTML = renderStatsCard(stats, {
card_width: 1,
hide_rank: false,
show_icons: true,
});
expect(document.querySelector("svg")).toHaveAttribute("width", "356");
document.body.innerHTML = renderStatsCard(stats, {
card_width: 1,
hide_rank: false,
show_icons: false,
});
expect(document.querySelector("svg")).toHaveAttribute("width", "340");
});
it("should render default colors properly", () => {
document.body.innerHTML = renderStatsCard(stats);