refactor: merge branch 'dev' into test/feedback-component

Author: serapieTuyishime

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "21.0.0"
+          node-version: "20.0.0"
           cache: "yarn"
 
       - name: Install dependencies

.vscode/settings.json

@@ -144,7 +144,7 @@ They can also be given class names as shown in the above image.
 
 ```javascript
 <div
-  className={classNames("w-1/3", "bg-primary", {
+  className={classNames("w-1/3", "bg-brand", {
     "text-white": type === "default",
     underline: hasLink,
   })}

CONTRIBUTING.md

@@ -0,0 +1,45 @@
+import { Community } from "@/types/community";
+import { reward } from "./reward";
+import { colors } from "./colors";
+
+
+export const metadata = {
+    invite_id: "abc123",
+    submissions: 5,
+    bestSubmissions: ["submission1", "submission2"],
+    feedbacks: 10,
+    name: "Project XYZ",
+    issuedOn: "2024-01-29T12:00:00Z",
+    image: "image_url",
+    title: "Title of the project",
+    description: "Description of the project",
+    narrative: "Narrative of the project",
+    recipientName: "John Doe",
+    issuerName: "Jane Smith",
+    comment: "This is a comment",
+    linkToWork: "link_to_work",
+    submission: "submission_details",
+  };
+
+export const community: Community = {
+    id: "ew-43",
+    ref: "community/ref",
+    created_at: new Date("2022-05-01T12:00:00Z"),
+    updated_at: new Date("2022-05-01T12:00:00Z"),
+    summary: "this is the summary",
+    icon: "public/img/communities/aeternity.svg",
+    name: "aeternity",
+    image: "public/img/communities/aeternity.svg",
+    colors: colors,
+    slug: "ae",
+    active: true,
+    description: "this is a aeternity community",
+    metadata,
+    timestamp: 182044800000,
+    rewards: [reward],
+    reward,
+    courses: 3,
+    duration: 4,
+    can_mint_certificates: true,
+    challenges: 3
+  };

__mocks__/community.ts

@@ -12,8 +12,8 @@ export const mockUser: User = {
   uid: "uuid-uuido-232-dex0232-2331",
   joined: "14 days ago",
   disabled: false,
-  reputation: 0,
-  username: "",
+  reputation: 2,
+  username: "Rouven",
   lastName: "",
   emailVerified: false,
   email: "",

__mocks__/fixtures/user.ts

@@ -0,0 +1,18 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import TeamChallengeCard from "@/components/cards/TeamChallenge";
+
+describe("Team challenge card component", () => {
+  it("Should render component with default props", () => {
+    render(<TeamChallengeCard />);
+    expect(screen.getByText("1")).toBeInTheDocument();
+    expect(screen.queryAllByAltText('')).not.toBe(null);
+  });
+
+  it("Should render the component with given props", ()=>{
+    render(<TeamChallengeCard index={5} title="Test title" text="test text"/>)
+    expect(screen.getByText("5")).toBeInTheDocument()
+    expect(screen.getByText("Test title")).toBeInTheDocument();
+    expect(screen.getByText("test text")).toBeInTheDocument();
+  })
+});

__tests__/components/cards/TeamChallenge.test.tsx

@@ -0,0 +1,59 @@
+import UserCard from "@/components/cards/User";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import { mockUser } from "@__mocks__/fixtures/user";
+import { fireEvent, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+jest.mock("next/router", () => ({
+  useRouter: jest.fn(() => ({
+    locale: "en",
+    push: mockPush,
+  })),
+}));
+const teamMembers = [mockUser];
+const handleClick = jest.fn(() => {});
+const mockPush = jest.fn();
+
+describe("User card component", () => {
+  const timestamp = {
+    date: new Date(),
+    text: "",
+  };
+  beforeEach(() => {
+    renderWithRedux(
+      <UserCard user={mockUser} timestamp={timestamp} teamMembers={teamMembers} onClick={handleClick} link="/testlink">
+        <div>test link</div>
+      </UserCard>
+    );
+  });
+  // Mock window.getSelection
+  window.getSelection = jest.fn().mockReturnValue({
+    type: "Caret",
+  });
+  it("Renders the card component", () => {
+    expect(screen.getByTestId("userId")).toBeInTheDocument();
+    expect(screen.getAllByTestId("avatar").length).toEqual(teamMembers.length);
+    const linkElements = screen.getAllByRole("link");
+    linkElements.forEach((element, index) => {
+      if (teamMembers[index]) {
+        const expectedHref = `/profile/${teamMembers[index].username}`;
+        expect(element).toHaveAttribute("href", expectedHref);
+      }
+    });
+  });
+
+  it("Renders the correct tag and currecy when teamMembers is not empty", () => {
+    expect(screen.getByTestId("currencyId")).toBeInTheDocument();
+    expect(screen.getByTestId("tag")).toBeInTheDocument();
+  });
+
+  it("Calls onClick prop when clicked", () => {
+    fireEvent.click(screen.getByTestId("userId"));
+    expect(handleClick).toHaveBeenCalled();
+  });
+  it("Navigates to the correct link when clicked", () => {
+    const element = screen.getByText("test link");
+    fireEvent.click(element);
+    expect(mockPush).toHaveBeenCalledWith("/testlink");
+  });
+});

__tests__/components/cards/User.test.tsx

@@ -0,0 +1,88 @@
+import "@testing-library/jest-dom"
+import EmailForm from "@/components/popups/profile-settings/EmailForm";
+import { act, fireEvent, screen } from "@testing-library/react";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+
+jest.mock("next/router", () => ({
+    useRouter: () => ({
+        push: jest.fn(),
+        events: {
+            on: jest.fn(),
+            off: jest.fn(),
+            emit: jest.fn(),
+        },
+        isFallback: false,
+        pathname: "mocked-pathname",
+    }),
+}));
+
+const handleClose = jest.fn()
+
+const onSubmit = jest.fn()
+
+const renderEmailEditForm = () => {
+    renderWithRedux(<EmailForm show onClose={handleClose} />)
+}
+
+beforeEach(() => {
+    renderEmailEditForm()
+})
+
+afterEach(() => {
+    onSubmit.mockReset()
+})
+
+describe("EmailEditForm", () => {
+    it('should render the email edit form modal.', () => {
+        expect(screen.getByTestId('profileModal')).toBeInTheDocument()
+    })
+
+    it('should render a form', () => {
+        const form = screen.getByTestId('edit-email-form')
+        expect(form).toBeInTheDocument()
+    })
+
+    it('should contain 2 inputs, and a close button', () => {
+        const emailInput = screen.getByPlaceholderText('login-page.email.placeholder');
+        const emailInputConfirm = screen.getByPlaceholderText('profile.settings.edit.email.confirm')
+        const closeButton = screen.getByTestId('close-button')
+
+        expect(emailInput).toBeInTheDocument()
+        expect(emailInputConfirm).toBeInTheDocument()
+        expect(closeButton).toBeInTheDocument()
+    })
+
+    it("should not modify user's input values", async () => {
+        const emailInput = screen.getByPlaceholderText('login-page.email.placeholder');
+        const emailInputConfirm = screen.getByPlaceholderText('profile.settings.edit.email.confirm')
+
+        act(() => {
+            fireEvent.change(emailInput, { target: { value: "[email protected]" } });
+            fireEvent.change(emailInputConfirm, { target: { value: "[email protected]" } });
+            fireEvent.submit(screen.getByTestId("edit-email-form"));
+        })
+    });
+
+    it("should not submit the form when emails do not match", async () => {
+        const emailInput = screen.getByPlaceholderText('login-page.email.placeholder');
+        const emailInputConfirm = screen.getByPlaceholderText('profile.settings.edit.email.confirm');
+        const form = screen.getByTestId('edit-email-form');
+
+        fireEvent.change(emailInput, { target: { value: "[email protected]" } });
+        fireEvent.change(emailInputConfirm, { target: { value: "[email protected]" } });
+
+        await act(async () => {
+            fireEvent.submit(form);
+        });
+
+        expect(onSubmit).not.toHaveBeenCalled();
+        expect(screen.queryByText("Emails should match.")).toBeInTheDocument();
+
+    })
+
+    it("it should close the modal when its open", () => {
+        expect(screen.getByTestId('profileModal')).toBeInTheDocument()
+        fireEvent.click(screen.getByTestId('close-button'))
+        expect(handleClose).toHaveBeenCalled()
+    })
+})

__tests__/components/popus/EmailForm.test.tsx

@@ -0,0 +1,41 @@
+import "@testing-library/jest-dom"
+import { renderWithRedux } from "../../../__mocks__/renderWithRedux"
+import EditProfile from "@/components/popups/profile-settings/NamesForm"
+import { fireEvent, screen } from "@testing-library/react"
+
+jest.mock("next/router", () => ({
+    useRouter: () => ({
+        push: jest.fn(),
+        events: {
+            on: jest.fn(),
+            off: jest.fn(),
+            emit: jest.fn(),
+        },
+        isFallback: false,
+        pathname: "mocked-pathname",
+    }),
+}));
+const handleClose = jest.fn()
+beforeEach(() => {
+    renderWithRedux(<EditProfile show onClose={handleClose} />)
+})
+describe("NamesForm", () => {
+    it("should render the names edit form", () => {
+        const form = screen.getByTestId('names-edit-form')
+        expect(form).toBeInTheDocument()
+    })
+
+    it("should render the form with 2 inputs", () => {
+        const form = screen.getByTestId('names-edit-form')
+        const firstNameInput = form.querySelectorAll("div [data-testid='first-name']")
+        const lastNameInput = form.querySelectorAll("div [data-testid='last-name']")
+        expect(firstNameInput).toHaveLength(1)
+        expect(lastNameInput).toHaveLength(1)
+    })
+
+    it("it should close the modal when its open", () => {
+        expect(screen.getByTestId('names-edit-form')).toBeInTheDocument()
+        fireEvent.click(screen.getByTestId('close-button'))
+        expect(handleClose).toHaveBeenCalled()
+    })
+})

__tests__/components/popus/NamesForm.test.tsx

@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
 import BountiesNavigation from "@/components/sections/bounties/Navigation";
-import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
 import { List } from "@/utilities/CommunityNavigation";
 
 jest.mock("next/router", () => ({