test: test rewardBadges

Author: igorntwari

__tests__/components/badges/RewardBadges.test.tsx

@@ -0,0 +1,30 @@
+import "@testing-library/jest-dom";
+import RewardBadge from "@/components/badges/RewardBadge";
+import { render, screen } from "@testing-library/react";
+import Coin from "@/components/ui/Coin";
+
+describe("RewardBadges", () => {
+  it("should render  rewardBadges", () => {
+    render(<RewardBadge />);
+    const rewardBadge = screen.getByTestId("RewardBadge");
+    expect(rewardBadge).toBeInTheDocument();
+  });
+
+  it("should render rewardBadges with coins", () => {
+    render(<RewardBadge />);
+    render(<Coin />);
+    const rewardBadge = screen.queryByTestId("RewardBadge");
+    const coin = screen.getByTestId("coin");
+    expect(rewardBadge).toBeInTheDocument();
+    expect(coin).toBeInTheDocument();
+  });
+  it("should render rewardBadges with amount and token", () => {
+    render(<RewardBadge reward={{ token: "BTC", amount: 1000 }} displayAmount={true} />);
+    const rewardBadge = screen.getByTestId("RewardBadge");
+    const coin = screen.getByTestId("coin");
+    const amount = screen.getByTestId("amount");
+    expect(rewardBadge).toBeInTheDocument();
+    expect(coin).toBeInTheDocument();
+    expect(amount).toBeInTheDocument();
+  });
+});

src/components/badges/RewardBadge.tsx

@@ -43,10 +43,10 @@ export default function RewardBadge({ reward = {}, type = "transparent", display
   });
   if (!reward) return <></>;
   return (
-    <span className={badgeClassnames}>
+    <span data-testid="RewardBadge" className={badgeClassnames}>
       {token && <Coin token={token} size="small" />}
       {amount && (
-        <div className="font-medium pl-0 pr-2">
+        <div data-testid="amount" className="font-medium pl-0 pr-2">
           {displayAmount && shortenNumber(amount)} {token}
         </div>
       )}