[EN-4026] chore(inputs): fixed jest tests and fixed error messages if…

… they are too long
ReseauEntourage · Aug 20, 2023 · 2946dc0 · 2946dc0
1 parent 4d9f50f
commit 2946dc0
Show file tree

Hide file tree

Showing 18 changed files with 52 additions and 41 deletions.
diff --git a/cypress/e2e/admin.cy.js b/cypress/e2e/admin.cy.js
@@ -493,10 +493,10 @@ describe('Admin', () => {
       });
       cy.wait('@organizationListPage');
       // test if all organizations are in the table
-      cy.fixture('organization-search-res').then((organizations) => {
+      cy.fixture('organization-search-res').then((orgs) => {
         cy.get('[data-testid="organization-list"]')
           .find('tr')
-          .should('have.length', organizations.length);
+          .should('have.length', orgs.length);
       });
     });
 

diff --git a/cypress/e2e/parcours-orienter.cy.js b/cypress/e2e/parcours-orienter.cy.js
@@ -4,6 +4,7 @@ describe('Parcours Orienter', () => {
     cy.intercept('POST', '/contact/contactUs', {
       statusCode: 201,
     }).as('postContact');
+    cy.intercept('GET', '/cv/shares', { total: 184222 });
   });
 
   it('Ouvrir la popup du formulaire', () => {

diff --git a/src/components/backoffice/admin/members/MemberTable/Member/Member.desktop.tsx b/src/components/backoffice/admin/members/MemberTable/Member/Member.desktop.tsx
@@ -215,7 +215,7 @@ export function MemberDesktop({
             <TdDesktop>
               <StyledCheckBoxCellContent>
                 <CheckBox
-                  removeMargin
+                  useOutsideOfForm
                   id={`member-${member.id}-check`}
                   name={`member-${member.id}-check`}
                   value={checked}

diff --git a/src/components/backoffice/admin/members/MemberTable/Member/Member.mobile.tsx b/src/components/backoffice/admin/members/MemberTable/Member/Member.mobile.tsx
@@ -82,7 +82,7 @@ export function MemberMobile({
                 name={`member-${member.id}-check`}
                 value={checked}
                 onChange={handleCheckBox}
-                removeMargin
+                useOutsideOfForm
                 disabled={userCandidate?.hidden}
               />
             )}

diff --git a/src/components/forms/FormWithValidation.tsx b/src/components/forms/FormWithValidation.tsx
@@ -14,6 +14,7 @@ import {
   isFormFieldGroup,
   isFormFieldInput,
   isFormFieldMultiple,
+  isFormFieldRadio,
   isFormFieldText,
 } from './FormSchema';
 import { StyledForm } from './Forms.styles';
@@ -109,6 +110,7 @@ export function FormWithValidation<S extends FormSchema<AnyCantFix>>({
               if (shouldHide) {
                 return null;
               }
+
               const title =
                 typeof field.title === 'function'
                   ? field.title(getValues)
@@ -139,15 +141,15 @@ export function FormWithValidation<S extends FormSchema<AnyCantFix>>({
                   <li key={i}>
                     <InputsContainer
                       fields={childrenFields.map((childrenField) => {
-                        if (isFormFieldText(childrenField)) {
-                          const shouldHideField = childrenField.hide
-                            ? childrenField.hide(getValues)
-                            : childrenField.hidden;
+                        const shouldHideField = childrenField.hide
+                          ? childrenField.hide(getValues)
+                          : childrenField.hidden;
 
-                          if (shouldHideField) {
-                            return null;
-                          }
+                        if (shouldHideField) {
+                          return null;
+                        }
 
+                        if (isFormFieldText(childrenField)) {
                           const title =
                             typeof childrenField.title === 'function'
                               ? childrenField.title(getValues)
@@ -217,6 +219,10 @@ export function FormWithValidation<S extends FormSchema<AnyCantFix>>({
             }
 
             if (isFormFieldInput(field)) {
+              // Condition because Radio Async needs to be rendered to make request and check if it should be hidden or not
+              if (!isFormFieldRadio(field) && shouldHide) {
+                return null;
+              }
               return (
                 <li key={i}>
                   <GenericField

diff --git a/src/components/forms/fields/FieldErrorMessage/FieldErrorMessage.styles.ts b/src/components/forms/fields/FieldErrorMessage/FieldErrorMessage.styles.ts
@@ -5,6 +5,10 @@ export const StyledErrorMessage = styled.div`
   color: ${COLORS.darkOrange};
   font-size: 12px;
   line-height: 12px;
-  position: absolute;
-  bottom: 12px;
+  display: flex;
+  align-items: flex-start;
+  min-height: 30px;
+  > * {
+    padding-top: 5px;
+  }
 `;
diff --git a/src/components/forms/fields/FieldErrorMessage/FieldErrorMessage.tsx b/src/components/forms/fields/FieldErrorMessage/FieldErrorMessage.tsx
@@ -11,12 +11,9 @@ export const FieldErrorMessage = ({
   error,
   className,
 }: FieldErrorMessageProps) => {
-  if (error?.message) {
-    return (
-      <StyledErrorMessage className={className}>
-        {error.message}
-      </StyledErrorMessage>
-    );
-  }
-  return null;
+  return (
+    <StyledErrorMessage className={className}>
+      <span>{error?.message ? error.message : ''}</span>
+    </StyledErrorMessage>
+  );
 };
diff --git a/src/components/forms/schemas/formCandidateInscription.ts b/src/components/forms/schemas/formCandidateInscription.ts
@@ -42,6 +42,7 @@ function hideIfNoInfoCo(
   return !city?.length || !filteredOptions;
 }
 
+// TODO FIX
 export const formCandidateInscription: FormSchema<FormCandidateInscriptionSchema> =
   {
     id: 'form-candidate-inscription',

diff --git a/src/components/forms/schemas/formInterestLinkedOut.tsx b/src/components/forms/schemas/formInterestLinkedOut.tsx
@@ -34,6 +34,7 @@ export const formInterestLinkedOut: FormSchema<{
       component: 'text-input',
       title: 'Prénom*',
       isRequired: true,
+      maxLength: 30,
     },
     {
       id: 'email',

diff --git a/...nts/modals/Modal/ModalGeneric/StepperModal/ModalInterestLinkedOut/__tests__/index.test.js b/...nts/modals/Modal/ModalGeneric/StepperModal/ModalInterestLinkedOut/__tests__/index.test.js
@@ -15,6 +15,14 @@ jest.mock('@react-hook/window-size', () => {
   };
 });
 
+jest.mock('src/components/forms/schemas/formInterestLinkedOut', () => {
+  return {
+    formInterestLinkedOut: {
+      id: 'form-interest',
+      fields: [],
+    },
+  };
+});
 jest.mock('react-modal');
 jest.mock('src/api/index');
 jest.mock('src/components/modals/Modal', () => {

diff --git a/src/components/partials/NewsletterPartial/NewsletterPartial.tsx b/src/components/partials/NewsletterPartial/NewsletterPartial.tsx
@@ -86,7 +86,7 @@ export const NewsletterPartial = ({
                     <CheckBox
                       id={tagConst}
                       name={tagConst}
-                      removeMargin
+                      useOutsideOfForm
                       value={tagConst === status}
                       title={label}
                       onChange={() => {
@@ -113,7 +113,7 @@ export const NewsletterPartial = ({
                     <CheckBox
                       id={tagConst}
                       name={tagConst}
-                      removeMargin
+                      useOutsideOfForm
                       value={tagConst === zone}
                       title={label}
                       onChange={() => {

diff --git a/src/components/utils/Inputs/CheckBox/CheckBox.styles.ts b/src/components/utils/Inputs/CheckBox/CheckBox.styles.ts
@@ -6,10 +6,6 @@ export const StyledCheckbox = styled.div`
   ${() => commonInputContainerStyles}
   justify-content: center;
   .checkbox-label {
-    margin-bottom: ${({ removeMargin }) => {
-      return removeMargin ? 0 : 30;
-    }}px;
-
     display: flex;
     align-items: center;
     justify-content: flex-start;

diff --git a/src/components/utils/Inputs/CheckBox/CheckBox.tsx b/src/components/utils/Inputs/CheckBox/CheckBox.tsx
@@ -4,7 +4,7 @@ import { FieldErrorMessage } from 'src/components/forms/fields/FieldErrorMessage
 import { StyledCheckbox } from 'src/components/utils/Inputs/CheckBox/CheckBox.styles';
 
 interface CheckBoxProps extends CommonInputProps<boolean, HTMLInputElement> {
-  removeMargin?: boolean;
+  useOutsideOfForm?: boolean;
 }
 
 export function CheckBox({
@@ -16,7 +16,7 @@ export function CheckBox({
   disabled = false,
   hidden = false,
   value = false,
-  removeMargin = false,
+  useOutsideOfForm = false,
   error,
   inputRef,
 }: Omit<CheckBoxProps, 'title'> & { title?: string | JSX.Element }) {
@@ -27,7 +27,6 @@ export function CheckBox({
   return (
     <StyledCheckbox
       disabled={disabled}
-      removeMargin={removeMargin}
       onClick={(e) => {
         e.stopPropagation();
       }}
@@ -51,7 +50,7 @@ export function CheckBox({
         <span className="checkmark" />
         {title && <span className="label">{title}</span>}
       </label>
-      <FieldErrorMessage error={error} />
+      {!useOutsideOfForm && <FieldErrorMessage error={error} />}
     </StyledCheckbox>
   );
 }
diff --git a/src/components/utils/Inputs/Inputs.styles.ts b/src/components/utils/Inputs/Inputs.styles.ts
@@ -40,7 +40,6 @@ export const commonInputStyles = css`
   padding: 4px 0;
   min-height: 30px;
   box-sizing: border-box;
-  margin-bottom: 30px;
 `;
 
 export const StyledInputLabel = styled.label`
@@ -56,10 +55,8 @@ export const StyledInputLabel = styled.label`
 export const StyledAnnotations = styled.div`
   display: flex;
   justify-content: space-between;
-  position: absolute;
-  bottom: 12px;
   width: 100%;
-  align-items: center;
+  align-items: flex-start;
 `;
 
 export const StyledAnnotationsErrorMessage = styled(FieldErrorMessage)`
@@ -75,4 +72,8 @@ export const StyledLimit = styled.div`
   line-height: 12px;
   text-align: right;
   align-self: flex-end;
+  min-height: 30px;
+  > * {
+    padding-top: 5px;
+  }
 `;
diff --git a/src/components/utils/Inputs/SelectSimple/SelectSimple.styles.ts b/src/components/utils/Inputs/SelectSimple/SelectSimple.styles.ts
@@ -12,7 +12,6 @@ export const StyledSelectContainer = styled.div`
     width: 100%;
     border: none;
     position: relative;
-    margin-bottom: 30px;
     .placeholder,
     .selected-value {
       ${() => commonInputStyles}

diff --git a/src/components/utils/Inputs/Selects/Selects.styles.ts b/src/components/utils/Inputs/Selects/Selects.styles.ts
@@ -9,7 +9,6 @@ export const StyledSelectContainer = styled.div`
   ${() => commonInputContainerStyles}
 `;
 export const StyledSelect = styled.div`
-  margin-bottom: 30px;
   & .Select__control--is-disabled {
     background-color: ${COLORS.lightgray} !important;
 

diff --git a/src/components/utils/Inputs/TextArea/TextArea.tsx b/src/components/utils/Inputs/TextArea/TextArea.tsx
@@ -96,12 +96,12 @@ export function TextArea({
           </div>
           {maxLines && (
             <StyledLimit warning={remainingLines === 0}>
-              {remainingLines} ligne(s) restante(s)
+              <span>{remainingLines} ligne(s) restante(s)</span>
             </StyledLimit>
           )}
           {!maxLines && maxLength && (
             <StyledLimit warning={remainingCharacters === 0}>
-              {remainingCharacters} caractère(s) restant(s)
+              <span>{remainingCharacters} caractère(s) restant(s)</span>
             </StyledLimit>
           )}
         </StyledAnnotations>

diff --git a/src/components/utils/Inputs/TextInput/TextInput.tsx b/src/components/utils/Inputs/TextInput/TextInput.tsx
@@ -1,5 +1,4 @@
 import React, { ChangeEvent } from 'react';
-import { StyledErrorMessage } from '../../../forms/fields/FieldErrorMessage/FieldErrorMessage.styles';
 import {
   StyledAnnotations,
   StyledAnnotationsErrorMessage,
@@ -68,7 +67,7 @@ export function TextInput({
             <StyledAnnotationsErrorMessage error={error} />
           </div>
           <StyledLimit warning={remainingCharacters === 0}>
-            {remainingCharacters} caractère(s) restant(s)
+            <span>{remainingCharacters} caractère(s) restant(s)</span>
           </StyledLimit>
         </StyledAnnotations>
       ) : (