diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js index cd8b050..9caf807 100644 --- a/src/renderRepoCard.js +++ b/src/renderRepoCard.js @@ -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 = {}) => { `; - const svgLanguage = ` - + const svgLanguage = primaryLanguage + ? ` + - ${langName} + ${langName} - `; + ` + : ""; const svgStars = stargazers.totalCount > 0 && @@ -120,7 +122,7 @@ const renderRepoCard = (repo, options = {}) => { ${svgLanguage} - + ${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")} diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js index a07bc15..6730940 100644 --- a/tests/renderRepoCard.test.js +++ b/tests/renderRepoCard.test.js @@ -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);