fix: languages color fallback & hide lang if not present

This commit is contained in:
anuraghazra 2020-07-23 13:41:37 +05:30
parent 5ed75e11be
commit d394add560
2 changed files with 35 additions and 8 deletions

View File

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

View File

@ -33,7 +33,7 @@ describe("Test renderRepoCard", () => {
);
expect(queryByTestId(document.body, "stargazers")).toHaveTextContent("38k");
expect(queryByTestId(document.body, "forkcount")).toHaveTextContent("100");
expect(queryByTestId(document.body, "lang")).toHaveTextContent(
expect(queryByTestId(document.body, "lang-name")).toHaveTextContent(
"TypeScript"
);
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(
"transform",
"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", () => {
document.body.innerHTML = renderRepoCard(data_repo.repository);