avior/codestats-readme
1
0
Fork 0
mirror of https://github.com/Aviortheking/codestats-readme.git synced 2025-04-22 10:42:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #156 from anuraghazra/fix-repo-lang-fallback

Browse Source 
fix: languages color fallback & hide lang if not present
This commit is contained in:
Anurag Hazra 2020-07-23 13:52:17 +05:30 committed by GitHub
commit 1c4cb84916
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/renderRepoCard.js
View File

@ -27,8 +27,8 @@ const renderRepoCard = (repo, options = {}) => {
} = options; } = options;
const header = show_owner ? nameWithOwner : name; const header = show_owner ? nameWithOwner : name;
const langName = primaryLanguage ? primaryLanguage.name : "Unspecified"; const langName = (primaryLanguage && primaryLanguage.name) || "Unspecified";
const langColor = primaryLanguage ? primaryLanguage.color : "#333"; const langColor = (primaryLanguage && primaryLanguage.color) || "#333";
const height = 120; const height = 120;
const shiftText = langName.length > 15 ? 0 : 30; const shiftText = langName.length > 15 ? 0 : 30;
@ -65,12 +65,14 @@ const renderRepoCard = (repo, options = {}) => {
</g> </g>
`; `;
const svgLanguage = ` const svgLanguage = primaryLanguage
<g transform="translate(30, 100)"> ? `
<g data-testid="primary-lang" transform="translate(30, 100)">
<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" /> <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
<text data-testid="lang" class="gray" x="15">${langName}</text> <text data-testid="lang-name" class="gray" x="15">${langName}</text>
</g> </g>
`; `
: "";
const svgStars = const svgStars =
stargazers.totalCount > 0 && stargazers.totalCount > 0 &&
@ -120,7 +122,7 @@ const renderRepoCard = (repo, options = {}) => {
${svgLanguage} ${svgLanguage}
<g transform="translate(${155 - shiftText}, 100)"> <g transform="translate(${primaryLanguage ? 155 - shiftText : 25}, 100)">
${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")} ${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")}
</g> </g>

27
tests/renderRepoCard.test.js
View File

@ -33,7 +33,7 @@ describe("Test renderRepoCard", () => {
); );
expect(queryByTestId(document.body, "stargazers")).toHaveTextContent("38k"); expect(queryByTestId(document.body, "stargazers")).toHaveTextContent("38k");
expect(queryByTestId(document.body, "forkcount")).toHaveTextContent("100"); expect(queryByTestId(document.body, "forkcount")).toHaveTextContent("100");
expect(queryByTestId(document.body, "lang")).toHaveTextContent( expect(queryByTestId(document.body, "lang-name")).toHaveTextContent(
"TypeScript" "TypeScript"
); );
expect(queryByTestId(document.body, "lang-color")).toHaveAttribute( expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
@ -82,6 +82,7 @@ describe("Test renderRepoCard", () => {
}, },
}); });
expect(queryByTestId(document.body, "primary-lang")).toBeInTheDocument();
expect(document.getElementsByTagName("g")[1]).toHaveAttribute( expect(document.getElementsByTagName("g")[1]).toHaveAttribute(
"transform", "transform",
"translate(155, 100)" "translate(155, 100)"
@ -102,6 +103,30 @@ describe("Test renderRepoCard", () => {
); );
}); });
it("should hide language if primaryLanguage is null & fallback to correct values", () => {
document.body.innerHTML = renderRepoCard({
...data_repo.repository,
primaryLanguage: null,
});
expect(queryByTestId(document.body, "primary-lang")).toBeNull();
document.body.innerHTML = renderRepoCard({
...data_repo.repository,
primaryLanguage: { color: null, name: null },
});
expect(queryByTestId(document.body, "primary-lang")).toBeInTheDocument();
expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
"fill",
"#333"
);
expect(queryByTestId(document.body, "lang-name")).toHaveTextContent(
"Unspecified"
);
});
it("should render default colors properly", () => { it("should render default colors properly", () => {
document.body.innerHTML = renderRepoCard(data_repo.repository); document.body.innerHTML = renderRepoCard(data_repo.repository);