added docs and tests

docs/docs/docs/getting-started/installation.md

@@ -267,3 +267,116 @@ REACT_APP_RECAPTCHA_SITE_KEY="this_is_the_recaptcha_key"
 #### Setting up Compiletime and Runtime logs
 
 Set the `ALLOW_LOGS` to "YES" if you want warnings , info and error messages in your console or leave it blank if you dont need them or want to keep the console clean
+
+## First Time SignIn as Admin
+
+After setting up **`talawa-admin`** and **`talawa-api`**, your PostgreSQL database will have only one user: **Administrator**.  
+To sign in as an **Admin**, you need to **register a user** and then manually grant them **Administrator** privileges.
+
+---
+
+## 📌 Steps to Sign In as an Administrator
+
+### 1️⃣ Register as an Admin
+
+You can register using the **frontend**.
+
+> **Optional:** If needed, insert an image showing the registration page here:  
+> ![Registering a new user](../../../static/img/markdown/installation/Register.png)
+
+---
+
+### 2️⃣ Grant Administrator Role to the Registered User
+
+> 🔹 **Note:** Since the **Super Admin** is not yet configured, we will use the **GraphQL frontend** for this.
+
+1. Open **GraphiQL** in your browser:
+
+2. **Sign in as Administrator**
+
+   - Use the following GraphQL **query** to get an **authentication token** for authorization in later queries:
+
+   ```graphql
+   mutation {
+     signIn(
+       input: { emailAddress: "[email protected]", password: "password" }
+     ) {
+       authenticationToken
+       user {
+         id
+         name
+       }
+     }
+   }
+   ```
+
+2) **Make the registered user an Administrator**
+
+   - Use the following GraphQL **mutation** to assign **administrator** role to user:
+
+   ```graphql
+   mutation {
+     updateUser(input: { id: "user-id", role: administrator }) {
+       id
+       name
+     }
+   }
+   ```
+
+3) **Next create an organization**
+
+   - Use the following GraphQL **mutation** to create an organization:
+
+   ```graphql
+   mutation {
+     createOrganization(
+       input: {
+         addressLine1: "Los Angeles"
+         addressLine2: "USA"
+         city: "Los Angeles"
+         countryCode: in
+         description: "testing"
+         name: "Test Org 7"
+         postalCode: "876876"
+         state: "California"
+       }
+     ) {
+       id
+     }
+   }
+   ```
+
+4) **Make user an administrator of the organization**
+
+   - Use the following GraphQL **mutation** to assign **administrator** role to user:
+
+   ```graphql
+     createOrganizationMembership(
+    input: {
+      memberId: "user-id"
+      organizationId: "org-id"
+      role: administrator
+    }
+   ) {
+    id
+    name
+    addressLine1
+    createdAt
+    members(first: 5) {
+      pageInfo {
+        hasNextPage
+        startCursor
+      }
+      edges {
+        cursor
+        node {
+          id
+          name
+        }
+      }
+    }
+   }
+   }
+   ```
+
+Now sign successfully in with your registered ADMIN.

src/components/OrgListCard/OrgListCard.tsx

@@ -89,7 +89,7 @@ function orgListCard(props: InterfaceOrgListCardPropsPG): JSX.Element {
             </Tooltip>
             {/* Description of the organization */}
             <div className={`${styles.orgdesc} fw-semibold`}>
-              <TruncatedText text={description || ''} />
+              <TruncatedText text={description} />
             </div>
 
             {/* Display the organization address if available */}

src/components/SecuredRoute/securedRoute.spec.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import SecuredRoute from './SecuredRoute';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+describe('SecuredRoute', () => {
+  it('for administrator', () => {
+    // Set the 'IsLoggedIn' value to 'TRUE' in localStorage to simulate a logged-in user and do not set 'AdminFor' so that it remains undefined.
+    setItem('IsLoggedIn', 'TRUE');
+    setItem('role', 'administrator');
+
+    render(
+      <MemoryRouter initialEntries={['/orglist']}>
+        <Routes>
+          <Route element={<SecuredRoute />}>
+            <Route path="/orglist" />
+          </Route>
+        </Routes>
+      </MemoryRouter>,
+    );
+  });
+
+  it('for administrator', () => {
+    // Set the 'IsLoggedIn' value to 'TRUE' in localStorage to simulate a logged-in user and do not set 'AdminFor' so that it remains undefined.
+    setItem('IsLoggedIn', 'TRUE');
+    setItem('role', 'regular');
+
+    render(
+      <MemoryRouter initialEntries={['/orglist']}>
+        <Routes>
+          <Route element={<SecuredRoute />}>
+            <Route path="/orglist" />
+          </Route>
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('talawaUser')).toBeInTheDocument();
+  });
+});

src/screens/LoginPage/LoginPage.spec.tsx

@@ -42,6 +42,7 @@ const MOCKS = [
         signIn: {
           user: {
             id: '1',
+            role: 'administrator',
           },
           authenticationToken: 'authenticationToken',
         },
@@ -52,20 +53,16 @@ const MOCKS = [
     request: {
       query: SIGNUP_MUTATION,
       variables: {
-        name: 'John Patrick',
+        name: 'John Doe',
         email: '[email protected]',
-        password: 'johnDoe',
+        password: 'Johndoe@123',
       },
     },
     result: {
       data: {
-        register: {
+        signUp: {
           user: {
             id: '1',
-            name: 'John Patrick',
-            emailAddress: '[email protected]',
-            role: 'User',
-            countryCode: '12',
           },
           authenticationToken: 'authenticationToken',
         },
@@ -200,9 +197,24 @@ const MOCKS3 = [
   },
 ];
 
+const MOCKS4 = [
+  {
+    request: {
+      query: SIGNIN_QUERY,
+      variables: {
+        email: '[email protected]',
+        password: 'johndoe1',
+        id: 'yttyt',
+      },
+    },
+    error: new Error('Invalid credentials'),
+  },
+];
+
 const link = new StaticMockLink(MOCKS, true);
 // const link2 = new StaticMockLink(MOCKS2, true);
 const link3 = new StaticMockLink(MOCKS3, true);
+const link4 = new StaticMockLink(MOCKS4, true);
 
 async function wait(ms = 100): Promise<void> {
   await act(() => {
@@ -539,6 +551,50 @@ describe('Testing Login Page Screen', () => {
     expect(screen.getByTestId('goToRegisterPortion')).toBeInTheDocument();
   });
 
+  it('switches to login tab on successful registration correct data', async () => {
+    const formData = {
+      name: 'John Doe',
+      email: '[email protected]',
+      password: 'Johndoe@123',
+      confirmPassword: 'Johndoe@123',
+      orgId: 'abc',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId(/goToRegisterPortion/i));
+
+    await wait();
+    userEvent.type(screen.getByPlaceholderText(/Name/i), formData.name);
+
+    userEvent.type(screen.getByTestId(/signInEmail/i), formData.email);
+    userEvent.type(screen.getByPlaceholderText('Password'), formData.password);
+    userEvent.type(
+      screen.getByPlaceholderText('Confirm Password'),
+      formData.confirmPassword,
+    );
+
+    userEvent.click(screen.getByTestId('registrationBtn'));
+
+    await wait();
+
+    // Check if the login tab is now active by checking for elements that only appear in the login tab
+    expect(screen.getByTestId('loginBtn')).toBeInTheDocument();
+    expect(screen.getByTestId('goToRegisterPortion')).toBeInTheDocument();
+  });
+
   it('Testing toggle login register portion', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
@@ -592,6 +648,37 @@ describe('Testing Login Page Screen', () => {
     await wait();
   });
 
+  it('Testing wrong login functionality', async () => {
+    const formData = {
+      email: '[email protected]',
+      password: 'johndoe1',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link4}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId(/loginEmail/i), formData.email);
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Password/i),
+      formData.password,
+    );
+
+    userEvent.click(screen.getByTestId('loginBtn'));
+
+    await wait();
+  });
+
   it('Testing ReCaptcha functionality, it should refresh on unsuccessful SignUp, using duplicate email', async () => {
     const formData = {
       name: 'John Doe',
@@ -1063,4 +1150,50 @@ describe('Talawa-API server fetch check', () => {
 
     expect(fetch).toHaveBeenCalledWith(BACKEND_URL);
   });
+
+  // it('Testing ReCaptcha functionality, it should fail', async () => {
+  //   const formData = {
+  //     name: 'John Doe',
+  //     email: '[email protected]',
+  //     password: 'johnDoe@1',
+  //     confirmPassword: 'johnDoe@1',
+  //   };
+
+  //   vi.mock('Constant/constant.ts', async () => ({
+  //     ...(await vi.importActual('Constant/constant.ts')),
+  //     REACT_APP_USE_RECAPTCHA: 'No',
+  //     RECAPTCHA_SITE_KEY: 'xxx',
+  //   }));
+
+  //   render(
+  //     <MockedProvider addTypename={false} link={link}>
+  //       <BrowserRouter>
+  //         <Provider store={store}>
+  //           <I18nextProvider i18n={i18nForTest}>
+  //             <LoginPage />
+  //           </I18nextProvider>
+  //         </Provider>
+  //       </BrowserRouter>
+  //     </MockedProvider>,
+  //   );
+
+  //   await wait();
+
+  //   userEvent.click(screen.getByTestId(/goToRegisterPortion/i));
+
+  //   userEvent.type(screen.getByPlaceholderText(/Name/i), formData.name);
+
+  //   userEvent.type(screen.getByTestId(/signInEmail/i), formData.email);
+  //   userEvent.type(screen.getByPlaceholderText('Password'), formData.password);
+  //   userEvent.type(
+  //     screen.getByPlaceholderText('Confirm Password'),
+  //     formData.confirmPassword,
+  //   );
+
+  //   userEvent.click(screen.getByTestId('registrationBtn'));
+
+  //   await waitFor(() => {
+  //     expect(resetReCAPTCHA).toBeCalled();
+  //   });
+  // });
 });