When using group functionality using label instead of value for summary and summary2 (#3398)

Author: paal2707

src/layout/Checkboxes/MultipleChoiceSummary.tsx

@@ -38,7 +38,7 @@ export function MultipleChoiceSummary({ targetNode }: IMultipleChoiceSummaryProp
     .map((row) => (!relativeSimpleBindingPath ? true : dot.pick(relativeSimpleBindingPath, row)));
 
   const data = dataModelBindings.group
-    ? displayRows
+    ? getCommaSeparatedOptionsToText(displayRows?.join(','), options, langAsString)
     : getCommaSeparatedOptionsToText(rawFormData.simpleBinding, options, langAsString);
 
   return (

src/layout/Checkboxes/index.tsx

@@ -61,7 +61,7 @@ export class Checkboxes extends CheckboxesDef {
       .map((row) => (!relativeSimpleBindingPath ? true : dot.pick(relativeSimpleBindingPath, row)));
 
     const data = dataModelBindings.group
-      ? displayRows
+      ? getCommaSeparatedOptionsToText(displayRows?.join(','), options, langAsString)
       : getCommaSeparatedOptionsToText(formData?.simpleBinding, options, langAsString);
 
     return Object.values(data).join(', ');

src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx

@@ -69,9 +69,8 @@ export const MultipleValueSummary = ({
     .map((row) => (!relativeSimpleBindingPath ? true : dot.pick(relativeSimpleBindingPath, row)));
 
   const displayValues = dataModelBindings.group
-    ? displayRows
+    ? Object.values(getCommaSeparatedOptionsToText(displayRows?.join(','), options, langAsString))
     : Object.values(getCommaSeparatedOptionsToText(rawFormData.simpleBinding, options, langAsString));
-
   const validations = useUnifiedValidationsForNode(componentNode);
   const errors = validationsOfSeverity(validations, 'error');
 

test/e2e/integration/component-library/checkboxes.ts

@@ -333,6 +333,51 @@ describe('Checkboxes component', () => {
       .find('span.fds-paragraph') // Targets the span with the summary text
       .should('have.text', expectedText);
   });
+  it('Renders the summary2 component with correct text for Checkboxes with group, hard deletion and Number', () => {
+    cy.interceptLayout('ComponentLayouts', (component) => {
+      if (component.type === 'Checkboxes' && component.id === 'CheckboxesPage-Checkboxes2') {
+        component.deletionStrategy = 'hard';
+        component.dataModelBindings.checked = undefined;
+        component.optionsId = 'personsNumber';
+      }
+    });
+    cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
+    cy.gotoNavPage('Avkryssningsbokser');
+
+    const checkboxes = '[data-componentid=CheckboxesPage-Checkboxes2]';
+    const summary2 = '[data-componentid=CheckboxesPage-Header-Summary2-Component2]';
+
+    const checkboxText1 = 'Karoline';
+    const checkboxText2 = 'Kåre';
+    const checkboxText3 = 'Johanne';
+    const checkboxText4 = 'Kari';
+    const checkboxText5 = 'Petter';
+
+    //Check options in checkboxes component
+    cy.get(checkboxes).contains('label', checkboxText1).prev('input[type="checkbox"]').click();
+    cy.get(checkboxes).contains('label', checkboxText2).prev('input[type="checkbox"]').click();
+    cy.get(checkboxes).contains('label', checkboxText3).prev('input[type="checkbox"]').click();
+    cy.get(checkboxes).contains('label', checkboxText4).prev('input[type="checkbox"]').click();
+    cy.get(checkboxes).contains('label', checkboxText5).prev('input[type="checkbox"]').click();
+
+    //Uncheck
+    cy.get(checkboxes).contains('label', checkboxText4).prev('input[type="checkbox"]').click();
+    cy.get(checkboxes).contains('label', checkboxText5).prev('input[type="checkbox"]').click();
+
+    //Check that checkboxes is correct
+    cy.get(checkboxes).contains('label', checkboxText1).prev('input[type="checkbox"]').should('be.checked');
+    cy.get(checkboxes).contains('label', checkboxText2).prev('input[type="checkbox"]').should('be.checked');
+    cy.get(checkboxes).contains('label', checkboxText3).prev('input[type="checkbox"]').should('be.checked');
+    cy.get(checkboxes).contains('label', checkboxText4).prev('input[type="checkbox"]').should('not.be.checked');
+    cy.get(checkboxes).contains('label', checkboxText5).prev('input[type="checkbox"]').should('not.be.checked');
+
+    const expectedText = [checkboxText1, checkboxText2, checkboxText3].join(', ');
+
+    cy.get(`div${summary2}`)
+      .next()
+      .find('span.fds-paragraph') // Targets the span with the summary text
+      .should('have.text', expectedText);
+  });
 
   //Required
   it('Required validation shows when chekcbox is selected with simpleBinding', () => {
@@ -395,6 +440,29 @@ describe('Checkboxes component', () => {
     const checkboxText1 = 'Karoline';
     cy.contains('label', checkboxText1).prev('input[type="checkbox"]').check();
 
+    cy.get(checkboxes).contains('span', 'Du må fylle ut hva skal kjøretøyet brukes til?').should('not.exist');
+  });
+  it('Required validation shows when chekcbox is selected with group, hard delete and Number', () => {
+    cy.interceptLayout('ComponentLayouts', (component) => {
+      if (component.type === 'Checkboxes' && component.id === 'CheckboxesPage-Checkboxes2') {
+        component.required = true;
+        component.deletionStrategy = 'hard';
+        component.dataModelBindings.checked = undefined;
+        component.optionsId = 'personsNumber';
+      }
+    });
+    cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
+    cy.gotoNavPage('Oppsummering 2.0');
+    cy.findByRole('button', { name: 'Send inn' }).click();
+    cy.gotoNavPage('Avkryssningsbokser');
+
+    const checkboxes = '[data-componentid=CheckboxesPage-Checkboxes2]';
+
+    cy.get(checkboxes).contains('span', 'Du må fylle ut hva skal kjøretøyet brukes til?').should('exist');
+
+    const checkboxText1 = 'Karoline';
+    cy.contains('label', checkboxText1).prev('input[type="checkbox"]').check();
+
     cy.get(checkboxes).contains('span', 'Du må fylle ut hva skal kjøretøyet brukes til?').should('not.exist');
   });
 });