refactor: refactor repo card (#1325)

* refactor: refactored repo-card

* test: fix tests

* test: fixed tests

* fix: unprovided description error

tests/fetchRepo.test.js

@@ -19,14 +19,14 @@ const data_repo = {
 
 const data_user = {
   data: {
-    user: { repository: data_repo },
+    user: { repository: data_repo.repository },
     organization: null,
   },
 };
 const data_org = {
   data: {
     user: null,
-    organization: { repository: data_repo },
+    organization: { repository: data_repo.repository },
   },
 };
 
@@ -41,14 +41,21 @@ describe("Test fetchRepo", () => {
     mock.onPost("https://api.github.com/graphql").reply(200, data_user);
 
     let repo = await fetchRepo("anuraghazra", "convoychat");
-    expect(repo).toStrictEqual(data_repo);
+
+    expect(repo).toStrictEqual({
+      ...data_repo.repository,
+      starCount: data_repo.repository.stargazers.totalCount,
+    });
   });
 
   it("should fetch correct org repo", async () => {
     mock.onPost("https://api.github.com/graphql").reply(200, data_org);
 
     let repo = await fetchRepo("anuraghazra", "convoychat");
-    expect(repo).toStrictEqual(data_repo);
+    expect(repo).toStrictEqual({
+      ...data_repo.repository,
+      starCount: data_repo.repository.stargazers.totalCount,
+    });
   });
 
   it("should throw error if user is found but repo is null", async () => {

tests/pin.test.js

@@ -9,7 +9,9 @@ const data_repo = {
   repository: {
     username: "anuraghazra",
     name: "convoychat",
-    stargazers: { totalCount: 38000 },
+    stargazers: {
+      totalCount: 38000,
+    },
     description: "Help us take over the world! React + TS + GraphQL Chat App",
     primaryLanguage: {
       color: "#2b7489",
@@ -51,7 +53,12 @@ describe("Test /api/pin", () => {
     await pin(req, res);
 
     expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toBeCalledWith(renderRepoCard(data_repo.repository));
+    expect(res.send).toBeCalledWith(
+      renderRepoCard({
+        ...data_repo.repository,
+        starCount: data_repo.repository.stargazers.totalCount,
+      }),
+    );
   });
 
   it("should get the query options", async () => {
@@ -76,7 +83,13 @@ describe("Test /api/pin", () => {
 
     expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
     expect(res.send).toBeCalledWith(
-      renderRepoCard(data_repo.repository, { ...req.query }),
+      renderRepoCard(
+        {
+          ...data_repo.repository,
+          starCount: data_repo.repository.stargazers.totalCount,
+        },
+        { ...req.query },
+      ),
     );
   });
 

tests/renderRepoCard.test.js

@@ -9,13 +9,13 @@ const data_repo = {
   repository: {
     nameWithOwner: "anuraghazra/convoychat",
     name: "convoychat",
-    stargazers: { totalCount: 38000 },
     description: "Help us take over the world! React + TS + GraphQL Chat App",
     primaryLanguage: {
       color: "#2b7489",
       id: "MDg6TGFuZ3VhZ2UyODc=",
       name: "TypeScript",
     },
+    starCount: 38000,
     forkCount: 100,
   },
 };
@@ -231,7 +231,7 @@ describe("Test renderRepoCard", () => {
   it("should not render star count or fork count if either of the are zero", () => {
     document.body.innerHTML = renderRepoCard({
       ...data_repo.repository,
-      stargazers: { totalCount: 0 },
+      starCount: 0,
     });
 
     expect(queryByTestId(document.body, "stargazers")).toBeNull();
@@ -239,7 +239,7 @@ describe("Test renderRepoCard", () => {
 
     document.body.innerHTML = renderRepoCard({
       ...data_repo.repository,
-      stargazers: { totalCount: 1 },
+      starCount: 1,
       forkCount: 0,
     });
 
@@ -248,7 +248,7 @@ describe("Test renderRepoCard", () => {
 
     document.body.innerHTML = renderRepoCard({
       ...data_repo.repository,
-      stargazers: { totalCount: 0 },
+      starCount: 0,
       forkCount: 0,
     });
 
@@ -311,4 +311,15 @@ describe("Test renderRepoCard", () => {
     document.body.innerHTML = renderRepoCard(data_repo.repository, {});
     expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
   });
+
+  it("should fallback to default description", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      description: undefined,
+      isArchived: true,
+    });
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "No description provided",
+    );
+  });
 });