Added unit tests

src/components/Form.js

@@ -326,7 +326,7 @@ const Form = () => {
     showConfirmation,
     isCompleted
   );
-  debugger;
+
   const progressIndicator = form.showProgressIndicator ? (
     <ProgressIndicator
       progressIndicatorTitle="Progress"

src/components/ProgressIndicator/ProgressIndicatorItem.js

@@ -4,6 +4,7 @@ import {FormattedMessage} from 'react-intl';
 
 import Body from 'components/Body';
 import Link from 'components/Link';
+import {STEP_LABELS} from 'components/constants';
 import {getBEMClassName} from 'utils';
 
 import CompletionMark from './CompletionMark';
@@ -69,7 +70,7 @@ ProgressIndicatorItem.propTypes = {
   isCompleted: PropTypes.bool,
   canNavigateTo: PropTypes.bool,
   isApplicable: PropTypes.bool,
-  fixedText: PropTypes.string,
+  fixedText: PropTypes.element,
 };
 
 export default ProgressIndicatorItem;

src/components/ProgressIndicator/index.js

@@ -88,7 +88,7 @@ ProgressIndicator.propTypes = {
       isApplicable: PropTypes.bool,
       isCurrent: PropTypes.bool,
       canNavigateTo: PropTypes.bool,
-      fixedText: PropTypes.string,
+      fixedText: PropTypes.element,
     })
   ).isRequired,
   ariaMobileIconLabel: PropTypes.string.isRequired,

src/components/ProgressIndicator/progressIndicator.spec.js

@@ -0,0 +1,98 @@
+import messagesNL from 'i18n/compiled/nl.json';
+import React from 'react';
+import {createRoot} from 'react-dom/client';
+import {act} from 'react-dom/test-utils';
+import {IntlProvider} from 'react-intl';
+import {MemoryRouter} from 'react-router-dom';
+
+import ProgressIndicator from './index';
+import {addFixedSteps, getStepsInfo} from './utils';
+
+let container = null;
+let root = null;
+
+beforeEach(() => {
+  // setup a DOM element as a render target
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  // cleanup on exiting
+  act(() => {
+    root.unmount();
+    container.remove();
+    root = null;
+    container = null;
+  });
+});
+
+const submissionDefaults = {
+  id: 'some-id',
+  url: 'https://some-url',
+  form: 'https://some-form',
+  steps: [
+    {
+      uuid: 'd6cab0dd',
+      slug: 'first-step',
+      to: 'first-step',
+      formDefinition: 'Stap 1',
+      isCompleted: false,
+      isApplicable: true,
+      isCurrent: false,
+      canNavigateTo: true,
+    },
+  ],
+  payment: {
+    isRequired: false,
+    amount: '',
+    hasPaid: false,
+  },
+};
+
+let steps = [
+  {
+    uuid: 'd6cab0dd',
+    slug: 'first-step',
+    to: 'first-step',
+    formDefinition: 'Stap 1',
+    isCompleted: false,
+    isApplicable: true,
+    isCurrent: false,
+    canNavigateTo: true,
+  },
+];
+
+it('Progress Indicator renders expected steps', () => {
+  steps = getStepsInfo(steps, submissionDefaults, 'https://some-form/startpagina');
+  const updatedSteps = addFixedSteps(
+    steps,
+    submissionDefaults,
+    'https://some-form/startpagina',
+    true,
+    true
+  );
+
+  act(() => {
+    root.render(
+      <MemoryRouter initialEntries={['/']}>
+        <IntlProvider locale="nl" messages={messagesNL}>
+          <ProgressIndicator
+            progressIndicatorTitle="Progress"
+            formTitle="Test Name"
+            steps={updatedSteps}
+            ariaMobileIconLabel="test aria mobile"
+            accessibleToggleStepsLabel="test mobile"
+          />
+        </IntlProvider>
+      </MemoryRouter>
+    );
+  });
+
+  const progressIndicatorSteps = container.getElementsByTagName('ol')[0];
+  expect(progressIndicatorSteps.textContent).toContain('Startpagina');
+  expect(progressIndicatorSteps.textContent).toContain('Stap 1');
+  expect(progressIndicatorSteps.textContent).toContain('Overzicht');
+  expect(progressIndicatorSteps.textContent).toContain('Bevestiging');
+});

src/components/ProgressIndicator/utils.spec.js

@@ -0,0 +1,55 @@
+import {buildSubmission} from 'api-mocks/submissions';
+
+import {addFixedSteps, getStepsInfo} from './utils';
+
+const formSteps = [
+  {
+    uuid: '9e6eb3c5-e5a4-4abf-b64a-73d3243f2bf5',
+    slug: 'step-1',
+    to: 'step-1',
+    formDefinition: 'Step 1',
+    isCompleted: false,
+    isApplicable: true,
+    isCurrent: false,
+    canNavigateTo: true,
+  },
+];
+
+it('updates steps as expected', () => {
+  const submission = buildSubmission();
+  const updatedSteps = getStepsInfo(formSteps, submission, '/start-page');
+  const stepsToRender = addFixedSteps(updatedSteps, submission, '/start-page', true, true);
+
+  expect(stepsToRender[0].slug).toEqual('startpagina');
+
+  expect(stepsToRender[1].uuid).toEqual('9e6eb3c5-e5a4-4abf-b64a-73d3243f2bf5');
+  expect(stepsToRender[1].slug).toEqual('step-1');
+  expect(stepsToRender[1].to).toEqual('/stap/step-1');
+  expect(stepsToRender[1].formDefinition).toEqual('Step 1');
+  expect(stepsToRender[1].isCompleted).toEqual(false);
+  expect(stepsToRender[1].isApplicable).toEqual(true);
+  expect(stepsToRender[1].isCurrent).toEqual(false);
+  expect(stepsToRender[1].canNavigateTo).toEqual(true);
+
+  expect(stepsToRender[2].slug).toEqual('overzicht');
+  expect(stepsToRender[3].slug).toEqual('bevestiging');
+});
+
+it('doesnt contain overview and summary when false', () => {
+  const submission = buildSubmission();
+  const updatedSteps = getStepsInfo(formSteps, submission, '/start-page');
+  const stepsToRender = addFixedSteps(updatedSteps, submission, '/start-page', false, false);
+
+  expect(stepsToRender.length).toEqual(2);
+
+  expect(stepsToRender[0].slug).toEqual('startpagina');
+
+  expect(stepsToRender[1].uuid).toEqual('9e6eb3c5-e5a4-4abf-b64a-73d3243f2bf5');
+  expect(stepsToRender[1].slug).toEqual('step-1');
+  expect(stepsToRender[1].to).toEqual('/stap/step-1');
+  expect(stepsToRender[1].formDefinition).toEqual('Step 1');
+  expect(stepsToRender[1].isCompleted).toEqual(false);
+  expect(stepsToRender[1].isApplicable).toEqual(true);
+  expect(stepsToRender[1].isCurrent).toEqual(false);
+  expect(stepsToRender[1].canNavigateTo).toEqual(true);
+});