diff --git a/src/proctored-exam-settings/ProctoredExamSettings.jsx b/src/proctored-exam-settings/ProctoredExamSettings.jsx index 5dc05e923..e24b56a3e 100644 --- a/src/proctored-exam-settings/ProctoredExamSettings.jsx +++ b/src/proctored-exam-settings/ProctoredExamSettings.jsx @@ -26,6 +26,7 @@ function ExamSettings(props) { const [courseStartDate, setCourseStartDate] = useState(''); const [saveSuccess, setSaveSuccess] = useState(false); const [saveError, setSaveError] = useState(false); + const [submissionInProgress, setSubmissionInProgress] = useState(false); function onEnableProctoredExamsChange(event) { setEnableProctoredExams(event.target.checked); @@ -64,12 +65,15 @@ function ExamSettings(props) { create_zendesk_tickets: createZendeskTickets, }, }; + setSubmissionInProgress(true); StudioApiService.saveProctoredExamSettingsData(props.courseId, dataToPostBack).then(() => { setSaveSuccess(true); setSaveError(false); + setSubmissionInProgress(false); }).catch(() => { setSaveSuccess(false); setSaveError(true); + setSubmissionInProgress(false); }); } @@ -238,9 +242,11 @@ function ExamSettings(props) { className="btn-primary mb-3" data-test-id="submissionButton" onClick={onButtonClick} + disabled={submissionInProgress} > Submit - + {' '} + {submissionInProgress && } ); } @@ -320,6 +326,7 @@ function ExamSettings(props) { const proctoredExamSettings = response.data.proctored_exam_settings; setLoaded(true); setLoading(false); + setSubmissionInProgress(false); setCourseStartDate(response.data.course_start_date); setEnableProctoredExams(proctoredExamSettings.enable_proctored_exams); setAllowOptingOut(proctoredExamSettings.allow_proctoring_opt_out); @@ -337,6 +344,7 @@ function ExamSettings(props) { } setLoading(false); setLoaded(false); + setSubmissionInProgress(false); }, ); }, [], diff --git a/src/proctored-exam-settings/ProctoredExamSettings.test.jsx b/src/proctored-exam-settings/ProctoredExamSettings.test.jsx index 9b4875e32..c3a479719 100644 --- a/src/proctored-exam-settings/ProctoredExamSettings.test.jsx +++ b/src/proctored-exam-settings/ProctoredExamSettings.test.jsx @@ -296,6 +296,19 @@ describe('ProctoredExamSettings save settings tests', () => { return { mockClientGet, mockClientPost }; } + it('Show spinner while saving', async () => { + const mockedFunctions = mockAPI(mockGetData, { data: 'success' }); + await act(async () => render()); + const submitButton = screen.getByTestId('submissionButton'); + expect(screen.queryByTestId('saveInProgress')).toBeFalsy(); + fireEvent.click(submitButton); + const submitSpinner = screen.getByTestId('saveInProgress'); + expect(submitSpinner).toBeDefined(); + expect(mockedFunctions.mockClientPost).toHaveBeenCalled(); + await waitForElementToBeRemoved(submitSpinner); + expect(screen.queryByTestId('saveInProgress')).toBeFalsy(); + }); + it('Makes API call successfully', async () => { const mockedFunctions = mockAPI(mockGetData, { data: 'success' }); await act(async () => render());