Merge pull request #1028 from navikt/feature/mellomlagring-tests

Use mellomlagring in Cypress tests

Author: enstulen

mocks/mocks/collections.json

@@ -16,7 +16,6 @@
       "get-soknad:success-1",
       "delete-soknad:success",
       "put-utfylt-soknad:success",
-      "post-send-inn:success",
       "send-inn-frontend:available",
       "get-prefill-data:success",
       "get-activities:success"

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

@@ -204,7 +204,6 @@
           "tableView": false,
           "modalEdit": false,
           "data": {
-            "resource": "",
             "url": "http://127.0.0.1:3001/fyllut/api/common-codes/currencies?lang=nb"
           },
           "valueProperty": "",

mocks/mocks/routes/innsending-api.js

@@ -56,32 +56,6 @@ module.exports = [
       },
     ],
   },
-  {
-    id: 'post-send-inn',
-    url: '/send-inn/fyllUt/v1/leggTilVedlegg',
-    method: 'POST',
-    variants: [
-      {
-        id: 'success',
-        type: 'json',
-        options: {
-          status: 302,
-          body: {},
-          headers: {
-            Location: 'http://localhost:3300/send-inn-frontend',
-          },
-        },
-      },
-      {
-        id: 'failure',
-        type: 'text',
-        options: {
-          status: 500,
-          body: 'Internal Server Error',
-        },
-      },
-    ],
-  },
   {
     id: 'post-soknad',
     url: '/send-inn/fyllUt/v1/soknad*',

packages/fyllut-backend/src/routers/api/common-codes.ts

@@ -35,6 +35,7 @@ const commonCodes = {
 
     try {
       const response = await fetchCommonCodeDescriptions(req, 'ValutaBetaling', languageCode);
+
       for (const [key, values] of Object.entries(response.betydninger)) {
         const currencyName = (values as any)[0]?.beskrivelser?.[languageCode]?.term;
         const newObj = { label: `${currencyName} (${key})`, value: key };

packages/fyllut/cypress/cypress.d.ts

@@ -1,5 +1,6 @@
 import { ByRoleOptions } from '@testing-library/cypress';
 import { ByRoleMatcher } from '@testing-library/dom';
+import { CyHttpMessages } from 'cypress/types/net-stubbing';
 
 declare global {
   namespace Cypress {
@@ -26,9 +27,11 @@ declare global {
 
       defaultInterceptsMellomlagring(): Chainable<JQuery<HTMLElement>>;
 
-      defaultInterceptsPrefillData(): Chainable<JQuery<HTMLElement>>;
+      defaultInterceptsExternal(): Chainable<JQuery<HTMLElement>>;
 
-      defaultInterceptsActivities(): Chainable<JQuery<HTMLElement>>;
+      defaultWaits(): Chainable<JQuery<HTMLElement>>;
+
+      submitMellomlagring(callback: (req: CyHttpMessages.IncomingHttpRequest) => void): Chainable<JQuery<HTMLElement>>;
 
       shouldBeVisible(): Chainable<JQuery>;
 

packages/fyllut/cypress/e2e/activities.cy.ts packages/fyllut/cypress/e2e/components/activities.cy.ts

@@ -1,6 +1,11 @@
-import { TEXTS } from '@navikt/skjemadigitalisering-shared-domain';
+/*
+ * Tests filling out a form with the activities component information and verifying that the information is displayed in the summary
+ * Tests the rendering for different number of activities from backend and error from backend
+ */
+
+import { SendInnAktivitet, TEXTS } from '@navikt/skjemadigitalisering-shared-domain';
 import { expect } from 'chai';
-import activitiesJson from '../../../../mocks/mocks/data/innsending-api/activities/activities.json';
+import activitiesJson from '../../../../../mocks/mocks/data/innsending-api/activities/activities.json';
 
 const defaultActivity = {
   aktivitetId: 'ingenAktivitet',
@@ -10,10 +15,23 @@ const defaultActivity = {
 };
 
 const activityText = 'Arbeidstrening: 06.12.2023 - 06.04.2024';
-const innsendingsId = 'fb47c474-66c1-46ba-8124-723447a79e8e';
 const prefillMaalgruppe = 'ARBSOKERE';
 const activityJson = activitiesJson[0];
 
+const verifySubmissionValues = (maalgruppe: string, aktivitet: Partial<SendInnAktivitet>) => {
+  cy.submitMellomlagring((req) => {
+    const {
+      submission: {
+        data: { container },
+      },
+    } = req.body;
+    expect(container.aktivitet.aktivitetId).to.equal(aktivitet.aktivitetId);
+    expect(container.aktivitet.periode.fom).to.equal(aktivitet.periode.fom);
+    expect(container.aktivitet.periode.tom).to.equal(aktivitet.periode.tom);
+    expect(container.maalgruppe).to.equal(maalgruppe);
+  });
+};
+
 describe('Activities', () => {
   before(() => {
     cy.configMocksServer();
@@ -22,7 +40,7 @@ describe('Activities', () => {
   beforeEach(() => {
     cy.defaultIntercepts();
     cy.defaultInterceptsMellomlagring();
-    cy.defaultInterceptsActivities();
+    cy.defaultInterceptsExternal();
     cy.mocksRestoreRouteVariants();
   });
 
@@ -34,8 +52,9 @@ describe('Activities', () => {
     it('should show radiogroup with activity from backend and default activity', () => {
       cy.mocksUseRouteVariant('get-soknad:success-activities-empty');
 
-      cy.visit(`/fyllut/testingactivities/aktiviteter?sub=digital&innsendingsId=${innsendingsId}`);
-      cy.wait('@getTestFormActivities');
+      cy.visit(`/fyllut/testingactivities?sub=digital`);
+      cy.defaultWaits();
+      cy.clickStart();
       cy.wait('@getActivities');
 
       cy.findByRole('group', { name: 'Velg hvilken aktivitet du vil søke om stønad for' })
@@ -51,21 +70,11 @@ describe('Activities', () => {
       cy.mocksUseRouteVariant('get-soknad:success-activities-empty');
 
       // Check the submission values
-      cy.intercept('PUT', '/fyllut/api/send-inn/utfyltsoknad', (req) => {
-        const {
-          submission: {
-            data: { container },
-          },
-        } = req.body;
-        expect(container.aktivitet.aktivitetId).to.equal(activityJson.aktivitetId);
-        expect(container.aktivitet.periode.fom).to.equal(activityJson.periode.fom);
-        expect(container.aktivitet.periode.tom).to.equal(activityJson.periode.tom);
-        expect(container.maalgruppe).to.equal(activityJson.maalgruppe);
-        req.reply(201);
-      }).as('submit');
-
-      cy.visit(`/fyllut/testingactivities/aktiviteter?sub=digital&innsendingsId=${innsendingsId}`);
-      cy.wait('@getTestFormActivities');
+      verifySubmissionValues(activityJson.maalgruppe, activityJson);
+
+      cy.visit(`/fyllut/testingactivities?sub=digital`);
+      cy.defaultWaits();
+      cy.clickStart();
       cy.wait('@getActivities');
 
       // Select the activity from backend
@@ -82,7 +91,7 @@ describe('Activities', () => {
 
       // Submit
       cy.clickSaveAndContinue();
-      cy.wait('@submit');
+      cy.wait('@submitMellomlagring');
     });
   });
 
@@ -91,8 +100,9 @@ describe('Activities', () => {
       cy.mocksUseRouteVariant('get-soknad:success-activities-empty');
       cy.mocksUseRouteVariant('get-activities:success-empty');
 
-      cy.visit(`/fyllut/testingactivities/aktiviteter?sub=digital&innsendingsId=${innsendingsId}`);
-      cy.wait('@getTestFormActivities');
+      cy.visit(`/fyllut/testingactivities?sub=digital`);
+      cy.defaultWaits();
+      cy.clickStart();
       cy.wait('@getActivities');
 
       cy.findByRole('group', { name: 'Velg hvilken aktivitet du vil søke om stønad for' })
@@ -109,21 +119,11 @@ describe('Activities', () => {
       cy.mocksUseRouteVariant('get-activities:success-empty');
 
       // Check the submission values
-      cy.intercept('PUT', '/fyllut/api/send-inn/utfyltsoknad', (req) => {
-        const {
-          submission: {
-            data: { container },
-          },
-        } = req.body;
-        expect(container.aktivitet.aktivitetId).to.equal(defaultActivity.aktivitetId);
-        expect(container.aktivitet.periode.fom).to.equal('');
-        expect(container.aktivitet.periode.tom).to.equal('');
-        expect(container.maalgruppe).to.equal(prefillMaalgruppe);
-        req.reply(201);
-      }).as('submit');
-
-      cy.visit(`/fyllut/testingactivities/aktiviteter?sub=digital&innsendingsId=${innsendingsId}`);
-      cy.wait('@getTestFormActivities');
+      verifySubmissionValues(prefillMaalgruppe, defaultActivity);
+
+      cy.visit(`/fyllut/testingactivities?sub=digital`);
+      cy.defaultWaits();
+      cy.clickStart();
       cy.wait('@getActivities');
 
       // Select the default activity
@@ -140,7 +140,7 @@ describe('Activities', () => {
 
       // Submit
       cy.clickSaveAndContinue();
-      cy.wait('@submit');
+      cy.wait('@submitMellomlagring');
     });
 
     it('should default to ANNET for maalgruppe', () => {
@@ -149,21 +149,11 @@ describe('Activities', () => {
       cy.mocksUseRouteVariant('get-prefill-data:success-empty');
 
       // Check the submission values
-      cy.intercept('PUT', '/fyllut/api/send-inn/utfyltsoknad', (req) => {
-        const {
-          submission: {
-            data: { container },
-          },
-        } = req.body;
-        expect(container.aktivitet.aktivitetId).to.equal(defaultActivity.aktivitetId);
-        expect(container.aktivitet.periode.fom).to.equal('');
-        expect(container.aktivitet.periode.tom).to.equal('');
-        expect(container.maalgruppe).to.equal('ANNET');
-        req.reply(201);
-      }).as('submit');
-
-      cy.visit(`/fyllut/testingactivities/aktiviteter?sub=digital&innsendingsId=${innsendingsId}`);
-      cy.wait('@getTestFormActivities');
+      verifySubmissionValues('ANNET', defaultActivity);
+
+      cy.visit(`/fyllut/testingactivities?sub=digital`);
+      cy.defaultWaits();
+      cy.clickStart();
       cy.wait('@getActivities');
 
       // Select the default activity
@@ -180,16 +170,17 @@ describe('Activities', () => {
 
       // Submit
       cy.clickSaveAndContinue();
-      cy.wait('@submit');
+      cy.wait('@submitMellomlagring');
     });
   });
 
   describe('error from backend', () => {
     it('should show checkbox with default activity and info alert', () => {
       cy.mocksUseRouteVariant('get-activities:failure');
 
-      cy.visit(`/fyllut/testingactivities/aktiviteter?sub=digital&innsendingsId=${innsendingsId}`);
-      cy.wait('@getTestFormActivities');
+      cy.visit(`/fyllut/testingactivities?sub=digital`);
+      cy.defaultWaits();
+      cy.clickStart();
       cy.wait('@getActivities');
 
       cy.contains('Velg hvilken aktivitet du vil søke om stønad for');

packages/fyllut/cypress/e2e/components/alert.cy.ts

@@ -0,0 +1,51 @@
+/*
+ * Tests that the alert component (react) renders correctly
+ * Also tests that exisiting alerts in older form definitions renders correctly
+ */
+
+describe('Alert', () => {
+  beforeEach(() => {
+    cy.defaultIntercepts();
+    cy.visit('/fyllut/testingalert/page1?sub=paper');
+    cy.defaultWaits();
+  });
+
+  // New alerts (using react)
+  it('should show default info with content', () => {
+    cy.get('.navds-alert').contains('New alert 1');
+  });
+
+  it('should show success variant with content', () => {
+    cy.get('.navds-alert--success').contains('New alert 2');
+  });
+
+  it('should have marginBottom of var(--a-spacing-10) which is 2.5rem = 40px', () => {
+    cy.contains('.formio-component-alertstripe', 'New alert 1').should('have.css', 'marginBottom', '40px');
+  });
+
+  it('should have marginBottom of 0px as the last element in the group', () => {
+    cy.contains('.formio-component-alertstripe', 'New alert 2').should('have.css', 'marginBottom', '0px');
+  });
+
+  it('should not show any labels', () => {
+    cy.get('.formio-form').should('not.have.descendants', 'label');
+  });
+
+  it('should display html content - h1 and a link to nav.no', () => {
+    cy.get('.formio-component-alertstripehtml').find('h1').should('have.text', 'Tittel');
+    cy.get('.formio-component-alertstripehtml').find('a').should('have.attr', 'href', 'https://www.nav.no/');
+  });
+
+  it('should display alert with norwegian alerttype (suksess instead of success)', () => {
+    cy.get('.formio-component-alertstripenorwegian').find('.navds-alert--success').contains('Norwegian alertType');
+  });
+
+  // Old alerts (components have input=true on component and label defined)
+  it('should have marginBottom from input=true of var(--a-spacing-10) which is 2.5rem = 40px', () => {
+    cy.contains('.formio-component-alertstripe', 'Old alert 1').should('have.css', 'marginBottom', '40px');
+  });
+
+  it('should have marginBottom from input=true of var(--a-spacing-10) which is 2.5rem = 40px for last element in group', () => {
+    cy.contains('.formio-component-alertstripe', 'Old alert 2').should('have.css', 'marginBottom', '40px');
+  });
+});

packages/fyllut/cypress/e2e/components.cy.ts packages/fyllut/cypress/e2e/components/currency-and-account.cy.ts

@@ -1,11 +1,13 @@
+/*
+ * Tests that "penger og konto" component works as expected
+ */
 describe('Components', () => {
   describe('Penger og konto', () => {
     beforeEach(() => {
       cy.defaultIntercepts();
-      cy.intercept('GET', '/fyllut/api/forms/pengerogkonto').as('getPengerOgKontoForm');
       cy.visit('/fyllut/pengerogkonto/skjema');
+      cy.defaultWaits();
       cy.wait('@getCurrencies');
-      cy.wait('@getPengerOgKontoForm');
     });
 
     it('triggers errors', () => {

packages/fyllut/cypress/e2e/datagrid.cy.ts packages/fyllut/cypress/e2e/components/datagrid.cy.ts

@@ -1,3 +1,6 @@
+/*
+ * Tests datagrid component
+ */
 describe('Datagrid', () => {
   before(() => {
     cy.configMocksServer();
@@ -6,7 +9,7 @@ describe('Datagrid', () => {
   beforeEach(() => {
     cy.defaultIntercepts();
     cy.defaultInterceptsMellomlagring();
-    cy.intercept('GET', '/fyllut/api/forms/datagrid123').as('getForm');
+    cy.mocksRestoreRouteVariants();
   });
 
   after(() => {
@@ -16,7 +19,7 @@ describe('Datagrid', () => {
   describe('Optional fields in datagrid', () => {
     it('does not trigger validation error on optional fields in datagrid rows', () => {
       cy.visit('/fyllut/datagrid123?sub=digital');
-      cy.wait('@getForm');
+      cy.defaultWaits();
       cy.clickStart();
       cy.findByRole('button', { name: 'Legg til' }).click();
       cy.clickSaveAndContinue();
@@ -28,7 +31,7 @@ describe('Datagrid', () => {
 
     it('does not display empty datagrid rows on summary page', () => {
       cy.visit('/fyllut/datagrid123?sub=digital');
-      cy.wait('@getForm');
+      cy.defaultWaits();
       cy.clickStart();
       cy.findByRole('button', { name: 'Legg til' }).click();
       cy.clickSaveAndContinue();