indec-it · maximilianoforlenza · Apr 3, 2023 · Apr 3, 2023 · Apr 3, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,53 +35,53 @@
   "author": "INDEC-it",
   "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
-    "@commitlint/cli": "^17.4.0",
-    "@commitlint/config-conventional": "^17.4.0",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-interactions": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/react": "^6.5.15",
-    "@storybook/testing-library": "^0.0.13",
+    "@commitlint/cli": "^17.5.1",
+    "@commitlint/config-conventional": "^17.4.4",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
+    "@storybook/testing-library": "^0.1.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "babel-loader": "^9.1.2",
-    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "^8.31.0",
+    "eslint": "^8.37.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-webpack": "^0.13.2",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.2.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.8",
+    "eslint-plugin-storybook": "^0.6.11",
     "husky": "^8.0.3",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "jest-watch-typeahead": "^2.2.1"
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-watch-typeahead": "^2.2.2"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.3",
-    "@mui/x-date-pickers": "^5.0.16",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.15",
+    "@mui/x-date-pickers": "^6.0.4",
     "date-fns": "^2.29.3",
     "formik": "^2.2.9",
-    "framer-motion": "^8.1.9",
+    "framer-motion": "^10.10.0",
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "yup": "^0.32.11"
+    "yup": "^1.0.2"
   },
   "repository": {
     "type": "git",

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -12,18 +12,17 @@ import formikField from '@/utils/propTypes/formikField';
 import formikForm from '@/utils/propTypes/formikForm';
 import optionPropTypes from '@/utils/propTypes/option';
 
-const getSelectedOptions = (options, value) => options
-  .filter(option => value.includes(option.value))
-  .map(selectedOption => selectedOption.label)
-  .join(', ') || defaultMessages.UNANSWERED;
+const getSelectedOptions = (options, selectedValues) => selectedValues.reduce((accumulator, currentValue) => {
+  const option = options.find(currentOption => currentOption.value === currentValue);
+  return option ? [...accumulator, option.label] : accumulator;
+}, []).join(', ') || defaultMessages.UNANSWERED;
 
 const handleChecked = (e, selectedValue, {name, value}, setFieldValue) => {
-  if (e.target.checked) {
-    setFieldValue(name, [...value, selectedValue]);
-  } else {
-    const values = value.filter(currentValue => currentValue !== selectedValue);
-    setFieldValue(name, values);
-  }
+  const isChecked = e.target.checked;
+  const values = isChecked
+    ? [...value, selectedValue]
+    : value.filter(currentValue => currentValue !== selectedValue);
+  setFieldValue(name, values);
 };
 
 function Checkbox({

diff --git a/src/components/FormBuilder/FormBuilder.js b/src/components/FormBuilder/FormBuilder.js
@@ -1,6 +1,6 @@
 import {useState} from 'react';
 import PropTypes from 'prop-types';
-import {Formik, FieldArray} from 'formik';
+import {Formik, FieldArray, Form} from 'formik';
 import Box from '@mui/material/Box';
 
 import modals from '@/constants/modals';
@@ -69,12 +69,11 @@ function FormBuilder({
       {({values, setValues}) => {
         const warnings = getWarnings(warningSchema, values) || {};
         return (
-          <Box component="form" noValidate sx={{width: '100%'}}>
-            <>
-              <FieldArray
-                name={section.name}
-                render={
-                  sectionHelpers => values
+          <Form>
+            <FieldArray
+              name={section.name}
+              render={
+                sectionHelpers => values
                 && values[section.name]
                 && values[section.name].map((currentSection, index) => (
                   <Box key={currentSection.id} mb={2}>
@@ -124,28 +123,27 @@ function FormBuilder({
                     />
                   </Box>
                 ))
-                }
-              />
-              {
-                components.NavigationButtons
-                  ? <components.NavigationButtons schema={validateSchema} values={values ? values[section.name] : {}} />
-                  : (
-                    <NavigationButtons
-                      onPrevious={onPrevious}
-                      disablePreviousButton={page === 0}
-                      nextButtonLabel={isLastSection ? 'Finalizar' : 'Siguiente'}
-                      isLastSection={isLastSection}
-                      onAddNew={section.multiple ? () => addNewSection(setValues, values) : undefined}
-                      onInterrupt={
-                        section.interruption.interruptible
-                          ? () => handleOpenModal(modals.INTERRUPTION_MODAL, section.id)
-                          : undefined
-                      }
-                    />
-                  )
               }
-            </>
-          </Box>
+            />
+            {
+              components.NavigationButtons
+                ? <components.NavigationButtons schema={validateSchema} values={values ? values[section.name] : {}} />
+                : (
+                  <NavigationButtons
+                    onPrevious={onPrevious}
+                    disablePreviousButton={page === 0}
+                    nextButtonLabel={isLastSection ? 'Finalizar' : 'Siguiente'}
+                    isLastSection={isLastSection}
+                    onAddNew={section.multiple ? () => addNewSection(setValues, values) : undefined}
+                    onInterrupt={
+                      section.interruption.interruptible
+                        ? () => handleOpenModal(modals.INTERRUPTION_MODAL, section.id)
+                        : undefined
+                    }
+                  />
+                )
+            }
+          </Form>
         );
       }}
     </Formik>

diff --git a/src/components/FormBuilder/SectionHeader/SectionHeader.js b/src/components/FormBuilder/SectionHeader/SectionHeader.js
@@ -12,22 +12,22 @@ import getSelectedOptionLabel from '@/utils/getSelectedOptionLabel';
 
 const getHeaders = (questions, values, headers) => {
   if (headers.some(header => header.question)) {
-    const finalHeaders = [];
     const headerQuestions = headers.map(header => header.question);
-    questions
-      .filter(question => headerQuestions.includes(question.id) && !question.multiple)
-      .forEach(question => {
+    return questions.reduce((acc, question) => {
+      if (
+        headerQuestions.includes(question.id)
+        && !question.multiple
+        && values[question.name].answer?.value
+      ) {
         const {value} = values[question.name].answer;
-        if (value) {
-          if ([questionTypes.TEXT_FIELD, questionTypes.NUMERIC_FIELD].includes(question.type)) {
-            finalHeaders.push(value);
-          } else {
-            const label = getSelectedOptionLabel(question.options, value);
-            finalHeaders.push(label);
-          }
+        if ([questionTypes.TEXT_FIELD, questionTypes.NUMERIC_FIELD].includes(question.type)) {
+          acc.push(value);
+        } else {
+          acc.push(getSelectedOptionLabel(question.options, value));
         }
-      });
-    return finalHeaders.join('| ');
+      }
+      return acc;
+    }, []).join(' | ');
   }
   return '';
 };

diff --git a/src/components/FormBuilder/SectionHeader/SectionHeader.test.js b/src/components/FormBuilder/SectionHeader/SectionHeader.test.js
@@ -168,7 +168,7 @@ describe('<SectionHeader>', () => {
 
       it('should display header answers', () => {
         const {container} = getComponent();
-        expect(getByText(container, 'My name| My age')).toBeInTheDocument();
+        expect(getByText(container, 'My name | My age')).toBeInTheDocument();
       });
     });
   });

diff --git a/src/components/NavigationButtons/NavigationButtons.js b/src/components/NavigationButtons/NavigationButtons.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import {useFormikContext} from 'formik';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
@@ -17,7 +16,6 @@ function NavigationButtons({
   isLastSection,
   onInterrupt
 }) {
-  const {submitForm} = useFormikContext();
   return (
     <Stack direction={{xs: 'column', sm: 'row'}} justifyContent="space-between" p={2} spacing={{xs: 1, sm: 2, md: 4}}>
       <Button
@@ -53,9 +51,9 @@ function NavigationButtons({
         )}
       </Stack>
       <Button
+        type="submit"
         startIcon={isLastSection ? <DoneIcon /> : undefined}
         endIcon={isLastSection ? undefined : <ArrowRightIcon />}
-        onClick={submitForm}
         variant="contained"
         color={isLastSection ? 'success' : 'primary'}
       >

diff --git a/src/components/QuestionBuilder/QuestionBuilder.js b/src/components/QuestionBuilder/QuestionBuilder.js
@@ -19,7 +19,18 @@ const getComponent = (section, sectionIndex, questionIndex, readOnlyMode, warnin
     return null;
   }
   let QuestionComponent;
-  const {validations, number, label, multiple, subQuestions, type, placeholder, name, options, metadata} = question;
+  const {
+    validations,
+    number,
+    label,
+    multiple,
+    subQuestions,
+    type,
+    placeholder,
+    name,
+    options,
+    metadata
+  } = question;
   const questionName = `${section.name}.${sectionIndex}.${name}.answer`;
   const isRequired = validations.some(validation => validation.type === 'required');
   const labelWithNumber = `${number} - ${label}`;

diff --git a/src/components/RadioTable/RadioTable.js b/src/components/RadioTable/RadioTable.js
@@ -11,7 +11,8 @@ import InputLabel from '@/components/InputLabel';
 import formikField from '@/utils/propTypes/formikField';
 import formikForm from '@/utils/propTypes/formikForm';
 import optionPropTypes from '@/utils/propTypes/option';
-import getSelectedOptionLabel from '@/utils/getSelectedOptionLabel';
+
+import ReadOnly from './ReadOnly';
 
 function RadioTable({
   options, label, form, field, readOnlyMode, required, warnings
@@ -20,22 +21,7 @@ function RadioTable({
     <Stack direction="column" spacing={2} sx={{width: '100%'}}>
       <InputLabel warnings={warnings} required={required} form={form} field={field} label={label} readOnly={readOnlyMode} />
       {readOnlyMode ? (
-        <>
-          {options.map(option => (
-            <Box key={option.id}>
-              <Stack direction={{xs: 'column', sm: 'row'}} spacing={5}>
-                <Box sx={{width: '400px'}}>
-                  <Typography>{option.title}</Typography>
-                </Box>
-                <Typography
-                  data-testid={`selected-option-${option.id}`}
-                >
-                  {getSelectedOptionLabel(option.subOptions, field.value[option.name])}
-                </Typography>
-              </Stack>
-            </Box>
-          ))}
-        </>
+        <ReadOnly options={options} field={field} />
       ) : (
         <>
           {options.map(option => (

diff --git a/src/components/RadioTable/RadioTable.test.js b/src/components/RadioTable/RadioTable.test.js
@@ -1,4 +1,4 @@
-import {fireEvent, getByTestId, getByText} from '@testing-library/react';
+import {fireEvent, getByTestId, getByText, queryByTestId} from '@testing-library/react';
 
 import RadioTable from './RadioTable';
 
@@ -97,13 +97,9 @@ describe('<RadioTable>', () => {
       props.readOnlyMode = true;
     });
 
-    it('should display `props.options.title` and the selected option', () => {
+    it('should render ReadOnly component', () => {
       const {container} = getComponent();
-      props.options.forEach(option => {
-        expect(getByText(container, option.title)).toBeInTheDocument();
-        const selectedOption = getByTestId(container, `selected-option-${option.id}`);
-        expect(getByText(selectedOption, 'Sin respuesta.')).toBeInTheDocument();
-      });
+      expect(getByTestId(container, 'read-only')).toBeInTheDocument();
     });
   });
 
@@ -112,6 +108,11 @@ describe('<RadioTable>', () => {
       props.readOnlyMode = false;
     });
 
+    it('should not render ReadOnly component', () => {
+      const {container} = getComponent();
+      expect(queryByTestId(container, 'read-only')).toBeNull();
+    });
+
     it('should display `props.options.title` and `props.options.subOptions.label`', () => {
       const {container} = getComponent();
       props.options.forEach(option => {

diff --git a/src/components/RadioTable/ReadOnly/ReadOnly.js b/src/components/RadioTable/ReadOnly/ReadOnly.js
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import formikField from '@/utils/propTypes/formikField';
+import optionPropTypes from '@/utils/propTypes/option';
+import getSelectedOptionLabel from '@/utils/getSelectedOptionLabel';
+
+function ReadOnly({options, field}) {
+  return (
+    <Box data-testid="read-only">
+      {options.map(option => (
+        <Box key={option.id}>
+          <Stack direction={{xs: 'column', sm: 'row'}} spacing={5}>
+            <Box sx={{width: '400px'}}>
+              <Typography>{option.title}</Typography>
+            </Box>
+            <Typography
+              data-testid={`selected-option-${option.id}`}
+            >
+              {getSelectedOptionLabel(option.subOptions, field.value[option.name])}
+            </Typography>
+          </Stack>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+ReadOnly.propTypes = {
+  field: formikField.isRequired,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      subOptions: PropTypes.arrayOf(
+        optionPropTypes
+      )
+    })
+  ).isRequired
+};
+
+export default ReadOnly;