Merge pull request #1062 from navikt/aksel-error-summary

Render Aksel ErrorSummary instead of formio's alert component
navikt · Mar 18, 2024 · 01012f2 · 01012f2
2 parents ee111f6 + f582d5b
commit 01012f2
Show file tree

Hide file tree

Showing 31 changed files with 375 additions and 164 deletions.
diff --git a/packages/fyllut/cypress/e2e/components/currency-and-account.cy.ts b/packages/fyllut/cypress/e2e/components/currency-and-account.cy.ts
@@ -1,6 +1,8 @@
 /*
  * Tests that "penger og konto" component works as expected
  */
+import { TEXTS } from '@navikt/skjemadigitalisering-shared-domain';
+
 describe('Components', () => {
   describe('Penger og konto', () => {
     beforeEach(() => {
@@ -14,10 +16,16 @@ describe('Components', () => {
       cy.findByRole('textbox', { name: 'Kontonummer' }).should('exist').type('12345678980');
       cy.findByRole('textbox', { name: 'IBAN' }).should('exist').type('AB04RABO8424598490');
       cy.clickNextStep();
-      cy.findByText('Kontonummer: Dette er ikke et gyldig kontonummer').should('exist');
-      cy.findByText(
-        'IBAN: Oppgitt IBAN inneholder ugyldig landkode (to store bokstaver i starten av IBAN-koden)',
-      ).should('exist');
+
+      cy.findByRole('region', { name: TEXTS.validering.error })
+        .should('exist')
+        .within(() => {
+          cy.findByRole('link', { name: 'Dette er ikke et gyldig kontonummer' }).should('exist');
+          cy.findByRole('link', {
+            name: 'Oppgitt IBAN inneholder ugyldig landkode (to store bokstaver i starten av IBAN-koden)',
+          }).should('exist');
+        });
+
       cy.findAllByText('Du må fylle ut: Velg valuta').should('have.length', 2);
       cy.findAllByText('Du må fylle ut: Beløp').should('have.length', 2);
     });

diff --git a/packages/fyllut/cypress/e2e/components/date-picker.cy.ts b/packages/fyllut/cypress/e2e/components/date-picker.cy.ts
@@ -2,6 +2,7 @@
  * Tests that the datepicker component (react) renders, validates and handles interactions correctly
  */
 
+import { TEXTS } from '@navikt/skjemadigitalisering-shared-domain';
 import * as moment from 'moment';
 
 describe('NavDatepicker', () => {
@@ -57,19 +58,20 @@ describe('NavDatepicker', () => {
       cy.clickNextStep();
 
       cy.findByRole('heading', { name: 'Oppsummering' }).should('not.exist');
-      cy.findAllByText('Du må fylle ut: Tilfeldig dato').should('have.length', 1);
-      cy.findAllByText('Tilfeldig dato: Du må fylle ut: Tilfeldig dato').should('have.length', 1);
+      cy.findAllByText('Du må fylle ut: Tilfeldig dato').should('have.length', 2);
     });
   });
 
   describe('Date input field', () => {
     it('has focus after clicking validation message link', () => {
       cy.clickNextStep();
 
-      cy.findAllByText('Du må fylle ut: Tilfeldig dato').should('have.length', 1);
-      cy.findByRoleWhenAttached('link', { name: 'Tilfeldig dato: Du må fylle ut: Tilfeldig dato' })
+      cy.findAllByText('Du må fylle ut: Tilfeldig dato').should('have.length', 2);
+      cy.findByRole('region', { name: TEXTS.validering.error })
         .should('exist')
-        .click();
+        .within(() => {
+          cy.findByRole('link', { name: 'Du må fylle ut: Tilfeldig dato' }).should('exist').click();
+        });
 
       cy.findByRole('textbox', { name: 'Tilfeldig dato' }).should('have.focus').type('02.02.2023');
       cy.clickNextStep();
@@ -82,7 +84,7 @@ describe('NavDatepicker', () => {
     const MY_TEST_DATE = '15.05.2023';
 
     beforeEach(() => {
-      cy.findByRole('textbox', { name: 'Tilfeldig dato' }).should('be.visible');
+      cy.findByRole('textbox', { name: 'Tilfeldig dato' }).should('be.visible').should('not.be.disabled');
       cy.findByRole('textbox', { name: 'Tilfeldig dato' }).type(`${MY_TEST_DATE}{esc}`);
     });
 
@@ -91,23 +93,24 @@ describe('NavDatepicker', () => {
       const VALIDATION_TEXT = `Datoen må være senere enn ${MY_TEST_DATE}`;
 
       it('fails when date is before', () => {
-        cy.findByRole('textbox', { name: LABEL }).type('14.05.2023');
+        cy.findByRole('textbox', { name: LABEL }).should('not.be.disabled').type('14.05.2023');
         cy.clickNextStep();
 
-        cy.findAllByText(VALIDATION_TEXT).should('have.length', 1);
+        cy.findAllByText(VALIDATION_TEXT).should('have.length', 2);
       });
 
       it('fails when date is equal', () => {
-        cy.findByRole('textbox', { name: LABEL }).type('15.05.2023');
+        cy.findByRole('textbox', { name: LABEL }).should('not.be.disabled').type('15.05.2023');
         cy.clickNextStep();
 
-        cy.findAllByText(VALIDATION_TEXT).should('have.length', 1);
+        cy.findAllByText(VALIDATION_TEXT).should('have.length', 2);
       });
 
       it('ok when date is later', () => {
-        cy.findByRole('textbox', { name: LABEL }).type('16.05.2023');
+        cy.findByRole('textbox', { name: LABEL }).should('not.be.disabled').type('16.05.2023');
         cy.clickNextStep();
 
+        cy.findByRole('heading', { name: 'Oppsummering' }).should('be.visible');
         cy.findAllByText(VALIDATION_TEXT).should('have.length', 0);
       });
     });
@@ -117,23 +120,25 @@ describe('NavDatepicker', () => {
       const VALIDATION_TEXT = `Datoen kan ikke være tidligere enn ${MY_TEST_DATE}`;
 
       it('fails when date is before', () => {
-        cy.findByRole('textbox', { name: LABEL }).type(`14.05.2023{esc}`);
+        cy.findByRole('textbox', { name: LABEL }).should('not.be.disabled').type(`14.05.2023{esc}`);
         cy.clickNextStep();
 
-        cy.findAllByText(VALIDATION_TEXT).should('have.length', 1);
+        cy.findAllByText(VALIDATION_TEXT).should('have.length', 2);
       });
 
       it('fails when date is equal', () => {
-        cy.findByRole('textbox', { name: LABEL }).type('15.05.2023{esc}');
+        cy.findByRole('textbox', { name: LABEL }).should('not.be.disabled').type('15.05.2023{esc}');
         cy.clickNextStep();
 
+        cy.findByRole('heading', { name: 'Oppsummering' }).should('be.visible');
         cy.findAllByText(VALIDATION_TEXT).should('have.length', 0);
       });
 
       it('ok when date is later', () => {
-        cy.findByRole('textbox', { name: LABEL }).type('16.05.2023{esc}');
+        cy.findByRole('textbox', { name: LABEL }).should('not.be.disabled').type('16.05.2023{esc}');
         cy.clickNextStep();
 
+        cy.findByRole('heading', { name: 'Oppsummering' }).should('be.visible');
         cy.findAllByText(VALIDATION_TEXT).should('have.length', 0);
       });
     });
@@ -149,7 +154,7 @@ describe('NavDatepicker', () => {
       cy.findByRole('textbox', { name: LABEL }).type('15.07.2023{esc}');
       cy.clickNextStep();
 
-      cy.findAllByText(VALIDATION_TEXT).should('have.length', 1);
+      cy.findAllByText(VALIDATION_TEXT).should('have.length', 2);
     });
 
     it("is ok when date is equal to 'earliest date'", () => {
@@ -170,7 +175,7 @@ describe('NavDatepicker', () => {
       cy.findByRole('textbox', { name: LABEL }).type('01.09.2023{esc}');
       cy.clickNextStep();
 
-      cy.findAllByText(VALIDATION_TEXT).should('have.length', 1);
+      cy.findAllByText(VALIDATION_TEXT).should('have.length', 2);
     });
   });
 
@@ -190,33 +195,29 @@ describe('NavDatepicker', () => {
     it('fails when date is before the earliest limit', () => {
       cy.findByRole('textbox', { name: LABEL }).type(plusDays(NOW, EARLIEST_RELATIVE - 1));
       cy.clickNextStep();
-      console.log('VALIDATION_TEXT', VALIDATION_TEXT);
 
-      cy.findAllByText(VALIDATION_TEXT).should('have.length', 1);
+      cy.findAllByText(VALIDATION_TEXT).should('have.length', 2);
     });
 
     it('is ok when date is exactly the earliest limit', () => {
       cy.findByRole('textbox', { name: LABEL }).type(plusDays(NOW, EARLIEST_RELATIVE));
       cy.clickNextStep();
-      console.log('VALIDATION_TEXT', VALIDATION_TEXT);
 
       cy.findAllByText(VALIDATION_TEXT).should('have.length', 0);
     });
 
     it('is ok when date is exactly the latest limit', () => {
       cy.findByRole('textbox', { name: LABEL }).type(plusDays(NOW, LATEST_RELATIVE));
       cy.clickNextStep();
-      console.log('VALIDATION_TEXT', VALIDATION_TEXT);
 
       cy.findAllByText(VALIDATION_TEXT).should('have.length', 0);
     });
 
     it('fails when date is after the earliest limit', () => {
       cy.findByRole('textbox', { name: LABEL }).type(plusDays(NOW, LATEST_RELATIVE + 1));
       cy.clickNextStep();
-      console.log('VALIDATION_TEXT', VALIDATION_TEXT);
 
-      cy.findAllByText(VALIDATION_TEXT).should('have.length', 1);
+      cy.findAllByText(VALIDATION_TEXT).should('have.length', 2);
     });
   });
 });
diff --git a/packages/fyllut/cypress/e2e/components/driving-list.cy.ts b/packages/fyllut/cypress/e2e/components/driving-list.cy.ts
@@ -91,9 +91,21 @@ describe('DrivingList', () => {
 
       // Should fill out form
       cy.clickNextStep();
-      cy.findByRole('link', { name: `Du må fylle ut: ${PERIOD_TYPE_LABEL}` }).should('exist');
+      cy.findByRole('region', { name: TEXTS.validering.error })
+        .should('exist')
+        .within(() => {
+          cy.findByRole('link', { name: `Du må fylle ut: ${PERIOD_TYPE_LABEL}` })
+            .should('exist')
+            .click();
+        });
+
+      cy.findByRole('group', { name: PERIOD_TYPE_LABEL })
+        .should('exist')
+        .should('have.focus')
+        .within(() => {
+          cy.findByRole('radio', { name: 'Ukentlig' }).should('exist').check();
+        });
 
-      cy.findByRole('radio', { name: 'Ukentlig' }).should('exist').check();
       cy.findByRole('textbox', { name: DATE_PICKER_LABEL }).should('exist').type('15.05.23{esc}');
       cy.findByRole('radio', { name: 'Ja' }).should('exist').check();
       cy.findByRole('button', { name: '15.05.2023 - 21.05.2023' }).click();
@@ -102,13 +114,26 @@ describe('DrivingList', () => {
       // Parking expenses should not be over 100
       cy.findByRole('textbox', { name: PARKING_EXPENSES_LABEL }).should('exist').type('101');
       cy.clickNextStep();
-      cy.findByRole('link', { name: TEXTS.validering.parkingExpensesAboveHundred }).should('exist');
+      cy.findByRole('region', { name: TEXTS.validering.error })
+        .should('exist')
+        .within(() => {
+          cy.findByRole('link', { name: TEXTS.validering.parkingExpensesAboveHundred }).should('exist');
+        });
 
       // Parking expenses should be a number
       cy.findByRole('textbox', { name: PARKING_EXPENSES_LABEL }).clear();
       cy.findByRole('textbox', { name: PARKING_EXPENSES_LABEL }).type('text');
       cy.clickNextStep();
-      cy.findByRole('link', { name: TEXTS.validering.validParkingExpenses }).should('exist');
+      cy.findByRole('region', { name: TEXTS.validering.error })
+        .should('exist')
+        .within(() => {
+          cy.findByRole('link', { name: 'Parkeringsutgiftene for 15.05.2023 må være et gyldig beløp' })
+            .should('exist')
+            .click();
+        });
+
+      cy.findByRole('textbox', { name: PARKING_EXPENSES_LABEL }).should('have.focus').type('{selectall}78');
+      cy.findByRole('region', { name: TEXTS.validering.error }).should('not.exist');
     });
 
     it('should add and remove periods', () => {
@@ -224,9 +249,20 @@ describe('DrivingList', () => {
       cy.wait('@getActivities');
 
       cy.clickSaveAndContinue();
-      cy.findByRole('link', { name: `Du må fylle ut: ${ACTIVITIES_LABEL}` }).should('exist');
+      cy.findByRole('region', { name: TEXTS.validering.error })
+        .should('exist')
+        .within(() => {
+          cy.findByRole('link', { name: `Du må fylle ut: ${ACTIVITIES_LABEL}` })
+            .should('exist')
+            .click();
+        });
 
-      cy.findByRole('radio', { name: 'Arbeidstrening: 01.01.2024 - 31.08.2024' }).should('exist').check();
+      cy.findByRole('group', { name: ACTIVITIES_LABEL })
+        .should('exist')
+        .should('have.focus')
+        .within(() => {
+          cy.findByRole('radio', { name: 'Arbeidstrening: 01.01.2024 - 31.08.2024' }).should('exist').check();
+        });
 
       // Expenses are higher than the refund limit
       cy.findByRole('button', { name: '08.01.2024 - 14.01.2024' }).click();
@@ -257,7 +293,11 @@ describe('DrivingList', () => {
       });
 
       cy.clickSaveAndContinue();
-      cy.findByRole('link', { name: `Du må fylle ut: ${ACTIVITIES_LABEL}` }).should('exist');
+      cy.findByRole('region', { name: TEXTS.validering.error })
+        .should('exist')
+        .within(() => {
+          cy.findByRole('link', { name: `Du må fylle ut: ${ACTIVITIES_LABEL}` }).should('exist');
+        });
     });
   });
 });
diff --git a/packages/fyllut/cypress/e2e/components/general.cy.ts b/packages/fyllut/cypress/e2e/components/general.cy.ts
@@ -29,9 +29,7 @@ describe('React components', () => {
         cy.findByRole('textbox', { name: 'Fornavn' }).type('Storm');
         cy.findByRole('combobox', { name: 'I hvilket land bor du?' }).click();
 
-        cy.findByRole('combobox', { name: 'I hvilket land bor du?' }).type(
-          'Nor{downArrow}{downArrow}{downArrow}{downArrow}{enter}',
-        );
+        cy.findByRole('combobox', { name: 'I hvilket land bor du?' }).type('Norge{enter}');
         cy.findByRole('combobox', { name: 'Velg instrument (valgfritt)' }).type('Gitar{enter}');
         cy.findByRole('textbox', { name: 'Gyldig fra dato' }).type('01.01.2023{esc}');
         cy.clickNextStep();
@@ -126,9 +124,7 @@ describe('React components', () => {
         cy.findByRole('heading', { name: 'Dine opplysninger' }).should('be.visible');
         cy.findByRole('textbox', { name: 'Fornavn' }).should('be.visible');
         cy.findByRoleWhenAttached('textbox', { name: 'Fornavn' }).type('Storm');
-        cy.findByRole('combobox', { name: 'I hvilket land bor du?' })
-          .should('be.visible')
-          .type('Nor{downArrow}{downArrow}{downArrow}{downArrow}{enter}');
+        cy.findByRole('combobox', { name: 'I hvilket land bor du?' }).should('be.visible').type('Norge{enter}');
         cy.findByRole('combobox', { name: 'Velg valuta' }).should('be.visible').type('{upArrow}{enter}');
         cy.findByRole('combobox', { name: 'Velg instrument (valgfritt)' }).type('Gitar{enter}');
         cy.findByRole('textbox', { name: 'Gyldig fra dato' }).type('01.01.2023{esc}');

diff --git a/packages/fyllut/cypress/e2e/digital-submission/mellomlagring.cy.ts b/packages/fyllut/cypress/e2e/digital-submission/mellomlagring.cy.ts
@@ -245,22 +245,26 @@ describe('Mellomlagring', () => {
           cy.clickSaveAndContinue();
           cy.get('@updateMellomlagringSpy').should('not.have.been.called');
 
-          cy.findByRole('heading', { name: TEXTS.validering.error })
+          cy.findByRole('region', { name: TEXTS.validering.error })
             .should('exist')
-            .parent()
             .within(() => {
-              cy.get('li').should('have.length', 2);
+              cy.get('a').should('have.length', 2);
+              cy.findByRole('link', { name: 'Du må fylle ut: Farge' }).should('exist').click();
             });
 
-          cy.findByRoleWhenAttached('link', { name: 'Du må fylle ut: Farge' }).should('exist').click();
           cy.findByRole('group', { name: 'Farge' })
             .should('exist')
             .should('have.focus')
             .within(() => {
               cy.findByLabelText('Rød').click();
             });
 
-          cy.findByRoleWhenAttached('link', { name: 'Du må fylle ut: Tekst på kortet' }).should('exist').click();
+          cy.findByRole('region', { name: TEXTS.validering.error })
+            .should('exist')
+            .within(() => {
+              cy.get('a').should('have.length', 1);
+              cy.findByRole('link', { name: 'Du må fylle ut: Tekst på kortet' }).should('exist').click();
+            });
           cy.findByLabelText('Tekst på kortet').should('have.focus').type('Takk for hjelpen!');
 
           cy.findByRole('link', { name: 'Oppsummering' }).click();

diff --git a/packages/fyllut/cypress/e2e/form/basic-form.cy.ts b/packages/fyllut/cypress/e2e/form/basic-form.cy.ts
@@ -1,6 +1,8 @@
 /*
  * Tests filling out a basic form with contact information and verifying that the information is displayed in the summary (for both digital/paper)
  */
+import { TEXTS } from '@navikt/skjemadigitalisering-shared-domain';
+
 describe('Basic form', () => {
   beforeEach(() => {
     cy.defaultIntercepts();
@@ -112,10 +114,12 @@ describe('Basic form', () => {
         cy.clickNextStep();
         cy.clickNextStep();
         cy.findByRole('heading', { level: 2, name: 'Dine opplysninger' });
-        cy.findByText('For å gå videre må du rette opp følgende:').should('exist');
-
-        cy.findAllByRole('link', { name: /^Du må fylle ut:/ }).should('have.length', 4);
-        cy.findByRoleWhenAttached('link', { name: 'Du må fylle ut: Fornavn' }).click();
+        cy.findByRole('region', { name: TEXTS.validering.error })
+          .should('exist')
+          .within(() => {
+            cy.findAllByRole('link', { name: /Du må fylle ut:/ }).should('have.length', 4);
+            cy.findByRole('link', { name: 'Du må fylle ut: Fornavn' }).click();
+          });
         cy.findByRole('textbox', { name: 'Fornavn' }).should('have.focus');
       });
     });

diff --git a/packages/fyllut/cypress/e2e/form/focus-handling.cy.ts b/packages/fyllut/cypress/e2e/form/focus-handling.cy.ts
@@ -85,7 +85,7 @@ describe('Focus handling', () => {
       cy.visit('/fyllut/datagridconditional/levering?sub=paper');
       cy.defaultWaits();
       cy.clickNextStep();
-      cy.findByRole('heading', { name: TEXTS.validering.error }).should('exist').should('have.focus');
+      cy.findByRole('region', { name: TEXTS.validering.error }).should('exist').should('have.focus');
     });
 
     it('puts focus on correct component when clicking in error summary', () => {
@@ -112,9 +112,12 @@ describe('Focus handling', () => {
           cy.get('li').should('have.length', 2);
         });
 
-      cy.findByRoleWhenAttached('link', { name: 'Du må fylle ut: Hvilken type bolig bor du i?' })
+      cy.findByRole('region', { name: TEXTS.validering.error })
         .should('exist')
-        .click();
+        .within(() => {
+          cy.findByRole('link', { name: 'Du må fylle ut: Hvilken type bolig bor du i?' }).should('exist').click();
+        });
+
       cy.findByRole('group', { name: 'Hvilken type bolig bor du i?' })
         .should('exist')
         .should('have.focus')
@@ -123,10 +126,14 @@ describe('Focus handling', () => {
           cy.findByLabelText('Rekkehus').click();
         });
 
-      cy.findByRoleWhenAttached('link', { name: 'Du må fylle ut: Mottakers fornavn' }).should('exist').click();
+      cy.findByRole('region', { name: TEXTS.validering.error })
+        .should('exist')
+        .within(() => {
+          cy.findByRole('link', { name: 'Du må fylle ut: Mottakers fornavn' }).should('exist').click();
+        });
       cy.findByRole('textbox', { name: 'Mottakers fornavn' }).should('have.focus').type('Max');
 
-      cy.findByRole('heading', { name: TEXTS.validering.error }).should('not.exist');
+      cy.findByRole('region', { name: TEXTS.validering.error }).should('not.exist');
       cy.clickNextStep();
 
       cy.findByRole('heading', { name: 'Vedlegg' }).should('exist');