Add test cases for SimilarProjects component (#5981)

Author: HelNershingThapa

frontend/src/components/projectDetail/tests/similarProjects.test.js

@@ -0,0 +1,35 @@
+import '@testing-library/jest-dom';
+import { screen } from '@testing-library/react';
+
+import { SimilarProjects } from '../similarProjects';
+import { ReduxIntlProviders, renderWithRouter } from '../../../utils/testWithIntl';
+import { setupFaultyHandlers } from '../../../network/tests/server';
+import messages from '../messages';
+
+describe('Similar Projects', () => {
+  it('should fetch and display similar projects', async () => {
+    renderWithRouter(
+      <ReduxIntlProviders>
+        <SimilarProjects projectId={123} />
+      </ReduxIntlProviders>,
+    );
+    expect((await screen.findAllByRole('article')).length).toBe(4);
+    expect(
+      screen.getByRole('heading', {
+        name: 'Similar Project 1',
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('should display error message', async () => {
+    setupFaultyHandlers();
+    renderWithRouter(
+      <ReduxIntlProviders>
+        <SimilarProjects projectId={123} />
+      </ReduxIntlProviders>,
+    );
+    expect(
+      await screen.findByText(messages.noSimilarProjectsFound.defaultMessage),
+    ).toBeInTheDocument();
+  });
+});

frontend/src/network/tests/mockData/projects.js

@@ -482,3 +482,86 @@ export const stopValidation = {
     },
   ],
 };
+
+export const similarProjects = {
+  mapResults: [],
+  results: [
+    {
+      projectId: 17,
+      locale: 'en',
+      name: 'Similar Project 1',
+      shortDescription: 'asdasdasd',
+      difficulty: 'MODERATE',
+      priority: 'MEDIUM',
+      organisationName: 'asdasdsadasdasd,ll,ll',
+      organisationLogo: null,
+      campaigns: [],
+      percentMapped: 6,
+      percentValidated: 0,
+      status: 'PUBLISHED',
+      activeMappers: 0,
+      lastUpdated: '2023-06-28T10:45:01.841598Z',
+      dueDate: null,
+      totalContributors: 2,
+      country: [],
+    },
+    {
+      projectId: 14,
+      locale: 'en',
+      name: 'Similar Project 2',
+      shortDescription: 'asdasd',
+      difficulty: 'MODERATE',
+      priority: 'MEDIUM',
+      organisationName: 'MÉDECINS SANS FRONTIÈRES (MSF)',
+      organisationLogo: null,
+      campaigns: [],
+      percentMapped: 0,
+      percentValidated: 0,
+      status: 'PUBLISHED',
+      activeMappers: 0,
+      lastUpdated: '2023-06-21T04:37:03.788468Z',
+      dueDate: null,
+      totalContributors: 1,
+      country: ['Bolivia'],
+    },
+    {
+      projectId: 16,
+      locale: 'en',
+      name: 'Newchi',
+      shortDescription: 'asdasd',
+      difficulty: 'EASY',
+      priority: 'MEDIUM',
+      organisationName: 'asdasdasdasdsssssss',
+      organisationLogo: null,
+      campaigns: [],
+      percentMapped: 100,
+      percentValidated: 0,
+      status: 'PUBLISHED',
+      activeMappers: 0,
+      lastUpdated: '2023-06-26T11:02:31.390857Z',
+      dueDate: null,
+      totalContributors: 1,
+      country: ['Brazil'],
+    },
+    {
+      projectId: 18,
+      locale: 'en',
+      name: 'asdasdasd',
+      shortDescription: 'asdasd',
+      difficulty: 'MODERATE',
+      priority: 'MEDIUM',
+      organisationName: 'asdasdsadasdasd,ll,ll',
+      organisationLogo: null,
+      campaigns: [],
+      percentMapped: 0,
+      percentValidated: 0,
+      status: 'PUBLISHED',
+      activeMappers: 0,
+      lastUpdated: '2023-07-06T06:22:12.105538Z',
+      dueDate: null,
+      totalContributors: 1,
+      country: ['Peru'],
+    },
+  ],
+  pagination: null,
+};

frontend/src/network/tests/server-handlers.js

@@ -13,6 +13,7 @@ import {
   taskDetail,
   stopMapping,
   stopValidation,
+  similarProjects,
 } from './mockData/projects';
 import { featuredProjects } from './mockData/featuredProjects';
 import {
@@ -143,6 +144,9 @@ const handlers = [
       return res(ctx.json(stopValidation));
     },
   ),
+  rest.get(API_URL + 'projects/queries/:projectId/similar-projects/', async (req, res, ctx) => {
+    return res(ctx.json(similarProjects));
+  }),
   // AUTHENTICATION
   rest.get(API_URL + 'system/authentication/login/', async (req, res, ctx) => {
     return res(ctx.json(authLogin));
@@ -384,6 +388,7 @@ const faultyHandlers = [
   ),
   rest.post(API_URL + 'projects/:projectId/tasks/actions/extend/', failedToConnectError),
   rest.post(API_URL + 'projects/:projectId/tasks/actions/split/:taskId/', failedToConnectError),
+  rest.get(API_URL + 'projects/queries/:projectId/similar-projects/', failedToConnectError),
   rest.post(API_URL + 'licenses', failedToConnectError),
   rest.patch(API_URL + 'licenses/:id', failedToConnectError),
   rest.post(API_URL + 'interests', failedToConnectError),