add image-preview tests

src/common/Card.js

@@ -218,8 +218,8 @@ class Card {
       return "";
     }
     return `
-    <g transform="translate(0, 0)">
-    <image x="0" y="0" height="${this.imageHeight}"
+    <g data-testid="card-image" transform="translate(0, 0)">
+    <image x="0" y="0" width="${this.width}" height="${this.imageHeight}"
       href="${this.imageUrl}">
     </image>
   </g>`;

tests/renderRepoCard.test.js

@@ -18,6 +18,8 @@ const data_repo = {
     },
     starCount: 38000,
     forkCount: 100,
+    openGraphImageUrl:
+      "https://repository-images.githubusercontent.com/266996769/1e4f2180-b194-11ea-9806-2395601f119b",
   },
 };
 
@@ -339,4 +341,21 @@ describe("Test renderRepoCard", () => {
       "No description provided",
     );
   });
+
+  it("should render repo's social preview image, when show_image is true", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      show_image: true,
+    });
+
+    expect(queryByTestId(document.body, "card-image")).toBeInTheDocument();
+    expect(
+      queryByTestId(document.body, "card-image").children[0],
+    ).toHaveAttribute("href", data_repo.repository.openGraphImageUrl);
+  });
+
+  it("should not render repo's social preview image by default", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository);
+
+    expect(queryByTestId(document.body, "card-image")).not.toBeInTheDocument();
+  });
 });