(PC-11490) create constants for fields label

pass-culture · Nov 10, 2021 · fc1310a · fc1310a
1 parent 26dfb2c
commit fc1310a
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 27 deletions.
diff --git a/src/screens/EACOfferCreation/EACOfferCreationContact/EACOfferCreationContact.tsx b/src/screens/EACOfferCreation/EACOfferCreationContact/EACOfferCreationContact.tsx
@@ -3,6 +3,8 @@ import React from 'react'
 import { SectionHeader } from 'components'
 import { TextInput } from 'ui-kit'
 
+import { EMAIL_LABEL, PHONE_LABEL } from '../constants/labels'
+
 import styles from './EACOfferCreationContact.module.scss'
 
 const EACOfferCreationContact: React.FC = () => {
@@ -14,14 +16,14 @@ const EACOfferCreationContact: React.FC = () => {
       />
       <div className={styles.subsection}>
         <TextInput
+          label={PHONE_LABEL}
           name='phone'
-          label="Téléphone"
         />
       </div>
       <div className={styles.subsection}>
         <TextInput
+          label={EMAIL_LABEL}
           name='email'
-          label="Email"
         />
       </div>
     </section>

diff --git a/src/screens/EACOfferCreation/EACOfferCreationNotifications/EACOfferCreationNotifications.tsx b/src/screens/EACOfferCreation/EACOfferCreationNotifications/EACOfferCreationNotifications.tsx
@@ -3,6 +3,8 @@ import React from 'react'
 import { SectionHeader } from 'components'
 import { Checkbox, TextInput } from 'ui-kit'
 
+import { NOTIFICATIONS_EMAIL_LABEL, NOTIFICATIONS_LABEL } from '../constants/labels'
+
 import styles from './EACOfferCreationNotifications.module.scss'
 
 const EACOfferCreationNotifications: React.FC = () => {
@@ -13,14 +15,14 @@ const EACOfferCreationNotifications: React.FC = () => {
         title="Notifications"
       />
       <Checkbox
-        label="Être notifié par email des réservations"
+        label={NOTIFICATIONS_LABEL}
         name='notifications'
         value=''
       />
       <div className={styles.subsection}>
         <TextInput
+          label={NOTIFICATIONS_EMAIL_LABEL}
           name='notificationEmail'
-          label="Email auquel envoyer les notifications"
         />
       </div>
     </section>

diff --git a/src/screens/EACOfferCreation/EACOfferCreationOfferVenue/EACOfferCreationOfferVenue.tsx b/src/screens/EACOfferCreation/EACOfferCreationOfferVenue/EACOfferCreationOfferVenue.tsx
@@ -3,6 +3,12 @@ import React from 'react'
 import { SectionHeader } from 'components'
 import { RadioButton } from 'ui-kit'
 
+import {
+  OFFER_VENUE_OFFERER_LABEL,
+  OFFER_VENUE_OTHER_LABEL,
+  OFFER_VENUE_SCHOOL_LABEL,
+} from '../constants/labels'
+
 import styles from './EACOfferCreationOfferVenue.module.scss'
 
 const EACOfferCreationOfferVenue = (): JSX.Element => {
@@ -18,17 +24,17 @@ const EACOfferCreationOfferVenue = (): JSX.Element => {
         </h4>
         <div className={styles.radioGroup}>
           <RadioButton
-            label='Dans votre établissement'
+            label={OFFER_VENUE_OFFERER_LABEL}
             name='offerVenueId'
             value='offererVenue'
           />
           <RadioButton
-            label="Dans l'établissement scolaire"
+            label={OFFER_VENUE_SCHOOL_LABEL}
             name='offerVenueId'
             value='school'
           />
           <RadioButton
-            label='Autre'
+            label={OFFER_VENUE_OTHER_LABEL}
             name='offerVenueId'
             value='other'
           />

diff --git a/src/screens/EACOfferCreation/EACOfferCreationType/EACOfferCreationType.tsx b/src/screens/EACOfferCreation/EACOfferCreationType/EACOfferCreationType.tsx
@@ -4,6 +4,13 @@ import { SectionHeader } from 'components'
 import { Category, SubCategory } from 'types/categories'
 import { Select, TextArea, TextInput } from 'ui-kit'
 
+import {
+  CATEGORY_LABEL,
+  DESCRIPTION_LABEL,
+  SUBCATEGORY_LABEL,
+  TITLE_LABEL,
+} from '../constants/labels'
+
 import styles from './EACOfferCreationType.module.scss'
 import { buildOptions } from './utils/buildOptions'
 
@@ -28,28 +35,28 @@ const EACOfferCreationType: React.FC<EACOfferCreationTypeProps> = ({ categories,
       />
       <div className={styles.subsection}>
         <Select
+          label={CATEGORY_LABEL}
           name='category'
           options={buildOptions(categories)}
-          label="Domaine"
         />
       </div>
       <div className={styles.subsection}>
         <Select
+          label={SUBCATEGORY_LABEL}
           name='subCategory'
           options={buildOptions(subCategoriesForSelectedCategory)}
-          label="Sous Domaine"
         />
       </div>
       <div className={styles.subsection}>
-       <TextInput
+        <TextInput
+          label={TITLE_LABEL}
           name="title"
-          label="Titre de l'offre"
         />
       </div>
       <div className={styles.subsection}>
         <TextArea
+          label={DESCRIPTION_LABEL}
           name='description'
-          label="Description"
         />
       </div>
     </section>

diff --git a/src/screens/EACOfferCreation/EACOfferCreationVenue/EACOfferCreationVenue.tsx b/src/screens/EACOfferCreation/EACOfferCreationVenue/EACOfferCreationVenue.tsx
@@ -3,6 +3,8 @@ import React from 'react'
 import { SectionHeader } from 'components'
 import { Select } from 'ui-kit'
 
+import { OFFERER_LABEL, VENUE_LABEL } from '../constants/labels'
+
 import styles from './EACOfferCreationVenue.module.scss'
 
 const EACOfferCreationVenue: React.FC = () => {
@@ -15,16 +17,16 @@ const EACOfferCreationVenue: React.FC = () => {
       <div className={styles.subsection}>
         <Select
           disabled
+          label={OFFERER_LABEL}
           name='offerer'
           options={[]}
-          label="Structure"
         />
       </div>
       <div className={styles.subsection}>
         <Select
+          label={VENUE_LABEL}
           name='venueId'
           options={[]}
-          label="Lieu qui percevra le remboursement"
         />
       </div>
     </section>

diff --git a/src/screens/EACOfferCreation/__specs__/EACOfferCreationDefaultValues.spec.tsx b/src/screens/EACOfferCreation/__specs__/EACOfferCreationDefaultValues.spec.tsx
@@ -5,6 +5,19 @@ import React from 'react'
 import { Router } from 'react-router'
 
 import { accessibilityOptions } from '../accessibilityOptions'
+import {
+  DESCRIPTION_LABEL,
+  EMAIL_LABEL,
+  NOTIFICATIONS_EMAIL_LABEL,
+  NOTIFICATIONS_LABEL,
+  OFFERER_LABEL,
+  OFFER_VENUE_OFFERER_LABEL,
+  OFFER_VENUE_OTHER_LABEL,
+  OFFER_VENUE_SCHOOL_LABEL,
+  PHONE_LABEL,
+  TITLE_LABEL,
+  VENUE_LABEL,
+} from '../constants/labels'
 import EACOfferCreation, { EACOfferCreationProps } from '../EACOfferCreation'
 import { participantsOptions } from '../participantsOptions'
 
@@ -39,21 +52,21 @@ describe('screens | EACOfferCreation', () => {
     const subCategoriesSelect = getSubcategoriesSelect()
     expect(subCategoriesSelect.value).toBe('')
 
-    const titleInput = screen.getByLabelText("Titre de l'offre") as HTMLInputElement
+    const titleInput = screen.getByLabelText(TITLE_LABEL) as HTMLInputElement
     expect(titleInput.value).toBe('')
 
-    const descriptionTextArea = screen.getByLabelText('Description') as HTMLTextAreaElement
+    const descriptionTextArea = screen.getByLabelText(DESCRIPTION_LABEL) as HTMLTextAreaElement
     expect(descriptionTextArea.value).toBe('')
 
-    const offererSelect = screen.getByLabelText('Structure') as HTMLSelectElement
+    const offererSelect = screen.getByLabelText(OFFERER_LABEL) as HTMLSelectElement
     expect(offererSelect.value).toBe('')
 
-    const venueSelect = screen.getByLabelText('Lieu qui percevra le remboursement') as HTMLSelectElement
+    const venueSelect = screen.getByLabelText(VENUE_LABEL) as HTMLSelectElement
     expect(venueSelect.value).toBe('')
 
-    const offerVenueRadio1 = screen.getByLabelText('Dans votre établissement') as HTMLInputElement
-    const offerVenueRadio2 = screen.getByLabelText("Dans l'établissement scolaire") as HTMLInputElement
-    const offerVenueRadio3 = screen.getByLabelText('Autre') as HTMLInputElement
+    const offerVenueRadio1 = screen.getByLabelText(OFFER_VENUE_OFFERER_LABEL) as HTMLInputElement
+    const offerVenueRadio2 = screen.getByLabelText(OFFER_VENUE_SCHOOL_LABEL) as HTMLInputElement
+    const offerVenueRadio3 = screen.getByLabelText(OFFER_VENUE_OTHER_LABEL) as HTMLInputElement
     [offerVenueRadio1, offerVenueRadio2, offerVenueRadio3].forEach(radio => {
       expect(radio.checked).toBe(false)
     })
@@ -68,16 +81,16 @@ describe('screens | EACOfferCreation', () => {
       expect(accessibilityCheckbox.checked).toBe(false)
     })
 
-    const phoneInput = screen.getByLabelText('Téléphone') as HTMLInputElement
+    const phoneInput = screen.getByLabelText(PHONE_LABEL) as HTMLInputElement
     expect(phoneInput.value).toBe('')
 
-    const emailInput = screen.getByLabelText('Email') as HTMLInputElement
+    const emailInput = screen.getByLabelText(EMAIL_LABEL) as HTMLInputElement
     expect(emailInput.value).toBe('')
 
-    const notificationsCheckbox = screen.getByLabelText('Être notifié par email des réservations') as HTMLInputElement
+    const notificationsCheckbox = screen.getByLabelText(NOTIFICATIONS_LABEL) as HTMLInputElement
     expect(notificationsCheckbox.checked).toBe(false)
 
-    const notificationEmailInput = screen.getByLabelText('Email auquel envoyer les notifications') as HTMLInputElement
+    const notificationEmailInput = screen.getByLabelText(NOTIFICATIONS_EMAIL_LABEL) as HTMLInputElement
     expect(notificationEmailInput.value).toBe('')
   })
 })
diff --git a/src/screens/EACOfferCreation/__specs__/__tests-utils__/eacOfferCreationUtils.ts b/src/screens/EACOfferCreation/__specs__/__tests-utils__/eacOfferCreationUtils.ts
@@ -1,7 +1,9 @@
 import { screen } from '@testing-library/react'
 
+import { CATEGORY_LABEL, SUBCATEGORY_LABEL } from 'screens/EACOfferCreation/constants/labels'
+
 export const getCategoriesSelect = (): HTMLSelectElement => 
-    screen.getByLabelText('Domaine') as HTMLSelectElement
+    screen.getByLabelText(CATEGORY_LABEL) as HTMLSelectElement
 
 export const getSubcategoriesSelect = (): HTMLSelectElement =>
-    screen.getByLabelText('Sous Domaine') as HTMLSelectElement
+    screen.getByLabelText(SUBCATEGORY_LABEL) as HTMLSelectElement
diff --git a/src/screens/EACOfferCreation/constants/labels.ts b/src/screens/EACOfferCreation/constants/labels.ts
@@ -0,0 +1,13 @@
+export const CATEGORY_LABEL = "Domaine"
+export const SUBCATEGORY_LABEL = "Sous Domaine"
+export const TITLE_LABEL = "Titre de l'offre"
+export const DESCRIPTION_LABEL = "Description"
+export const OFFERER_LABEL = "Structure"
+export const VENUE_LABEL = "Lieu qui percevra le remboursement"
+export const OFFER_VENUE_OFFERER_LABEL = "Dans notre établissement"
+export const OFFER_VENUE_SCHOOL_LABEL = "Dans l'établissement scolaire"
+export const OFFER_VENUE_OTHER_LABEL = "Autre"
+export const PHONE_LABEL = "Téléphone"
+export const EMAIL_LABEL = "Email"
+export const NOTIFICATIONS_LABEL = "Être notifié par email des réservations"
+export const NOTIFICATIONS_EMAIL_LABEL = "Email auquel envoyer les notifications"