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

fix: languages color fallback & hide lang if not present

Author: anuraghazra

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 = {}) => {
     </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>
 

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);