Merge pull request #1280 from dacadeorg/test/badges-component-test

test: test rewardBadges

Author: musayann

__tests__/components/badges/RewardBadges.test.tsx

@@ -0,0 +1,44 @@
+import "@testing-library/jest-dom";
+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", () => {
+    renderWithRedux(<RewardBadge {...mockRewardBadges} />);
+    const rewardBadge = screen.getByTestId("RewardBadge");
+    expect(rewardBadge).toBeInTheDocument();
+  });
+  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", () => {
+    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");
+    expect(rewardBadge).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,7 +44,7 @@ export default function RewardBadge({ reward = {}, type = "transparent", display
   });
   if (!reward) return <></>;
   return (
-    <span className={badgeClassnames}>
+    <span data-testid= {rewardBadgeTestId} className={badgeClassnames}>
       {token && <Coin token={token} size="small" />}
       {amount && (
         <div className="font-medium pl-0 pr-2">

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";