feat: merge branch 'dev' into test/section-community

Author: mhenriette

.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

@@ -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

@@ -170,3 +170,11 @@ export const mockFeedback: Feedback = {
   ranking: 0,
   text: "I am providing a feedback",
 };
+
+export const challengeSliceData = {
+  current: challenge,
+  list: [challenge],
+  submission: submission,
+  loading: false
+
+}

__mocks__/fixtures/challenge.ts

@@ -1,4 +1,6 @@
-export const colors = {
+import { Colors } from "@/types/community";
+
+export const colors: Colors = {
   textAccent: "--tm-text",
   text: "--tm-text",
   accent: "--tm-accent",

__mocks__/fixtures/colors.ts

@@ -1,5 +1,6 @@
 import { Course, Format, LearningModule, Material } from "@/types/course";
 import { mockTrailer } from "./bounty";
+import { RatingCriteria } from "@/types/challenge";
 
 
 export const Introduction = {
@@ -25,7 +26,7 @@ export const Rubric = {
     typeSlug: "slug",
 };
 
-export const mockRatingCriteria = {
+export const mockRatingCriteria: RatingCriteria = {
     name: "rating criteria",
     order: 4,
     rubric: [Rubric],
@@ -131,6 +132,4 @@ export const mockFormat: Format = {
     githubLink: true,
     text: true,
     disclaimer: true,
-};
-
-
+};

__mocks__/fixtures/course.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,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");
+  });
+});

__tests__/components/badges/RewardBadges.test.tsx

@@ -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");
+  });
+});