feat: multiline text in repo description (#206)

* Enable multi line repo card descriptions

* Adjust unit tests to multi line descriptions

* refactor: refactored code & fixed tests

* style: minor height adjustments

* chore: codecov stuck

Co-authored-by: anuraghazra <hazru.anurag@gmail.com>

tests/renderRepoCard.test.js

@@ -29,7 +29,7 @@ describe("Test renderRepoCard", () => {
     expect(header).toHaveTextContent("convoychat");
     expect(header).not.toHaveTextContent("anuraghazra");
     expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
-      "Help us take over the world! React + TS + GraphQL Chat .."
+      "Help us take over the world! React + TS + GraphQL Chat App"
     );
     expect(queryByTestId(document.body, "stargazers")).toHaveTextContent("38k");
     expect(queryByTestId(document.body, "forkcount")).toHaveTextContent("100");
@@ -55,12 +55,16 @@ describe("Test renderRepoCard", () => {
     document.body.innerHTML = renderRepoCard({
       ...data_repo.repository,
       description:
-        "Very long long long long long long long long text it should trim it",
+        "The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all of the letters of the English alphabet",
     });
 
-    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
-      "Very long long long long long long long long text it sh.."
-    );
+    expect(
+      document.getElementsByClassName("description")[0].children[0].textContent
+    ).toBe("The quick brown fox jumps over the lazy dog is an");
+
+    expect(
+      document.getElementsByClassName("description")[0].children[1].textContent
+    ).toBe("English-language pangram—a sentence that contains all");
 
     // Should not trim
     document.body.innerHTML = renderRepoCard({
@@ -95,9 +99,9 @@ describe("Test renderRepoCard", () => {
     });
 
     expect(queryByTestId(document.body, "primary-lang")).toBeInTheDocument();
-    expect(document.getElementsByTagName("g")[1]).toHaveAttribute(
+    expect(queryByTestId(document.body, "star-fork-group")).toHaveAttribute(
       "transform",
-      "translate(155, 100)"
+      "translate(155, 0)"
     );
 
     // Small lang
@@ -109,9 +113,9 @@ describe("Test renderRepoCard", () => {
       },
     });
 
-    expect(document.getElementsByTagName("g")[1]).toHaveAttribute(
+    expect(queryByTestId(document.body, "star-fork-group")).toHaveAttribute(
       "transform",
-      "translate(125, 100)"
+      "translate(125, 0)"
     );
   });
 

tests/utils.test.js

@@ -5,6 +5,7 @@ const {
   renderError,
   FlexLayout,
   getCardColors,
+  wrapTextMultiline,
 } = require("../src/utils");
 
 const { queryByTestId } = require("@testing-library/dom");
@@ -108,3 +109,28 @@ describe("Test utils.js", () => {
     });
   });
 });
+
+describe("wrapTextMultiline", () => {
+  it("should not wrap small texts", () => {
+    {
+      let multiLineText = wrapTextMultiline("Small text should not wrap");
+      expect(multiLineText).toEqual(["Small text should not wrap"]);
+    }
+  });
+  it("should wrap large texts", () => {
+    let multiLineText = wrapTextMultiline(
+      "Hello world long long long text",
+      20,
+      3
+    );
+    expect(multiLineText).toEqual(["Hello world long", "long long text"]);
+  });
+  it("should wrap large texts and limit max lines", () => {
+    let multiLineText = wrapTextMultiline(
+      "Hello world long long long text",
+      10,
+      2
+    );
+    expect(multiLineText).toEqual(["Hello", "world long..."]);
+  });
+});