feat(procedures): added supplementary unit test (#14737)

ref: MANAGER-14846
Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>

packages/manager/apps/procedures/package.json

@@ -45,6 +45,7 @@
     "@tanstack/react-query-devtools": "^5.51.21",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.2.0",
     "element-internals-polyfill": "^1.3.10",

packages/manager/apps/procedures/src/components/Loading/Loading.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Loading from './Loading';
+
+describe('Loading', () => {
+  it('should render with the correct layout', () => {
+    const { container } = render(<Loading />);
+
+    expect(
+      container.querySelector('.flex.justify-center.items-center'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.w-28')).toBeInTheDocument();
+  });
+});

packages/manager/apps/procedures/src/components/Loading/SkeletonLoading.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { SkeletonLoading } from './SkeletonLoading';
+
+describe('SkeletonLoading Component', () => {
+  it('should render the correct number of skeleton loaders', () => {
+    const { container } = render(<SkeletonLoading />);
+
+    const skeletons = container.querySelectorAll('osds-skeleton');
+    expect(skeletons).toHaveLength(7);
+  });
+
+  it('should have the correct wrapper classes', () => {
+    const { container } = render(<SkeletonLoading />);
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass('w-[100%]', 'p-10');
+  });
+});

packages/manager/apps/procedures/src/context/User/modals/ExpiredSessionModal.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+import { ExpiredSessionModal } from './ExpiredSessionModal';
+
+const onCloseMock = vi.fn();
+
+describe('ExpiredSessionModal', () => {
+  it('should render the modal with the correct content', () => {
+    render(<ExpiredSessionModal onClose={onCloseMock} />);
+
+    expect(
+      screen.getByText('account-disable-2fa-session-modal-expired-title'),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByText('account-disable-2fa-session-modal-expired-message'),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByText('account-disable-2fa-session-modal-expired-auth-button'),
+    ).toBeInTheDocument();
+  });
+
+  it('should call onClose when the button is clicked', () => {
+    render(<ExpiredSessionModal onClose={onCloseMock} />);
+
+    const button = screen.getByText(
+      'account-disable-2fa-session-modal-expired-auth-button',
+    );
+    fireEvent.click(button);
+
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+});

packages/manager/apps/procedures/src/context/User/modals/SessionModals.test.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+import { useSessionModal } from '../useSessionModal';
+import userContext, { User } from '../context';
+import { getRedirectLoginUrl } from '@/utils/url-builder';
+import { SessionModals } from './SessionModals';
+
+vi.mock('../useSessionModal', () => ({
+  useSessionModal: vi.fn(),
+}));
+
+vi.mock('@/utils/url-builder', () => ({
+  getRedirectLoginUrl: vi.fn(),
+}));
+
+vi.mock('./ExpiredSessionModal', () => ({
+  ExpiredSessionModal: ({ onClose }: { onClose: () => void }) => (
+    <div data-testid="expired-session-modal">
+      <button onClick={onClose}>Close Expired Modal</button>
+    </div>
+  ),
+}));
+
+vi.mock('./WarningSessionModal', () => ({
+  WarningSessionModal: ({ onClose }: { onClose: () => void }) => (
+    <div data-testid="warning-session-modal">
+      <button onClick={onClose}>Close Warning Modal</button>
+    </div>
+  ),
+}));
+
+const mockUser: Partial<User> = {
+  legalForm: 'administration',
+  email: '[email protected]',
+  language: 'en',
+  subsidiary: 'FR',
+};
+
+describe('SessionModals', () => {
+  const mockSetShowExpiredModal = vi.fn();
+  const mockSetShowWarningModal = vi.fn();
+
+  beforeEach(() => {
+    (useSessionModal as any).mockReturnValue({
+      setShowExpiredModal: mockSetShowExpiredModal,
+      setShowWarningModal: mockSetShowWarningModal,
+      showExpiredModal: false,
+      showWarningModal: false,
+    });
+
+    (getRedirectLoginUrl as any).mockReturnValue('https://login.url');
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should not display any modals by default', () => {
+    render(
+      <userContext.Provider value={{ user: mockUser as User }}>
+        <SessionModals />
+      </userContext.Provider>,
+    );
+
+    expect(
+      screen.queryByTestId('expired-session-modal'),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId('warning-session-modal'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should display the ExpiredSessionModal when showExpiredModal is true', () => {
+    (useSessionModal as any).mockReturnValue({
+      setShowExpiredModal: mockSetShowExpiredModal,
+      setShowWarningModal: mockSetShowWarningModal,
+      showExpiredModal: true,
+      showWarningModal: false,
+    });
+
+    render(
+      <userContext.Provider value={{ user: mockUser as User }}>
+        <SessionModals />
+      </userContext.Provider>,
+    );
+
+    expect(screen.getByTestId('expired-session-modal')).toBeInTheDocument();
+  });
+
+  it('should close the ExpiredSessionModal and redirect when the close button is clicked', async () => {
+    (useSessionModal as any).mockReturnValue({
+      setShowExpiredModal: mockSetShowExpiredModal,
+      setShowWarningModal: mockSetShowWarningModal,
+      showExpiredModal: true,
+      showWarningModal: false,
+    });
+
+    render(
+      <userContext.Provider value={{ user: mockUser as User }}>
+        <SessionModals />
+      </userContext.Provider>,
+    );
+
+    const closeButton = screen.getByText('Close Expired Modal');
+    fireEvent.click(closeButton);
+
+    await vi.waitFor(() => {
+      expect(mockSetShowExpiredModal).toHaveBeenCalledWith(false);
+      expect(getRedirectLoginUrl).toHaveBeenCalledWith(mockUser);
+    });
+  });
+
+  it('should display the WarningSessionModal when showWarningModal is true', () => {
+    (useSessionModal as any).mockReturnValue({
+      setShowExpiredModal: mockSetShowExpiredModal,
+      setShowWarningModal: mockSetShowWarningModal,
+      showExpiredModal: false,
+      showWarningModal: true,
+    });
+
+    render(
+      <userContext.Provider value={{ user: mockUser as User }}>
+        <SessionModals />
+      </userContext.Provider>,
+    );
+
+    expect(screen.getByTestId('warning-session-modal')).toBeInTheDocument();
+  });
+
+  it('should close the WarningSessionModal when the close button is clicked', () => {
+    (useSessionModal as any).mockReturnValue({
+      setShowExpiredModal: mockSetShowExpiredModal,
+      setShowWarningModal: mockSetShowWarningModal,
+      showExpiredModal: false,
+      showWarningModal: true,
+    });
+
+    render(
+      <userContext.Provider value={{ user: mockUser as User }}>
+        <SessionModals />
+      </userContext.Provider>,
+    );
+
+    const closeButton = screen.getByText('Close Warning Modal');
+    fireEvent.click(closeButton);
+
+    expect(mockSetShowWarningModal).toHaveBeenCalledWith(false);
+  });
+});

packages/manager/apps/procedures/src/context/User/modals/SessionModals.tsx

@@ -6,7 +6,9 @@ import { WarningSessionModal } from './WarningSessionModal';
 import userContext from '../context';
 
 export const SessionModals: FunctionComponent = () => {
-  const { user } = useContext(userContext);
+  const context = useContext(userContext);
+
+  const { user } = context;
   const {
     setShowExpiredModal,
     setShowWarningModal,

packages/manager/apps/procedures/src/context/User/modals/WarningSessionModal.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+import { WarningSessionModal } from './WarningSessionModal';
+
+const onCloseMock = vi.fn();
+
+describe('WarningSessionModal', () => {
+  it('should render the modal with the correct content', () => {
+    render(<WarningSessionModal onClose={onCloseMock} />);
+
+    expect(
+      screen.getByText('account-disable-2fa-session-modal-warning-message'),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByText('account-disable-2fa-session-modal-warning-ok-button'),
+    ).toBeInTheDocument();
+  });
+
+  it('should call onClose when the button is clicked', () => {
+    render(<WarningSessionModal onClose={onCloseMock} />);
+
+    const button = screen.getByText(
+      'account-disable-2fa-session-modal-warning-ok-button',
+    );
+    fireEvent.click(button);
+
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+});