Merge pull request #1009 from navikt/test-radiopanel-legend-visibility

Test radiopanel legend visibility

Author: akgagnat

mocks/mocks/data/formio-api/custom-components-datagrid.json

@@ -82,6 +82,89 @@
               "input": true,
               "tableView": false,
               "navId": "ep9ghtd"
+            },
+            {
+              "label": "Bor du i Norge?",
+              "values": [
+                {
+                  "value": "ja",
+                  "label": "Ja",
+                  "shortcut": ""
+                },
+                {
+                  "value": "nei",
+                  "label": "Nei",
+                  "shortcut": ""
+                }
+              ],
+              "validate": {
+                "required": true,
+                "onlyAvailableItems": false,
+                "custom": "",
+                "customPrivate": false,
+                "strictDateValidation": false,
+                "multiple": false,
+                "unique": false
+              },
+              "key": "borDuINorge",
+              "type": "radiopanel",
+              "input": true,
+              "tableView": false,
+              "dataGridLabel": false,
+              "inputType": "radio",
+              "fieldSet": false,
+              "placeholder": "",
+              "prefix": "",
+              "customClass": "",
+              "suffix": "",
+              "multiple": false,
+              "defaultValue": null,
+              "protected": false,
+              "unique": false,
+              "persistent": true,
+              "hidden": false,
+              "clearOnHide": true,
+              "refreshOn": "",
+              "redrawOn": "",
+              "modalEdit": false,
+              "labelPosition": "top",
+              "description": "",
+              "errorLabel": "",
+              "tooltip": "",
+              "hideLabel": false,
+              "tabindex": "",
+              "disabled": false,
+              "autofocus": false,
+              "dbIndex": false,
+              "customDefaultValue": "",
+              "calculateValue": "",
+              "calculateServer": false,
+              "widget": null,
+              "attributes": {},
+              "validateOn": "blur",
+              "conditional": {
+                "show": null,
+                "when": null,
+                "eq": ""
+              },
+              "overlay": {
+                "style": "",
+                "left": "",
+                "top": "",
+                "width": "",
+                "height": ""
+              },
+              "allowCalculateOverride": false,
+              "encrypted": false,
+              "showCharCount": false,
+              "showWordCount": false,
+              "properties": {},
+              "allowMultipleMasks": false,
+              "addons": [],
+              "fieldSize": "input--xxl",
+              "dataSrc": "values",
+              "id": "eadmph5",
+              "keyModified": true
             }
           ],
           "tableView": false,

packages/fyllut/cypress/cypress.d.ts

@@ -28,6 +28,8 @@ declare global {
 
       defaultInterceptsPrefillData(): Chainable<JQuery<HTMLElement>>;
 
+      shouldBeVisible(): Chainable<JQuery>;
+
       /**
        * Configures the Mocks Server administration API client
        */

packages/fyllut/cypress/e2e/custom-react-components.cy.ts

@@ -187,15 +187,34 @@ describe('Custom react components', () => {
       it('make sure you can add multiple select boxes in a DataGrid and edit them', () => {
         const labelSelect = 'Nedtrekksmeny';
         const labelDate = 'Dato (dd.mm.åååå)';
+        const legendRadiopanel = 'Bor du i Norge?';
         const labelAdd = 'Legg til';
         cy.findAllByRole('combobox', { name: labelSelect }).eq(0).type('a{enter}');
         cy.findAllByRole('textbox', { name: labelDate }).eq(0).type('10.10.2000{esc}');
+        cy.findAllByText(legendRadiopanel).should('have.length', 1).eq(0).shouldBeVisible();
+        cy.findAllByRole('group', { name: legendRadiopanel })
+          .eq(0)
+          .within(() => {
+            cy.findByLabelText('Ja').should('exist').click();
+          });
         cy.findByRole('button', { name: labelAdd }).click();
         cy.findAllByRole('combobox', { name: labelSelect }).eq(1).type('b{enter}');
         cy.findAllByRole('textbox', { name: labelDate }).eq(1).type('11.10.2000{esc}');
+        cy.findAllByText(legendRadiopanel).should('have.length', 2).eq(1).shouldBeVisible();
+        cy.findAllByRole('group', { name: legendRadiopanel })
+          .eq(1)
+          .within(() => {
+            cy.findByLabelText('Nei').should('exist').click();
+          });
         cy.findByRole('button', { name: labelAdd }).click();
         cy.findAllByRole('combobox', { name: labelSelect }).eq(2).type('a{enter}');
         cy.findAllByRole('textbox', { name: labelDate }).eq(2).type('12.10.2000{esc}');
+        cy.findAllByText(legendRadiopanel).should('have.length', 3).eq(2).shouldBeVisible();
+        cy.findAllByRole('group', { name: legendRadiopanel })
+          .eq(2)
+          .within(() => {
+            cy.findByLabelText('Nei').should('exist').click();
+          });
 
         cy.clickNextStep();
         cy.findByRole('heading', { name: 'Oppsummering' }).should('exist');
@@ -207,6 +226,8 @@ describe('Custom react components', () => {
             cy.get('dd').eq(0).contains('a');
             cy.get('dt').eq(1).contains(labelDate);
             cy.get('dd').eq(1).contains('10.10.2000');
+            cy.get('dt').eq(2).contains(legendRadiopanel);
+            cy.get('dd').eq(2).contains('Ja');
           });
 
         cy.get('dl')
@@ -216,6 +237,8 @@ describe('Custom react components', () => {
             cy.get('dd').eq(0).contains('b');
             cy.get('dt').eq(1).contains(labelDate);
             cy.get('dd').eq(1).contains('11.10.2000');
+            cy.get('dt').eq(2).contains(legendRadiopanel);
+            cy.get('dd').eq(2).contains('Nei');
           });
 
         cy.get('dl')
@@ -225,6 +248,8 @@ describe('Custom react components', () => {
             cy.get('dd').eq(0).contains('a');
             cy.get('dt').eq(1).contains(labelDate);
             cy.get('dd').eq(1).contains('12.10.2000');
+            cy.get('dt').eq(2).contains(legendRadiopanel);
+            cy.get('dd').eq(2).contains('Nei');
           });
       });
     });

packages/fyllut/cypress/support/commands.ts

@@ -45,6 +45,10 @@ Cypress.Commands.add('findByRoleWhenAttached', (role, options) => {
     .get('@elementWhenAttached');
 });
 
+Cypress.Commands.add('shouldBeVisible', { prevSubject: true }, (subject) => {
+  return cy.wrap(subject).should('be.visible').should('not.have.class', 'navds-sr-only');
+});
+
 Cypress.Commands.add('clickNextStep', () => {
   return cy.findByRoleWhenAttached('button', { name: TEXTS.grensesnitt.navigation.next }).click();
 });