GREG-283: Fixing issue where default value for mobile country code was set on every rerender

frontend/src/routes/guest/register/steps/register.test.tsx

@@ -9,6 +9,8 @@ import GuestRegisterStep from './register'
 import { GuestRegisterData } from '../enteredGuestData'
 import AuthenticationMethod from '../authenticationMethod'
 import { GuestInviteInformation } from '../guestDataForm'
+import userEvent from '@testing-library/user-event'
+import { fireEvent } from '@testing-library/react'
 
 function getEmptyGuestData(): GuestInviteInformation {
   return {
@@ -43,7 +45,7 @@ test('Guest register page showing passport field on manual registration', async
         initialGuestData={getEmptyGuestData()}
         registerData={null}
       />
-    </LocalizationProvider>
+    </LocalizationProvider>,
   )
 
   await waitFor(() => {
@@ -68,7 +70,7 @@ test('Name not editable if present and invite is Feide', async () => {
         initialGuestData={testData}
         registerData={null}
       />
-    </LocalizationProvider>
+    </LocalizationProvider>,
   )
 
   await waitFor(() => {
@@ -92,7 +94,7 @@ test('Name editable if missing and invite is Feide', async () => {
         initialGuestData={testData}
         registerData={null}
       />
-    </LocalizationProvider>
+    </LocalizationProvider>,
   )
 
   await waitFor(() => {
@@ -117,7 +119,7 @@ test('Identifier fields disabled if invite is Feide and national ID present', as
         initialGuestData={testData}
         registerData={null}
       />
-    </LocalizationProvider>
+    </LocalizationProvider>,
   )
 
   await waitFor(() => {
@@ -143,7 +145,7 @@ test('Identifier fields enabled if invite is Feide but national ID number missin
         initialGuestData={testData}
         registerData={null}
       />
-    </LocalizationProvider>
+    </LocalizationProvider>,
   )
 
   await waitFor(() => {
@@ -169,7 +171,7 @@ test('Identifier fields disabled and name fields enabled if invite is ID-porten'
         initialGuestData={testData}
         registerData={null}
       />
-    </LocalizationProvider>
+    </LocalizationProvider>,
   )
 
   await waitFor(() => {
@@ -222,14 +224,14 @@ test('Gender required to be set if gender field is showing', async () => {
           ref={reference}
         />
       </LocalizationProvider>
-    </FeatureContext.Provider>
+    </FeatureContext.Provider>,
   )
 
   reference.current?.doSubmit()
 
   // The validation should fail for gender since to value has been set
   const validationMessage = await waitFor(() =>
-    screen.getByText('validation.genderIsRequired')
+    screen.getByText('validation.genderIsRequired'),
   )
   expect(validationMessage).toBeInTheDocument()
 })
@@ -275,19 +277,19 @@ test('Gender not required to be set if gender field is not showing', async () =>
           ref={reference}
         />
       </LocalizationProvider>
-    </FeatureContext.Provider>
+    </FeatureContext.Provider>,
   )
 
   reference.current?.doSubmit()
   await waitFor(
     () => {
       expect(
-        screen.queryByText('validation.genderIsRequired')
+        screen.queryByText('validation.genderIsRequired'),
       ).not.toBeInTheDocument()
     },
     {
       timeout: 5000,
-    }
+    },
   )
 })
 
@@ -334,7 +336,7 @@ test('Guest not allowed to proceed in wizard if phone number is not valid', asyn
           ref={reference}
         />
       </LocalizationProvider>
-    </FeatureContext.Provider>
+    </FeatureContext.Provider>,
   )
 
   await act(async () => reference.current?.doSubmit())
@@ -385,7 +387,7 @@ test('Guest allowed to proceed in wizard if data is valid', async () => {
           ref={reference}
         />
       </LocalizationProvider>
-    </FeatureContext.Provider>
+    </FeatureContext.Provider>,
   )
 
   await act(async () => reference.current?.doSubmit())
@@ -452,3 +454,69 @@ test('Default country code gets set in form values', async () => {
   // @ts-ignore
   expect(guestRegisterData.mobilePhoneCountry).toEqual('NO')
 })
+
+
+test('Foreign country code gets set in form values', async () => {
+  // This stores the data sent from the form when the user clicks submit
+  let guestRegisterData: GuestRegisterData | null = null
+  const nextHandler = (registerData: GuestRegisterData) => {
+    guestRegisterData = registerData
+
+  }
+
+
+  // +393892778451
+
+  const allFeaturesOn = {
+    displayContactAtUnit: true,
+    displayComment: true,
+    displayContactAtUnitGuestInput: true,
+    showGenderFieldForGuest: true,
+  }
+
+  const formData: GuestRegisterData = {
+    firstName: 'Test',
+    lastName: 'Test2',
+    mobilePhoneCountry: '',
+    mobilePhone: '3892778472',
+    nationalIdNumber: '',
+    passportNumber: '123456',
+    passportNationality: 'IT',
+    dateOfBirth: addYears(-20)(new Date()),
+    gender: 'male',
+  }
+
+  const testData = getEmptyGuestData()
+  testData.gender = 'male'
+  const submitMock = jest.fn()
+
+  // Need this to be able to call on the submit-method on the form
+  const reference = {
+    current: {
+      doSubmit: submitMock,
+    },
+  }
+
+
+  render(
+    <FeatureContext.Provider value={allFeaturesOn}>
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <GuestRegisterStep
+          nextHandler={nextHandler}
+          initialGuestData={testData}
+          registerData={formData}
+          ref={reference}
+        />
+      </LocalizationProvider>
+    </FeatureContext.Provider>,
+  )
+
+  const countryCodeInput = screen.getByTestId('phone-country-code-select-inner')
+  fireEvent.change(countryCodeInput, { target: { value: 'IT' } })
+
+  expect(guestRegisterData).toBeNull()
+  await act(async () => reference.current?.doSubmit())
+  // Check that the mobile phone country code has been set to what was entered
+  // @ts-ignore
+  expect(guestRegisterData.mobilePhoneCountry).toEqual('IT')
+})

frontend/src/routes/guest/register/steps/register.tsx

@@ -65,7 +65,7 @@ const GuestRegisterStep = forwardRef(
     const [countryCode, setCountryCode] = useState<CountryCallingCode>(defaultCountryCode)
     const [passportNationality, setPassportNationality] = useState<
       string | undefined
-    >(undefined)
+      >(undefined)
 
     // Set suggestion for the gender field if gender is not already given in the input
     const [gender, setGender] = useState<string>(
@@ -107,17 +107,6 @@ const GuestRegisterStep = forwardRef(
       }
     }
 
-    if (!registerData || !registerData.mobilePhoneCountry) {
-      // If there is no country code set in the registered data
-      // then set the default value. This is necessary even though
-      // the country code is set in a state variable above, because
-      // that does not cause the country code to be added to the
-      // form values by itself. If it was not set here it would be
-      // blank in the form even though the default value is shown
-      // in the select menu
-      setValue('mobilePhoneCountry', defaultCountryCode)
-    }
-
     const validatePhoneNumber = (
       countryCodeCallingCode: CountryCallingCode | undefined,
       phoneNumberToValidate: string
@@ -141,7 +130,7 @@ const GuestRegisterStep = forwardRef(
       // it is necessary to do another pass here to make sure the phone number entered
       // really is valid
       const validationMessage = validatePhoneNumber(
-        countryCode,
+        data.mobilePhoneCountry,
         data.mobilePhone
       )
 
@@ -215,10 +204,10 @@ const GuestRegisterStep = forwardRef(
     const handleCountryCodeChange = (event: SelectChangeEvent) => {
       // There should always be a value in the event since it is
       // not possible to select a blank field in the select menu
-      // for country codes
+      // for country code
       const countryCodeType = event.target.value as CountryCode
       setCountryCode(countryCodeType)
-      setValue('mobilePhoneCountry', countryCodeType)
+      setValue('mobilePhoneCountry', countryCodeType, { shouldDirty: true, shouldTouch: true })
     }
 
     const handleMobilePhoneChange = (value: any) => {
@@ -263,8 +252,17 @@ const GuestRegisterStep = forwardRef(
       if (registerData?.passportNationality) {
         setPassportNationality(registerData.passportNationality)
       }
+      // Need to set both country code in state and in form
+      // because of the way the validation and form handling is done.
+      // It would be cleaner if it somehow is possible to only
+      // have the value in the form
       if (registerData?.mobilePhoneCountry) {
         setCountryCode(registerData.mobilePhoneCountry)
+        setValue('mobilePhoneCountry', registerData.mobilePhoneCountry)
+      }
+      else {
+        setCountryCode(defaultCountryCode)
+        setValue('mobilePhoneCountry', defaultCountryCode)
       }
 
       if (gender !== '') {
@@ -552,6 +550,7 @@ const GuestRegisterStep = forwardRef(
                       helperText={
                         errors.mobilePhone && errors.mobilePhone.message
                       }
+                      data-testid="mobile-phone-number-input"
                       onChange={handleMobilePhoneChange}
                     />
                   )}