Merge branch 'master' into refactor_register_summary_step

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

 import React from 'react'
 import { render, waitFor, screen } from 'test-utils'
-import i18n from 'i18next'
-import { initReactI18next } from 'react-i18next'
 import userEvent from '@testing-library/user-event'
 import AdapterDateFns from '@mui/lab/AdapterDateFns'
 import { LocalizationProvider } from '@mui/lab'
 import Register from './index'
 
-// TODO: can this be initialized in 'test-utils'? should we stub it?
-//       see https://react.i18next.com/misc/testing
-i18n.use(initReactI18next).init({
-  lng: 'en',
-  fallbackLng: 'en',
-
-  // Have a common namespace used around the full app
-  ns: ['translations'],
-  defaultNS: 'translations',
-
-  debug: false,
-
-  resources: { en: { translations: {} } },
-})
-
 test('Validation message showing if last name is missing', async () => {
   render(
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <Register />
-    </LocalizationProvider>)
-
-  const firstNameLabel = i18n.t('input.firstName').toString()
-  const firstNameComponent = screen.getByLabelText(firstNameLabel)
-  expect(firstNameComponent).toBeInTheDocument()
-
-  userEvent.type(firstNameComponent, 'Test')
+    </LocalizationProvider>
+  )
 
   // Try to go to the next step and check that the validation message is showing
   const submitButton = screen.getByTestId('button-next')
   userEvent.click(submitButton)
 
-  const validationLastName = i18n
-    .t('common:validation.lastNameRequired')
-    .toString()
-  await waitFor(() => screen.getByText(validationLastName))
-
-  const validationMessage = screen.getByText(validationLastName)
+  const validationMessage = await waitFor(() =>
+    screen.getByText('validation.lastNameRequired')
+  )
   expect(validationMessage).toBeInTheDocument()
+
+  screen.queryByText('validation.lastNameRequired')
+
+  const inputValue = 'Test input value'
+  // Note that we need to use the test-ID of the input field inside the Material UI TextField-component
+  userEvent.type(screen.getByTestId('lastName-input-field'), inputValue)
+  expect(screen.getByDisplayValue(inputValue)).toBeInTheDocument()
+
+  // Type in text, the message should disappear
+  screen.queryByText('validation.lastNameRequired')
+  userEvent.click(submitButton)
+
+  await waitFor(() => {
+    expect(
+      screen.queryByText('validation.lastNameRequired')
+    ).not.toBeInTheDocument()
+  })
 })

frontend/src/routes/sponsor/register/stepPersonForm.tsx

@@ -156,6 +156,7 @@ const StepPersonForm = forwardRef(
                 {...register(`email`, {
                   validate: isValidEmail,
                 })}
+                inputProps={{ 'data-testid': 'lastName-input-field' }}
               />
 
               <Typography variant="h5" sx={{ paddingTop: '1rem' }}>

frontend/src/test-utils.tsx

@@ -18,3 +18,13 @@ export * from '@testing-library/react'
 
 // override render method
 export { customRender as render }
+
+// Mock react-i18next module to return a translation that just returns the key
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (value: string) => value,
+    i18n: {
+      changeLanguage: () => new Promise(() => {}),
+    },
+  }),
+}))