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

src/screens/OrgSettings/OrgSettings.test.tsx → src/screens/OrgSettings/OrgSettings.spec.tsx

@@ -1,36 +1,49 @@
+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}>
               <Routes>
                 <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,42 +55,54 @@ 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>
           </Provider>
         </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 +113,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 +130,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);
+  });
 });