Skip to content

Commit

Permalink
Merge pull request #1219 from navikt/feature/select-boxes
Browse files Browse the repository at this point in the history
Convert select boxes component to React
  • Loading branch information
enstulen authored Jun 18, 2024
2 parents 0dfa9ef + 4854f89 commit 554a842
Show file tree
Hide file tree
Showing 14 changed files with 781 additions and 83 deletions.
463 changes: 463 additions & 0 deletions mocks/mocks/data/formio-api/select-boxes.json

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
{
"brukerId": "19876898104",
"skjemanr": "select-boxes-test",
"tittel": "Select boxes test",
"tema": "AGR",
"spraak": "nb",
"hoveddokument": {
"vedleggsnr": "select-boxes-test",
"tittel": "Select boxes test",
"label": "Select boxes test",
"pakrevd": true,
"mimetype": "application/pdf"
},
"hoveddokumentVariant": {
"vedleggsnr": "select-boxes-test",
"tittel": "Select boxes test",
"label": "Select boxes test",
"pakrevd": false,
"mimetype": "application/json",
"document": {
"language": "nb-NO",
"data": {
"data": {
"selectBoxesWithDefaultValue": {
"choice1": true,
"choice2": true,
"choice3": false
},
"selectBoxesWithDescription": {
"choice1": true,
"choice2": false,
"choice3": false,
"choice4": false,
"choice5": false
},
"selectBoxes": {
"choice1": true,
"choice2": false,
"choice3": false
}
},
"metadata": {
"timezone": "Europe/Oslo",
"offset": 120,
"origin": "http://localhost:3001",
"referrer": "http://localhost:3001/fyllut/selectboxestest",
"browserName": "Netscape",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36",
"pathName": "/fyllut/selectboxestest/veiledning",
"onLine": true
},
"state": "submitted",
"_vnote": ""
}
}
},
"innsendingsId": "e5a341ee-810d-4138-9550-b96d5c307cb6",
"status": "Opprettet",
"vedleggsListe": [],
"kanLasteOppAnnet": true,
"fristForEttersendelse": 14,
"endretDato": "2024-06-17T13:21:09.17675+02:00",
"skalSlettesDato": "2024-07-15T11:21:09.166405Z",
"skjemaPath": "selectboxestest",
"visningsType": "fyllUt"
}
2 changes: 2 additions & 0 deletions mocks/mocks/routes/formio-api.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const formAccordion = require('../data/formio-api/accordion.json');
const checkboxForm = require('../data/formio-api/custom-components-checkbox.json');
const hiddenConditionalForm = require('../data/formio-api/hidden-conditional.json');
const radioForm = require('../data/formio-api/radio.json');
const selectBoxesForm = require('../data/formio-api/select-boxes.json');

const allForms = [
{ form: formCypress101, translations: translationsCypress101 },
Expand Down Expand Up @@ -59,6 +60,7 @@ const allForms = [
{ form: checkboxForm, translations: undefined },
{ form: hiddenConditionalForm, translations: undefined },
{ form: radioForm, translations: undefined },
{ form: selectBoxesForm, translations: undefined },
];

const findTestdata = (formPath) => allForms.find((testdata) => testdata.form.path === formPath);
Expand Down
9 changes: 9 additions & 0 deletions mocks/mocks/routes/innsending-api.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const mellomlagringDrivingListNoDates = require('../data/innsending-api/driving-
const mellomlagringCheckbox = require('../data/innsending-api/checkbox/mellomlagring-checkbox.json');
const activitesFuture = require('../data/innsending-api/activities/activities-future.json');
const prefillData = require('../data/innsending-api/prefill-data/prefill-data.json');
const mellomlagringSelectBoxes = require('../data/innsending-api/select-boxes/mellomlagring-select-boxes.json');

const objectToByteArray = (obj) => Array.from(new TextEncoder().encode(JSON.stringify(obj)));

Expand Down Expand Up @@ -208,6 +209,14 @@ module.exports = [
body: convertToInnsendingApiResponse(mellomlagringCheckbox),
},
},
{
id: 'success-select-boxes',
type: 'json',
options: {
status: 200,
body: convertToInnsendingApiResponse(mellomlagringSelectBoxes),
},
},
{
id: 'container123-complete',
type: 'json',
Expand Down
2 changes: 1 addition & 1 deletion packages/bygger/cypress/e2e/form-builder.spec.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ describe('Form Builder', () => {
cy.get('div').contains('"label": "Flervalg"').click({ force: true });
cy.focused().type('{end}{leftArrow}{leftArrow} (endret)', { force: true });
cy.get('[data-testid="editorSaveButton"]').click();
cy.get('label').contains('Flervalg (endret)');
cy.findByRole('group', { name: 'Flervalg (endret)' }).should('exist');
});

// TODO: Add test for radio group when it gets the new data values.
Expand Down
148 changes: 148 additions & 0 deletions packages/fyllut/cypress/e2e/components/select-boxes.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
/*
* Tests that the select boxes component (react) renders and functions correctly
*/

import { TEXTS } from '@navikt/skjemadigitalisering-shared-domain';
import { expect } from 'chai';

describe('Select boxes', () => {
before(() => {
cy.configMocksServer();
});

after(() => {
cy.mocksRestoreRouteVariants();
});

describe('Paper', () => {
beforeEach(() => {
cy.defaultIntercepts();
cy.visit('/fyllut/selectboxestest/selectBoxes?sub=paper');
cy.defaultWaits();
});

it('should check 2 select boxes and show correct values in summary', () => {
cy.findByRole('group', { name: 'Select boxes' }).within(() => {
cy.findByRole('checkbox', { name: 'Choice 1' }).check();
});

cy.findByRole('group', { name: 'Select boxes with description' }).within(() => {
cy.findByRole('checkbox', { name: 'Choice 2 Description 2' }).check();
});

cy.clickNextStep();

cy.findByRole('radio', { name: 'Jeg legger det ved dette skjemaet' }).check();

cy.clickNextStep();

// Summary
cy.get('dl')
.first()
.within(() => {
// Select boxes
cy.get('li').eq(0).should('contain.text', 'Choice 1');

// Select boxes with defaultValue
cy.get('li').eq(1).should('contain.text', 'Choice 1');
cy.get('li').eq(2).should('contain.text', 'Choice 2');

// Select boxes with description
cy.get('li').eq(3).should('contain.text', 'Choice 2');
});
});

it('should show error for required select boxes', () => {
cy.clickNextStep();

// Error summary
cy.findByRole('region', { name: TEXTS.validering.error })
.should('exist')
.within(() => {
cy.findByRole('link', { name: 'Du må fylle ut: Select boxes' }).should('exist');
});

// Component error
cy.findAllByText('Du må fylle ut: Select boxes').should('have.length', 2);
});

it('should show description', () => {
cy.findByText('Normal description').should('exist');
cy.findByRole('button', { name: 'Extended description' }).should('exist');
cy.findByRole('button', { name: 'Extended description' }).click();
cy.findByText('Extended description text').should('exist');
});
});

describe('Digital', () => {
it('should have correct submission values', () => {
cy.defaultIntercepts();
cy.visit('/fyllut/selectboxestest/selectBoxes?sub=digital');
cy.defaultWaits();

cy.findByRole('group', { name: 'Select boxes' }).within(() => {
cy.findByRole('checkbox', { name: 'Choice 3' }).check();
});

cy.findByRole('group', { name: 'Select boxes with description' }).within(() => {
cy.findByRole('checkbox', { name: 'Choice 4 Description 4' }).check();
});

cy.clickSaveAndContinue();

cy.submitMellomlagring((req) => {
const {
submission: { data },
} = req.body;

// Select boxes
expect(data.selectBoxes.choice1).to.equal(false);
expect(data.selectBoxes.choice2).to.equal(false);
expect(data.selectBoxes.choice3).to.equal(true);

// Select boxes with defaultValue
expect(data.selectBoxesWithDefaultValue.choice1).to.equal(true);
expect(data.selectBoxesWithDefaultValue.choice2).to.equal(true);
expect(data.selectBoxesWithDefaultValue.choice3).to.equal(false);

// Select boxes with description
expect(data.selectBoxesWithDescription.choice1).to.equal(false);
expect(data.selectBoxesWithDescription.choice2).to.equal(false);
expect(data.selectBoxesWithDescription.choice3).to.equal(false);
expect(data.selectBoxesWithDescription.choice4).to.equal(true);
expect(data.selectBoxesWithDescription.choice5).to.equal(false);
});

cy.clickSaveAndContinue();
cy.wait('@submitMellomlagring');
});

it('should load mellomlagring', () => {
cy.mocksUseRouteVariant('get-soknad:success-select-boxes');

cy.defaultIntercepts();
cy.visit('/fyllut/selectboxestest/selectBoxes?sub=digital&innsendingsId=e5a341ee-810d-4138-9550-b96d5c307cb6');
cy.defaultWaits();

cy.findByRole('group', { name: 'Select boxes' }).within(() => {
cy.findByRole('checkbox', { name: 'Choice 1' }).should('be.checked');
cy.findByRole('checkbox', { name: 'Choice 2' }).should('not.be.checked');
cy.findByRole('checkbox', { name: 'Choice 3' }).should('not.be.checked');
});

cy.findByRole('group', { name: 'Select boxes with defaultValue' }).within(() => {
cy.findByRole('checkbox', { name: 'Choice 1' }).should('be.checked');
cy.findByRole('checkbox', { name: 'Choice 2' }).should('be.checked');
cy.findByRole('checkbox', { name: 'Choice 3' }).should('not.be.checked');
});

cy.findByRole('group', { name: 'Select boxes with description' }).within(() => {
cy.findByRole('checkbox', { name: 'Choice 1 Description 1' }).should('be.checked');
cy.findByRole('checkbox', { name: 'Choice 2 Description 2' }).should('not.be.checked');
cy.findByRole('checkbox', { name: 'Choice 3 Description 3' }).should('not.be.checked');
cy.findByRole('checkbox', { name: 'Choice 4 Description 4' }).should('not.be.checked');
cy.findByRole('checkbox', { name: 'Choice 5' }).should('not.be.checked');
});
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import editFormValuesGrid from '../shared/editFormValuesGrid';

interface Options {
withDescription?: boolean;
minLength?: number;
}

const editFormValues = (options: Options = { withDescription: false }): Component => ({
...editFormValuesGrid({ withDescription: options.withDescription }),
const editFormValues = (options: Options = { withDescription: false, minLength: 1 }): Component => ({
...editFormValuesGrid({ withDescription: options.withDescription, minLength: options.minLength }),
key: 'values',
});

Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import { Component } from '@navikt/skjemadigitalisering-shared-domain';

// withDescription: Adds description textfield to the datagrid
// minLength: Minimum number of rows in the datagrid (will hide delete button until this number of rows is reached)
interface Options {
withDescription?: boolean;
minLength?: number;
}

const editFormValuesGrid = (options: Options = { withDescription: false }): Component => {
const editFormValuesGrid = (options: Options = { withDescription: false, minLength: 1 }): Component => {
const description = {
label: 'Beskrivelse',
key: 'description',
Expand All @@ -20,6 +23,9 @@ const editFormValuesGrid = (options: Options = { withDescription: false }): Comp
type: 'datagrid',
label: 'Dataverdier',
reorder: true,
validate: {
minLength: options.minLength,
},
components: [
{
label: 'Ledetekst',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ interface ReactComponentType {
addFocusBlurEvents(element): void;
labelIsHidden(): boolean;
setCustomValidity(messages: string | string[], dirty?: boolean, external?: boolean): void;
isEmpty(value?: any): boolean;
// Element
id?: any;
emit(event: string, data: Object): void;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const selectBoxesForm = (componentType: string) => {
editFormDisplay.additionalDescription(),
]),
data([
editFormData.values(),
editFormData.values({withDescription: true, minLength: 2}),
editFormData.defaultValue(componentType),
]),
validation([
Expand Down

This file was deleted.

Loading

0 comments on commit 554a842

Please sign in to comment.