✅ [open-formulieren/open-forms#4929] Add test for summary -> status -> error submission flow

There's now a test to lock in the behaviour after confirming the
submission, getting the status page with spinner and redirect back
to summary page if there's a background processing error.

Now we can refactor the error message state handling to get these
props out of the Summary component.

The fake timer situation is... complicated. See
testing-library/react-testing-library#1197

Author: sergei-maertens

src/components/Form.jsx

@@ -318,12 +318,10 @@ const Form = () => {
             <SessionTrackerModal>
               <RequireSubmission
                 retrieveSubmissionFromContext
+                component={SubmissionSummary}
                 processingError={state.processingError}
                 onConfirm={onSubmitForm}
-                component={SubmissionSummary}
                 onClearProcessingErrors={() => dispatch({type: 'CLEAR_PROCESSING_ERROR'})}
-                onDestroySession={onDestroySession}
-                form={form}
               />
             </SessionTrackerModal>
           </ErrorBoundary>

src/components/Form.spec.jsx

@@ -1,26 +1,45 @@
-import {render, screen} from '@testing-library/react';
+import {render, screen, waitForElementToBeRemoved} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import messagesEN from 'i18n/compiled/en.json';
 import {IntlProvider} from 'react-intl';
 import {RouterProvider, createMemoryRouter} from 'react-router-dom';
 
 import {ConfigContext, FormContext} from 'Context';
-import {BASE_URL, buildForm, mockAnalyticsToolConfigGet} from 'api-mocks';
+import {BASE_URL, buildForm, buildSubmission, mockAnalyticsToolConfigGet} from 'api-mocks';
 import mswServer from 'api-mocks/msw-server';
-import {mockSubmissionPost, mockSubmissionStepGet} from 'api-mocks/submissions';
+import {
+  mockSubmissionCompletePost,
+  mockSubmissionGet,
+  mockSubmissionPost,
+  mockSubmissionProcessingStatusErrorGet,
+  mockSubmissionStepGet,
+  mockSubmissionSummaryGet,
+} from 'api-mocks/submissions';
 import {routes} from 'components/App';
+import {SUBMISSION_ALLOWED} from 'components/constants';
 
 window.scrollTo = vi.fn();
 
+beforeAll(() => {
+  vi.stubGlobal('jest', {
+    advanceTimersByTime: vi.advanceTimersByTime.bind(vi),
+  });
+});
+
 beforeEach(() => {
   localStorage.clear();
 });
 
 afterEach(() => {
+  if (vi.isFakeTimers()) {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+  }
   localStorage.clear();
 });
 
 afterAll(() => {
+  vi.unstubAllGlobals();
   vi.clearAllMocks();
 });
 
@@ -129,3 +148,46 @@ test('Navigation through form without introduction page', async () => {
   const formInput = await screen.findByLabelText('Component 1');
   expect(formInput).toBeVisible();
 });
+
+test('Submitting the form with failing background processing', async () => {
+  const user = userEvent.setup({
+    advanceTimers: vi.advanceTimersByTime,
+  });
+  // The summary page submits the form and needs to trigger the appropriate redirects.
+  // When the status check reports failure, we need to be redirected back to the summary
+  // page for a retry.
+  const form = buildForm({loginRequired: false, submissionStatementsConfiguration: []});
+  const submission = buildSubmission({
+    submissionAllowed: SUBMISSION_ALLOWED.yes,
+    payment: {
+      isRequired: false,
+      amount: undefined,
+      hasPaid: false,
+    },
+    MARKER: true,
+  });
+  mswServer.use(
+    mockAnalyticsToolConfigGet(),
+    mockSubmissionGet(submission),
+    mockSubmissionSummaryGet(),
+    mockSubmissionCompletePost(),
+    mockSubmissionProcessingStatusErrorGet
+  );
+
+  render(<Wrapper form={form} initialEntry={`/overzicht?submission_uuid=${submission.id}`} />);
+
+  expect(await screen.findByRole('heading', {name: 'Check and confirm'})).toBeVisible();
+
+  // confirm the submission and complete it
+  vi.useFakeTimers();
+  await user.click(screen.getByRole('button', {name: 'Confirm'}));
+  expect(await screen.findByRole('heading', {name: 'Processing...'})).toBeVisible();
+  const loader = await screen.findByRole('status');
+  vi.runOnlyPendingTimers();
+  vi.useRealTimers();
+  await waitForElementToBeRemoved(loader);
+
+  // due to the error we get redirected back to the summary page.
+  expect(await screen.findByRole('heading', {name: 'Check and confirm'})).toBeVisible();
+  expect(screen.getByText('Computer says no.')).toBeVisible();
+});