feat: add feedback to user

Author: diana-villalvazo-wgu

src/specialExams/components/Attempts.test.tsx

@@ -1,9 +1,10 @@
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { AxiosError } from 'axios';
 import Attempts from './Attempts';
 import { useAttempts, useResetAttempt } from '../data/apiHook';
 import { Attempt } from '../types';
-import { renderWithIntl } from '@src/testUtils';
+import { renderWithAlertAndIntl } from '@src/testUtils';
 import messages from '../messages';
 
 jest.mock('react-router-dom', () => ({
@@ -42,27 +43,88 @@ describe('Attempts', () => {
     });
   });
 
+  const clickReset = async () => {
+    const actionsButton = screen.getByRole('button', { name: messages.actions.defaultMessage });
+    await userEvent.click(actionsButton);
+    const resetButton = screen.getByRole('button', { name: messages.reset.defaultMessage });
+    await userEvent.click(resetButton);
+  };
+
   it('renders AttemptsList component', () => {
-    renderWithIntl(<Attempts />);
+    renderWithAlertAndIntl(<Attempts />);
     const usernameCell = screen.getByRole('cell', { name: mockAttempt.user.username });
     expect(usernameCell).toBeInTheDocument();
   });
 
   it('calls useResetAttempt with courseId from route params', () => {
-    renderWithIntl(<Attempts />);
+    renderWithAlertAndIntl(<Attempts />);
     expect(useResetAttempt).toHaveBeenCalledWith('course-v1:edX+Test+2024');
   });
 
   it('calls resetAttempt with username and examId when onReset is triggered', async () => {
-    renderWithIntl(<Attempts />);
-    const actionsButton = screen.getByRole('button', { name: messages.actions.defaultMessage });
-    await userEvent.click(actionsButton);
-    const resetButton = screen.getByRole('button', { name: messages.reset.defaultMessage });
-    await userEvent.click(resetButton);
+    renderWithAlertAndIntl(<Attempts />);
+    await clickReset();
+
+    expect(mockResetAttempt).toHaveBeenCalledWith(
+      { username: 'testuser', examId: 42 },
+      expect.objectContaining({
+        onSuccess: expect.any(Function),
+        onError: expect.any(Function),
+      }),
+    );
+  });
+
+  it('shows a success toast when reset succeeds', async () => {
+    mockResetAttempt.mockImplementation((_params, options) => {
+      options.onSuccess();
+    });
+
+    renderWithAlertAndIntl(<Attempts />);
+    await clickReset();
+
+    const successMessage = screen.getByText(messages.successOnReset.defaultMessage.replace('{student}', mockAttempt.user.username).replace('{examName}', mockAttempt.examName));
+
+    await waitFor(() => {
+      expect(successMessage).toBeInTheDocument();
+    });
+  });
+
+  it('shows an error modal with API detail when reset fails with AxiosError', async () => {
+    const axiosError = new AxiosError('Request failed');
+    axiosError.response = {
+      data: { detail: 'Student has no active attempt.' },
+      status: 400,
+      statusText: 'Bad Request',
+      headers: {},
+      config: {} as any,
+    };
+
+    mockResetAttempt.mockImplementation((_params, options) => {
+      options.onError(axiosError);
+    });
+
+    renderWithAlertAndIntl(<Attempts />);
+    await clickReset();
+
+    await waitFor(() => {
+      expect(screen.getByText('Student has no active attempt.')).toBeInTheDocument();
+    });
+    expect(screen.getByText(messages.close.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('shows a generic error modal when reset fails with a non-Axios error', async () => {
+    const genericError = new Error('Something went wrong');
+
+    mockResetAttempt.mockImplementation((_params, options) => {
+      options.onError(genericError);
+    });
+
+    renderWithAlertAndIntl(<Attempts />);
+    await clickReset();
 
-    expect(mockResetAttempt).toHaveBeenCalledWith({
-      username: 'testuser',
-      examId: 42,
+    await waitFor(() => {
+      expect(screen.getByText(messages.errorOnReset.defaultMessage)).toBeInTheDocument();
     });
+    expect(screen.getByText(messages.close.defaultMessage)).toBeInTheDocument();
   });
 });

src/specialExams/components/Attempts.tsx

@@ -1,20 +1,34 @@
 import { useParams } from 'react-router-dom';
+import { isAxiosError } from 'axios';
 import { Attempt } from '../types';
 import AttemptsList from './AttemptsList';
 import { useResetAttempt } from '../data/apiHook';
+import messages from '../messages';
+import { useAlert } from '@src/providers/AlertProvider';
+import { useIntl } from '@openedx/frontend-base';
 
 const Attempts = () => {
   const { courseId = '' } = useParams<{ courseId: string }>();
+  const intl = useIntl();
   const { mutate: resetAttempt } = useResetAttempt(courseId);
+  const { showModal, showToast } = useAlert();
 
   const handleResume = (attempt: Attempt) => {
     // Implement resume logic here
     console.log('Resume attempt:', courseId, attempt);
   };
 
   const handleReset = (attempt: Attempt) => {
-    const { user, examId } = attempt;
-    resetAttempt({ username: user.username, examId });
+    const { user, examId, examName } = attempt;
+    resetAttempt({ username: user.username, examId }, {
+      onSuccess: () => {
+        showToast(intl.formatMessage(messages.successOnReset, { examName, student: user.username }));
+      },
+      onError: (error) => {
+        const errorMessage = isAxiosError(error) && error?.response?.data?.detail || intl.formatMessage(messages.errorOnReset, { examName, student: user.username });
+        showModal({ message: errorMessage, confirmText: intl.formatMessage(messages.close)});
+      }
+    });
   };
 
   return (

src/specialExams/messages.ts

@@ -245,6 +245,21 @@ const messages = defineMessages({
     id: 'instruct.specialExams.true',
     defaultMessage: 'True',
     description: 'Display value for a boolean true value'
+  },
+  successOnReset: {
+    id: 'instruct.specialExams.successOnReset',
+    defaultMessage: 'Successfully reset attempt on {examName} for {student}.',
+    description: 'Success message shown after resetting an exam attempt'
+  },
+  errorOnReset: {
+    id: 'instruct.specialExams.errorOnReset',
+    defaultMessage: 'An error occurred while resetting the attempt. Please try again.',
+    description: 'Error message shown when resetting an exam attempt fails'
+  },
+  close: {
+    id: 'instruct.specialExams.close',
+    defaultMessage: 'Close',
+    description: 'Label for close button'
   }
 });