Merge pull request #635 from open-formulieren/fix/3778-render-content…

…-component [OF#3778] Render content component in summary
open-formulieren · Jan 19, 2024 · 20091ae · 20091ae
2 parents 42b47c4 + 68d518d
commit 20091ae
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 1 deletion.
diff --git a/src/components/FormStepSummary/index.js b/src/components/FormStepSummary/index.js
@@ -14,8 +14,11 @@ import {DEBUG} from 'utils';
 
 import ComponentValueDisplay from './ComponentValueDisplay';
 
+// Components without a label that should still be displayed
+const COMPONENTS_WITH_NO_NAME = ['content'];
+
 const LabelValueRow = ({name, value, component}) => {
-  if (!name) {
+  if (!name && !COMPONENTS_WITH_NO_NAME.includes(component.type)) {
     return null;
   }
 

diff --git a/src/components/Summary/Summary.stories.js b/src/components/Summary/Summary.stories.js
@@ -25,6 +25,15 @@ export default {
         slug: 'uw-gegevens',
         name: 'Uw gegevens',
         data: [
+          {
+            name: '',
+            value: 'In this section you can enter your personal details.',
+            component: {
+              type: 'content',
+              label: 'Content',
+              key: 'content',
+            },
+          },
           {
             name: 'Voornaam',
             value: 'John',
@@ -61,6 +70,36 @@ export default {
         slug: 'uw-partner',
         name: 'Uw partner',
         data: [
+          {
+            name: 'Partner details',
+            value: null,
+            component: {
+              type: 'fieldset',
+              key: 'fieldset1',
+              label: 'Partner details',
+              hideLabel: false,
+              components: [
+                {
+                  key: 'voornaam2',
+                  type: 'textfield',
+                  label: 'Voornaam',
+                  hidden: false,
+                },
+                {
+                  key: 'achternaam2',
+                  type: 'textfield',
+                  label: 'Achternaam',
+                  hidden: false,
+                },
+                {
+                  key: 'emailAdres2',
+                  type: 'email',
+                  label: 'Email adres',
+                  hidden: false,
+                },
+              ],
+            },
+          },
           {
             name: 'Voornaam',
             value: 'Carl',
@@ -93,6 +132,40 @@ export default {
           },
         ],
       },
+      {
+        slug: 'uw-huisdier',
+        name: 'Uw huisdier',
+        data: [
+          {
+            name: '',
+            value: null,
+            component: {
+              type: 'fieldset',
+              key: 'fieldset2',
+              label: 'Pet details',
+              hideLabel: true,
+              components: [
+                {
+                  key: 'huisdierNaam',
+                  type: 'textfield',
+                  label: 'Huisdier naam',
+                  hidden: false,
+                },
+              ],
+            },
+          },
+          {
+            name: 'Huisdier Naam',
+            value: 'Nemo',
+            component: {
+              key: 'huisdierNaam',
+              type: 'textfield',
+              label: 'Huisdier naam',
+              hidden: false,
+            },
+          },
+        ],
+      },
     ],
     showPaymentInformation: true,
     amountToPay: 54.05,
@@ -191,6 +264,30 @@ const render = ({
 
 export const Default = {
   render,
+  play: async ({canvasElement, step}) => {
+    const canvas = within(canvasElement);
+
+    const contentNodes = canvas.getAllByText((content, element) => {
+      return element.className.split(' ').includes('utrecht-data-list__item--openforms-content');
+    });
+
+    await expect(contentNodes.length).toEqual(1);
+
+    const contentNode = contentNodes[0];
+
+    await expect(contentNode.firstChild.textContent).toEqual('');
+
+    const fieldsetNodes = canvas.getAllByText((content, element) => {
+      return element.className.split(' ').includes('utrecht-data-list__item--openforms-fieldset');
+    });
+
+    // The fieldset with hidden label is not rendered
+    await expect(fieldsetNodes.length).toEqual(1);
+
+    const fieldsetPartnerNode = fieldsetNodes[0];
+
+    await expect(fieldsetPartnerNode.firstChild.textContent).toEqual('Partner details');
+  },
 };
 
 export const MultipleRequiredStatements = {