GREG-264: Remembering gender when going back in wizard

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

@@ -6,7 +6,9 @@ import { BrowserRouter } from 'react-router-dom'
 
 import { render, screen } from 'test-utils'
 import { FeatureContext } from 'contexts'
+import { fireEvent } from '@testing-library/react'
 import GuestRegister from './index'
+import { waitFor } from '../../../test-utils'
 
 enableFetchMocks()
 
@@ -42,7 +44,7 @@ const allFeaturesOn = {
 
 test('Field showing values correctly', async () => {
   fetchMock.mockIf('/api/ui/v1/invited/', () =>
-    Promise.resolve<any>(JSON.stringify(testData))
+    Promise.resolve<any>(JSON.stringify(testData)),
   )
 
   render(
@@ -52,7 +54,7 @@ test('Field showing values correctly', async () => {
           <GuestRegister />
         </LocalizationProvider>
       </FeatureContext.Provider>
-    </BrowserRouter>
+    </BrowserRouter>,
   )
 
   await screen.findByDisplayValue(testData.person.first_name)
@@ -77,7 +79,7 @@ test('Field showing values correctly', async () => {
   // TODO Haven't been able to mock getting role types properly yet, so not checking role name
   // await screen.findByDisplayValue(testData.role.name_en)
   await screen.findByDisplayValue(
-    `${testData.role.start} - ${testData.role.end}`
+    `${testData.role.start} - ${testData.role.end}`,
   )
 
   // For the default setup the contact person at unit field should be showing
@@ -89,7 +91,7 @@ test('Gender and birth date suggestions not showing if no national ID given', as
   // @ts-ignore
   testData.person.fnr = null
   fetchMock.mockIf('/api/ui/v1/invited/', () =>
-    Promise.resolve<any>(JSON.stringify(testData))
+    Promise.resolve<any>(JSON.stringify(testData)),
   )
   render(
     <BrowserRouter>
@@ -98,7 +100,7 @@ test('Gender and birth date suggestions not showing if no national ID given', as
           <GuestRegister />
         </LocalizationProvider>
       </FeatureContext.Provider>
-    </BrowserRouter>
+    </BrowserRouter>,
   )
 
   // Wait a bit so that all the values are showing
@@ -124,7 +126,7 @@ test('Gender and birth date suggestions not overriding existing values', async (
   testData.person.gender = 'female'
 
   fetchMock.mockIf('/api/ui/v1/invited/', () =>
-    Promise.resolve<any>(JSON.stringify(testData))
+    Promise.resolve<any>(JSON.stringify(testData)),
   )
   render(
     <BrowserRouter>
@@ -133,7 +135,7 @@ test('Gender and birth date suggestions not overriding existing values', async (
           <GuestRegister />
         </LocalizationProvider>
       </FeatureContext.Provider>
-    </BrowserRouter>
+    </BrowserRouter>,
   )
 
   // In this a date of birth was already set, and it should not have been overridden by a suggestion
@@ -143,3 +145,82 @@ test('Gender and birth date suggestions not overriding existing values', async (
   // Check that the gender has not been overridden
   await screen.findByDisplayValue('female')
 })
+
+
+test('Gender is remembered when going back', async () => {
+  testData.person.fnr = ''
+  // @ts-ignore
+  testData.person.date_of_birth = '2002-08-20'
+  testData.person.passport = 'NO-12345678'
+
+  fetchMock.mockIf('/api/ui/v1/invited/', () =>
+    Promise.resolve<any>(JSON.stringify(testData)))
+
+  render(
+    <BrowserRouter>
+      <FeatureContext.Provider value={allFeaturesOn}>
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <GuestRegister />
+        </LocalizationProvider>
+      </FeatureContext.Provider>
+    </BrowserRouter>,
+  )
+
+  // Wait for data to be visible
+  await screen.findByDisplayValue(testData.person.first_name)
+
+  // Set gender to male
+  const genderInput = screen.getByTestId('gender-select-inner')
+  fireEvent.change(genderInput, { target: { value: 'male' } })
+  await waitFor(() => screen.getByText('input.male'))
+
+  // Go forward and then back in wizard
+  const nextButton = screen.getByTestId('button-next')
+  nextButton.click()
+  await screen.findByTestId('button-back')
+  const backButton = screen.getByTestId('button-back')
+  backButton.click()
+
+  // The selection should still be male
+  await waitFor(() => screen.getByText('input.male'))
+})
+
+test('Gender not required when gender field is not shown', async () => {
+  testData.person.fnr = ''
+  // @ts-ignore
+  testData.person.date_of_birth = '2002-08-20'
+  testData.person.passport = 'NO-12345678'
+
+  fetchMock.mockIf('/api/ui/v1/invited/', () =>
+    Promise.resolve<any>(JSON.stringify(testData)))
+
+  const genderFieldOff = {
+    displayContactAtUnit: true,
+    displayComment: true,
+    displayContactAtUnitGuestInput: true,
+    showGenderFieldForGuest: false,
+  }
+
+  render(
+    <BrowserRouter>
+      <FeatureContext.Provider value={genderFieldOff}>
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <GuestRegister />
+        </LocalizationProvider>
+      </FeatureContext.Provider>
+    </BrowserRouter>,
+  )
+
+  // Wait for data to be visible
+  await screen.findByDisplayValue(testData.person.first_name)
+
+  // No gender is set, but it should still be possible
+  // to go forward and back in wizard
+  let nextButton = screen.getByTestId('button-next')
+  nextButton.click()
+  await screen.findByTestId('button-back')
+  const backButton = screen.getByTestId('button-back')
+  backButton.click()
+  nextButton = screen.getByTestId('button-next')
+  nextButton.click()
+})

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

@@ -431,7 +431,7 @@ export default function GuestRegister() {
         )}
         {activeStep === Step.ConsentStep && (
           <Button
-            data-testid="button-black"
+            data-testid="button-back"
             color="secondary"
             sx={{ mr: 1 }}
             onClick={handleBack}

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

@@ -265,11 +265,12 @@ const GuestRegisterStep = forwardRef(
         setValue('mobilePhoneCountry', defaultCountryCode)
       }
 
-      if (gender !== '') {
+      if (registerData?.gender) {
         // Need to set gender in the state and also in the form. This is
         // to handle the case where the gender is suggested by the
         // national ID number
-        setValue('gender', gender)
+        setValue('gender', registerData.gender)
+        setGender(registerData.gender)
       }
     }, [registerData])
 
@@ -426,6 +427,9 @@ const GuestRegisterStep = forwardRef(
                       }
                       return t(`input.${selected}`)
                     }}
+                    inputProps={{
+                      'data-testid': 'gender-select-inner',
+                    }}
                   >
                     {/* Keep it simple and hardcode the gender values */}
                     <MenuItem disabled value="">