PC-1448 test du parcours de réservation

.eslintrc.json

@@ -3,7 +3,7 @@
   "parser": "babel-eslint",
   "settings": {
     "react": {
-      "version": "15"
+      "version": "detect"
     }
   },
   "env": {
@@ -34,6 +34,10 @@
       "peerDependencies": false
     }],
     "import/prefer-default-export": 0,
+    "no-param-reassign": [2, {
+      "props": true,
+      "ignorePropertyModificationsFor": ["t"]
+    }],
     "no-underscore-dangle": [2, {
       "allow": ["__modifiers__"]
     }],

scripts/hooks/precommit.sh

@@ -14,7 +14,7 @@ fi
 
 for FILE in $STAGED_FILES
 do
-  eslint --quiet "$FILE"
+  eslint --quiet --max-warnings 0 "$FILE"
   if [[ "$?" == 0 ]]; then
     echo "\t\033[32mESLint Passed: $FILE\033[0m"
   else

src/components/booking/BookingError.js

@@ -10,29 +10,30 @@ import { flattenErrors } from './utils'
 // lire plus -> https://reactjs.org/docs/lists-and-keys.html#keys
 const getArrayIndex = index => `error_${index}`
 
+const renderErrorReason = (msg, index) => {
+  if (!msg) return null
+  return (
+    <p data-index={index} key={getArrayIndex(index)}>
+      {msg}
+    </p>
+  )
+}
+
 const BookingError = ({ errors }) => {
-  // NOTE: 404, 500 -> donne un array
-  // sinon donne un object, on veut afficher les erreurs aux users
-  // donc on garde que le cas de l'object
   const entries =
     errors && !Array.isArray(errors) && typeof errors === 'object'
       ? Object.values(errors).reduce(flattenErrors, [])
       : []
   return (
     <div className="booked text-center">
-      <h3 style={{ fontSize: '22px' }} className="mb16">
-        <span
-          className="is-block"
-          style={{ color: '#E60039', fontSize: '4.5rem' }}
-        >
+      <h3 className="mb16">
+        <span className="is-block">
           <Icon svg="picto-echec" alt="erreur" />
         </span>
       </h3>
-      <div style={{ fontSize: '20px' }}>
+      <div id="booking-error-reasons" className="fs20">
         <p className="mb36">Une erreur est survenue lors de la réservation</p>
-        {entries.map(
-          (msg, index) => entries && <p key={getArrayIndex(index)}>{msg}</p>
-        )}
+        {entries && entries.map(renderErrorReason)}
       </div>
     </div>
   )

src/components/booking/BookingForm.js

@@ -85,6 +85,7 @@ const BookingForm = ({
                       <DatePickerField
                         hideToday
                         name="date"
+                        id="booking-form-date-picker-field"
                         label={calendarLabel}
                         readOnly={calendarReadOnly}
                         className="text-center mb36"
@@ -106,6 +107,7 @@ const BookingForm = ({
                 {hoursAndPrices && (
                   <SelectField
                     name="time"
+                    id="booking-form-time-picker-field"
                     readOnly={hourReadOnly}
                     provider={hoursAndPrices}
                     placeholder="Heure et prix"

src/components/booking/BookingSuccess.js

@@ -44,9 +44,19 @@ const BookingSuccess = ({ isEvent, data }) => {
       </p>
       {/* <!-- CODE / LIEN --> */}
       <p className="my28">
-        {!onlineOfferUrl && <b className="is-block is-size-1">{token}</b>}
+        {!onlineOfferUrl && (
+          <b
+            data-token={token}
+            id="booking-booked-token"
+            className="is-block is-size-1"
+          >
+            {token}
+          </b>
+        )}
         {onlineOfferUrl && (
           <a
+            data-token={token}
+            id="booking-online-booked-button"
             className="is-primary-text is-primary-border px12 py8"
             href={onlineOfferUrl}
             rel="noopener noreferrer"

src/components/booking/index.js

@@ -24,6 +24,8 @@ import { selectBookingById } from '../../selectors/selectBookings'
 import currentRecommendationSelector from '../../selectors/currentRecommendation'
 import { ROOT_PATH } from '../../utils/config'
 
+const BOOKING_FORM_ID = 'form-create-booking'
+
 const duration = 250
 const backgroundImage = `url('${ROOT_PATH}/mosaic-k.png')`
 
@@ -41,7 +43,6 @@ const transitionStyles = {
 class Booking extends PureComponent {
   constructor(props) {
     super(props)
-    this.formId = 'form-create-booking'
     const actions = { requestData }
     this.actions = bindActionCreators(actions, props.dispatch)
     this.state = {
@@ -90,8 +91,7 @@ class Booking extends PureComponent {
   }
 
   updateUserFromStore = (state, action) => {
-    const { payload } = action
-    const bookedPayload = payload.datum
+    const bookedPayload = get(action, 'payload.datum')
     this.actions.requestData({
       apiPath: '/users/current',
       body: {},
@@ -149,6 +149,7 @@ class Booking extends PureComponent {
         {showCancelButton && (
           <button
             type="reset"
+            id="booking-close-button"
             className="text-center my5"
             onClick={this.cancelBookingHandler}
           >
@@ -158,15 +159,17 @@ class Booking extends PureComponent {
         {showSubmitButton && (
           <button
             type="submit"
+            id="booking-validation-button"
             className="has-text-centered my5"
-            onClick={() => externalSubmitForm(this.formId)}
+            onClick={() => externalSubmitForm(BOOKING_FORM_ID)}
           >
             <b>Valider</b>
           </button>
         )}
         {bookedPayload && (
           <button
             type="button"
+            id="booking-success-ok-button"
             className="text-center my5"
             onClick={this.cancelBookingHandler}
           >
@@ -176,6 +179,7 @@ class Booking extends PureComponent {
         {isCancelled && (
           <button
             type="button"
+            id="booking-cancel-ok-button"
             className="text-center my5"
             onClick={this.getBackToBookings}
           >
@@ -254,7 +258,7 @@ class Booking extends PureComponent {
                   {showForm && (
                     <BookingForm
                       className="flex-1 flex-rows flex-center items-center"
-                      formId={this.formId}
+                      formId={BOOKING_FORM_ID}
                       initialValues={formInitialValues}
                       isEvent={isEvent}
                       isReadOnly={isReadOnly}

src/components/booking/tests/BookingError.spec.js

@@ -6,25 +6,26 @@ import BookingError from '../BookingError'
 
 describe('src | components | pages | search | BookingError', () => {
   describe('snapshot', () => {
-    it('should match snapshot with empty errors', () => {
-      // given
-      const props = { errors: {} }
+    it('should match snapshot', () => {
       // when
-      const wrapper = shallow(<BookingError {...props} />)
+      const errors = {}
+      const wrapper = shallow(<BookingError errors={errors} />)
       // then
       expect(wrapper).toBeDefined()
       expect(wrapper).toMatchSnapshot()
     })
-    it('should match snapshot with errors as array', () => {
+  })
+  describe('render', () => {
+    it('when errors is an array, does not output any messages', () => {
       // given
       const props = { errors: ['do not output something'] }
       // when
       const wrapper = shallow(<BookingError {...props} />)
+      const list = wrapper.find('#booking-error-reasons p')
       // then
-      expect(wrapper).toBeDefined()
-      expect(wrapper).toMatchSnapshot()
+      expect(list).toHaveLength(1)
     })
-    it('should match snapshot with errors as object with array', () => {
+    it('when errors is an object, does output some messages', () => {
       // given
       const props = {
         errors: {
@@ -35,9 +36,11 @@ describe('src | components | pages | search | BookingError', () => {
       }
       // when
       const wrapper = shallow(<BookingError {...props} />)
+      const list = wrapper.find('#booking-error-reasons p')
       // then
-      expect(wrapper).toBeDefined()
-      expect(wrapper).toMatchSnapshot()
+      expect(list).toHaveLength(5)
+      expect(list.at(1).text()).toEqual('Reason value 1')
+      expect(list.at(4).text()).toEqual('Reason value 4')
     })
   })
 })