From 134b46ea7e467a29f9d0820c36dd33af2a765b38 Mon Sep 17 00:00:00 2001
From: Tore Brede <tore.brede@uib.no>
Date: Tue, 16 Aug 2022 15:25:58 +0200
Subject: [PATCH] GREG-264: Remembering gender when going back in wizard
---
.../src/routes/guest/register/index.test.tsx | 95 +++++++++++++++++--
frontend/src/routes/guest/register/index.tsx | 2 +-
.../routes/guest/register/steps/register.tsx | 8 +-
3 files changed, 95 insertions(+), 10 deletions(-)
diff --git a/frontend/src/routes/guest/register/index.test.tsx b/frontend/src/routes/guest/register/index.test.tsx
index 883f9a5c..ed7f8d1e 100644
--- a/frontend/src/routes/guest/register/index.test.tsx
+++ b/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()
+})
diff --git a/frontend/src/routes/guest/register/index.tsx b/frontend/src/routes/guest/register/index.tsx
index ce03d0e2..b7a2d093 100644
--- a/frontend/src/routes/guest/register/index.tsx
+++ b/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}
diff --git a/frontend/src/routes/guest/register/steps/register.tsx b/frontend/src/routes/guest/register/steps/register.tsx
index 2cca718c..00c6a596 100644
--- a/frontend/src/routes/guest/register/steps/register.tsx
+++ b/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="">
--
GitLab