Test/referral popup component test

__mocks__/fixtures/referrals.ts

@@ -9,12 +9,12 @@ const referralSubmission = () => Object.assign(getMockSubmission, { challengeDat
 const userReferral: UserReferral = Object.assign(mockUser, { submissions: [referralSubmission()] });
 
 export const mockReferral: Referral = {
-    id: "",
-    name: "",
-    ref: "",
+    id: "ee",
+    name: "test name",
+    ref: "sddf",
     created_at: new Date("2022-05-01T12:00:00Z"),
     updated_at: new Date("2022-05-01T12:00:00Z"),
-    title: "",
+    title: "test referral",
     community,
     timestamp: 0,
     reward: reward,

__tests__/components/popups/referral/Box.test.tsx

@@ -0,0 +1,39 @@
+
+import Box from "@/components/popups/referral/Box";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import "@testing-library/jest-dom";
+import { screen, fireEvent, act } from "@testing-library/react";
+
+describe("Box component", () => {
+    it('Should render the box component with label and value', () => {
+        renderWithRedux(<Box value="Test Value" label="test label" />)
+        expect(screen.getByTestId("referral-box")).toBeInTheDocument()
+        expect(screen.getByText("Test Value")).toBeInTheDocument();
+        expect(screen.getByText("test label")).toBeInTheDocument();
+    });
+
+    it("Should copy text to clipboard when the copy button is clicked", () => {
+        renderWithRedux(<Box value="Test Value" label="test label" />)
+        const copyButton = screen.getByTestId("button");
+        const mockClipboard = {
+            writeText: jest.fn(() => Promise.resolve()),
+        }
+        Object.assign(navigator, { clipboard: mockClipboard });
+        fireEvent.click(copyButton);
+        expect(mockClipboard.writeText).toHaveBeenCalledWith("Test Value");
+    });
+
+    it("Should change the text to 'copied' when the copy button is clicked and change it back to 'copy' after 500ms", async () => {
+        renderWithRedux(<Box value="Test Value" label="test label" />)
+        const copyButton = screen.getByTestId("button");
+        fireEvent.click(copyButton);
+        expect(await screen.findByText("modal.referral.button.copied")).toBeInTheDocument()
+        // Wait for the button text to change back to "Copy" after 600ms
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 600));
+
+        });
+        expect(await screen.findByText("modal.referral.button.copy")).toBeInTheDocument()
+    })
+
+})

__tests__/components/popups/referral/List.test.tsx

@@ -0,0 +1,25 @@
+import { mockReferral } from "@__mocks__/fixtures/referrals";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import ReferralList from "@/components/popups/referral/List";
+
+describe("Referral list", () => {
+    it("should render the bounty and the referral titles", () => {
+        renderWithRedux(<ReferralList />)
+        expect(screen.getByText('modal.referral.list.bounty_title')).toBeInTheDocument();
+        expect(screen.getByText('modal.referral.list.reward')).toBeInTheDocument();
+    });
+    it("should show render as many as the referrals as it received", () => {
+        renderWithRedux(<ReferralList />,
+            {
+                referrals:
+                {
+                    list: [mockReferral],
+                    filteredList: [mockReferral]
+                },
+            })
+        expect(screen.getAllByTestId('referral-bounty-item')).toHaveLength(1)
+    })
+
+})

__tests__/components/popups/referral/ListItem.test.tsx

@@ -0,0 +1,26 @@
+import { mockReferral } from "@__mocks__/fixtures/referrals";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import "@testing-library/jest-dom";
+import ReferralListItem from "@/components/popups/referral/ListItem";
+import { screen } from "@testing-library/react";
+
+
+describe("ReferralBountyItem", () => {
+    it("Should render the bounty list item", () => {
+        renderWithRedux(<ReferralListItem referral={mockReferral} bounty={true} />)
+        expect(screen.getByTestId("referral-bounty-item")).toBeInTheDocument()
+    });
+    it("Should show the user avatar", () => {
+        renderWithRedux(<ReferralListItem referral={mockReferral} bounty={true} />)
+        const avatar = screen.getByTestId("avatar");
+        expect(avatar).toBeInTheDocument();
+    });
+    it("should show the community name when its not a referral bounty", () => {
+        renderWithRedux(<ReferralListItem referral={mockReferral} bounty={false} />);
+        expect(screen.getByText(mockReferral.title)).toBeInTheDocument();
+    });
+    it("should display the referral title when its a referral bounty", () => {
+        renderWithRedux(<ReferralListItem referral={mockReferral} bounty={true} />);
+        expect(screen.getByText(mockReferral.community.name)).toBeInTheDocument();
+    });
+})

__tests__/components/ui/SideNavigation/_partials/SideNavLink.test.tsx

@@ -29,6 +29,7 @@ describe("SideNavLink", () => {
         colors: colors,
         locked: false,
         showReferralPopup: false,
+        showJobOffersPopup: false,
       },
     });
     const courseLink = screen.getByTestId("courseLinkId");

jest.polyfills.js

@@ -21,6 +21,7 @@ Object.defineProperties(globalThis, {
 
 const { Blob, File } = require("node:buffer");
 const { fetch, Headers, FormData, Request, Response } = require("undici");
+const { clearImmediate } = require("node:timers");
 
 Object.defineProperties(globalThis, {
   fetch: { value: fetch, writable: true },
@@ -30,4 +31,5 @@ Object.defineProperties(globalThis, {
   FormData: { value: FormData },
   Request: { value: Request },
   Response: { value: Response },
+  clearImmediate: { value: clearImmediate },
 });

src/components/popups/referral/Box.tsx

@@ -65,7 +65,7 @@ export default function Box({ value = null, label = null }: BoxProps): ReactElem
   }, [timeoutId]);
 
   return (
-    <div className="relative flex items-center justify-between border border-solid p-2.5 text-gray-500 rounded border-gray-200 bg-secondary">
+    <div className="relative flex items-center justify-between border border-solid p-2.5 text-gray-500 rounded border-gray-200 bg-secondary" data-testId="referral-box">
       <div className="text-left flex-grow w-2/5 md:w-3/4">
         <label className="relative block text-xs md:text-sm">{label}</label>
         <div className="text-base md:text-lg mt-0.5 w-full truncate">{value}</div>

src/components/popups/referral/List.tsx

@@ -34,7 +34,7 @@ export default function ReferralList({ bounty = false }: { bounty?: boolean }):
       </div>
       <div className="flex flex-col space-y-2">
         {referrals?.map((referral) => (
-          <ListItem key={referral.name} referral={referral} bounty={bounty} />
+          <ListItem key={`referral-id-${referral.name}`} referral={referral} bounty={bounty} />
         ))}
       </div>
     </div>

src/components/popups/referral/ListItem.tsx

@@ -26,6 +26,7 @@ type Referral = {
 interface ReferralListItemProps {
   referral: Referral;
   bounty?: boolean;
+  testId?: string;
 }
 
 /**
@@ -39,9 +40,9 @@ interface ReferralListItemProps {
 }
  * @returns {ReactElement}
  */
-export default function ReferralListItem({ referral, bounty = false }: ReferralListItemProps): ReactElement {
+export default function ReferralListItem({ referral, bounty = false, testId = "referral-bounty-item" }: ReferralListItemProps): ReactElement {
   return (
-    <div className="flex justify-between w-full items-center text-gray-900">
+    <div className="flex justify-between w-full items-center text-gray-900" data-testId={testId}>
       <div className="flex items-center">
         <Avatar
           className="w-6 h-6 rounded overflow-hidden"