added tests for eventstatics,eventdashboard and related components

PalisadoesFoundation · Oct 27, 2024 · 37ceafc · 37ceafc
1 parent 108cb91
commit 37ceafc
Show file tree

Hide file tree

Showing 30 changed files with 1,232 additions and 421 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -611,6 +611,7 @@
   "memberDetail": {
     "title": "User Details",
     "addAdmin": "Add Admin",
+    "noeventsAttended": "No Events Attended",
     "alreadyIsAdmin": "Member is already an Admin",
     "organizations": "Organizations",
     "events": "Events",
@@ -716,8 +717,8 @@
     "article": "Article"
   },
   "settings": {
-    "eventAttended":"Events Attended",
-    "noEventsAttended":"No Events Attended",
+    "eventAttended": "Events Attended",
+    "noeventsAttended": "No Events Attended",
     "profileSettings": "Profile Settings",
     "gender": "Gender",
     "phoneNumber": "Phone Number",

diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -613,6 +613,7 @@
   "memberDetail": {
     "title": "Détails de l'utilisateur",
     "addAdmin": "Ajouter un administrateur",
+    "noeventsAttended": "Aucun événement assisté",
     "alreadyIsAdmin": "Le membre est déjà un administrateur",
     "organizations": "Organisations",
     "events": "Événements",
@@ -718,8 +719,8 @@
     "article": "Article"
   },
   "settings": {
-    "eventAttended":"Événements Assistés",
-    "noEventsAttended":"Aucun événement assisté",
+    "eventAttended": "Événements Assistés",
+    "noeventsAttended": "Aucun événement assisté",
     "profileSettings": "Paramètres de profil",
     "gender": "Genre",
     "phoneNumber": "Numéro de téléphone",

diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json
@@ -613,6 +613,7 @@
   "memberDetail": {
     "title": "उपयोगकर्ता विवरण",
     "addAdmin": "व्यवस्थापक जोड़ें",
+    "noeventsAttended": "कोई कार्यक्रम में भाग नहीं लिया",
     "alreadyIsAdmin": "सदस्य पहले से ही एक व्यवस्थापक है",
     "organizations": "संगठनों",
     "events": "आयोजन",
@@ -718,7 +719,7 @@
     "article": "लेख"
   },
   "settings": {
-    "noEventsAttended": "कोई कार्यक्रम में उपस्थित नहीं",
+    "noeventsAttended": "कोई कार्यक्रम में उपस्थित नहीं",
     "eventAttended": "भाग लिए गए कार्यक्रम",
     "profileSettings": "पार्श्वचित्र समायोजन",
     "gender": "लिंग",

diff --git a/public/locales/sp/translation.json b/public/locales/sp/translation.json
@@ -794,6 +794,7 @@
   "memberDetail": {
     "title": "Detalles del usuario",
     "addAdmin": "Agregar administrador",
+    "noeventsAttended": "No Events Attended",
     "alreadyIsAdmin": "El Miembro ya es Administrador",
     "organizations": "Organizaciones",
     "events": "Eventos",
@@ -925,8 +926,8 @@
   },
   "settings": {
     "settings": "Ajustes",
-    "eventAttended":"Événements Assistés",
-    "noEventsAttended":"Ningún evento asistido",
+    "eventAttended": "Événements Assistés",
+    "noEventsAttended": "Ningún evento asistido",
     "profileSettings": "Configuración de perfil",
     "firstName": "Nombre de pila",
     "lastName": "Apellido",

diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
@@ -613,6 +613,7 @@
   "memberDetail": {
     "title": "用户详细信息",
     "addAdmin": "添加管理员",
+    "noeventsAttended": "未参加任何活动",
     "alreadyIsAdmin": "会员已经是管理员",
     "organizations": "组织机构",
     "events": "活动",
@@ -718,8 +719,8 @@
     "article": "文章"
   },
   "settings": {
-    "noEventsAttended": "未参加任何活动",
-    "eventAttended":"参加的活动",
+    "noeventsAttended": "未参加任何活动",
+    "eventAttended": "参加的活动",
     "profileSettings": "配置文件设置",
     "gender": "性别",
     "phoneNumber": "电话号码",

diff --git a/src/components/DynamicDropDown/DynamicDropDown.test.tsx b/src/components/DynamicDropDown/DynamicDropDown.test.tsx
@@ -15,13 +15,9 @@ async function wait(ms = 100): Promise<void> {
 }
 
 describe('DynamicDropDown component', () => {
-  test('renders with name and alt attribute', async () => {
-    const [formData, setFormData] = [
-      {
-        fieldName: 'TEST',
-      },
-      jest.fn(),
-    ];
+  test('renders and handles selection correctly', async () => {
+    const formData = { fieldName: 'value2' };
+    const setFormData = jest.fn();
 
     render(
       <BrowserRouter>
@@ -30,35 +26,83 @@ describe('DynamicDropDown component', () => {
             formState={formData}
             setFormState={setFormData}
             fieldOptions={[
-              { value: 'TEST', label: 'label1' },
-              { value: 'value2', label: 'label2' },
+              { value: 'TEST', label: 'Label 1' },
+              { value: 'value2', label: 'Label 2' },
             ]}
             fieldName="fieldName"
           />
         </I18nextProvider>
       </BrowserRouter>,
     );
-    const containterElement = screen.getByTestId(
-      'fieldname-dropdown-container',
-    );
-    await act(async () => {
-      userEvent.click(containterElement);
-    });
 
-    const optionButton = screen.getByTestId('fieldname-dropdown-btn');
+    // Verify that the dropdown container is rendered
+    const containerElement = screen.getByTestId('fieldname-dropdown-container');
+    expect(containerElement).toBeInTheDocument();
+
+    // Verify that the dropdown button displays the correct initial label
+    const dropdownButton = screen.getByTestId('fieldname-dropdown-btn');
+    expect(dropdownButton).toHaveTextContent('Label 2');
 
+    // Open the dropdown menu
     await act(async () => {
-      userEvent.click(optionButton);
+      userEvent.click(dropdownButton);
     });
 
+    // Select the first option in the dropdown
     const optionElement = screen.getByTestId('change-fieldname-btn-TEST');
     await act(async () => {
       userEvent.click(optionElement);
     });
-    await wait();
-    expect(containterElement).toBeInTheDocument();
+
+    // Verify that the setFormData function was called with the correct arguments
+    expect(setFormData).toHaveBeenCalledWith({ fieldName: 'TEST' });
+
+    // Verify that the dropdown button displays the updated label
     await waitFor(() => {
-      expect(optionButton).toHaveTextContent('label1');
+      expect(dropdownButton).toHaveTextContent('Label 2');
+    });
+  });
+  test('calls custom handleChange function when provided', async () => {
+    const formData = { fieldName: 'value1' };
+    const setFormData = jest.fn();
+    const customHandleChange = jest.fn();
+
+    render(
+      <BrowserRouter>
+        <I18nextProvider i18n={i18nForTest}>
+          <DynamicDropDown
+            formState={formData}
+            setFormState={setFormData}
+            fieldOptions={[
+              { value: 'value1', label: 'Label 1' },
+              { value: 'value2', label: 'Label 2' },
+            ]}
+            fieldName="fieldName"
+            handleChange={customHandleChange}
+          />
+        </I18nextProvider>
+      </BrowserRouter>,
+    );
+
+    const dropdownButton = screen.getByTestId('fieldname-dropdown-btn');
+    await act(async () => {
+      userEvent.click(dropdownButton);
     });
+
+    const optionElement = screen.getByTestId('change-fieldname-btn-value2');
+    await act(async () => {
+      userEvent.click(optionElement);
+    });
+
+    expect(customHandleChange).toHaveBeenCalledTimes(1);
+    expect(customHandleChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: expect.objectContaining({
+          name: 'fieldName',
+          value: 'value2',
+        }),
+      }),
+    );
+    expect(setFormData).not.toHaveBeenCalled();
   });
 });
diff --git a/src/components/DynamicDropDown/DynamicDropDown.tsx b/src/components/DynamicDropDown/DynamicDropDown.tsx
@@ -1,27 +1,7 @@
 import React from 'react';
 import { Dropdown } from 'react-bootstrap';
 import styles from './DynamicDropDown.module.css';
-import { InterfaceUser } from 'components/CheckIn/types';
-interface InterfaceMember {
-  createdAt: string;
-  firstName: string;
-  lastName: string;
-  email: string;
-  gender: string;
-  eventsAttended?: {
-    _id: string;
-  }[];
-  birthDate: Date;
-  __typename: string;
-  _id: string;
-  tagsAssignedWith: {
-    edges: {
-      node: {
-        name: string;
-      };
-    }[];
-  };
-}
+
 interface InterfaceChangeDropDownProps<T> {
   parentContainerStyle?: string;
   btnStyle?: string;
@@ -34,7 +14,7 @@ interface InterfaceChangeDropDownProps<T> {
 }
 
 const DynamicDropDown = <T extends Record<string, any>>(
-  props: InterfaceChangeDropDownProps<T>
+  props: InterfaceChangeDropDownProps<T>,
 ): JSX.Element => {
   const handleFieldChange = (value: string): void => {
     if (props?.handleChange) {
@@ -69,7 +49,9 @@ const DynamicDropDown = <T extends Record<string, any>>(
       >
         {getLabel(props?.formState[props?.fieldName])}
       </Dropdown.Toggle>
-      <Dropdown.Menu>
+      <Dropdown.Menu
+        data-testid={`${props?.fieldName.toLowerCase()}-dropdown-menu`}
+      >
         {props?.fieldOptions.map((option, index: number) => (
           <Dropdown.Item
             key={`${props?.fieldName.toLowerCase()}-dropdown-item-${index}`}

diff --git a/src/components/EventManagement/Dashboard/EventDashboard.mocks.ts b/src/components/EventManagement/Dashboard/EventDashboard.mocks.ts
@@ -21,6 +21,7 @@ export const MOCKS_WITH_TIME = [
           endTime: '09:00:00',
           allDay: false,
           location: 'India',
+          recurring: true,
           organization: {
             _id: 'org1',
             members: [{ _id: 'user1', firstName: 'John', lastName: 'Doe' }],
@@ -52,6 +53,7 @@ export const MOCKS_WITHOUT_TIME = [
           startTime: null,
           endTime: null,
           allDay: false,
+          recurring: false,
           location: 'India',
           organization: {
             _id: 'org1',

diff --git a/src/components/EventManagement/Dashboard/EventDashboard.test.tsx b/src/components/EventManagement/Dashboard/EventDashboard.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { RenderResult } from '@testing-library/react';
-import { render, act } from '@testing-library/react';
+import { render, act, fireEvent } from '@testing-library/react';
 import EventDashboard from './EventDashboard';
 import { BrowserRouter } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
@@ -64,20 +64,34 @@ const renderEventDashboard = (mockLink: ApolloLink): RenderResult => {
 
 describe('Testing Event Dashboard Screen', () => {
   test('The page should display event details correctly and also show the time if provided', async () => {
-    const { queryByText, queryAllByText } = renderEventDashboard(mockWithTime);
+    const { getByTestId, queryByText } = renderEventDashboard(mockWithTime);
 
     await wait();
 
-    expect(queryAllByText('Event Title').length).toBe(1);
-    expect(queryAllByText('Event Description').length).toBe(1);
-    expect(queryByText('India')).toBeInTheDocument();
+    expect(getByTestId('event-title')).toBeInTheDocument();
+    expect(getByTestId('event-description')).toBeInTheDocument();
+    expect(getByTestId('event-location')).toHaveTextContent('India');
 
-    await wait();
+    expect(getByTestId('registrations-card')).toBeInTheDocument();
+    expect(getByTestId('attendees-card')).toBeInTheDocument();
+    expect(getByTestId('feedback-card')).toBeInTheDocument();
+    expect(getByTestId('feedback-rating')).toHaveTextContent('4/5');
+
+    const editButton = getByTestId('edit-event-button');
+    fireEvent.click(editButton);
+    expect(getByTestId('event-title')).toBeInTheDocument();
   });
 
   test('The page should display event details correctly and should not show the time if it is null', async () => {
-    const { queryAllByText } = renderEventDashboard(mockWithoutTime);
+    const { getByTestId } = renderEventDashboard(mockWithoutTime);
     await wait();
-    expect(queryAllByText('Event Title').length).toBe(1);
+
+    expect(getByTestId('event-title')).toBeInTheDocument();
+    expect(getByTestId('event-time')).toBeInTheDocument();
+  });
+
+  test('Should show loader while data is being fetched', () => {
+    const { getByTestId } = renderEventDashboard(mockWithTime);
+    expect(getByTestId('spinner')).toBeInTheDocument();
   });
 });