✅ [open-formulieren/open-forms#180] Test stop button

open-formulieren · Jan 16, 2024 · 4794cb2 · 4794cb2
1 parent dc4111f
commit 4794cb2
Show file tree

Hide file tree

Showing 12 changed files with 221 additions and 25 deletions.
diff --git a/src/api-mocks/index.js b/src/api-mocks/index.js
@@ -1,3 +1,3 @@
 export {BASE_URL} from './base';
 export {buildForm, mockFormGet} from './forms';
-export {buildSubmission} from './submissions';
+export {buildSubmission, mockGetAnalyticsToolConfig} from './submissions';
diff --git a/src/api-mocks/submissions.js b/src/api-mocks/submissions.js
@@ -143,3 +143,15 @@ export const mockSubmissionPaymentStartGet = rest.post(
     return res(ctx.json({data: {method: 'get', action: 'https://example.com'}}));
   }
 );
+
+export const mockGetAnalyticsToolConfig = (overrides = {}) =>
+  rest.get(`${BASE_URL}analytics/analytics_tools_config_info`, (req, res, ctx) =>
+    res(
+      ctx.json({
+        govmetricSourceId: '',
+        govmetricSecureGuid: '',
+        enableGovmetricAnalytics: false,
+        ...overrides,
+      })
+    )
+  );
diff --git a/src/components/AbortionButton/AbortionButton.mdx b/src/components/AbortionButton/AbortionButton.mdx
@@ -0,0 +1,25 @@
+import {ArgTypes, Canvas, Meta, Story} from '@storybook/blocks';
+
+import * as AbortionButtonStories from './AbortionButton.stories';
+
+<Meta of={AbortionButtonStories} />
+
+# Abortion Button
+
+The abortion button can be used to abort a submission whether the user is authenticated or not.
+
+- If the user is authenticated, then the button will have the text 'Log out' to comply with Logius
+  directives that whenever a user is logged in with DigiD a 'Log out' option must be available.
+- If the analytics tool 'GovMetric' is enabled, aborting the submission will open a new window where
+  the user can give feedback about why they decided to not fill the form until the end.
+
+<Canvas>
+  <Story of={AbortionButtonStories.Authenticated} />
+  <Story of={AbortionButtonStories.GovMetricEnabled} />
+  <Story of={AbortionButtonStories.AuthenticatedAndGovmetric} />
+  <Story of={AbortionButtonStories.NotAuthenticatedNoGovMetric} />
+</Canvas>
+
+## Props
+
+<ArgTypes of={AbortionButtonStories} />
diff --git a/src/components/AbortionButton/AbortionButton.stories.js b/src/components/AbortionButton/AbortionButton.stories.js
@@ -0,0 +1,78 @@
+import {expect} from '@storybook/jest';
+import {waitFor, within} from '@storybook/testing-library';
+
+import {AnalyticsToolsDecorator} from 'story-utils/decorators';
+
+import AbortionButton from './AbortionButton';
+
+export default {
+  title: 'Private API / Abortion button',
+  component: AbortionButton,
+  decorators: [AnalyticsToolsDecorator],
+};
+
+export const Authenticated = {
+  args: {
+    isAuthenticated: true,
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+      const abortButton = await canvas.queryByRole('button', {name: 'Uitloggen'});
+      await expect(abortButton).toBeVisible();
+    });
+  },
+};
+
+export const GovMetricEnabled = {
+  args: {
+    isAuthenticated: false,
+    analyticsToolsParams: {
+      govmetricSourceId: '1234',
+      govmetricSecureGuid: '',
+      enableGovmetricAnalytics: true,
+    },
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+      const abortButton = await canvas.queryByRole('button', {name: 'Abort submission'});
+      await expect(abortButton).toBeVisible();
+    });
+  },
+};
+
+export const AuthenticatedAndGovmetric = {
+  args: {
+    isAuthenticated: true,
+    analyticsToolsParams: {
+      govmetricSourceId: '1234',
+      govmetricSecureGuid: '',
+      enableGovmetricAnalytics: true,
+    },
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+      const abortButton = await canvas.queryByRole('button', {name: 'Uitloggen'});
+      await expect(abortButton).toBeVisible();
+    });
+  },
+};
+
+export const NotAuthenticatedNoGovMetric = {
+  args: {
+    isAuthenticated: false,
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+      const abortButton = await canvas.queryByRole('button');
+      await expect(abortButton).toBeNull();
+    });
+  },
+};
diff --git a/src/components/App.stories.js b/src/components/App.stories.js
@@ -3,7 +3,7 @@ import {userEvent, waitForElementToBeRemoved, within} from '@storybook/testing-l
 import {RouterProvider, createMemoryRouter} from 'react-router-dom';
 
 import {FormContext} from 'Context';
-import {BASE_URL} from 'api-mocks';
+import {BASE_URL, mockGetAnalyticsToolConfig} from 'api-mocks';
 import {buildForm} from 'api-mocks';
 import {
   mockSubmissionCheckLogicPost,
@@ -79,6 +79,7 @@ export default {
           {code: 'en', name: 'English'},
         ]),
         mockLanguageChoicePut,
+        mockGetAnalyticsToolConfig(),
       ],
     },
   },
@@ -189,6 +190,7 @@ export const ActiveSubmission = {
           {code: 'en', name: 'English'},
         ]),
         mockLanguageChoicePut,
+        mockGetAnalyticsToolConfig(),
       ],
     },
   },

diff --git a/src/components/FormStart/tests.spec.js b/src/components/FormStart/tests.spec.js
@@ -45,15 +45,15 @@ it('Form start page start if _start parameter is present', () => {
   useQuery.mockReturnValue(testLocation);
 
   const onFormStart = jest.fn();
-  const onFormAbort = jest.fn();
+  const onDestroySession = jest.fn();
 
   act(() => {
     root.render(
       <Wrap>
         <FormStart
           form={testForm}
           onFormStart={onFormStart}
-          onFormAbort={onFormAbort}
+          onDestroySession={onDestroySession}
           hasActiveSubmission={false}
         />
       </Wrap>
@@ -65,7 +65,7 @@ it('Form start page start if _start parameter is present', () => {
 
 it('Form start does not start if there are auth errors', () => {
   const onFormStart = jest.fn();
-  const onFormAbort = jest.fn();
+  const onDestroySession = jest.fn();
 
   const testQueries = {
     '_digid-message=error':
@@ -86,7 +86,7 @@ it('Form start does not start if there are auth errors', () => {
           <FormStart
             form={testForm}
             onFormStart={onFormStart}
-            onFormAbort={onFormAbort}
+            onDestroySession={onDestroySession}
             hasActiveSubmission={false}
           />
         </Wrap>
@@ -101,14 +101,14 @@ it('Form start does not start if there are auth errors', () => {
 it('Form start page does not show login buttons if an active submission is present', () => {
   useQuery.mockReturnValue(new URLSearchParams());
   const onFormStart = jest.fn();
-  const onFormAbort = jest.fn();
+  const onDestroySession = jest.fn();
 
   renderTest(
     <Wrap>
       <FormStart
         form={testForm}
         onFormStart={onFormStart}
-        onFormAbort={onFormAbort}
+        onDestroySession={onDestroySession}
         hasActiveSubmission={true}
       />
     </Wrap>,

diff --git a/src/components/FormStep/FormStep.stories.js b/src/components/FormStep/FormStep.stories.js
@@ -1,10 +1,12 @@
+import {expect} from '@storybook/jest';
+import {waitFor, within} from '@storybook/testing-library';
 import produce from 'immer';
 import {getWorker} from 'msw-storybook-addon';
 import {withRouter} from 'storybook-addon-react-router-v6';
 import {v4 as uuid4} from 'uuid';
 
-import {buildForm, buildSubmission} from 'api-mocks';
-import {ConfigDecorator} from 'story-utils/decorators';
+import {buildForm, buildSubmission, mockGetAnalyticsToolConfig} from 'api-mocks';
+import {AnalyticsToolsDecorator, ConfigDecorator} from 'story-utils/decorators';
 
 import FormStep from '.';
 import {
@@ -16,7 +18,7 @@ import {
 export default {
   title: 'Private API / FormStep',
   component: FormStep,
-  decorators: [ConfigDecorator, withRouter],
+  decorators: [ConfigDecorator, withRouter, AnalyticsToolsDecorator],
   argTypes: {
     submission: {control: false},
     form: {control: false},
@@ -41,8 +43,8 @@ const render = ({
   submission,
   onLogicChecked,
   onStepSubmitted,
-  onLogout,
   onSessionDestroyed,
+  onDestroySession,
   // story args
   formioConfiguration,
 }) => {
@@ -66,8 +68,8 @@ const render = ({
       submission={submission}
       onLogicChecked={onLogicChecked}
       onStepSubmitted={onStepSubmitted}
-      onLogout={onLogout}
       onSessionDestroyed={onSessionDestroyed}
+      onDestroySession={onDestroySession}
     />
   );
 };
@@ -128,3 +130,45 @@ export const SuspensionDisallowed = {
     submission: buildSubmission(),
   },
 };
+
+export const govmetricEnabled = {
+  name: 'GovMetric enabled',
+  render,
+  args: {
+    formioConfiguration: {
+      display: 'form',
+      components: [
+        {
+          type: 'textfield',
+          key: 'text1',
+          label: 'Simple text field',
+          description: 'A help text for the text field',
+        },
+        {
+          type: 'radio',
+          key: 'radio1',
+          label: 'Radio choices',
+          values: [
+            {value: 'option1', label: 'Option1'},
+            {value: 'option2', label: 'Option2'},
+          ],
+        },
+      ],
+    },
+    form: buildForm(),
+    submission: buildSubmission(),
+    analyticsToolsParams: {
+      govmetricSourceId: '1234',
+      govmetricSecureGuid: '',
+      enableGovmetricAnalytics: true,
+    },
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+      const abortButton = await canvas.queryByRole('button', {name: 'Abort submission'});
+      await expect(abortButton).toBeVisible();
+    });
+  },
+};
diff --git a/src/components/ProgressIndicator/progressIndicator.spec.js b/src/components/ProgressIndicator/progressIndicator.spec.js
@@ -5,7 +5,7 @@ import {IntlProvider} from 'react-intl';
 import {RouterProvider, createMemoryRouter} from 'react-router-dom';
 
 import {ConfigContext, FormContext} from 'Context';
-import {BASE_URL, buildForm} from 'api-mocks';
+import {BASE_URL, buildForm, mockGetAnalyticsToolConfig} from 'api-mocks';
 import {getDefaultFactory} from 'api-mocks/base';
 import {FORM_DEFAULTS} from 'api-mocks/forms';
 import mswServer from 'api-mocks/msw-server';
@@ -57,7 +57,7 @@ afterEach(() => {
 
 describe('The progress indicator component', () => {
   it('displays the available submission/form steps and hardcoded steps (without payment)', async () => {
-    mswServer.use(mockSubmissionPost(buildSubmission()));
+    mswServer.use(mockSubmissionPost(buildSubmission()), mockGetAnalyticsToolConfig());
     const user = userEvent.setup({delay: null});
     const form = buildForm();
 
@@ -78,7 +78,7 @@ describe('The progress indicator component', () => {
   });
 
   it('displays the available submission/form steps and hardcoded steps (with payment)', async () => {
-    mswServer.use(mockSubmissionPost(buildSubmission()));
+    mswServer.use(mockSubmissionPost(buildSubmission()), mockGetAnalyticsToolConfig());
     const user = userEvent.setup({delay: null});
     const form = buildForm({paymentRequired: true});
 
@@ -101,7 +101,7 @@ describe('The progress indicator component', () => {
   });
 
   it('renders steps in the correct order', async () => {
-    mswServer.use(mockSubmissionPost(buildSubmission()));
+    mswServer.use(mockSubmissionPost(buildSubmission()), mockGetAnalyticsToolConfig());
     const user = userEvent.setup({delay: null});
     const form = buildForm();
 

diff --git a/src/components/Summary/test.spec.js b/src/components/Summary/test.spec.js
@@ -62,7 +62,7 @@ it('Summary displays logout button if isAuthenticated is true', () => {
     ...SUBMISSION,
     isAuthenticated: true,
   };
-  const onLogout = jest.fn();
+  const onDestroySession = jest.fn();
   const onConfirm = jest.fn();
 
   useAsync.mockReturnValue({loading: false, value: []});
@@ -75,7 +75,7 @@ it('Summary displays logout button if isAuthenticated is true', () => {
           form={testForm}
           submission={SUBMISSION}
           onConfirm={onConfirm}
-          onLogout={onLogout}
+          onDestroySession={onDestroySession}
           onClearProcessingErrors={() => {}}
         />
       </Wrap>
@@ -90,7 +90,7 @@ it('Summary does not display logout button if loginRequired is false', () => {
     ...testForm,
     loginRequired: false,
   };
-  const onLogout = jest.fn();
+  const onDestroySession = jest.fn();
   const onConfirm = jest.fn();
 
   useAsync.mockReturnValue({loading: false, value: []});
@@ -103,7 +103,7 @@ it('Summary does not display logout button if loginRequired is false', () => {
           form={formLoginRequired}
           submission={SUBMISSION}
           onConfirm={onConfirm}
-          onLogout={onLogout}
+          onDestroySession={onDestroySession}
           onClearProcessingErrors={() => {}}
         />
       </Wrap>

diff --git a/src/components/analytics/utils.spec.js b/src/components/analytics/utils.spec.js
@@ -0,0 +1,17 @@
+import {buildGovMetricUrl} from './utils';
+
+describe('Test analytics utils', () => {
+  test('Test build URL without GUID', () => {
+    const url = buildGovMetricUrl('1234', 'form-slug');
+
+    expect(url).toEqual('https://websurveys2.govmetric.com/theme/kf/1234?Q_Formid=form-slug');
+  });
+
+  test('Test build URL with GUID', () => {
+    const url = buildGovMetricUrl('1234', 'form-slug', '4321');
+
+    expect(url).toEqual(
+      'https://websurveys2.govmetric.com/theme/kf/1234?Q_Formid=form-slug&GUID=4321'
+    );
+  });
+});