'Visit' Button Feature Added to Joined Organizations Filter

package.json

@@ -73,6 +73,7 @@
     "web-vitals": "^4.2.4"
   },
   "scripts": {
+    "format": "prettier --write \"**/*.{ts,tsx,json,scss,css}\"",
     "serve": "cross-env ESLINT_NO_DEV_ERRORS=true vite --config config/vite.config.ts",
     "build": "tsc && vite build --config config/vite.config.ts",
     "preview": "vite preview --config config/vite.config.ts",

src/components/OrganizationCard/OrganizationCard.spec.tsx

@@ -1,49 +1,208 @@
+import { vi } from 'vitest'; // Import vi from vitest instead of jest
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { I18nextProvider } from 'react-i18next';
 import OrganizationCard from './OrganizationCard';
+import i18nForTest from 'utils/i18nForTest';
 
 /**
  * This file contains unit tests for the `OrganizationCard` component.
  *
  * The tests cover:
+ *
  * - Rendering the component with all provided props and verifying the correct display of text elements.
  * - Ensuring the component handles cases where certain props (like image) are not provided.
  *
  * These tests utilize the React Testing Library for rendering and querying DOM elements.
  */
 
-describe('Testing the Organization Card', () => {
-  it('should render props and text elements test for the page component', () => {
-    const props = {
-      id: '123',
-      image: 'https://via.placeholder.com/80',
-      firstName: 'John',
-      lastName: 'Doe',
-      name: 'Sample',
-    };
+const mockNavigate = vi.fn(); // Use vitest.fn() instead of jest.fn()
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    BrowserRouter: ({ children }: { children: React.ReactNode }) => children,
+    useNavigate: () => mockNavigate,
+  };
+});
 
-    render(<OrganizationCard {...props} />);
+const defaultProps = {
+  id: '123',
+  name: 'Test Organization',
+  image: 'test-image.jpg',
+  description: 'Test Description',
+  admins: [{ id: '1' }],
+  members: [{ id: '1' }, { id: '2' }],
+  address: {
+    city: 'Test City',
+    countryCode: 'TC',
+    line1: 'Test Line 1',
+    postalCode: '12345',
+    state: 'Test State',
+  },
+  userRegistrationRequired: false,
+  membershipRequests: [],
+};
 
-    expect(screen.getByText(props.name)).toBeInTheDocument();
-    expect(screen.getByText(/Owner:/i)).toBeInTheDocument();
-    expect(screen.getByText(props.firstName)).toBeInTheDocument();
-    expect(screen.getByText(props.lastName)).toBeInTheDocument();
+describe('OrganizationCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks(); // Use vitest.clearAllMocks() instead of jest.clearAllMocks()
   });
 
-  it('Should render text elements when props value is not passed', () => {
-    const props = {
-      id: '123',
+  test('renders organization card with image', () => {
+    render(
+      <MockedProvider>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrganizationCard {...defaultProps} membershipRequestStatus="" />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText(defaultProps.name)).toBeInTheDocument();
+
+    // Find the h6 element with className orgadmin
+    const statsContainer = screen.getByText((content) => {
+      const normalizedContent = content
+        .toLowerCase()
+        .replace(/\s+/g, ' ')
+        .trim();
+      return (
+        normalizedContent.includes('admins') &&
+        normalizedContent.includes('members')
+      );
+    });
+
+    expect(statsContainer).toBeInTheDocument();
+    expect(statsContainer.textContent).toContain('1'); // Check for admin count
+    expect(statsContainer.textContent).toContain('2'); // Check for member count
+    expect(screen.getByRole('img')).toBeInTheDocument();
+  });
+
+  test('renders organization card without image', () => {
+    const propsWithoutImage = {
+      ...defaultProps,
       image: '',
-      firstName: 'John',
-      lastName: 'Doe',
-      name: 'Sample',
     };
 
-    render(<OrganizationCard {...props} />);
+    render(
+      <MockedProvider>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrganizationCard {...propsWithoutImage} membershipRequestStatus="" />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByTestId('emptyContainerForImage')).toBeInTheDocument();
+  });
+
+  test('renders "Join Now" button when membershipRequestStatus is empty', () => {
+    render(
+      <MockedProvider>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrganizationCard {...defaultProps} membershipRequestStatus="" />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByTestId('joinBtn')).toBeInTheDocument();
+  });
+
+  test('renders "Visit" button when membershipRequestStatus is accepted', () => {
+    render(
+      <MockedProvider>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrganizationCard
+            {...defaultProps}
+            membershipRequestStatus="accepted"
+          />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    const visitButton = screen.getByTestId('manageBtn');
+    expect(visitButton).toBeInTheDocument();
+
+    fireEvent.click(visitButton);
+    expect(mockNavigate).toHaveBeenCalledWith('/user/organization/123');
+  });
+
+  test('renders "Withdraw" button when membershipRequestStatus is pending', () => {
+    render(
+      <MockedProvider>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrganizationCard
+            {...defaultProps}
+            membershipRequestStatus="pending"
+          />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByTestId('withdrawBtn')).toBeInTheDocument();
+  });
+
+  test('displays address when provided', () => {
+    render(
+      <MockedProvider>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrganizationCard {...defaultProps} membershipRequestStatus="" />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText(/Test City/i)).toBeInTheDocument();
+    expect(screen.getByText(/TC/i)).toBeInTheDocument();
+  });
+
+  test('displays organization description', () => {
+    render(
+      <MockedProvider>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrganizationCard {...defaultProps} membershipRequestStatus="" />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText('Test Description')).toBeInTheDocument();
+  });
+
+  test('displays correct button based on membership status', () => {
+    // Test for empty status (Join Now button)
+    const { rerender } = render(
+      <MockedProvider>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrganizationCard {...defaultProps} membershipRequestStatus="" />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    expect(screen.getByTestId('joinBtn')).toBeInTheDocument();
+
+    // Test for accepted status (Visit button)
+    rerender(
+      <MockedProvider>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrganizationCard
+            {...defaultProps}
+            membershipRequestStatus="accepted"
+          />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    expect(screen.getByTestId('manageBtn')).toBeInTheDocument();
 
-    expect(screen.getByText(props.name)).toBeInTheDocument();
-    expect(screen.getByText(/Owner:/i)).toBeInTheDocument();
-    expect(screen.getByText(props.firstName)).toBeInTheDocument();
-    expect(screen.getByText(props.lastName)).toBeInTheDocument();
+    // Test for pending status (Withdraw button)
+    rerender(
+      <MockedProvider>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrganizationCard
+            {...defaultProps}
+            membershipRequestStatus="pending"
+          />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    expect(screen.getByTestId('withdrawBtn')).toBeInTheDocument();
   });
 });