test: edit unit tests

Author: diana-villalvazo-wgu

src/dateExtensions/DateExtensionsPage.test.tsx

@@ -1,11 +1,13 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@openedx/frontend-base';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import DateExtensionsPage from './DateExtensionsPage';
-import { useDateExtensions } from '../data/apiHook';
+import { useDateExtensions, useResetDateExtensionMutation } from '../data/apiHook';
 
 jest.mock('../data/apiHook', () => ({
   useDateExtensions: jest.fn(),
+  useResetDateExtensionMutation: jest.fn(),
 }));
 
 const mockDateExtensions = [
@@ -19,12 +21,17 @@ const mockDateExtensions = [
   },
 ];
 
+const mutateMock = jest.fn();
+
 describe('DateExtensionsPage', () => {
   beforeEach(() => {
     (useDateExtensions as jest.Mock).mockReturnValue({
       data: { count: mockDateExtensions.length, results: mockDateExtensions },
       isLoading: false,
     });
+    (useResetDateExtensionMutation as jest.Mock).mockReturnValue({
+      mutate: mutateMock,
+    });
   });
 
   const RenderWithRouter = () => (
@@ -67,4 +74,35 @@ describe('DateExtensionsPage', () => {
     const resetLinks = screen.getAllByRole('button', { name: 'Reset Extensions' });
     expect(resetLinks).toHaveLength(mockDateExtensions.length);
   });
+
+  it('opens reset modal when reset button is clicked', async () => {
+    render(<RenderWithRouter />);
+    const user = userEvent.setup();
+    const resetButton = screen.getByRole('button', { name: 'Reset Extensions' });
+    await user.click(resetButton);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText(/reset extensions for/i)).toBeInTheDocument();
+    const confirmButton = screen.getByRole('button', { name: /reset due date/i });
+    expect(confirmButton).toBeInTheDocument();
+  });
+
+  it('calls reset mutation when confirm reset is clicked', async () => {
+    render(<RenderWithRouter />);
+    const user = userEvent.setup();
+    const resetButton = screen.getByRole('button', { name: 'Reset Extensions' });
+    await user.click(resetButton);
+    const confirmButton = screen.getByRole('button', { name: /reset due date/i });
+    await user.click(confirmButton);
+    expect(mutateMock).toHaveBeenCalled();
+  });
+
+  it('closes reset modal when cancel is clicked', async () => {
+    render(<RenderWithRouter />);
+    const user = userEvent.setup();
+    const resetButton = screen.getByRole('button', { name: 'Reset Extensions' });
+    await user.click(resetButton);
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    await user.click(cancelButton);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
 });

src/dateExtensions/DateExtensionsPage.tsx

@@ -14,18 +14,18 @@ const DateExtensionsPage = () => {
   const intl = useIntl();
   const { courseId } = useParams<{ courseId: string }>();
   const { mutate: resetMutation } = useResetDateExtensionMutation();
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isResetModalOpen, setIsResetModalOpen] = useState(false);
   const [selectedUser, setSelectedUser] = useState<LearnerDateExtension | null>(null);
   const [successMessage, setSuccessMessage] = useState<string>('');
   const [errorMessage, setErrorMessage] = useState<string>('');
 
   const handleResetExtensions = (user: LearnerDateExtension) => {
-    setIsModalOpen(true);
+    setIsResetModalOpen(true);
     setSelectedUser(user);
   };
 
   const handleCloseModal = () => {
-    setIsModalOpen(false);
+    setIsResetModalOpen(false);
     setSelectedUser(null);
   };
 
@@ -60,7 +60,7 @@ const DateExtensionsPage = () => {
       </div>
       <DateExtensionsList onResetExtensions={handleResetExtensions} />
       <ResetExtensionsModal
-        isOpen={isModalOpen}
+        isOpen={isResetModalOpen}
         message={intl.formatMessage(messages.resetConfirmationMessage)}
         title={intl.formatMessage(messages.resetConfirmationHeader, { username: selectedUser?.username })}
         onCancelReset={handleCloseModal}
@@ -70,7 +70,7 @@ const DateExtensionsPage = () => {
       <Toast show={!!successMessage} onClose={() => {}} className="text-break">
         {successMessage}
       </Toast>
-      <AlertModal isOpen={!!errorMessage} footerNode={<Button onClick={() => setErrorMessage('')}>{intl.formatMessage(messages.close)}</Button>}>
+      <AlertModal title={errorMessage} isOpen={!!errorMessage} footerNode={<Button onClick={() => setErrorMessage('')}>{intl.formatMessage(messages.close)}</Button>}>
         {errorMessage}
       </AlertModal>
     </Container>