From 77b45615c487f8ef3470de7df52e88209628c472 Mon Sep 17 00:00:00 2001
From: Devender singh shekhawat <50149675+devender18@users.noreply.github.com>
Date: Fri, 13 Dec 2024 21:15:05 +0530
Subject: [PATCH] refactored: src/screens/OrgSettings from Jest to
 Vitest(fixes: #2567) (#2625)

* refactored: src/screens/OrgSettings from Jest to Vitest(fixes: #2567)

* refactored: src/screens/OrgSettings from Jest to Vitest(fixes: #2567)

* refactored: src/screens/OrgSettings from Jest to Vitest(fixes: #2567)

* refactored: src/screens/OrgSettings from Jest to Vitest(fixes: #2567)

* refactored: src/screens/OrgSettings from Jest to Vitest(fixes: #2567)

* refactored: src/screens/OrgSettings from Jest to Vitest(fixes: #2567)

* refactored: src/screens/OrgSettings from Jest to Vitest(fixes: #2567)

* updated check-tsdoc to ignore .spec.tsx
---
 .github/workflows/check-tsdoc.js              |   1 +
 ...Settings.test.tsx => OrgSettings.spec.tsx} | 100 ++++++++++++------
 2 files changed, 71 insertions(+), 30 deletions(-)
 rename src/screens/OrgSettings/{OrgSettings.test.tsx => OrgSettings.spec.tsx} (54%)

diff --git a/.github/workflows/check-tsdoc.js b/.github/workflows/check-tsdoc.js
index d5c3b33b90..0400f5a108 100644
--- a/.github/workflows/check-tsdoc.js
+++ b/.github/workflows/check-tsdoc.js
@@ -23,6 +23,7 @@ async function findTsxFiles(dir) {
       } else if (
         filePath.endsWith('.tsx') &&
         !filePath.endsWith('.test.tsx') &&
+        !filePath.endsWith('.spec.tsx') &&
         !filesToSkip.includes(path.relative(dir, filePath))
       ) {
         results.push(filePath);
diff --git a/src/screens/OrgSettings/OrgSettings.test.tsx b/src/screens/OrgSettings/OrgSettings.spec.tsx
similarity index 54%
rename from src/screens/OrgSettings/OrgSettings.test.tsx
rename to src/screens/OrgSettings/OrgSettings.spec.tsx
index a9aec5f33d..5b5179d644 100644
--- a/src/screens/OrgSettings/OrgSettings.test.tsx
+++ b/src/screens/OrgSettings/OrgSettings.spec.tsx
@@ -1,28 +1,38 @@
+import type { ReactElement } from 'react';
 import React from 'react';
-import { MockedProvider } from '@apollo/react-testing';
-import type { RenderResult } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
-import 'jest-location-mock';
-import { I18nextProvider } from 'react-i18next';
-import { Provider } from 'react-redux';
+import userEvent from '@testing-library/user-event';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
-
+import { Provider } from 'react-redux';
+import { I18nextProvider } from 'react-i18next';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { MockedProvider } from '@apollo/react-testing';
 import { store } from 'state/store';
-import { StaticMockLink } from 'utils/StaticMockLink';
 import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
 import OrgSettings from './OrgSettings';
-import userEvent from '@testing-library/user-event';
-import type { ApolloLink } from '@apollo/client';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { MOCKS } from './OrgSettings.mocks';
 
 const link1 = new StaticMockLink(MOCKS);
-
-const renderOrganisationSettings = (link: ApolloLink): RenderResult => {
+const mockRouterParams = (orgId: string | undefined): void => {
+  vi.doMock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+      ...actual,
+      useParams: () => ({ orgId }),
+    };
+  });
+};
+const renderOrganisationSettings = (
+  link = link1,
+  orgId = 'orgId',
+): ReturnType<typeof render> => {
+  mockRouterParams(orgId);
   return render(
     <MockedProvider addTypename={false} link={link}>
-      <MemoryRouter initialEntries={['/orgsetting/orgId']}>
+      <MemoryRouter initialEntries={[`/orgsetting/${orgId}`]}>
         <Provider store={store}>
           <LocalizationProvider dateAdapter={AdapterDayjs}>
             <I18nextProvider i18n={i18nForTest}>
@@ -30,7 +40,9 @@ const renderOrganisationSettings = (link: ApolloLink): RenderResult => {
                 <Route path="/orgsetting/:orgId" element={<OrgSettings />} />
                 <Route
                   path="/"
-                  element={<div data-testid="paramsError"></div>}
+                  element={
+                    <div data-testid="paramsError">Redirected to Home</div>
+                  }
                 />
               </Routes>
             </I18nextProvider>
@@ -42,28 +54,37 @@ const renderOrganisationSettings = (link: ApolloLink): RenderResult => {
 };
 
 describe('Organisation Settings Page', () => {
-  beforeAll(() => {
-    jest.mock('react-router-dom', () => ({
-      ...jest.requireActual('react-router-dom'),
-      useParams: () => ({ orgId: 'orgId' }),
-    }));
+  afterEach(() => {
+    vi.unmock('react-router-dom');
   });
 
-  afterAll(() => {
-    jest.clearAllMocks();
-  });
+  const SetupRedirectTest = async (): Promise<ReactElement> => {
+    const useParamsMock = vi.fn(() => ({ orgId: undefined }));
+    vi.doMock('react-router-dom', async () => {
+      const actual = await vi.importActual('react-router-dom');
+      return {
+        ...actual,
+        useParams: useParamsMock,
+      };
+    });
+    const orgSettingsModule = await import('./OrgSettings');
+    return <orgSettingsModule.default />;
+  };
 
   it('should redirect to fallback URL if URL params are undefined', async () => {
+    const OrgSettings = await SetupRedirectTest();
     render(
-      <MockedProvider addTypename={false} link={link1}>
+      <MockedProvider addTypename={false}>
         <MemoryRouter initialEntries={['/orgsetting/']}>
           <Provider store={store}>
             <I18nextProvider i18n={i18nForTest}>
               <Routes>
-                <Route path="/orgsetting/" element={<OrgSettings />} />
+                <Route path="/orgsetting/" element={OrgSettings} />
                 <Route
                   path="/"
-                  element={<div data-testid="paramsError"></div>}
+                  element={
+                    <div data-testid="paramsError">Redirected to Home</div>
+                  }
                 />
               </Routes>
             </I18nextProvider>
@@ -71,13 +92,16 @@ describe('Organisation Settings Page', () => {
         </MemoryRouter>
       </MockedProvider>,
     );
+
     await waitFor(() => {
-      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+      const paramsErrorElement = screen.getByTestId('paramsError');
+      expect(paramsErrorElement).toBeInTheDocument();
+      expect(paramsErrorElement.textContent).toBe('Redirected to Home');
     });
   });
 
-  test('should render the organisation settings page', async () => {
-    renderOrganisationSettings(link1);
+  it('should render the organisation settings page', async () => {
+    renderOrganisationSettings();
 
     await waitFor(() => {
       expect(screen.getByTestId('generalSettings')).toBeInTheDocument();
@@ -88,10 +112,11 @@ describe('Organisation Settings Page', () => {
         screen.getByTestId('agendaItemCategoriesSettings'),
       ).toBeInTheDocument();
     });
-    userEvent.click(screen.getByTestId('generalSettings'));
 
+    userEvent.click(screen.getByTestId('generalSettings'));
     await waitFor(() => {
       expect(screen.getByTestId('generalTab')).toBeInTheDocument();
+      expect(screen.getByTestId('generalTab')).toBeVisible();
     });
 
     userEvent.click(screen.getByTestId('actionItemCategoriesSettings'));
@@ -104,4 +129,19 @@ describe('Organisation Settings Page', () => {
       expect(screen.getByTestId('agendaItemCategoriesTab')).toBeInTheDocument();
     });
   });
+
+  it('should render dropdown for settings tabs', async () => {
+    renderOrganisationSettings();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('settingsDropdownToggle')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('settingsDropdownToggle'));
+
+    const dropdownItems = screen.getAllByRole('button', {
+      name: /general|actionItemCategories|agendaItemCategories/i,
+    });
+    expect(dropdownItems).toHaveLength(3);
+  });
 });