👌 [open-formulieren/open-forms#180] PR Feedback

src/api-mocks/analytics.js

@@ -0,0 +1,15 @@
+import {rest} from 'msw';
+
+import {BASE_URL} from './base';
+
+export const mockAnalyticsToolConfigGet = (overrides = {}) =>
+  rest.get(`${BASE_URL}analytics/analytics_tools_config_info`, (req, res, ctx) =>
+    res(
+      ctx.json({
+        govmetricSourceId: '',
+        govmetricSecureGuid: '',
+        enableGovmetricAnalytics: false,
+        ...overrides,
+      })
+    )
+  );

src/api-mocks/index.js

@@ -1,3 +1,4 @@
 export {BASE_URL} from './base';
 export {buildForm, mockFormGet} from './forms';
-export {buildSubmission, mockGetAnalyticsToolConfig} from './submissions';
+export {buildSubmission} from './submissions';
+export {mockAnalyticsToolConfigGet} from './analytics';

src/api-mocks/submissions.js

@@ -143,15 +143,3 @@ 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,
-      })
-    )
-  );

src/components/AbortionButton/AbortionButton.mdx

@@ -9,14 +9,24 @@ import * as AbortionButtonStories from './AbortionButton.stories';
 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.
+  directives that whenever a user is logged in with DigiD a 'Log out' option must be available. When
+  GovMetric is enabled, a new window will open where the user can give feedback.
 - 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} />
+</Canvas>
+
+<Canvas>
   <Story of={AbortionButtonStories.GovMetricEnabled} />
+</Canvas>
+
+<Canvas>
   <Story of={AbortionButtonStories.AuthenticatedAndGovmetric} />
+</Canvas>
+
+<Canvas>
   <Story of={AbortionButtonStories.NotAuthenticatedNoGovMetric} />
 </Canvas>
 

src/components/AbortionButton/AbortionButton.stories.js

@@ -18,16 +18,16 @@ export const Authenticated = {
   play: async ({canvasElement}) => {
     const canvas = within(canvasElement);
 
-    await waitFor(async () => {
-      const abortButton = await canvas.queryByRole('button', {name: 'Uitloggen'});
-      await expect(abortButton).toBeVisible();
-    });
+    const abortButton = await canvas.findByRole('button', {name: 'Uitloggen'});
+    await expect(abortButton).toBeVisible();
   },
 };
 
 export const GovMetricEnabled = {
   args: {
     isAuthenticated: false,
+  },
+  parameters: {
     analyticsToolsParams: {
       govmetricSourceId: '1234',
       govmetricSecureGuid: '',
@@ -47,6 +47,8 @@ export const GovMetricEnabled = {
 export const AuthenticatedAndGovmetric = {
   args: {
     isAuthenticated: true,
+  },
+  parameters: {
     analyticsToolsParams: {
       govmetricSourceId: '1234',
       govmetricSecureGuid: '',

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, mockGetAnalyticsToolConfig} from 'api-mocks';
+import {BASE_URL, mockAnalyticsToolConfigGet} from 'api-mocks';
 import {buildForm} from 'api-mocks';
 import {
   mockSubmissionCheckLogicPost,
@@ -79,7 +79,7 @@ export default {
           {code: 'en', name: 'English'},
         ]),
         mockLanguageChoicePut,
-        mockGetAnalyticsToolConfig(),
+        mockAnalyticsToolConfigGet(),
       ],
     },
   },
@@ -190,7 +190,7 @@ export const ActiveSubmission = {
           {code: 'en', name: 'English'},
         ]),
         mockLanguageChoicePut,
-        mockGetAnalyticsToolConfig(),
+        mockAnalyticsToolConfigGet(),
       ],
     },
   },

src/components/FormStep/FormStep.stories.js

@@ -5,7 +5,7 @@ import {getWorker} from 'msw-storybook-addon';
 import {withRouter} from 'storybook-addon-react-router-v6';
 import {v4 as uuid4} from 'uuid';
 
-import {buildForm, buildSubmission, mockGetAnalyticsToolConfig} from 'api-mocks';
+import {buildForm, buildSubmission} from 'api-mocks';
 import {AnalyticsToolsDecorator, ConfigDecorator} from 'story-utils/decorators';
 
 import FormStep from '.';
@@ -157,6 +157,8 @@ export const govmetricEnabled = {
     },
     form: buildForm(),
     submission: buildSubmission(),
+  },
+  parameters: {
     analyticsToolsParams: {
       govmetricSourceId: '1234',
       govmetricSecureGuid: '',

src/components/PostCompletionViews/ConfirmationView.stories.js

@@ -91,20 +91,22 @@ export const WithGovMetric = {
     confirmationPageContent: 'Your answers are submitted. Hurray!',
     mainWebsiteUrl: '#',
     downloadPDFText: 'Download a PDF of your submitted answers',
+    form: {
+      slug: 'a-test-form',
+    },
+  },
+  parameters: {
     analyticsToolsParams: {
       govmetricSourceId: '1234',
       govmetricSecureGuid: '',
       enableGovmetricAnalytics: true,
     },
-    form: {
-      slug: 'a-test-form',
-    },
   },
   play: async ({canvasElement}) => {
     const canvas = within(canvasElement);
 
     await waitFor(async () => {
-      const feedbackLink = await canvas.getByText('Give feedback');
+      const feedbackLink = await canvas.findByRole('link', {name: 'Give feedback'});
       await expect(feedbackLink).toBeVisible();
       await expect(feedbackLink.href).toEqual(
         'https://websurveys2.govmetric.com/theme/kf/1234?Q_Formid=a-test-form'

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, mockGetAnalyticsToolConfig} from 'api-mocks';
+import {BASE_URL, buildForm, mockAnalyticsToolConfigGet} 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()), mockGetAnalyticsToolConfig());
+    mswServer.use(mockSubmissionPost(buildSubmission()), mockAnalyticsToolConfigGet());
     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()), mockGetAnalyticsToolConfig());
+    mswServer.use(mockSubmissionPost(buildSubmission()), mockAnalyticsToolConfigGet());
     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()), mockGetAnalyticsToolConfig());
+    mswServer.use(mockSubmissionPost(buildSubmission()), mockAnalyticsToolConfigGet());
     const user = userEvent.setup({delay: null});
     const form = buildForm();
 

src/sdk.spec.js

@@ -1,6 +1,6 @@
 import {act, waitForElementToBeRemoved, within} from '@testing-library/react';
 
-import {BASE_URL, buildForm, mockFormGet, mockGetAnalyticsToolConfig} from 'api-mocks';
+import {BASE_URL, buildForm, mockAnalyticsToolConfigGet, mockFormGet} from 'api-mocks';
 import mswServer from 'api-mocks/msw-server';
 import {mockFormioTranslations, mockLanguageInfoGet} from 'components/LanguageSelection/mocks';
 
@@ -19,7 +19,7 @@ const apiMocks = [
   mockFormGet(buildForm({translationEnabled: true})),
   mockLanguageInfoGet(LANGUAGES),
   mockFormioTranslations,
-  mockGetAnalyticsToolConfig(),
+  mockAnalyticsToolConfigGet(),
 ];
 
 describe('OpenForm', () => {
@@ -92,7 +92,7 @@ describe('OpenForm', () => {
       mockFormGet(formEN, true),
       mockLanguageInfoGet(LANGUAGES),
       mockFormioTranslations,
-      mockGetAnalyticsToolConfig()
+      mockAnalyticsToolConfigGet()
     );
 
     const form = new OpenForm(formRoot, {

src/story-utils/decorators.js

@@ -37,10 +37,8 @@ export const AnalyticsToolsDecorator = (Story, {parameters, args}) => {
     enableGovmetricAnalytics: false,
   };
 
-  const analyticsToolsParams = args.analyticsToolsParams;
-
   return (
-    <AnalyticsToolsConfigContext.Provider value={merge(defaults, analyticsToolsParams)}>
+    <AnalyticsToolsConfigContext.Provider value={{...defaults, ...parameters.analyticsToolsParams}}>
       <Story />
     </AnalyticsToolsConfigContext.Provider>
   );