test: add more test cases

Author: igorntwari

__tests__/components/badges/RewardBadges.test.tsx

@@ -1,30 +1,44 @@
 import "@testing-library/jest-dom";
-import RewardBadge from "@/components/badges/RewardBadge";
-import { render, screen } from "@testing-library/react";
-import Coin from "@/components/ui/Coin";
+import RewardBadge, { RewardBadgeProps } from "@/components/badges/RewardBadge";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+
+const mockRewardBadges: RewardBadgeProps = {
+  type: "transparent",
+  reward: {
+    token: "BTC",
+    amount: 2,
+  },
+  displayAmount: true,
+};
+jest.mock("../../../src/utilities", () => ({
+  shortenNumber: (num: number) => `shortened-${num}`,
+}));
 
 describe("RewardBadges", () => {
   it("should render  rewardBadges", () => {
-    render(<RewardBadge />);
+    renderWithRedux(<RewardBadge {...mockRewardBadges} />);
     const rewardBadge = screen.getByTestId("RewardBadge");
     expect(rewardBadge).toBeInTheDocument();
   });
-
-  it("should render rewardBadges with coins", () => {
-    render(<RewardBadge />);
-    render(<Coin />);
-    const rewardBadge = screen.queryByTestId("RewardBadge");
+  it("should render rewardBadges with coin when the token is provide", () => {
+    renderWithRedux(<RewardBadge reward={{ token: "BTC" }} />);
+    const rewardBadge = screen.getByTestId("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} />);
+    renderWithRedux(<RewardBadge reward={{ token: "BTC", amount: 1000 }} displayAmount={true} />);
+    const text = screen.getByText("shortened-1000 BTC");
+    expect(text).toBeInTheDocument();
+  });
+
+  it('should display "0" when the reward amount is 0 and token is empty', () => {
+    renderWithRedux(<RewardBadge reward={{ token: "", amount: 0 }} />);
     const rewardBadge = screen.getByTestId("RewardBadge");
-    const coin = screen.getByTestId("coin");
-    const amount = screen.getByTestId("amount");
     expect(rewardBadge).toBeInTheDocument();
-    expect(coin).toBeInTheDocument();
-    expect(amount).toBeInTheDocument();
+    expect(rewardBadge).toHaveTextContent("0");
   });
 });

src/components/badges/RewardBadge.tsx

@@ -27,13 +27,14 @@ interface Reward {
  * @typedef {RewardBadgeProps}
  */
 
-interface RewardBadgeProps {
+export interface RewardBadgeProps {
   type?: "transparent" | "gray" | "light-gray";
   reward?: Reward;
   displayAmount?: boolean;
+  rewardBadgeTestId?:string;
 }
 
-export default function RewardBadge({ reward = {}, type = "transparent", displayAmount = true }: RewardBadgeProps): ReactElement {
+export default function RewardBadge({ reward = {}, type = "transparent", displayAmount = true,rewardBadgeTestId =  "RewardBadge" }: RewardBadgeProps): ReactElement {
   const { token, amount } = reward;
 
   const badgeClassnames = classNames("font-semibold leading-none text-center inline-flex items-center justify-between rounded-full text-xs p-0.5 h-5 space-x-2", {
@@ -43,10 +44,10 @@ export default function RewardBadge({ reward = {}, type = "transparent", display
   });
   if (!reward) return <></>;
   return (
-    <span data-testid="RewardBadge" className={badgeClassnames}>
+    <span data-testid= {rewardBadgeTestId} className={badgeClassnames}>
       {token && <Coin token={token} size="small" />}
       {amount && (
-        <div data-testid="amount" className="font-medium pl-0 pr-2">
+        <div className="font-medium pl-0 pr-2">
           {displayAmount && shortenNumber(amount)} {token}
         </div>
       )}

src/components/ui/Coin.tsx

@@ -18,7 +18,7 @@ import SUIIcon from "@/icons/tokens/SUI.svg";
  * @interface CoinProps
  * @typedef {CoinProps}
  */
-interface CoinProps {
+export interface CoinProps {
   bgColor?: string;
   textColor?: string;
   size?: "medium" | "medium-mini" | "normal" | "small";